feat(Tile): add optional expand/collapse labels for chevron #7199
Conversation
|
✔️ Deploy preview for carbon-elements ready! 🔨 Explore the source changes: 09f8443 🔍 Inspect the deploy logs: https://app.netlify.com/sites/carbon-elements/deploys/6007361b9d161b000863efb9 😎 Browse the preview: https://deploy-preview-7199--carbon-elements.netlify.app |
|
✔️ Deploy preview for carbon-components-react ready! 🔨 Explore the source changes: 09f8443 🔍 Inspect the deploy logs: https://app.netlify.com/sites/carbon-components-react/deploys/6007361b2a207900087a5a6d 😎 Browse the preview: https://deploy-preview-7199--carbon-components-react.netlify.app |
| @@ -442,7 +452,9 @@ export class ExpandableTile extends Component { | |||
| onBeforeClick: () => true, | |||
| handleClick: () => {}, | |||
| tileCollapsedIconText: 'Interact to expand Tile', | |||
| tileCollapsedLabel: null, | |||
There was a problem hiding this comment.
Do we need to add them to the defaultProps if they are null?
|
Not sure if this is related to this PR or would be a separate one but the padding for chevron (and now label) is off. It should be have that 16px padding on right and bottom. |
|
Hey @ryanomackey, looks like this proposal was accepted but has a couple of issues that need to be addressed. Do you have time to work on these? |
Co-authored-by: emyarod <emyarod@users.noreply.github.com>
|
Thanks, @tw15egan. Should be ready for another review. |
| right: $carbon--spacing-05; | ||
| bottom: $carbon--spacing-05; | ||
| display: flex; | ||
| flex-direction: row; |
There was a problem hiding this comment.
This is the default property, so we can probably remove this line
There was a problem hiding this comment.
Ah, yeah. Good call.
Closes #6802
To help draw attention to the expand/collapse functionality, this PR adds two new props to the
ExpandableTilecomponent that allow the developer to add text labels next to the chevron.Changelog
New
ExpandableTile:tileCollapsedLabel: When "collapsed", a label to appear next to the chevron (e.g., "View more").tileExpandedLabel: When "expanded", a label to appear next to the chevron (e.g., "View less").Changed
Removed
Testing / Reviewing
Demo GIF:
