From f90274cc48379babd06fb0ff8421b488cf611a56 Mon Sep 17 00:00:00 2001 From: Sugan G Date: Thu, 19 Oct 2023 17:03:07 +0530 Subject: [PATCH] changed to custom prop --- .../__snapshots__/ActionHeader.test.jsx.snap | 17 ---------- .../jest/__snapshots__/Alert.test.jsx.snap | 4 --- .../__snapshots__/ButtonGroup.test.jsx.snap | 2 -- .../ButtonGroupButton.test.jsx.snap | 9 ----- packages/terra-button/src/Button.jsx | 26 ++++----------- .../terra-button/tests/jest/Button.test.jsx | 5 --- .../jest/__snapshots__/Button.test.jsx.snap | 28 ---------------- .../button-spec/selected-button.png | Bin 3826 -> 0 bytes .../button-spec/unselected-button.png | Bin 3958 -> 0 bytes .../button-spec/selected-button.png | Bin 3265 -> 0 bytes .../button-spec/unselected-button.png | Bin 3652 -> 0 bytes .../button-spec/selected-button.png | Bin 3886 -> 0 bytes .../button-spec/unselected-button.png | Bin 4042 -> 0 bytes .../terra-button/tests/wdio/button-spec.js | 13 -------- .../terra-dev-site/doc/button/About.1.doc.mdx | 2 -- .../doc/button/example/ButtonIsSelected.jsx | 31 ------------------ .../test/button/SelectableButton.test.jsx | 31 ------------------ .../__snapshots__/SearchField.test.jsx.snap | 15 --------- .../__snapshots__/StatusView.test.jsx.snap | 2 -- .../__snapshots__/ToggleButton.test.jsx.snap | 5 --- 20 files changed, 6 insertions(+), 184 deletions(-) delete mode 100644 packages/terra-button/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/button-spec/selected-button.png delete mode 100644 packages/terra-button/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/button-spec/unselected-button.png delete mode 100644 packages/terra-button/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/button-spec/selected-button.png delete mode 100644 packages/terra-button/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/button-spec/unselected-button.png delete mode 100644 packages/terra-button/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/button-spec/selected-button.png delete mode 100644 packages/terra-button/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/button-spec/unselected-button.png delete mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/button/example/ButtonIsSelected.jsx delete mode 100644 packages/terra-core-docs/src/terra-dev-site/test/button/SelectableButton.test.jsx diff --git a/packages/terra-action-header/tests/jest/__snapshots__/ActionHeader.test.jsx.snap b/packages/terra-action-header/tests/jest/__snapshots__/ActionHeader.test.jsx.snap index 7b0381ee2ac..82c6fbaba19 100644 --- a/packages/terra-action-header/tests/jest/__snapshots__/ActionHeader.test.jsx.snap +++ b/packages/terra-action-header/tests/jest/__snapshots__/ActionHeader.test.jsx.snap @@ -21,7 +21,6 @@ exports[`ActionHeader correctly applies the theme context className 1`] = ` isDisabled={false} isIconOnly={true} isReversed={false} - isSelectable={false} onClick={[Function]} text="Terra.actionHeader.close" type="button" @@ -76,7 +75,6 @@ exports[`ActionHeader correctly applies the theme context className 1`] = ` isDisabled={false} isIconOnly={true} isReversed={false} - isSelectable={false} onClick={[Function]} text="Terra.actionHeader.maximize" type="button" @@ -117,7 +115,6 @@ exports[`ActionHeader should render an action header with back and close buttons isDisabled={false} isIconOnly={true} isReversed={false} - isSelectable={false} onClick={[Function]} text="Terra.actionHeader.close" type="button" @@ -144,7 +141,6 @@ exports[`ActionHeader should render an action header with back and close buttons isDisabled={false} isIconOnly={true} isReversed={false} - isSelectable={false} onClick={[Function]} text="Terra.actionHeader.back" type="button" @@ -178,7 +174,6 @@ exports[`ActionHeader should render an action header with back button and title isDisabled={false} isIconOnly={true} isReversed={false} - isSelectable={false} onClick={[Function]} text="Terra.actionHeader.back" type="button" @@ -210,7 +205,6 @@ exports[`ActionHeader should render an action header with close button and title isDisabled={false} isIconOnly={true} isReversed={false} - isSelectable={false} onClick={[Function]} text="Terra.actionHeader.close" type="button" @@ -239,7 +233,6 @@ exports[`ActionHeader should render an action header with custom button and titl isDisabled={false} isIconOnly={false} isReversed={false} - isSelectable={false} onClick={[Function]} text="Custom Button" type="button" @@ -281,7 +274,6 @@ exports[`ActionHeader should render an action header with maximize button and ti isDisabled={false} isIconOnly={true} isReversed={false} - isSelectable={false} onClick={[Function]} text="Terra.actionHeader.maximize" type="button" @@ -316,7 +308,6 @@ exports[`ActionHeader should render an action header with minimize button and ti isDisabled={false} isIconOnly={true} isReversed={false} - isSelectable={false} onClick={[Function]} text="Terra.actionHeader.minimize" type="button" @@ -343,7 +334,6 @@ exports[`ActionHeader should render an action header with multiple custom button isDisabled={false} isIconOnly={false} isReversed={false} - isSelectable={false} onClick={[Function]} text="Custom Button" type="button" @@ -355,7 +345,6 @@ exports[`ActionHeader should render an action header with multiple custom button isDisabled={false} isIconOnly={false} isReversed={false} - isSelectable={false} onClick={[Function]} text="Custom Button" type="button" @@ -390,7 +379,6 @@ exports[`ActionHeader should render an action header with next and previous butt isDisabled={false} isIconOnly={true} isReversed={false} - isSelectable={false} onClick={[Function]} text="Terra.actionHeader.previous" type="button" @@ -409,7 +397,6 @@ exports[`ActionHeader should render an action header with next and previous butt isDisabled={false} isIconOnly={true} isReversed={false} - isSelectable={false} onClick={[Function]} text="Terra.actionHeader.next" type="button" @@ -457,7 +444,6 @@ exports[`ActionHeader should render an action header with title, enabled next bu isDisabled={true} isIconOnly={true} isReversed={false} - isSelectable={false} text="Terra.actionHeader.previous" type="button" variant="utility" @@ -475,7 +461,6 @@ exports[`ActionHeader should render an action header with title, enabled next bu isDisabled={false} isIconOnly={true} isReversed={false} - isSelectable={false} onClick={[Function]} text="Terra.actionHeader.next" type="button" @@ -513,7 +498,6 @@ exports[`ActionHeader should render an action header with title, enabled previou isDisabled={false} isIconOnly={true} isReversed={false} - isSelectable={false} onClick={[Function]} text="Terra.actionHeader.previous" type="button" @@ -532,7 +516,6 @@ exports[`ActionHeader should render an action header with title, enabled previou isDisabled={true} isIconOnly={true} isReversed={false} - isSelectable={false} text="Terra.actionHeader.next" type="button" variant="utility" diff --git a/packages/terra-alert/tests/jest/__snapshots__/Alert.test.jsx.snap b/packages/terra-alert/tests/jest/__snapshots__/Alert.test.jsx.snap index 9556ae45764..4f73464c3b7 100644 --- a/packages/terra-alert/tests/jest/__snapshots__/Alert.test.jsx.snap +++ b/packages/terra-alert/tests/jest/__snapshots__/Alert.test.jsx.snap @@ -317,7 +317,6 @@ exports[`Alert of type success with an action button text content should render isDisabled={false} isIconOnly={false} isReversed={false} - isSelectable={false} onClick={[MockFunction]} text="Action" type="button" @@ -968,7 +967,6 @@ exports[`Dismissible Alert of type custom with action button, custom title and t isDisabled={false} isIconOnly={false} isReversed={false} - isSelectable={false} onClick={[MockFunction]} text="Action" type="button" @@ -981,7 +979,6 @@ exports[`Dismissible Alert of type custom with action button, custom title and t isDisabled={false} isIconOnly={false} isReversed={false} - isSelectable={false} onClick={[MockFunction]} text="Terra.alert.dismiss" type="button" @@ -1043,7 +1040,6 @@ exports[`Dismissible Alert that includes actions section should render an alert isDisabled={false} isIconOnly={false} isReversed={false} - isSelectable={false} onClick={[MockFunction]} text="Terra.alert.dismiss" type="button" diff --git a/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroup.test.jsx.snap b/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroup.test.jsx.snap index 0d41f4fd0e6..ef42d130d79 100644 --- a/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroup.test.jsx.snap +++ b/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroup.test.jsx.snap @@ -35,7 +35,6 @@ exports[`correctly applies the theme context className 1`] = ` isDisabled={false} isIconOnly={false} isReversed={false} - isSelectable={false} onBlur={[Function]} onClick={[Function]} onFocus={[Function]} @@ -88,7 +87,6 @@ exports[`correctly applies the theme context className 1`] = ` isDisabled={false} isIconOnly={false} isReversed={false} - isSelectable={false} onBlur={[Function]} onClick={[Function]} onFocus={[Function]} diff --git a/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroupButton.test.jsx.snap b/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroupButton.test.jsx.snap index 0afc28da99a..01a37b5abaf 100644 --- a/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroupButton.test.jsx.snap +++ b/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroupButton.test.jsx.snap @@ -20,7 +20,6 @@ exports[`correctly applies the theme context className 1`] = ` isDisabled={false} isIconOnly={false} isReversed={false} - isSelectable={false} onBlur={[Function]} onFocus={[Function]} onKeyDown={[Function]} @@ -66,7 +65,6 @@ exports[`should render a default component 1`] = ` isDisabled={false} isIconOnly={false} isReversed={false} - isSelectable={false} onBlur={[Function]} onFocus={[Function]} onKeyDown={[Function]} @@ -86,7 +84,6 @@ exports[`should render as disabled 1`] = ` isDisabled={true} isIconOnly={false} isReversed={false} - isSelectable={false} onBlur={[Function]} onFocus={[Function]} onKeyDown={[Function]} @@ -111,7 +108,6 @@ exports[`should render with icon only 1`] = ` isDisabled={false} isIconOnly={true} isReversed={false} - isSelectable={false} onBlur={[Function]} onFocus={[Function]} onKeyDown={[Function]} @@ -131,7 +127,6 @@ exports[`should render with onBlur 1`] = ` isDisabled={false} isIconOnly={false} isReversed={false} - isSelectable={false} onBlur={[Function]} onFocus={[Function]} onKeyDown={[Function]} @@ -151,7 +146,6 @@ exports[`should render with onClick 1`] = ` isDisabled={false} isIconOnly={false} isReversed={false} - isSelectable={false} onBlur={[Function]} onClick={[Function]} onFocus={[Function]} @@ -172,7 +166,6 @@ exports[`should render with onFocus 1`] = ` isDisabled={false} isIconOnly={false} isReversed={false} - isSelectable={false} onBlur={[Function]} onFocus={[Function]} onKeyDown={[Function]} @@ -192,7 +185,6 @@ exports[`should render with onKeyDown 1`] = ` isDisabled={false} isIconOnly={false} isReversed={false} - isSelectable={false} onBlur={[Function]} onFocus={[Function]} onKeyDown={[Function]} @@ -212,7 +204,6 @@ exports[`should render with onKeyUp 1`] = ` isDisabled={false} isIconOnly={false} isReversed={false} - isSelectable={false} onBlur={[Function]} onFocus={[Function]} onKeyDown={[Function]} diff --git a/packages/terra-button/src/Button.jsx b/packages/terra-button/src/Button.jsx index 17586d57d74..fdf4ce147b2 100644 --- a/packages/terra-button/src/Button.jsx +++ b/packages/terra-button/src/Button.jsx @@ -101,16 +101,6 @@ const propTypes = { * Sets the button variant. One of `neutral`, `emphasis`, `ghost`, `de-emphasis`, `action` or `utility`. */ variant: PropTypes.oneOf([ButtonVariants.NEUTRAL, ButtonVariants.EMPHASIS, ButtonVariants.GHOST, ButtonVariants['DE-EMPHASIS'], ButtonVariants.ACTION, ButtonVariants.UTILITY]), - /** - * @private - * Whether or not the button can be selected (toggleable button). - */ - isSelectable: PropTypes.bool, - /** - * @private - * Callback function when the state changes. Parameters are (event, toggleState). - */ - onChange: PropTypes.func, }; const defaultProps = { @@ -123,7 +113,6 @@ const defaultProps = { title: undefined, type: ButtonTypes.BUTTON, variant: ButtonVariants.NEUTRAL, - isSelectable: false, }; class Button extends React.Component { @@ -157,7 +146,9 @@ class Button extends React.Component { } handleOnChange(event) { + // eslint-disable-next-line react/prop-types if (this.props.onChange && this.props.isSelectable) { + // eslint-disable-next-line react/prop-types this.props.onChange(event, this.state.isSelected); } } @@ -260,8 +251,6 @@ class Button extends React.Component { onKeyUp, refCallback, title, - isSelectable, - onChange, ...customProps } = this.props; @@ -269,6 +258,8 @@ class Button extends React.Component { const isMac = () => navigator.userAgent.indexOf('Mac') !== -1; const buttonLabelCx = isMac() ? 'button-label-mac' : 'button-label-win'; + // TODO: Custom prop `isSelectable` is used for fusion pass through passivity and should be removed after Fusion Phase2 release. + const buttonClasses = classNames( cx([ 'button', @@ -278,7 +269,7 @@ class Button extends React.Component { { compact: isCompact }, { 'is-active': this.state.active && !isDisabled }, { 'is-focused': this.state.focused && !isDisabled }, - { 'is-selected': isSelectable && this.state.isSelected && !isDisabled }, + { 'is-selected': customProps.isSelectable && this.state.isSelected && !isDisabled }, theme.className, ]), customProps.className, @@ -332,11 +323,6 @@ class Button extends React.Component { customProps.role = 'button'; } - if (isSelectable) { - // eslint-disable-next-line no-console - console.warn('`isSelectable` prop will be deprecated in future and we do not recommend it for use'); - } - return ( {buttonLabel} diff --git a/packages/terra-button/tests/jest/Button.test.jsx b/packages/terra-button/tests/jest/Button.test.jsx index 57573a9cb81..2df2a4ad71b 100644 --- a/packages/terra-button/tests/jest/Button.test.jsx +++ b/packages/terra-button/tests/jest/Button.test.jsx @@ -263,9 +263,4 @@ it('correctly applies the theme context className', () => { ); expect(button).toMatchSnapshot(); }); - -it('should render a selectable button', () => { - const button = shallow( `; -exports[`should render a selectable button 1`] = ` - -`; - exports[`should render a utility button 1`] = `