fix(ToggleSkeleton): fix issue with ToggleSkeleton style (#13963)

* fix(ToggleSkeleton): fix issue with ToggleSkeleton style Signed-off-by: Mohammed Aslam P. A <Mohammed.Aslam.P.A@ibm.com> * fix(ToggleSkeleton): fix skeleton animation and css class conflict * fix(ToggleSkeleton): fix format in Toggle.Skeleton.tsx * fix(ToggleSkeleton): fix animation for ToggleSkeleton --------- Signed-off-by: Mohammed Aslam P. A <Mohammed.Aslam.P.A@ibm.com> Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Jun 19, 2023 · 7de2ef3 · 7de2ef3
1 parent a000250
commit 7de2ef3
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 118 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -1186,6 +1186,16 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "modaslam",
+      "name": "Mohammed Aslam P. A.",
+      "avatar_url": "https://avatars.githubusercontent.com/u/33179527?v=4",
+      "profile": "https://github.com/modaslam",
+      "contributions": [
+        "code",
+        "doc"
+      ]
     }
   ],
   "commitConvention": "none"

diff --git a/README.md b/README.md
@@ -243,6 +243,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="http://www.steveblackonline.com/"><img src="https://avatars.githubusercontent.com/u/7853451?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Steven Black</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=sjbeatle" title="Code">💻</a> <a href="#a11y-sjbeatle" title="Accessibility">️️️️♿️</a></td>
     <td align="center"><a href="https://github.com/mrkjdy"><img src="https://avatars.githubusercontent.com/u/32761859?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mark Judy</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=mrkjdy" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/anton-tsymuk-viacomcbs"><img src="https://avatars.githubusercontent.com/u/112623876?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Anton Tsymuk</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=anton-tsymuk-viacomcbs" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/modaslam"><img src="https://avatars.githubusercontent.com/u/33179527?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mohammed Aslam P. A.</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=modaslam" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=modaslam" title="Documentation">📖</a></td>
   </tr>
 </table>
 

diff --git a/e2e/components/Toggle/Toggle-test.e2e.js b/e2e/components/Toggle/Toggle-test.e2e.js
@@ -29,6 +29,14 @@ test.describe('Toggle', () => {
           theme,
         });
       });
+
+      test('skeleton @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Toggle',
+          id: 'components-toggle--skeleton',
+          theme,
+        });
+      });
     });
   });
 

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -9086,33 +9086,13 @@ Map {
     },
   },
   "ToggleSkeleton" => Object {
-    "defaultProps": Object {
-      "aria-label": "Toggle is loading",
-      "size": "md",
-    },
     "propTypes": Object {
       "aria-label": Object {
-        "isRequired": true,
         "type": "string",
       },
       "className": Object {
         "type": "string",
       },
-      "id": Object {
-        "type": "string",
-      },
-      "labelText": Object {
-        "type": "string",
-      },
-      "size": Object {
-        "args": Array [
-          Array [
-            "sm",
-            "md",
-          ],
-        ],
-        "type": "oneOf",
-      },
     },
   },
   "ToggleSmallSkeleton" => Object {

diff --git a/packages/react/src/components/Toggle/Toggle.Skeleton.tsx b/packages/react/src/components/Toggle/Toggle.Skeleton.tsx
@@ -8,106 +8,37 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
-import { PrefixContext } from '../../internal/usePrefix';
+import { usePrefix } from '../../internal/usePrefix';
 
-type ToggleSkeletonProps = {
-  'aria-label': string;
-
-  /**
-   * Specify an optional className to add to the form item wrapper.
-   */
+interface ToggleSkeletonProps {
+  'aria-label'?: string;
   className?: string;
-
-  /**
-   * Provide an id that unique represents the underlying `<input>`
-   */
-  id?: string;
-
-  /**
-   * Provide the text that will be read by a screen reader when visiting this
-   * control
-   * `aria-label` is always required but will be null if `labelText` is also
-   * provided
-   */
-  labelText?: string;
-
-  /**
-   * Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
-   */
-  size?: 'sm' | 'md';
-} & React.HTMLAttributes<HTMLDivElement>;
-
-class ToggleSkeleton extends React.Component<ToggleSkeletonProps> {
-  static propTypes = {
-    ['aria-label']: PropTypes.string.isRequired,
-
-    /**
-     * Specify an optional className to add to the form item wrapper.
-     */
-    className: PropTypes.string,
-    /**
-     * Provide an id that unique represents the underlying `<input>`
-     */
-    id: PropTypes.string,
-
-    /**
-     * Provide the text that will be read by a screen reader when visiting this
-     * control
-     * `aria-label` is always required but will be undefined if `labelText` is also
-     * provided
-     */
-    labelText: PropTypes.string,
-
-    /**
-     * Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
-     */
-    size: PropTypes.oneOf(['sm', 'md']),
-  };
-
-  static defaultProps: Partial<ToggleSkeletonProps> = {
-    ['aria-label']: 'Toggle is loading',
-    size: 'md',
-  };
-
-  render() {
-    const { id, labelText, className, size, ...rest } = this.props;
-
-    return (
-      <PrefixContext.Consumer>
-        {(prefix) => {
-          const toggleInputClassNames = cx(
-            `${prefix}--toggle ${prefix}--skeleton`,
-            {
-              [`${prefix}--toggle-input--small`]: size === 'sm',
-            }
-          );
-
-          return (
-            <div className={cx(`${prefix}--form-item`, className)} {...rest}>
-              <input
-                type="checkbox"
-                id={id}
-                className={toggleInputClassNames}
-              />
-
-              <label
-                className={`${prefix}--toggle-input__label`}
-                htmlFor={id}
-                aria-label={labelText ? undefined : this.props['aria-label']}>
-                {labelText ? <div>{labelText}</div> : null}
-                <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>
-          );
-        }}
-      </PrefixContext.Consumer>
-    );
-  }
 }
 
+const ToggleSkeleton: React.FC<ToggleSkeletonProps> = ({
+  'aria-label': ariaLabel = 'Toggle is loading',
+  className,
+  ...rest
+}) => {
+  const prefix = usePrefix();
+
+  const skeletonClassNames = cx(
+    `${prefix}--toggle ${prefix}--toggle--skeleton`,
+    className
+  );
+
+  return (
+    <div className={skeletonClassNames} {...rest} aria-label={ariaLabel}>
+      <div className={`${prefix}--toggle__skeleton-circle`} />
+      <div className={`${prefix}--toggle__skeleton-rectangle`} />
+    </div>
+  );
+};
+
+ToggleSkeleton.propTypes = {
+  'aria-label': PropTypes.string,
+  className: PropTypes.string,
+};
+
 export default ToggleSkeleton;
 export { ToggleSkeleton };
diff --git a/packages/react/src/components/Toggle/Toggle.stories.js b/packages/react/src/components/Toggle/Toggle.stories.js
@@ -8,7 +8,7 @@
 import React from 'react';
 
 import { VStack } from '../Stack';
-import Toggle from '../Toggle';
+import Toggle, { ToggleSkeleton } from '../Toggle';
 
 export default {
   title: 'Components/Toggle',
@@ -106,3 +106,9 @@ export const WithAcessibleLabels = () => (
     </div>
   </VStack>
 );
+
+export const Skeleton = () => (
+  <div>
+    <ToggleSkeleton aria-label="Toggle is loading" />
+  </div>
+);
diff --git a/packages/styles/scss/components/toggle/_toggle.scss b/packages/styles/scss/components/toggle/_toggle.scss
@@ -194,4 +194,26 @@
     .#{$prefix}--toggle__switch {
     @include high-contrast-mode('focus');
   }
+
+  // Skeleton state
+  .#{$prefix}--toggle--skeleton {
+    display: flex;
+    align-items: center;
+  }
+
+  .#{$prefix}--toggle--skeleton .#{$prefix}--toggle__skeleton-circle {
+    @include circular-skeleton;
+
+    width: rem(18px);
+    height: rem(18px);
+    border-radius: 50%;
+  }
+
+  .#{$prefix}--toggle--skeleton .#{$prefix}--toggle__skeleton-rectangle {
+    @include skeleton;
+
+    width: rem(24px);
+    height: rem(8px);
+    margin-left: rem(8px);
+  }
 }
diff --git a/packages/styles/scss/utilities/_skeleton.scss b/packages/styles/scss/utilities/_skeleton.scss
@@ -42,3 +42,28 @@
     }
   }
 }
+
+/// Circular Skeleton loading animation
+/// @access public
+/// @example @include circular-skeleton;
+/// @group utilities
+@mixin circular-skeleton {
+  position: relative;
+  overflow: hidden;
+  background: $skeleton-background;
+  border-radius: 50%;
+
+  &::before {
+    position: absolute;
+    width: 200%;
+    height: 100%;
+    animation: 3000ms ease-in-out skeleton infinite;
+    background: $skeleton-element;
+    content: '';
+    will-change: transform-origin, transform, opacity;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  }
+}