Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Tile): add optional expand/collapse labels for chevron #7199

Merged
merged 11 commits into from
Jan 19, 2021
Merged

feat(Tile): add optional expand/collapse labels for chevron #7199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
7d1d4b5
feat(Tile): add optional expand/collapse labels for chevron
ryanomackey Nov 2, 2020
539b32d
Update packages/react/src/components/Tile/Tile.js
ryanomackey Dec 5, 2020
d39bbf0
fix(Tile): remove default props
ryanomackey Dec 5, 2020
a1f1895
style(Tile): adjust positioning of chevron
ryanomackey Dec 5, 2020
1a9f2df
test(Tile): update PublicAPI snapshot
ryanomackey Dec 5, 2020
2df2838
Merge branch 'master' into feat/expandable-tile-label
ryanomackey Dec 5, 2020
751c8c6
style(Tile): remove flex-direction property
ryanomackey Dec 7, 2020
4c2925f
Merge branch 'master' into feat/expandable-tile-label
ryanomackey Dec 7, 2020
f211d8d
Merge branch 'master' into feat/expandable-tile-label
andreancardona Jan 19, 2021
1bbea05
Merge branch 'master' into feat/expandable-tile-label
andreancardona Jan 19, 2021
09f8443
Merge branch 'master' into feat/expandable-tile-label
kodiakhq[bot] Jan 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions packages/components/src/components/tile/_tile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,11 +105,14 @@

.#{$prefix}--tile__chevron {
position: absolute;
right: 0.5rem;
bottom: 0.5rem;
right: $carbon--spacing-05;
bottom: $carbon--spacing-05;
display: flex;
align-items: flex-end;
height: 1rem;

svg {
margin-left: $carbon--spacing-03;
transform-origin: center;
transition: $duration--fast-02 motion(standard, productive);
fill: $ui-05;
Expand Down
6 changes: 6 additions & 0 deletions packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5748,9 +5748,15 @@ Map {
"tileCollapsedIconText": Object {
"type": "string",
},
"tileCollapsedLabel": Object {
"type": "string",
},
"tileExpandedIconText": Object {
"type": "string",
},
"tileExpandedLabel": Object {
"type": "string",
},
},
},
"TileAboveTheFoldContent" => Object {
Expand Down
2 changes: 2 additions & 0 deletions packages/react/src/components/Tile/Tile-story.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,8 @@ const props = {
'Collapsed icon text (tileExpandedIconText)',
'Interact to Collapse tile'
),
tileCollapsedLabel: text('Collapsed icon text (tileCollapsedLabel)'),
tileExpandedLabel: text('Collapsed icon text (tileExpandedLabel)'),
handleClick: action('handleClick'),
light: boolean('Light variant (light)', false),
}),
Expand Down
17 changes: 15 additions & 2 deletions packages/react/src/components/Tile/Tile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -428,10 +428,20 @@ export class ExpandableTile extends Component {
*/
tileCollapsedIconText: PropTypes.string,

/**
* When "collapsed", a label to appear next to the chevron (e.g., "View more").
*/
tileCollapsedLabel: PropTypes.string,

/**
* The description of the "expanded" icon that can be read by screen readers.
*/
tileExpandedIconText: PropTypes.string,

/**
* When "expanded", a label to appear next to the chevron (e.g., "View less").
*/
tileExpandedLabel: PropTypes.string,
};

static defaultProps = {
Expand Down Expand Up @@ -546,8 +556,10 @@ export class ExpandableTile extends Component {
tileMaxHeight, // eslint-disable-line
tilePadding, // eslint-disable-line
handleClick, // eslint-disable-line
tileCollapsedIconText, // eslint-disable-line
tileExpandedIconText, // eslint-disable-line
tileCollapsedIconText,
tileExpandedIconText,
tileCollapsedLabel,
tileExpandedLabel,
onBeforeClick, // eslint-disable-line
light,
...other
Expand Down Expand Up @@ -599,6 +611,7 @@ export class ExpandableTile extends Component {
{childrenAsArray[0]}
</div>
<div className={`${prefix}--tile__chevron`}>
<span>{isExpanded ? tileExpandedLabel : tileCollapsedLabel}</span>
<ChevronDown16 />
</div>
<div className={`${prefix}--tile-content`}>{childrenAsArray[1]}</div>
Expand Down