docs(Toggles): add label examples to stories; remove a11yProps (#6770)

* docs(Toggles): add label examples to stories; remove a11yProps * fix(toggle skeleton): fix toggle/label spacing * docs(Toggle): remove skeleton examples * fix(Toggle): remove unused skeleton test * docs(ToggleSmall): remove ToggleSmall skeleton Co-authored-by: TJ Egan <tw15egan@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Sep 22, 2020 · f9b1030 · f9b1030
1 parent 635b2fa
commit f9b1030
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 77 deletions.
diff --git a/packages/react/src/components/Toggle/Toggle-story.js b/packages/react/src/components/Toggle/Toggle-story.js
@@ -9,16 +9,12 @@ import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, text, boolean } from '@storybook/addon-knobs';
 import Toggle from '../Toggle';
-import ToggleSkeleton from '../Toggle/Toggle.Skeleton';
-import mdx from './Toggle.mdx';
-
-const a11yProps = () => ({
-  labelText: text('Label toggle input control (labelText)', ''),
-  ['aria-label']: text('ARIA label of the toggle (aria-label)', ''),
-});
 
 const toggleProps = () => ({
-  ...a11yProps(),
+  labelText: text(
+    'Label toggle input control (labelText)',
+    'Toggle element label'
+  ),
   className: 'some-class',
   labelA: text('Label for untoggled state (labelA)', 'Off'),
   labelB: text('Label for toggled state (labelB)', 'On'),
@@ -33,12 +29,7 @@ export default {
 
   parameters: {
     component: Toggle,
-    docs: {
-      page: mdx,
-    },
-    subcomponents: {
-      ToggleSkeleton,
-    },
+    subcomponents: {},
   },
 };
 
@@ -80,15 +71,3 @@ Untoggled.parameters = {
       `,
   },
 };
-
-export const Skeleton = () => <ToggleSkeleton {...a11yProps()} />;
-
-Skeleton.storyName = 'skeleton';
-
-Skeleton.parameters = {
-  info: {
-    text: `
-            Placeholder skeleton state to use when content is loading.
-          `,
-  },
-};
diff --git a/packages/react/src/components/Toggle/Toggle-test.js b/packages/react/src/components/Toggle/Toggle-test.js
@@ -7,8 +7,7 @@
 
 import React from 'react';
 import Toggle from '../Toggle';
-import ToggleSkeleton from '../Toggle/Toggle.Skeleton';
-import { mount, shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import { settings } from 'carbon-components';
 
 const { prefix } = settings;
@@ -111,17 +110,3 @@ describe('Toggle', () => {
     });
   });
 });
-
-describe('ToggleSkeleton', () => {
-  describe('Renders as expected', () => {
-    const wrapper = shallow(<ToggleSkeleton />);
-    const input = wrapper.find('input');
-    const toggleLabel = wrapper.find(`.${prefix}--toggle__label`);
-
-    it('Has the expected classes', () => {
-      expect(input.hasClass(`${prefix}--skeleton`)).toEqual(true);
-      expect(input.hasClass(`${prefix}--toggle`)).toEqual(true);
-      expect(toggleLabel.hasClass(`${prefix}--skeleton`)).toEqual(true);
-    });
-  });
-});
diff --git a/packages/react/src/components/Toggle/Toggle.Skeleton.js b/packages/react/src/components/Toggle/Toggle.Skeleton.js
@@ -50,15 +50,15 @@ export default class ToggleSkeleton extends React.Component {
         />
 
         <label
-          aria-label={labelText ? null : this.props['aria-label']}
-          className={`${prefix}--toggle__label ${prefix}--skeleton`}
-          htmlFor={id}>
-          {labelText && (
-            <span className={`${prefix}--toggle__label-text`}>{labelText}</span>
-          )}
-          <span className={`${prefix}--toggle__text--left`} />
-          <span className={`${prefix}--toggle__appearance`} />
-          <span className={`${prefix}--toggle__text--right`} />
+          className={`${prefix}--toggle-input__label`}
+          htmlFor={id}
+          aria-label={labelText ? null : this.props['aria-label']}>
+          {labelText}
+          <span className={`${prefix}--toggle__switch`}>
+            <span className={`${prefix}--toggle__text--left`} />
+            <span className={`${prefix}--toggle__appearance`} />
+            <span className={`${prefix}--toggle__text--right`} />
+          </span>
         </label>
       </div>
     );

diff --git a/packages/react/src/components/ToggleSmall/ToggleSmall-story.js b/packages/react/src/components/ToggleSmall/ToggleSmall-story.js
@@ -9,16 +9,12 @@ import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, text, boolean } from '@storybook/addon-knobs';
 import ToggleSmall from '../ToggleSmall';
-import ToggleSmallSkeleton from '../ToggleSmall/ToggleSmall.Skeleton';
-import mdx from './ToggleSmall.mdx';
-
-const a11yprops = () => ({
-  labelText: text('Label toggle input control (labelText)', ''),
-  ['aria-label']: text('ARIA label of the toggle (aria-label)', ''),
-});
 
 const toggleProps = () => ({
-  ...a11yprops(),
+  labelText: text(
+    'Label toggle input control (labelText)',
+    'Toggle element label'
+  ),
   className: 'some-class',
   labelA: text('Label for untoggled state (labelA)', ''),
   labelB: text('Label for toggled state (labelB)', ''),
@@ -33,12 +29,7 @@ export default {
 
   parameters: {
     component: ToggleSmall,
-    docs: {
-      page: mdx,
-    },
-    subcomponents: {
-      ToggleSmallSkeleton,
-    },
+    subcomponents: {},
   },
 };
 
@@ -82,15 +73,3 @@ Untoggled.parameters = {
       `,
   },
 };
-
-export const Skeleton = () => <ToggleSmallSkeleton {...a11yprops()} />;
-
-Skeleton.storyName = 'skeleton';
-
-Skeleton.parameters = {
-  info: {
-    text: `
-            Placeholder skeleton state to use when content is loading.
-          `,
-  },
-};