diff --git a/packages/components/src/components/toggle/_toggle.scss b/packages/components/src/components/toggle/_toggle.scss
index 6ab1e5d386db..7144f89327ef 100644
--- a/packages/components/src/components/toggle/_toggle.scss
+++ b/packages/components/src/components/toggle/_toggle.scss
@@ -448,7 +448,7 @@
}
.#{$prefix}--toggle-input__label & {
- margin-top: $carbon--spacing-05;
+ margin-top: $carbon--spacing-03;
}
}
@@ -512,103 +512,128 @@
cursor: not-allowed;
}
- .#{$prefix}--toggle-input:disabled
+ //----------------------------------------------
+ // Skeleton
+ // ---------------------------------------------
+ //md toggle input
+ .#{$prefix}--toggle.#{$prefix}--skeleton
+ .#{$prefix}--toggle-input__label
- > .#{$prefix}--toggle__switch {
- cursor: not-allowed;
+ .#{$prefix}--toggle__switch {
+ @include skeleton;
- &::before {
- background-color: $button-disabled;
- }
+ width: 3rem;
+ }
- &::after {
- background-color: $icon-on-color-disabled;
- }
+ //md skeleton label text
+ .#{$prefix}--toggle.#{$prefix}--skeleton
+ + .#{$prefix}--toggle-input__label
+ > div {
+ overflow: hidden;
+ width: 1.5rem;
+ height: 0.5rem;
+ //hides text
+ font-size: 0%;
+ line-height: 0;
- &::before,
- &::after {
- cursor: not-allowed;
- transition: $duration--fast-01 motion(exit, productive);
- }
+ @include skeleton;
}
- .#{$prefix}--toggle-input:disabled:active
+ //small toggle input
+ .#{$prefix}--toggle-input--small.#{$prefix}--skeleton
+ .#{$prefix}--toggle-input__label
- > .#{$prefix}--toggle__switch::before {
- box-shadow: none;
+ .#{$prefix}--toggle__switch {
+ @include skeleton;
+
+ width: 2rem;
}
- //----------------------------------------------
- // Small toggle
- // ---------------------------------------------
- .#{$prefix}--toggle-input--small + .#{$prefix}--toggle-input__label {
- > .#{$prefix}--toggle__switch {
- width: carbon--rem(32px);
- height: carbon--rem(16px);
+ //sm skeleton label text
+ .#{$prefix}--toggle-input--small.#{$prefix}--skeleton
+ + .#{$prefix}--toggle-input__label
+ > div {
+ overflow: hidden;
+ width: 1rem;
+ height: 0.5rem;
+ //hides text
+ font-size: 0%;
+ line-height: 0;
- &::before {
- width: carbon--rem(32px);
- height: carbon--rem(16px);
- border-radius: 0.9375rem;
- }
+ @include skeleton;
+ }
- &::after {
- width: carbon--rem(10px);
- height: carbon--rem(10px);
- }
- }
+ // on/off text skeleton
+ .#{$prefix}--toggle.#{$prefix}--skeleton
+ + .#{$prefix}--toggle-input__label
+ .#{$prefix}--toggle__switch
+ .#{$prefix}--toggle__text--left {
+ @include skeleton;
- .#{$prefix}--toggle__text--off,
- .#{$prefix}--toggle__text--on {
- margin-left: carbon--rem(40px);
- }
+ position: absolute;
+ width: 1rem;
+ height: 0.5rem;
}
- .#{$prefix}--toggle-input--small:checked
- + .#{$prefix}--toggle-input__label {
- > .#{$prefix}--toggle__switch::after {
- transform: translateX(carbon--rem(17px));
- }
+ .#{$prefix}--toggle-input--small.#{$prefix}--skeleton
+ + .#{$prefix}--toggle-input__label
+ .#{$prefix}--toggle__switch
+ .#{$prefix}--toggle__text--left {
+ left: 2rem;
+ }
- .#{$prefix}--toggle__check {
- fill: $support-success;
- transform: scale(1) translateX(carbon--rem(16px));
- }
+ //pseudo "toggle" button
+ .#{$prefix}--toggle.#{$prefix}--skeleton
+ + .#{$prefix}--toggle-input__label
+ .#{$prefix}--toggle__switch::after,
+ .#{$prefix}--toggle.#{$prefix}--skeleton
+ + .#{$prefix}--toggle-input__label
+ .#{$prefix}--toggle__appearance::after,
+ .#{$prefix}--toggle.#{$prefix}--skeleton
+ + .#{$prefix}--toggle-input__label
+ .#{$prefix}--toggle__appearance::before {
+ display: none;
}
- .#{$prefix}--toggle-input--small:disabled:checked
+ //make it square
+ .#{$prefix}--toggle.#{$prefix}--skeleton
+ .#{$prefix}--toggle-input__label
- .#{$prefix}--toggle__check {
- fill: $layer-disabled;
+ .#{$prefix}--toggle__switch::before {
+ border-radius: 0;
}
//----------------------------------------------
- // Skeleton
+ // Skeleton - ToggleSmall
+ // v11: remove these styles when component is no longer supported
+ /// @deprecated
// ---------------------------------------------
-
- .#{$prefix}--toggle__label.#{$prefix}--skeleton {
- flex-direction: column;
- align-items: flex-start;
+ .#{$prefix}--toggle-small__deprecated {
+ .#{$prefix}--skeleton {
+ display: flex;
+ flex-direction: column;
+ }
.#{$prefix}--toggle__label-text {
- margin-bottom: $carbon--spacing-03;
+ @include type-style('label-01');
+
+ margin: $carbon--spacing-03 0 $carbon--spacing-05 0;
+ color: $text-secondary;
}
- }
- // Windows HCM fix
- .#{$prefix}--toggle__switch::after,
- .#{$prefix}--toggle__switch::before {
- @include high-contrast-mode('outline');
- }
+ .#{$prefix}--toggle__appearance::after {
+ display: none;
+ }
- // stylelint-disable-next-line no-duplicate-selectors
- .#{$prefix}--toggle-input:focus
- + .#{$prefix}--toggle-input__label
- > .#{$prefix}--toggle__switch::before,
- .#{$prefix}--toggle-input:active
- + .#{$prefix}--toggle-input__label
- > .#{$prefix}--toggle__switch::before {
- @include high-contrast-mode('focus');
+ .#{$prefix}--toggle--small
+ + .#{$prefix}--toggle__label
+ .#{$prefix}--toggle__appearance::before {
+ border-radius: 0;
+ }
+
+ .#{$prefix}--toggle--small
+ + .#{$prefix}--toggle__label
+ .#{$prefix}--toggle__appearance {
+ left: -1rem;
+ @include skeleton;
+ }
}
}
}
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 375fc94eab71..e1edbd07d103 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -6622,6 +6622,7 @@ Map {
"ToggleSkeleton" => Object {
"defaultProps": Object {
"aria-label": "Toggle is loading",
+ "size": "md",
},
"propTypes": Object {
"aria-label": Object {
@@ -6637,6 +6638,15 @@ Map {
"labelText": Object {
"type": "string",
},
+ "size": Object {
+ "args": Array [
+ Array [
+ "sm",
+ "md",
+ ],
+ ],
+ "type": "oneOf",
+ },
},
},
"ToggleSmallSkeleton" => Object {
diff --git a/packages/react/src/components/Toggle/Toggle-story.js b/packages/react/src/components/Toggle/Toggle-story.js
index 22c4ca0b0068..9f7d8493a1f8 100644
--- a/packages/react/src/components/Toggle/Toggle-story.js
+++ b/packages/react/src/components/Toggle/Toggle-story.js
@@ -6,28 +6,9 @@
*/
import React from 'react';
-import { action } from '@storybook/addon-actions';
-import { withKnobs, text, boolean, select } from '@storybook/addon-knobs';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
import Toggle from '../Toggle';
-
-const sizes = {
- 'Small (sm)': 'sm',
- 'Medium (md) - default': undefined,
-};
-
-const toggleProps = () => ({
- 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'),
- disabled: boolean('Disabled (disabled)', false),
- onChange: action('onChange'),
- onToggle: action('onToggle'),
- size: select('Field size (size)', sizes, undefined) || undefined,
-});
+import ToggleSkeleton from '../Toggle/Toggle.Skeleton';
export default {
title: 'Components/Toggle',
@@ -42,8 +23,10 @@ export default {
export const Default = () => (