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

fix(tile): change expandable tile to button #5609

Merged
merged 16 commits into from
Mar 23, 2020
Merged

fix(tile): change expandable tile to button #5609

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
27366a0
fix(tile): remove border on chevron for firefox
abbeyhrt Mar 11, 2020
5f5d86f
Merge branch 'master' into fix-5557
abbeyhrt Mar 12, 2020
7812d2e
fix(tile): make tile button to copy accordion patter
abbeyhrt Mar 13, 2020
a46061c
Merge branch 'fix-5557' of https://github.com/abbeyhrt/my-carbon-fork…
abbeyhrt Mar 13, 2020
90551b4
Merge branch 'master' into fix-5557
abbeyhrt Mar 16, 2020
344276a
chore(tile): remove commented out code
abbeyhrt Mar 16, 2020
efb985f
Merge branch 'fix-5557' of https://github.com/abbeyhrt/my-carbon-fork…
abbeyhrt Mar 16, 2020
7d462a5
chore(tile): update tests
abbeyhrt Mar 16, 2020
ef66b72
Merge branch 'master' into fix-5557
abbeyhrt Mar 16, 2020
2855e15
fix(tile): adjust test
abbeyhrt Mar 17, 2020
e70ddd5
Merge branch 'fix-5557' of https://github.com/abbeyhrt/my-carbon-fork…
abbeyhrt Mar 17, 2020
a97ba05
fix(tile): adjust styles so remove FF border
abbeyhrt Mar 18, 2020
30149cd
Merge branch 'master' into fix-5557
abbeyhrt Mar 18, 2020
7767a13
fix(tile): adjust styles
abbeyhrt Mar 19, 2020
2b219b5
Merge branch 'fix-5557' of https://github.com/abbeyhrt/my-carbon-fork…
abbeyhrt Mar 19, 2020
ac44e74
Merge branch 'master' into fix-5557
abbeyhrt Mar 20, 2020
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
8 changes: 8 additions & 0 deletions packages/components/docs/sass.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22864,6 +22864,14 @@ Tile styles
}
}

.#{$prefix}--tile--expandable {
width: inherit;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Honestly I think there is not many use cases for width: inherit. So may I ask what this is for?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just wanted it to get the width that was already defined in bx--tile, but I see that doing width: 100% gets the same result so I'll change it to that!

color: inherit;
font-size: inherit;
text-align: left;
border: 0;
}

.#{$prefix}--tile--expandable {
overflow: hidden;
transition: max-height $duration--moderate-01 motion(standard, productive);
Expand Down
13 changes: 13 additions & 0 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 @@ -62,6 +62,11 @@
}
}

// Removes Firefox automatic border on buttons
.#{$prefix}--tile--expandable::-moz-focus-inner {
border: 0;
}

.#{$prefix}--tile--clickable {
@include reset;
@include type-style('body-short-01');
Expand Down Expand Up @@ -118,6 +123,14 @@
}
}

.#{$prefix}--tile--expandable {
width: 100%;
color: inherit;
font-size: inherit;
text-align: left;
border: 0;
}

.#{$prefix}--tile--expandable {
overflow: hidden;
transition: max-height $duration--moderate-01 motion(standard, productive);
Expand Down
15 changes: 5 additions & 10 deletions packages/react/src/components/Tile/Tile-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -290,17 +290,14 @@ describe('Tile', () => {

// Force the expanded tile to be collapsed.
wrapper.setState({ expanded: false });
const collapsedDescription = wrapper.find('button').getElements()[0]
.props['aria-label'];
const collapsedDescription = wrapper.find('button').prop('title');
expect(collapsedDescription).toEqual(defaultCollapsedIconText);

// click on the item to expand it.
wrapper.simulate('click');

// Validate the description change
const expandedDescription = wrapper.find('button').getElements()[0].props[
'aria-label'
];
const expandedDescription = wrapper.find('button').prop('title');
expect(expandedDescription).toEqual(defaultExpandedIconText);
});

Expand All @@ -313,17 +310,15 @@ describe('Tile', () => {

// Force the expanded tile to be collapsed.
wrapper.setState({ expanded: false });
const collapsedDescription = wrapper.find('button').getElements()[0]
.props['aria-label'];
const collapsedDescription = wrapper.find('button').prop('title');

expect(collapsedDescription).toEqual(tileCollapsedIconText);

// click on the item to expand it.
wrapper.simulate('click');

// Validate the description change
const expandedDescription = wrapper.find('button').getElements()[0].props[
'aria-label'
];
const expandedDescription = wrapper.find('button').prop('title');
expect(expandedDescription).toEqual(tileExpandedIconText);
});

Expand Down
16 changes: 6 additions & 10 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 @@ -542,15 +542,16 @@ export class ExpandableTile extends Component {

return (
// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
<div
<button
ref={tile => {
this.tile = tile;
}}
style={tileStyle}
className={classes}
aria-expanded={isExpanded}
title={isExpanded ? tileExpandedIconText : tileCollapsedIconText}
{...other}
onClick={this.handleClick}
onKeyPress={this.handleKeyDown}
tabIndex={tabIndex}>
<div
ref={tileContent => {
Expand All @@ -563,17 +564,12 @@ export class ExpandableTile extends Component {
className={`${prefix}--tile-content`}>
{childrenAsArray[0]}
</div>
<button
aria-expanded={isExpanded}
aria-label={
isExpanded ? tileExpandedIconText : tileCollapsedIconText
}
className={`${prefix}--tile__chevron`}>
<div className={`${prefix}--tile__chevron`}>
<ChevronDown16 />
</button>
</div>
<div className={`${prefix}--tile-content`}>{childrenAsArray[1]}</div>
</div>
</div>
</button>
);
}
}
Expand Down