From a803128181c3ed1f25d909fde81f5817daced1e3 Mon Sep 17 00:00:00 2001 From: Scott Strubberg Date: Mon, 20 Sep 2021 14:54:41 -0500 Subject: [PATCH] chore(Tile): updated props for v11 (#9628) * chore(tile): update props and tests * chore(tile): fixed the tests Co-authored-by: @tay1orjones * chore(ExpandableTile): updated props co-authored-by: @tay1orjones * chore(tile): updated public api test * fix(tile): remove storybook actions * chore(button): removed deprecation warning * chore(tile): updated public api test * fix(tile): removed compose handlers Co-authored-by: Vince Picone --- .../__snapshots__/PublicAPI-test.js.snap | 27 +++--- .../react/src/components/Button/Button.js | 2 +- .../react/src/components/Tile/Tile-story.js | 6 -- packages/react/src/components/Tile/Tile.js | 93 ++++++++++++------- 4 files changed, 77 insertions(+), 51 deletions(-) diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index a7f7650dce90..a8c487e125c9 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -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 { @@ -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", }, @@ -6410,6 +6412,9 @@ Map { "SelectableTile" => Object { "defaultProps": Object { "light": false, + "onChange": [Function], + "onClick": [Function], + "onKeyDown": [Function], "selected": false, "tabIndex": 0, "title": "title", @@ -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", @@ -6493,9 +6498,7 @@ Map { "expanded": Object { "type": "bool", }, - "handleClick": Object { - "type": "func", - }, + "handleClick": [Function], "id": Object { "type": "string", }, diff --git a/packages/react/src/components/Button/Button.js b/packages/react/src/components/Button/Button.js index a181e06a1d1a..c059c34e8ac8 100644 --- a/packages/react/src/components/Button/Button.js +++ b/packages/react/src/components/Button/Button.js @@ -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]), ...other, ...commonProps, ...otherProps, diff --git a/packages/react/src/components/Tile/Tile-story.js b/packages/react/src/components/Tile/Tile-story.js index e1c704bb1619..d8b478090d29 100644 --- a/packages/react/src/components/Tile/Tile-story.js +++ b/packages/react/src/components/Tile/Tile-story.js @@ -6,7 +6,6 @@ */ import React from 'react'; -import { action } from '@storybook/addon-actions'; import './tile-story.scss'; import { @@ -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), }), @@ -63,11 +60,9 @@ const props = { radioValues, '' ), - onChange: action('onChange'), }), radio: () => ({ name: text('Form item name (name in )', 'tiles'), - onChange: action('onChange'), light: boolean('Light variant (light)', false), disabled: boolean('Disabled (disabled)', false), }), @@ -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), }), }; diff --git a/packages/react/src/components/Tile/Tile.js b/packages/react/src/components/Tile/Tile.js index 5d7778bffb74..4c36d773f405 100644 --- a/packages/react/src/components/Tile/Tile.js +++ b/packages/react/src/components/Tile/Tile.js @@ -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 { @@ -45,8 +45,8 @@ 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, @@ -54,7 +54,7 @@ export class Tile extends Component { className ); return ( -
+
{children}
); @@ -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. @@ -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. */ @@ -104,8 +120,8 @@ export class ClickableTile extends Component { static defaultProps = { clicked: false, - handleClick: () => {}, - handleKeyDown: () => {}, + onClick: () => {}, + onKeyDown: () => {}, light: false, }; @@ -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); } ); }; @@ -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); } }; @@ -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`, { @@ -174,7 +195,7 @@ export class ClickableTile extends Component { {children} @@ -187,7 +208,7 @@ export function SelectableTile(props) { const { children, id, - tabIndex = 0, + tabIndex, value, name, title, @@ -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`, { @@ -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, }); @@ -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}> {}, + onChange: () => {}, + onKeyDown: () => {}, }; SelectableTile.propTypes = { /** @@ -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 @@ -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, @@ -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, @@ -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); } ); }; @@ -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`, { @@ -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}>