feat(tile): add light prop
Add light prop to `<Tile>` component for use on `$ui-01` container.
This change also does the following:
* Remove unnecessary light prop from props.groupProps in tile-story
* Add note to light prop comment to warn for correct usage
MODIFY
packages/components/src/components/tile/_tile.scss
packages/components/src/components/tile/_tile.scss
}
}
+ .#{$prefix}--tile--light {
+ background-color: $ui-02;
+ }
+
.#{$prefix}--tile--clickable,
.#{$prefix}--tile--selectable,
.#{$prefix}--tile--expandable {

MODIFY
packages/react/src/components/RadioTile/RadioTile.js
packages/react/src/components/RadioTile/RadioTile.js
@@ -61,12 +61,18 @@ export default class RadioTile extends React.Component {
* Specify the tab index of the wrapper element
*/
tabIndex: PropTypes.number,
+
+ /**
+ * `true` to use the light version.
+ */
+ light: PropTypes.bool,
};
static defaultProps = {
iconDescription: 'Tile checkmark',
onChange: () => {},
tabIndex: 0,
+ light: false,
};
uid = this.props.id || uid();
@@ -83,13 +89,20 @@ export default class RadioTile extends React.Component {
};
render() {
- const { children, className, iconDescription, ...other } = this.props;
+ const {
+ children,
+ className,
+ iconDescription,
+ light,
+ ...other
+ } = this.props;
const classes = classNames(
className,
`${prefix}--tile`,
`${prefix}--tile--selectable`,
{
[`${prefix}--tile--is-selected`]: this.props.checked,
+ [`${prefix}--tile--light`]: light,
}
);

MODIFY
packages/react/src/components/Tile/Tile-story.js
packages/react/src/components/Tile/Tile-story.js
@@ -35,10 +35,18 @@ const radioValues = {
};
const props = {
+ regular: () => ({
+ light: boolean('Light variant (light)', false),
+ }),
+ clickable: () => ({
+ href: text('Href for clickable UI (href)', 'javascript:void(0)'),
+ light: boolean('Light variant (light)', false),
+ }),
selectable: () => ({
selected: boolean('Selected (selected)', false),
handleClick: action('handleClick'),
handleKeyDown: action('handleKeyDown'),
+ light: boolean('Light variant (light)', false),
}),
group: () => ({
name: text('Form item (name in <TileGroup>)', 'tile-group'),
@@ -52,6 +60,7 @@ const props = {
radio: () => ({
name: text('Form item name (name in <RadioTile>)', 'tiles'),
onChange: action('onChange'),
+ light: boolean('Light variant (light)', false),
}),
expandable: () => ({
tabIndex: number('Tab index (tabIndex)', 0),
@@ -66,26 +75,32 @@ const props = {
'Interact to Collapse tile'
),
handleClick: action('handleClick'),
+ light: boolean('Light variant (light)', false),
}),
};
storiesOf('Tile', module)
.addDecorator(withKnobs)
- .add('Default', () => <Tile>Default tile</Tile>, {
+ .add(
+ 'Default',
+ () => {
+ const regularProps = props.regular();
+ return <Tile {...regularProps}>Default tile</Tile>;
+ },
+ {
info: {
text: `
Default tile without any interactions
`,
},
- })
+ }
+ )
.add(
'Clickable',
- () => (
- <ClickableTile
- href={text('Href for clickable UI (href)', 'javascript:void(0)')}>
- Clickable Tile
- </ClickableTile>
- ),
+ () => {
+ const clickableProps = props.clickable();
+ return <ClickableTile {...clickableProps}>Clickable Tile</ClickableTile>;
+ },
{
info: {
text: `

MODIFY
packages/react/src/components/Tile/Tile-test.js
packages/react/src/components/Tile/Tile-test.js
@@ -38,6 +38,19 @@ describe('Tile', () => {
it('renders extra classes passed in via className', () => {
expect(wrapper.hasClass('extra-class')).toEqual(true);
});
+
+ it('supports light version', () => {
+ const wrapper = mount(<Tile>Test</Tile>);
+ expect(wrapper.props().light).toEqual(false);
+ expect(wrapper.childAt(0).hasClass(`${prefix}--tile--light`)).toEqual(
+ false
+ );
+ wrapper.setProps({ light: true });
+ expect(wrapper.props().light).toEqual(true);
+ expect(wrapper.childAt(0).hasClass(`${prefix}--tile--light`)).toEqual(
+ true
+ );
+ });
});
describe('Renders clickable tile as expected', () => {
@@ -100,6 +113,19 @@ describe('Tile', () => {
wrapper.setProps({ clicked: true });
expect(wrapper.state().clicked).toEqual(false);
});
+
+ it('supports light version', () => {
+ const wrapper = mount(<ClickableTile>Test</ClickableTile>);
+ expect(wrapper.props().light).toEqual(false);
+ expect(wrapper.childAt(0).hasClass(`${prefix}--tile--light`)).toEqual(
+ false
+ );
+ wrapper.setProps({ light: true });
+ expect(wrapper.props().light).toEqual(true);
+ expect(wrapper.childAt(0).hasClass(`${prefix}--tile--light`)).toEqual(
+ true
+ );
+ });
});
describe('Renders selectable tile as expected', () => {
@@ -165,6 +191,15 @@ describe('Tile', () => {
wrapper.setProps({ selected: true });
expect(wrapper.state().selected).toEqual(false);
});
+
+ it('supports light version', () => {
+ const wrapper = mount(<SelectableTile>Test</SelectableTile>);
+ expect(wrapper.props().light).toEqual(false);
+ expect(wrapper.childAt(1).hasClass('bx--tile--light')).toEqual(false);
+ wrapper.setProps({ light: true });
+ expect(wrapper.props().light).toEqual(true);
+ expect(wrapper.childAt(1).hasClass('bx--tile--light')).toEqual(true);
+ });
});
describe('Renders expandable tile as expected', () => {
@@ -327,5 +362,18 @@ describe('Tile', () => {
wrapper.setProps({ tilePadding: 2 });
expect(wrapper.state().tilePadding).toEqual(1);
});
+
+ it('supports light version', () => {
+ const wrapper = mount(<ExpandableTile>Test</ExpandableTile>);
+ expect(wrapper.props().light).toEqual(false);
+ expect(wrapper.childAt(0).hasClass(`${prefix}--tile--light`)).toEqual(
+ false
+ );
+ wrapper.setProps({ light: true });
+ expect(wrapper.props().light).toEqual(true);
+ expect(wrapper.childAt(0).hasClass(`${prefix}--tile--light`)).toEqual(
+ true
+ );
+ });
});
});

MODIFY
packages/react/src/components/Tile/Tile.js
packages/react/src/components/Tile/Tile.js
@@ -28,11 +28,27 @@ export class Tile extends Component {
* The CSS class names.
*/
className: PropTypes.string,
+
+ /**
+ * `true` to use the light version. For use on $ui-01 backgrounds only.
+ * Don't use this to make tile background color same as container background color.
+ */
+ light: PropTypes.bool,
+ };
+
+ static defaultProps = {
+ light: false,
};
render() {
- const { children, className, ...other } = this.props;
- const tileClasses = classNames(`${prefix}--tile`, className);
+ const { children, className, light, ...other } = this.props;
+ const tileClasses = classNames(
+ `${prefix}--tile`,
+ {
+ [`${prefix}--tile--light`]: light,
+ },
+ className
+ );
return (
<div className={tileClasses} {...other}>
{children}
@@ -64,12 +80,19 @@ export class ClickableTile extends Component {
* The rel property for the link.
*/
rel: PropTypes.string,
+
+ /**
+ * `true` to use the light version. For use on $ui-01 backgrounds only.
+ * Don't use this to make tile background color same as container background color.
+ */
+ light: PropTypes.bool,
};
static defaultProps = {
clicked: false,
handleClick: () => {},
handleKeyDown: () => {},
+ light: false,
};
handleClick = evt => {
@@ -118,6 +141,7 @@ export class ClickableTile extends Component {
handleClick, // eslint-disable-line
handleKeyDown, // eslint-disable-line
clicked, // eslint-disable-line
+ light,
...other
} = this.props;
@@ -127,6 +151,7 @@ export class ClickableTile extends Component {
`${prefix}--tile--clickable`,
{
[`${prefix}--tile--is-clicked`]: this.state.clicked,
+ [`${prefix}--tile--light`]: light,
},
className
);
@@ -199,6 +224,12 @@ export class SelectableTile extends Component {
* Specify the tab index of the wrapper element
*/
tabIndex: PropTypes.number,
+
+ /**
+ * `true` to use the light version. For use on $ui-01 backgrounds only.
+ * Don't use this to make tile background color same as container background color.
+ */
+ light: PropTypes.bool,
};
static defaultProps = {
@@ -210,6 +241,7 @@ export class SelectableTile extends Component {
handleKeyDown: () => {},
onChange: () => {},
tabIndex: 0,
+ light: false,
};
handleClick = evt => {
@@ -270,6 +302,7 @@ export class SelectableTile extends Component {
handleClick, // eslint-disable-line
handleKeyDown, // eslint-disable-line
onChange,
+ light,
...other
} = this.props;
@@ -278,6 +311,7 @@ export class SelectableTile extends Component {
`${prefix}--tile--selectable`,
{
[`${prefix}--tile--is-selected`]: this.state.selected,
+ [`${prefix}--tile--light`]: light,
},
className
);
@@ -360,6 +394,12 @@ export class ExpandableTile extends Component {
* An ID that can be provided to aria-labelledby
*/
id: PropTypes.string,
+
+ /**
+ * `true` to use the light version. For use on $ui-01 backgrounds only.
+ * Don't use this to make tile background color same as container background color.
+ */
+ light: PropTypes.bool,
};
static defaultProps = {
@@ -370,6 +410,7 @@ export class ExpandableTile extends Component {
handleClick: () => {},
tileCollapsedIconText: 'Interact to expand Tile',
tileExpandedIconText: 'Interact to collapse Tile',
+ light: false,
};
static getDerivedStateFromProps(
@@ -467,6 +508,7 @@ export class ExpandableTile extends Component {
handleClick, // eslint-disable-line
tileCollapsedIconText, // eslint-disable-line
tileExpandedIconText, // eslint-disable-line
+ light,
...other
} = this.props;
@@ -477,6 +519,7 @@ export class ExpandableTile extends Component {
`${prefix}--tile--expandable`,
{
[`${prefix}--tile--is-expanded`]: expanded,
+ [`${prefix}--tile--light`]: light,
},
className
);

feat(tile): add light prop (#4335)

Add light prop to `<Tile>` component for use on `$ui-01` container.

This change also does the following:

* Remove unnecessary light prop from props.groupProps in tile-story
* Add note to light prop comment to warn for correct usage