Skip to content

Commit 7de2ef3

Browse files
modaslamfrancineluccakodiakhq[bot]
authored
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>
1 parent a000250 commit 7de2ef3

8 files changed

Lines changed: 101 additions & 118 deletions

File tree

‎.all-contributorsrc‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1186,6 +1186,16 @@
11861186
"contributions": [
11871187
"code"
11881188
]
1189+
},
1190+
{
1191+
"login": "modaslam",
1192+
"name": "Mohammed Aslam P. A.",
1193+
"avatar_url": "https://avatars.githubusercontent.com/u/33179527?v=4",
1194+
"profile": "https://github.com/modaslam",
1195+
"contributions": [
1196+
"code",
1197+
"doc"
1198+
]
11891199
}
11901200
],
11911201
"commitConvention": "none"

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -243,6 +243,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
243243
<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>
244244
<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>
245245
<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>
246+
<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>
246247
</tr>
247248
</table>
248249

‎e2e/components/Toggle/Toggle-test.e2e.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,14 @@ test.describe('Toggle', () => {
2929
theme,
3030
});
3131
});
32+
33+
test('skeleton @vrt', async ({ page }) => {
34+
await snapshotStory(page, {
35+
component: 'Toggle',
36+
id: 'components-toggle--skeleton',
37+
theme,
38+
});
39+
});
3240
});
3341
});
3442

‎packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap‎

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -9086,33 +9086,13 @@ Map {
90869086
},
90879087
},
90889088
"ToggleSkeleton" => Object {
9089-
"defaultProps": Object {
9090-
"aria-label": "Toggle is loading",
9091-
"size": "md",
9092-
},
90939089
"propTypes": Object {
90949090
"aria-label": Object {
9095-
"isRequired": true,
90969091
"type": "string",
90979092
},
90989093
"className": Object {
90999094
"type": "string",
91009095
},
9101-
"id": Object {
9102-
"type": "string",
9103-
},
9104-
"labelText": Object {
9105-
"type": "string",
9106-
},
9107-
"size": Object {
9108-
"args": Array [
9109-
Array [
9110-
"sm",
9111-
"md",
9112-
],
9113-
],
9114-
"type": "oneOf",
9115-
},
91169096
},
91179097
},
91189098
"ToggleSmallSkeleton" => Object {

‎packages/react/src/components/Toggle/Toggle.Skeleton.tsx‎

Lines changed: 28 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -8,106 +8,37 @@
88
import PropTypes from 'prop-types';
99
import React from 'react';
1010
import cx from 'classnames';
11-
import { PrefixContext } from '../../internal/usePrefix';
11+
import { usePrefix } from '../../internal/usePrefix';
1212

13-
type ToggleSkeletonProps = {
14-
'aria-label': string;
15-
16-
/**
17-
* Specify an optional className to add to the form item wrapper.
18-
*/
13+
interface ToggleSkeletonProps {
14+
'aria-label'?: string;
1915
className?: string;
20-
21-
/**
22-
* Provide an id that unique represents the underlying `<input>`
23-
*/
24-
id?: string;
25-
26-
/**
27-
* Provide the text that will be read by a screen reader when visiting this
28-
* control
29-
* `aria-label` is always required but will be null if `labelText` is also
30-
* provided
31-
*/
32-
labelText?: string;
33-
34-
/**
35-
* Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
36-
*/
37-
size?: 'sm' | 'md';
38-
} & React.HTMLAttributes<HTMLDivElement>;
39-
40-
class ToggleSkeleton extends React.Component<ToggleSkeletonProps> {
41-
static propTypes = {
42-
['aria-label']: PropTypes.string.isRequired,
43-
44-
/**
45-
* Specify an optional className to add to the form item wrapper.
46-
*/
47-
className: PropTypes.string,
48-
/**
49-
* Provide an id that unique represents the underlying `<input>`
50-
*/
51-
id: PropTypes.string,
52-
53-
/**
54-
* Provide the text that will be read by a screen reader when visiting this
55-
* control
56-
* `aria-label` is always required but will be undefined if `labelText` is also
57-
* provided
58-
*/
59-
labelText: PropTypes.string,
60-
61-
/**
62-
* Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
63-
*/
64-
size: PropTypes.oneOf(['sm', 'md']),
65-
};
66-
67-
static defaultProps: Partial<ToggleSkeletonProps> = {
68-
['aria-label']: 'Toggle is loading',
69-
size: 'md',
70-
};
71-
72-
render() {
73-
const { id, labelText, className, size, ...rest } = this.props;
74-
75-
return (
76-
<PrefixContext.Consumer>
77-
{(prefix) => {
78-
const toggleInputClassNames = cx(
79-
`${prefix}--toggle ${prefix}--skeleton`,
80-
{
81-
[`${prefix}--toggle-input--small`]: size === 'sm',
82-
}
83-
);
84-
85-
return (
86-
<div className={cx(`${prefix}--form-item`, className)} {...rest}>
87-
<input
88-
type="checkbox"
89-
id={id}
90-
className={toggleInputClassNames}
91-
/>
92-
93-
<label
94-
className={`${prefix}--toggle-input__label`}
95-
htmlFor={id}
96-
aria-label={labelText ? undefined : this.props['aria-label']}>
97-
{labelText ? <div>{labelText}</div> : null}
98-
<span className={`${prefix}--toggle__switch`}>
99-
<span className={`${prefix}--toggle__text--left`} />
100-
<span className={`${prefix}--toggle__appearance`} />
101-
<span className={`${prefix}--toggle__text--right`} />
102-
</span>
103-
</label>
104-
</div>
105-
);
106-
}}
107-
</PrefixContext.Consumer>
108-
);
109-
}
11016
}
11117

18+
const ToggleSkeleton: React.FC<ToggleSkeletonProps> = ({
19+
'aria-label': ariaLabel = 'Toggle is loading',
20+
className,
21+
...rest
22+
}) => {
23+
const prefix = usePrefix();
24+
25+
const skeletonClassNames = cx(
26+
`${prefix}--toggle ${prefix}--toggle--skeleton`,
27+
className
28+
);
29+
30+
return (
31+
<div className={skeletonClassNames} {...rest} aria-label={ariaLabel}>
32+
<div className={`${prefix}--toggle__skeleton-circle`} />
33+
<div className={`${prefix}--toggle__skeleton-rectangle`} />
34+
</div>
35+
);
36+
};
37+
38+
ToggleSkeleton.propTypes = {
39+
'aria-label': PropTypes.string,
40+
className: PropTypes.string,
41+
};
42+
11243
export default ToggleSkeleton;
11344
export { ToggleSkeleton };

‎packages/react/src/components/Toggle/Toggle.stories.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
import React from 'react';
99

1010
import { VStack } from '../Stack';
11-
import Toggle from '../Toggle';
11+
import Toggle, { ToggleSkeleton } from '../Toggle';
1212

1313
export default {
1414
title: 'Components/Toggle',
@@ -106,3 +106,9 @@ export const WithAcessibleLabels = () => (
106106
</div>
107107
</VStack>
108108
);
109+
110+
export const Skeleton = () => (
111+
<div>
112+
<ToggleSkeleton aria-label="Toggle is loading" />
113+
</div>
114+
);

‎packages/styles/scss/components/toggle/_toggle.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -194,4 +194,26 @@
194194
.#{$prefix}--toggle__switch {
195195
@include high-contrast-mode('focus');
196196
}
197+
198+
// Skeleton state
199+
.#{$prefix}--toggle--skeleton {
200+
display: flex;
201+
align-items: center;
202+
}
203+
204+
.#{$prefix}--toggle--skeleton .#{$prefix}--toggle__skeleton-circle {
205+
@include circular-skeleton;
206+
207+
width: rem(18px);
208+
height: rem(18px);
209+
border-radius: 50%;
210+
}
211+
212+
.#{$prefix}--toggle--skeleton .#{$prefix}--toggle__skeleton-rectangle {
213+
@include skeleton;
214+
215+
width: rem(24px);
216+
height: rem(8px);
217+
margin-left: rem(8px);
218+
}
197219
}

‎packages/styles/scss/utilities/_skeleton.scss‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,3 +42,28 @@
4242
}
4343
}
4444
}
45+
46+
/// Circular Skeleton loading animation
47+
/// @access public
48+
/// @example @include circular-skeleton;
49+
/// @group utilities
50+
@mixin circular-skeleton {
51+
position: relative;
52+
overflow: hidden;
53+
background: $skeleton-background;
54+
border-radius: 50%;
55+
56+
&::before {
57+
position: absolute;
58+
width: 200%;
59+
height: 100%;
60+
animation: 3000ms ease-in-out skeleton infinite;
61+
background: $skeleton-element;
62+
content: '';
63+
will-change: transform-origin, transform, opacity;
64+
65+
@media (prefers-reduced-motion: reduce) {
66+
animation: none;
67+
}
68+
}
69+
}

0 commit comments

Comments
 (0)