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

Jump to bottom

chore(Tile): updated props for v11 #9628

Merged
merged 10 commits into from Sep 20, 2021
Merged

chore(Tile): updated props for v11 #9628

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
88d23d5
chore(tile): update props and tests
sstrubberg Sep 9, 2021
9f01a6a
chore(tile): fixed the tests
sstrubberg Sep 9, 2021
9d43163
chore(ExpandableTile): updated props
sstrubberg Sep 9, 2021
4e1416e
chore(tile): updated public api test
sstrubberg Sep 9, 2021
f4d7ec3
Merge branch 'main' into prop-changes-alt
sstrubberg Sep 9, 2021
9ef4df3
fix(tile): remove storybook actions
sstrubberg Sep 9, 2021
b137f97
chore(button): removed deprecation warning
sstrubberg Sep 13, 2021
4820257
chore(tile): updated public api test
sstrubberg Sep 13, 2021
3134142
fix(tile): removed compose handlers
sstrubberg Sep 16, 2021
11a5dc5
Merge branch 'main' into prop-changes-alt
vpicone Sep 20, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
27 changes: 15 additions & 12 deletions packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
View file
Open in desktop
Expand Up @@ -6379,9 +6379,9 @@ Map {
"ClickableTile" => Object {
"defaultProps": Object {
"clicked": false,
"handleClick": [Function],
"handleKeyDown": [Function],
"light": false,
"onClick": [Function],
"onKeyDown": [Function],
},
"propTypes": Object {
"children": Object {
Expand All @@ -6390,18 +6390,20 @@ Map {
"className": Object {
"type": "string",
},
"handleClick": Object {
"type": "func",
},
"handleKeyDown": Object {
"type": "func",
},
"handleClick": [Function],
"handleKeyDown": [Function],
"href": Object {
"type": "string",
},
"light": Object {
"type": "bool",
},
"onClick": Object {
"type": "func",
},
"onKeyDown": Object {
"type": "func",
},
"rel": Object {
"type": "string",
},
Expand All @@ -6410,6 +6412,9 @@ Map {
"SelectableTile" => Object {
"defaultProps": Object {
"light": false,
"onChange": [Function],
"onClick": [Function],
"onKeyDown": [Function],
"selected": false,
"tabIndex": 0,
"title": "title",
Expand Down Expand Up @@ -6474,9 +6479,9 @@ Map {
"ExpandableTile" => Object {
"defaultProps": Object {
"expanded": false,
"handleClick": [Function],
"light": false,
"onBeforeClick": [Function],
"onClick": [Function],
"tabIndex": 0,
"tileCollapsedIconText": "Interact to expand Tile",
"tileExpandedIconText": "Interact to collapse Tile",
Expand All @@ -6493,9 +6498,7 @@ Map {
"expanded": Object {
"type": "bool",
},
"handleClick": Object {
"type": "func",
},
"handleClick": [Function],
"id": Object {
"type": "string",
},
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/Button/Button.js
View file
Open in desktop
Expand Up @@ -220,7 +220,7 @@ const Button = React.forwardRef(function Button(
onMouseLeave: composeEventHandlers([onMouseLeave, handleMouseLeave]),
onFocus: composeEventHandlers([onFocus, handleFocus]),
onBlur: composeEventHandlers([onBlur, handleBlur]),
onClick: composeEventHandlers([handleClick, onClick]),
onClick: composeEventHandlers([onClick, handleClick]),
sstrubberg marked this conversation as resolved.
Show resolved Hide resolved
...other,
...commonProps,
...otherProps,
Expand Down
6 changes: 0 additions & 6 deletions packages/react/src/components/Tile/Tile-story.js
View file
Open in desktop
Expand Up @@ -6,7 +6,6 @@
*/

import React from 'react';
import { action } from '@storybook/addon-actions';
import './tile-story.scss';

import {
Expand Down Expand Up @@ -51,8 +50,6 @@ const props = {
}),
selectable: () => ({
selected: boolean('Selected (selected)', false),
handleClick: action('handleClick'),
handleKeyDown: action('handleKeyDown'),
light: boolean('Light variant (light)', false),
disabled: boolean('Disabled (disabled)', false),
}),
Expand All @@ -63,11 +60,9 @@ const props = {
radioValues,
''
),
onChange: action('onChange'),
}),
radio: () => ({
name: text('Form item name (name in <RadioTile>)', 'tiles'),
onChange: action('onChange'),
light: boolean('Light variant (light)', false),
disabled: boolean('Disabled (disabled)', false),
}),
Expand All @@ -84,7 +79,6 @@ const props = {
),
tileCollapsedLabel: text('Collapsed icon text (tileCollapsedLabel)'),
tileExpandedLabel: text('Collapsed icon text (tileExpandedLabel)'),
handleClick: action('handleClick'),
light: boolean('Light variant (light)', false),
}),
};
Expand Down
93 changes: 61 additions & 32 deletions packages/react/src/components/Tile/Tile.js
View file
Open in desktop
Expand Up @@ -7,7 +7,7 @@

import React, { Component, useEffect, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import cx from 'classnames';
import { settings } from 'carbon-components';
import Link from '../Link';
import {
Expand Down Expand Up @@ -45,16 +45,16 @@ export class Tile extends Component {
};

render() {
const { children, className, light, ...other } = this.props;
const tileClasses = classNames(
const { children, className, light, ...rest } = this.props;
const tileClasses = cx(
`${prefix}--tile`,
{
[`${prefix}--tile--light`]: light,
},
className
);
return (
<div className={tileClasses} {...other}>
<div className={tileClasses} {...rest}>
{children}
</div>
);
Expand All @@ -76,14 +76,20 @@ export class ClickableTile extends Component {
className: PropTypes.string,

/**
* Specify the function to run when the ClickableTile is clicked
* Deprecated in v11. Use 'onClick' instead.
*/
handleClick: PropTypes.func,
handleClick: deprecate(
PropTypes.func,
'The handleClick prop for ClickableTile has been deprecated in favor of onClick. It will be removed in the next major release.'
),

/**
* Specify the function to run when the ClickableTile is interacted with via a keyboard
*/
handleKeyDown: PropTypes.func,
handleKeyDown: deprecate(
PropTypes.func,
'The handleKeyDown prop for ClickableTile has been deprecated in favor of onKeyDown. It will be removed in the next major release.'
),

/**
* The href for the link.
Expand All @@ -96,6 +102,16 @@ export class ClickableTile extends Component {
*/
light: PropTypes.bool,

/**
* Specify the function to run when the ClickableTile is clicked
*/
onClick: PropTypes.func,

/**
* Specify the function to run when the ClickableTile is interacted with via a keyboard
*/
onKeyDown: PropTypes.func,

/**
* The rel property for the link.
*/
Expand All @@ -104,8 +120,8 @@ export class ClickableTile extends Component {

static defaultProps = {
clicked: false,
handleClick: () => {},
handleKeyDown: () => {},
onClick: () => {},
onKeyDown: () => {},
light: false,
};

Expand All @@ -116,7 +132,8 @@ export class ClickableTile extends Component {
clicked: !this.state.clicked,
},
() => {
this.props.handleClick(evt);
// TODO: Remove handleClick prop when handleClick is deprecated
this.props.handleClick?.(evt) || this.props.onClick?.(evt);
}
);
};
Expand All @@ -129,11 +146,13 @@ export class ClickableTile extends Component {
clicked: !this.state.clicked,
},
() => {
this.props.handleKeyDown(evt);
// TODO: Remove handleKeyDown prop when handleKeyDown is deprecated
this.props.handleKeyDown?.(evt) || this.props.onKeyDown(evt);
}
);
} else {
this.props.handleKeyDown(evt);
// TODO: Remove handleKeyDown prop when handleKeyDown is deprecated
this.props.handleKeyDown?.(evt) || this.props.onKeyDown(evt);
}
};

Expand All @@ -155,12 +174,14 @@ export class ClickableTile extends Component {
className,
handleClick, // eslint-disable-line
handleKeyDown, // eslint-disable-line
onClick, // eslint-disable-line
onKeyDown, // eslint-disable-line
clicked, // eslint-disable-line
light,
...other
...rest
} = this.props;

const classes = classNames(
const classes = cx(
`${prefix}--tile`,
`${prefix}--tile--clickable`,
{
Expand All @@ -174,7 +195,7 @@ export class ClickableTile extends Component {
<Link
href={href}
className={classes}
{...other}
{...rest}
onClick={this.handleClick}
onKeyDown={this.handleKeyDown}>
{children}
Expand All @@ -187,7 +208,7 @@ export function SelectableTile(props) {
const {
children,
id,
tabIndex = 0,
tabIndex,
value,
name,
title,
Expand All @@ -196,24 +217,24 @@ export function SelectableTile(props) {
className,
handleClick,
handleKeyDown,
onClick = () => {},
onChange = () => {},
onKeyDown = () => {},
onClick,
onChange,
onKeyDown,
light,
disabled,
selected,
...other
...rest
} = props;

// TODO: replace with onClick when handleClick prop is deprecated
const clickHandler = handleClick || onClick;

// TODO: replace with onClick when handleClick prop is deprecated
// TODO: replace with onKeyDown when handleKeyDown prop is deprecated
const keyDownHandler = handleKeyDown || onKeyDown;

const [isSelected, setIsSelected] = useState(selected);
const input = useRef(null);
const classes = classNames(
const classes = cx(
`${prefix}--tile`,
`${prefix}--tile--selectable`,
{
Expand All @@ -223,7 +244,7 @@ export function SelectableTile(props) {
},
className
);
const inputClasses = classNames(`${prefix}--tile-input`, {
const inputClasses = cx(`${prefix}--tile-input`, {
[`${prefix}--tile-input--checked`]: isSelected,
});

Expand Down Expand Up @@ -277,7 +298,7 @@ export function SelectableTile(props) {
className={classes}
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
tabIndex={!disabled ? tabIndex : null}
{...other}
{...rest}
onClick={!disabled ? handleOnClick : null}
onKeyDown={!disabled ? handleOnKeyDown : null}>
<span
Expand All @@ -295,6 +316,9 @@ SelectableTile.defaultProps = {
selected: false,
tabIndex: 0,
light: false,
onClick: () => {},
sstrubberg marked this conversation as resolved.
Show resolved Hide resolved
onChange: () => {},
onKeyDown: () => {},
};
SelectableTile.propTypes = {
/**
Expand Down Expand Up @@ -409,9 +433,12 @@ export class ExpandableTile extends Component {
expanded: PropTypes.bool,

/**
* Specify the function to run when the ExpandableTile is clicked
* Deprecated in v11. Use 'onClick' instead.
*/
handleClick: PropTypes.func,
handleClick: deprecate(
PropTypes.func,
'The handleClick prop for ClickableTile has been deprecated in favor of onClick. It will be removed in the next major release.'
),

/**
* An ID that can be provided to aria-labelledby
Expand All @@ -430,7 +457,8 @@ export class ExpandableTile extends Component {
onBeforeClick: PropTypes.func,

/**
* optional handler to trigger a function the Tile is clicked
* Specify the function to run when the ExpandableTile is clicked

*/
onClick: PropTypes.func,

Expand Down Expand Up @@ -471,7 +499,7 @@ export class ExpandableTile extends Component {
tileMaxHeight: 0,
tilePadding: 0,
onBeforeClick: () => true,
handleClick: () => {},
onClick: () => {},
tileCollapsedIconText: 'Interact to expand Tile',
tileExpandedIconText: 'Interact to collapse Tile',
light: false,
Expand Down Expand Up @@ -549,7 +577,8 @@ export class ExpandableTile extends Component {
},
() => {
this.setMaxHeight();
this.props.handleClick(evt);
// TODO: Remove handleClick prop when handleClick is deprecated
this.props.handleClick?.(evt) || this.props.onClick?.(evt);
}
);
};
Expand Down Expand Up @@ -582,12 +611,12 @@ export class ExpandableTile extends Component {
tileExpandedLabel,
onBeforeClick, // eslint-disable-line
light,
...other
...rest
} = this.props;

const { expanded: isExpanded } = this.state;

const classes = classNames(
const classes = cx(
`${prefix}--tile`,
`${prefix}--tile--expandable`,
{
Expand Down Expand Up @@ -616,7 +645,7 @@ export class ExpandableTile extends Component {
className={classes}
aria-expanded={isExpanded}
title={isExpanded ? tileExpandedIconText : tileCollapsedIconText}
{...other}
{...rest}
onKeyUp={composeEventHandlers([onKeyUp, this.handleKeyUp])}
onClick={composeEventHandlers([onClick, this.handleClick])}
tabIndex={tabIndex}>
Expand Down