diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 98eddd305ec2..f094bbfe8e41 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -6000,6 +6000,14 @@ Map { "onToggle": Object { "type": "func", }, + "size": Object { + "args": Array [ + Array [ + "sm", + ], + ], + "type": "oneOf", + }, "toggled": Object { "type": "bool", }, diff --git a/packages/react/src/components/Toggle/Toggle-story.js b/packages/react/src/components/Toggle/Toggle-story.js index 3695a925899d..13b6ecf2a870 100644 --- a/packages/react/src/components/Toggle/Toggle-story.js +++ b/packages/react/src/components/Toggle/Toggle-story.js @@ -7,9 +7,14 @@ import React from 'react'; import { action } from '@storybook/addon-actions'; -import { withKnobs, text, boolean } from '@storybook/addon-knobs'; +import { withKnobs, text, boolean, select } from '@storybook/addon-knobs'; import Toggle from '../Toggle'; +const sizes = { + 'Default size': undefined, + 'Small size (sm)': 'sm', +}; + const toggleProps = () => ({ labelText: text( 'Label toggle input control (labelText)', @@ -21,6 +26,7 @@ const toggleProps = () => ({ disabled: boolean('Disabled (disabled)', false), onChange: action('onChange'), onToggle: action('onToggle'), + size: select('Field size (size)', sizes, undefined) || undefined, }); export default { @@ -33,7 +39,7 @@ export default { }, }; -export const Toggled = () => ( +export const Default = () => ( ( /> ); -Toggled.storyName = 'toggled'; +Default.storyName = 'Toggle'; -Toggled.parameters = { +Default.parameters = { info: { text: ` Toggles are controls that are used to quickly switch between two possible states. The example below shows @@ -54,20 +60,3 @@ Toggled.parameters = { `, }, }; - -export const Untoggled = () => ( - -); - -Untoggled.storyName = 'untoggled'; - -Untoggled.parameters = { - info: { - text: ` - Toggles are controls that are used to quickly switch between two possible states. The example below shows - an uncontrolled Toggle component. To use the Toggle component as a controlled component, set the toggled property. - Setting the toggled property will allow you to change the value dynamically, whereas setting the defaultToggled - prop will only set the value initially. This example has defaultToggled set to false. - `, - }, -}; diff --git a/packages/react/src/components/Toggle/Toggle-test.js b/packages/react/src/components/Toggle/Toggle-test.js index 6b7fcd743bb0..fce60037e1fc 100644 --- a/packages/react/src/components/Toggle/Toggle-test.js +++ b/packages/react/src/components/Toggle/Toggle-test.js @@ -109,4 +109,25 @@ describe('Toggle', () => { expect(call[2].target).toBe(inputElement); }); }); + + describe('ToggleSmall', () => { + const wrapper = mount(); + + it('Sets the `ToggleSmall` className', () => { + const input = wrapper.find('input'); + expect(input.hasClass(`${prefix}--toggle-input--small`)).toEqual(true); + }); + + it('Renders a checkmark SVG', () => { + const svg = wrapper.find(`.${prefix}--toggle__check`); + expect(svg.length).toBe(1); + }); + + it('Does not render toggle text', () => { + const offLabel = wrapper.find(`.${prefix}--toggle__text--off`); + const onLabel = wrapper.find(`.${prefix}--toggle__text--on`); + expect(offLabel.length).toBe(0); + expect(onLabel.length).toBe(0); + }); + }); }); diff --git a/packages/react/src/components/Toggle/Toggle.js b/packages/react/src/components/Toggle/Toggle.js index 94506a5d9119..bc411c80b8a7 100644 --- a/packages/react/src/components/Toggle/Toggle.js +++ b/packages/react/src/components/Toggle/Toggle.js @@ -59,6 +59,11 @@ class Toggle extends React.Component { */ onToggle: PropTypes.func, + /** + * Specify the size of the Toggle. Currently only supports 'sm' + */ + size: PropTypes.oneOf(['sm']), + /** * Specify whether the control is toggled */ @@ -85,6 +90,7 @@ class Toggle extends React.Component { labelText, labelA, labelB, + size, ...other } = this.props; @@ -93,6 +99,10 @@ class Toggle extends React.Component { [className]: className, }); + const toggleClasses = classNames(`${prefix}--toggle-input`, { + [`${prefix}--toggle-input--small`]: size, + }); + const checkedProps = {}; if (typeof toggled !== 'undefined') { @@ -109,7 +119,7 @@ class Toggle extends React.Component { aria-label={null} type="checkbox" id={id} - className={`${prefix}--toggle-input`} + className={toggleClasses} onChange={(evt) => { onChange && onChange(evt); onToggle(input.checked, id, evt); @@ -133,12 +143,29 @@ class Toggle extends React.Component { }> {labelText} - - + {size && ( + + + + )} + {!size && ( + <> + + + + )} diff --git a/packages/react/src/components/ToggleSmall/ToggleSmall-story.js b/packages/react/src/components/ToggleSmall/ToggleSmall-story.js index 15966b88ec13..9cc3972b787a 100644 --- a/packages/react/src/components/ToggleSmall/ToggleSmall-story.js +++ b/packages/react/src/components/ToggleSmall/ToggleSmall-story.js @@ -24,7 +24,7 @@ const toggleProps = () => ({ }); export default { - title: 'ToggleSmall', + title: 'ToggleSmall [Deprecated]', decorators: [withKnobs], parameters: { @@ -33,18 +33,25 @@ export default { }, }; -export const Toggled = () => ( - +export const Default = () => ( + <> +

+ This component has been deprecated, please use the `size` prop provided by + Toggle instead +

+
+ + ); -Toggled.storyName = 'toggled'; +Default.storyName = 'toggled'; -Toggled.parameters = { +Default.parameters = { info: { text: ` Toggles are controls that are used to quickly switch between two possible states. The example below shows @@ -55,21 +62,3 @@ Toggled.parameters = { `, }, }; - -export const Untoggled = () => ( - -); - -Untoggled.storyName = 'untoggled'; - -Untoggled.parameters = { - info: { - text: ` - Toggles are controls that are used to quickly switch between two possible states. The example below shows - an uncontrolled Toggle component. To use the Toggle component as a controlled component, set the toggled property. - Setting the toggled property will allow you to change the value dynamically, whereas setting the defaultToggled - prop will only set the value initially. Small toggles may be used when there is not enough space for a regular sized toggle. This issue is most - commonly found in tables. - `, - }, -}; diff --git a/packages/react/src/components/ToggleSmall/ToggleSmall-test.js b/packages/react/src/components/ToggleSmall/ToggleSmall-test.js index e2b8ee628b18..db64de91893b 100644 --- a/packages/react/src/components/ToggleSmall/ToggleSmall-test.js +++ b/packages/react/src/components/ToggleSmall/ToggleSmall-test.js @@ -6,24 +6,39 @@ */ import React from 'react'; -import ToggleSmall from '../ToggleSmall'; import ToggleSmallSkeleton from '../ToggleSmall/ToggleSmall.Skeleton'; import { mount, shallow } from 'enzyme'; import { settings } from 'carbon-components'; const { prefix } = settings; + describe('ToggleSmall', () => { + let ToggleSmall; + + beforeEach(() => { + jest.mock('warning', () => { + return jest.fn(); + }); + + ToggleSmall = require('../ToggleSmall').default; + }); + describe('Renders as expected', () => { - const wrapper = mount( - - ); + let input; + let wrapper; + + beforeEach(() => { + wrapper = mount( + + ); - const input = wrapper.find('input'); + input = wrapper.find('input'); + }); it('Switch and label Ids should match', () => { const toggleLabel = wrapper.find(`.${prefix}--toggle__label`); diff --git a/packages/react/src/components/ToggleSmall/ToggleSmall.js b/packages/react/src/components/ToggleSmall/ToggleSmall.js index 45c35e607691..2aa82fdbaabb 100644 --- a/packages/react/src/components/ToggleSmall/ToggleSmall.js +++ b/packages/react/src/components/ToggleSmall/ToggleSmall.js @@ -10,9 +10,12 @@ import React from 'react'; import classNames from 'classnames'; import { settings } from 'carbon-components'; import { keys, match } from '../../internal/keyboard'; +import warning from 'warning'; const { prefix } = settings; +let didWarnAboutDeprecation = false; + const ToggleSmall = ({ className, defaultToggled, @@ -25,6 +28,14 @@ const ToggleSmall = ({ labelB, ...other }) => { + if (__DEV__) { + warning( + didWarnAboutDeprecation, + '`` has been deprecated in favor of `` and will be removed in the next major release of `carbon-components-react`' + ); + didWarnAboutDeprecation = true; + } + let input; const wrapperClasses = classNames(`${prefix}--form-item`, { [className]: className,