Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Spinner: VR implementation changes #3774

Merged
merged 12 commits into from
Oct 1, 2024
Merged

Spinner: VR implementation changes #3774

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
a5b9599
WIP
diyorbek Sep 23, 2024
f19241d
WIP
diyorbek Sep 26, 2024
a0dec4f
WIP
diyorbek Sep 27, 2024
57c1805
WIP
diyorbek Sep 27, 2024
b69fd4c
WIP
diyorbek Sep 27, 2024
16123bc
WIP
diyorbek Sep 27, 2024
890480b
WIP
diyorbek Sep 27, 2024
12f75c1
refine
diyorbek Sep 30, 2024
72f3583
WIP
diyorbek Sep 30, 2024
3dc4be1
WIP
diyorbek Sep 30, 2024
6b5758e
WIP
diyorbek Sep 30, 2024
f0a84c6
WIP
diyorbek Sep 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .stylelintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
"ignoreProperties": ["composes"]
}
],
"custom-property-pattern": "g|color|font|elevation|space|opacity|motion|font-.+",
"custom-property-pattern": "g|color|font|elevation|space|opacity|motion|font-.+|size",
diyorbek marked this conversation as resolved.
Show resolved Hide resolved
"value-keyword-case": [
"lower",
{
Expand Down
1 change: 1 addition & 0 deletions packages/gestalt-design-tokens/build.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -370,6 +370,7 @@ function getSources({ theme, modeTheme, platform, language }) {
'tokens/vr-theme/sema/space.json',
`tokens/vr-theme/sema/text/language/${language}.json`,
'tokens/vr-theme/sema/motion.json',
'tokens/vr-theme/comp/spinner.json',
...(theme === 'vr-theme-web-mapping'
? [
`tokens/vr-theme-web-mapping/base-color-dataviz-${modeTheme}.json`,
Expand Down
52 changes: 44 additions & 8 deletions packages/gestalt-design-tokens/tests/__snapshots__/web.test.js.snap
View file
Open in desktop

Large diffs are not rendered by default.

34 changes: 34 additions & 0 deletions packages/gestalt-design-tokens/tokens/vr-theme/comp/spinner.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
{
"comp": {
diyorbek marked this conversation as resolved.
Show resolved Hide resolved
"spinner": {
"size": {
diyorbek marked this conversation as resolved.
Show resolved Hide resolved
"lg": {
"type": "dimension",
"value": "48px"
},
"md": {
"type": "dimension",
"value": "40px"
},
"sm": {
"type": "dimension",
"value": "32px"
}
},
"color": {
"1": {
"type": "color",
"value": "#d452d1"
},
"2": {
"type": "color",
"value": "#ff7c36"
},
"3": {
"type": "color",
"value": "#24ccb0"
}
}
}
}
}
14 changes: 14 additions & 0 deletions packages/gestalt/src/Spinner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import Box from './Box';
import { useDefaultLabelContext } from './contexts/DefaultLabelProvider';
import Icon from './Icon';
import styles from './Spinner.css';
import VRSpinner from './Spinner/VRSpinner';
import useInExperiment from './useInExperiment';

const SIZE_NAME_TO_PIXEL = {
sm: 32,
Expand Down Expand Up @@ -46,6 +48,18 @@ export default function Spinner({
size = 'md',
}: Props) {
const { accessibilityLabel: accessibilityLabelDefault } = useDefaultLabelContext('Spinner');

const isInVRExperiment = useInExperiment({
webExperimentName: 'web_gestalt_visualRefresh',
mwebExperimentName: 'web_gestalt_visualRefresh',
});

if (isInVRExperiment) {
return (
<VRSpinner accessibilityLabel={accessibilityLabel} delay={delay} show={show} size={size} />
);
}

return show ? (
<Box display="flex" justifyContent="around" overflow="hidden">
<div className={classnames(styles.icon, { [styles.delay]: delay })}>
Expand Down
111 changes: 111 additions & 0 deletions packages/gestalt/src/Spinner/VRSpinner.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
.spinner {
--g-dot-size: calc(var(--g-size) / 3);
--g-dot-space: calc(var(--g-dot-size) * 1.75);

height: var(--g-size);
width: var(--g-size);
}

.lg {
--g-size: var(--comp-spinner-size-lg);
}

.md {
--g-size: var(--comp-spinner-size-md);
}

.sm {
--g-size: var(--comp-spinner-size-sm);
diyorbek marked this conversation as resolved.
Show resolved Hide resolved
}

.spinnerFrame {
animation: spin 1500ms linear infinite;
box-sizing: border-box;
height: calc(var(--g-dot-space) * sqrt(3) / 2);
left: calc(var(--g-dot-size) * 0.625);
position: relative;
top: calc(var(--g-dot-size) / 2);
transform-origin: center calc(var(--g-dot-space) / sqrt(3));
width: var(--g-dot-space);
}

.spinnerFrame > div {
animation-composition: add;
animation-duration: 800ms, 1.8s;
animation-iteration-count: infinite;
animation-name: scale, colors;
animation-timing-function: linear;
border-radius: 50%;
diyorbek marked this conversation as resolved.
Show resolved Hide resolved
height: var(--g-dot-size);
position: absolute;
width: var(--g-dot-size);
}

.dot1 {
animation-delay: 0s;
left: 50%;
top: 0;
transform: translate3d(-50%, -50%, 0);
}

.dot2 {
animation-delay: 100ms, 0s;
diyorbek marked this conversation as resolved.
Show resolved Hide resolved
bottom: 0;
diyorbek marked this conversation as resolved.
Show resolved Hide resolved
left: 0;
transform: translate3d(-50%, 50%, 0);
}

.dot3 {
animation-delay: 200ms, 0s;
bottom: 0;
right: 0;
transform: translate3d(50%, 50%, 0);
}

.delay {
animation-delay: 300ms;
animation-duration: 0s;
animation-fill-mode: forwards;
animation-name: delay;
opacity: var(--sema-opacity-0);
}

@keyframes delay {
to {
opacity: var(--sema-opacity-100);
}
}

@keyframes spin {
to {
transform: rotate(360deg);
}
}

@keyframes scale {
50% {
transform: scale(0.8);
}

100% {
transform: scale(1);
}
}

@keyframes colors {
0% {
background-color: var(--comp-spinner-color-1);
}

33.333% {
background-color: var(--comp-spinner-color-2);
}

66.666% {
background-color: var(--comp-spinner-color-3);
diyorbek marked this conversation as resolved.
Show resolved Hide resolved
}

100% {
background-color: var(--comp-spinner-color-1);
}
}
31 changes: 31 additions & 0 deletions packages/gestalt/src/Spinner/VRSpinner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import classnames from 'classnames';
import styles from './VRSpinner.css';
import { useDefaultLabelContext } from '../contexts/DefaultLabelProvider';

type Props = {
accessibilityLabel?: string;
delay?: boolean;
show: boolean;
size?: 'sm' | 'md' | 'lg';
};

export default function Spinner({ accessibilityLabel, delay = true, show, size = 'md' }: Props) {
const { accessibilityLabel: accessibilityLabelDefault } = useDefaultLabelContext('Spinner');

if (!show) return <div />;
diyorbek marked this conversation as resolved.
Show resolved Hide resolved

return (
<div
aria-label={accessibilityLabel ?? accessibilityLabelDefault}
className={classnames(styles.spinner, styles[size], { [styles.delay]: delay })}
>
<div className={styles.spinnerFrame}>
<div className={styles.dot1} />
<div className={styles.dot2} />
<div className={styles.dot3} />
</div>
</div>
);
}

Spinner.displayName = 'Spinner';
42 changes: 42 additions & 0 deletions packages/gestalt/src/contexts/__snapshots__/ColorSchemeProvider.jsdom.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2879,6 +2879,12 @@ exports[`visual refresh tokens uses visual refresh dark mode theme when specifie
--sema-motion-opacity-duration-instant: 0ms;
--sema-motion-opacity-easing-default: cubic-bezier(0, 0, 1, 1);
--sema-motion-opacity-easing-instant: cubic-bezier(0, 0, 1, 1);
--comp-spinner-size-lg: 48px;
--comp-spinner-size-md: 40px;
--comp-spinner-size-sm: 32px;
--comp-spinner-color-1: #d452d1;
--comp-spinner-color-2: #ff7c36;
--comp-spinner-color-3: #24ccb0;
--color-data-visualization-10: #007a72;
--color-data-visualization-11: #f76593;
--color-data-visualization-12: #ffc58f;
Expand Down Expand Up @@ -3821,6 +3827,12 @@ exports[`visual refresh tokens uses visual refresh light mode theme when specifi
--sema-motion-opacity-duration-instant: 0ms;
--sema-motion-opacity-easing-default: cubic-bezier(0, 0, 1, 1);
--sema-motion-opacity-easing-instant: cubic-bezier(0, 0, 1, 1);
--comp-spinner-size-lg: 48px;
--comp-spinner-size-md: 40px;
--comp-spinner-size-sm: 32px;
--comp-spinner-color-1: #d452d1;
--comp-spinner-color-2: #ff7c36;
--comp-spinner-color-3: #24ccb0;
--color-data-visualization-10: #005062;
--color-data-visualization-11: #de2c62;
--color-data-visualization-12: #660e00;
Expand Down Expand Up @@ -4761,6 +4773,12 @@ exports[`visual refresh tokens uses visual refresh with ck line height 1`] = `
--sema-motion-opacity-duration-instant: 0ms;
--sema-motion-opacity-easing-default: cubic-bezier(0, 0, 1, 1);
--sema-motion-opacity-easing-instant: cubic-bezier(0, 0, 1, 1);
--comp-spinner-size-lg: 48px;
--comp-spinner-size-md: 40px;
--comp-spinner-size-sm: 32px;
--comp-spinner-color-1: #d452d1;
--comp-spinner-color-2: #ff7c36;
--comp-spinner-color-3: #24ccb0;
--color-data-visualization-10: #005062;
--color-data-visualization-11: #de2c62;
--color-data-visualization-12: #660e00;
Expand Down Expand Up @@ -5701,6 +5719,12 @@ exports[`visual refresh tokens uses visual refresh with ja line height 1`] = `
--sema-motion-opacity-duration-instant: 0ms;
--sema-motion-opacity-easing-default: cubic-bezier(0, 0, 1, 1);
--sema-motion-opacity-easing-instant: cubic-bezier(0, 0, 1, 1);
--comp-spinner-size-lg: 48px;
--comp-spinner-size-md: 40px;
--comp-spinner-size-sm: 32px;
--comp-spinner-color-1: #d452d1;
--comp-spinner-color-2: #ff7c36;
--comp-spinner-color-3: #24ccb0;
--color-data-visualization-10: #005062;
--color-data-visualization-11: #de2c62;
--color-data-visualization-12: #660e00;
Expand Down Expand Up @@ -6641,6 +6665,12 @@ exports[`visual refresh tokens uses visual refresh with tall line height 1`] = `
--sema-motion-opacity-duration-instant: 0ms;
--sema-motion-opacity-easing-default: cubic-bezier(0, 0, 1, 1);
--sema-motion-opacity-easing-instant: cubic-bezier(0, 0, 1, 1);
--comp-spinner-size-lg: 48px;
--comp-spinner-size-md: 40px;
--comp-spinner-size-sm: 32px;
--comp-spinner-color-1: #d452d1;
--comp-spinner-color-2: #ff7c36;
--comp-spinner-color-3: #24ccb0;
--color-data-visualization-10: #005062;
--color-data-visualization-11: #de2c62;
--color-data-visualization-12: #660e00;
Expand Down Expand Up @@ -7581,6 +7611,12 @@ exports[`visual refresh tokens uses visual refresh with th line height 1`] = `
--sema-motion-opacity-duration-instant: 0ms;
--sema-motion-opacity-easing-default: cubic-bezier(0, 0, 1, 1);
--sema-motion-opacity-easing-instant: cubic-bezier(0, 0, 1, 1);
--comp-spinner-size-lg: 48px;
--comp-spinner-size-md: 40px;
--comp-spinner-size-sm: 32px;
--comp-spinner-color-1: #d452d1;
--comp-spinner-color-2: #ff7c36;
--comp-spinner-color-3: #24ccb0;
--color-data-visualization-10: #005062;
--color-data-visualization-11: #de2c62;
--color-data-visualization-12: #660e00;
Expand Down Expand Up @@ -8521,6 +8557,12 @@ exports[`visual refresh tokens uses visual refresh with vi line height 1`] = `
--sema-motion-opacity-duration-instant: 0ms;
--sema-motion-opacity-easing-default: cubic-bezier(0, 0, 1, 1);
--sema-motion-opacity-easing-instant: cubic-bezier(0, 0, 1, 1);
--comp-spinner-size-lg: 48px;
--comp-spinner-size-md: 40px;
--comp-spinner-size-sm: 32px;
--comp-spinner-color-1: #d452d1;
--comp-spinner-color-2: #ff7c36;
--comp-spinner-color-3: #24ccb0;
--color-data-visualization-10: #005062;
--color-data-visualization-11: #de2c62;
--color-data-visualization-12: #660e00;
Expand Down
Loading