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

IconButtonFloating: VR fixes #3889

Merged
merged 3 commits into from
Nov 20, 2024
Merged

IconButtonFloating: VR fixes #3889

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
701d84a
moire
AlbertCarreras Nov 20, 2024
f253969
more
AlbertCarreras Nov 20, 2024
960c130
cnflict
AlbertCarreras Nov 20, 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
43 changes: 37 additions & 6 deletions packages/gestalt-design-tokens/tests/__snapshots__/web.test.js.snap
View file
Open in desktop

Large diffs are not rendered by default.

12 changes: 12 additions & 0 deletions packages/gestalt-design-tokens/tokens/classic/comp-web-color-dark.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,6 +215,18 @@
"value": "rgba(250, 250, 250, 0.6)"
}
},
"elevation": {
"default": {
"value": "{color.transparent.value}",
"_darkMode": "Unsupported color"
},
"hover": {
"value": "rgba(250, 250, 250, 0.5)"
},
"active": {
"value": "rgba(250, 250, 250, 0.6)"
}
},
"shopping": {
"default": {
"value": "{color.background.shopping.value}"
Expand Down
14 changes: 14 additions & 0 deletions packages/gestalt-design-tokens/tokens/classic/comp-web-color-light.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,20 @@
"value": "{color.background.secondary.base.value}"
}
},
"elevation": {
"default": {
"value": "{color.transparent.value}"
},
"hover": {
"value": "rgba(0, 0, 0, 0.06)"
},
"active": {
"value": "rgba(0, 0, 0, 0.1)"
},
"disabled": {
"value": "{color.background.secondary.base.value}"
}
},
"shopping": {
"default": {
"value": "{color.background.shopping.value}"
Expand Down
19 changes: 17 additions & 2 deletions packages/gestalt-design-tokens/tokens/vr-theme-web-mapping/comp-web-color-dark.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@
},
"tertiary": {
"default": {
"value": "transparent"
"value": "{base.color.transparent.value}"
},
"hover": {
"value": "{sema.color.hover.background.wash.default.value}"
Expand All @@ -108,13 +108,28 @@
},
"disabled": {
"default": {
"value": "transparent"
"value": "{base.color.transparent.value}"
},
"selected": {
"value": "{sema.color.background.disabled.value}"
}
}
},
"elevation": {
"default": {
"value": "{sema.color.background.elevation.value}"
},
"hover": {
"value": "{sema.color.hover.background.default.value}"
},
"active": {
"value": "{sema.color.pressed.background.default.value}"
},
"disabled": {
"value": "{sema.color.background.disabled.value}"
}
},

"gray": {
"default": {
"value": "{sema.color.background.tertiary.value}"
Expand Down
14 changes: 14 additions & 0 deletions packages/gestalt-design-tokens/tokens/vr-theme-web-mapping/comp-web-color-light.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,20 @@
"value": "{base.color.transparent.value}"
}
},
"elevation": {
"default": {
"value": "{sema.color.background.elevation.value}"
},
"hover": {
"value": "{sema.color.hover.background.default.value}"
},
"active": {
"value": "{sema.color.pressed.background.default.value}"
},
"disabled": {
"value": "{sema.color.background.disabled.value}"
}
},
"gray": {
"default": {
"value": "{sema.color.background.tertiary.value}"
Expand Down
9 changes: 5 additions & 4 deletions packages/gestalt/src/IconButton/InternalIconButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import classnames from 'classnames';
import styles from './InternalIconButton.css';
import Flex from '../Flex';
import icons from '../icons/index';
import Pog from '../Pog';
import InternalPog from '../Pog/InternalPog';
import touchableStyles from '../TapArea.css';
import TextUI from '../TextUI';
import Tooltip from '../Tooltip';
Expand All @@ -27,7 +27,8 @@ type Props = {
| 'lightGray'
| 'washLight'
| 'white'
| 'red';
| 'red'
| 'elevation';
dangerouslySetSvgPath?: {
__path: string;
};
Expand All @@ -44,7 +45,7 @@ type Props = {
// eslint-disable-next-line react/no-unused-prop-types
ref?: HTMLButtonElement;
selected?: boolean;
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 56;
tabIndex?: -1 | 0;
tooltip?: {
accessibilityLabel?: string;
Expand Down Expand Up @@ -174,7 +175,7 @@ const InternalIconButtonWithForwardRef = forwardRef<HTMLButtonElement, Props>(fu
type={type === 'submit' ? 'submit' : 'button'}
>
<div className={divStyles} style={compressStyle || undefined}>
<Pog
<InternalPog
active={!disabled && isActive}
bgColor={bgColor}
dangerouslySetSvgPath={dangerouslySetSvgPath}
Expand Down
4 changes: 2 additions & 2 deletions packages/gestalt/src/IconButtonFloating.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,13 +98,13 @@ const IconButtonFloatingWithForwardRef = forwardRef<HTMLButtonElement, Props>(
accessibilityExpanded={accessibilityExpanded}
accessibilityLabel={accessibilityLabel}
accessibilityPopupRole={accessibilityPopupRole}
bgColor="transparent"
bgColor={isInVRExperiment ? 'elevation' : 'transparent'}
dangerouslySetSvgPath={dangerouslySetSvgPath}
disabled={disabled}
icon={icon}
onClick={onClick}
selected={selected}
size="xl"
size={isInVRExperiment ? 56 : 'xl'}
tooltip={tooltip}
/>
</Box>
Expand Down
17 changes: 17 additions & 0 deletions packages/gestalt/src/Pog/InternalPog.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,3 +242,20 @@
.gray.disabled {
background-color: var(--color-background-button-gray-disabled);
}

.elevation {
background-color: var(--color-background-button-elevation-default);
}

.elevation.hovered,
.elevation.focused {
background-color: var(--color-background-button-elevation-hover);
}

.elevation.active {
background-color: var(--color-background-button-elevation-active);
}

.elevation.disabled {
background-color: var(--color-background-button-elevation-disabled);
}
19 changes: 12 additions & 7 deletions packages/gestalt/src/Pog/InternalPog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ type Props = {
| 'lightGray'
| 'washLight'
| 'white'
| 'red';
| 'red'
| 'elevation';
disabled?: boolean;
dangerouslySetSvgPath?: {
__path: string;
Expand All @@ -28,7 +29,7 @@ type Props = {
padding?: 1 | 2 | 3 | 4 | 5;
rounding?: '0' | '100' | '200' | '300' | '400' | '500' | 'circle';
selected?: boolean;
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 56;
};

export default function InternalPog({
Expand All @@ -53,27 +54,30 @@ export default function InternalPog({
});

const SIZE_NAME_TO_PADDING_PIXEL = isInVRExperiment
? {
? ({
xs: 6,
sm: 6,
md: 10,
lg: 12,
xl: 20,
}
: {
56: 16,
} as const)
: ({
xs: 6,
sm: 8,
md: 11,
lg: 14,
xl: 16,
};
56: 16,
} as const);

const SIZE_NAME_TO_ICON_SIZE_PIXEL = {
xs: 12,
sm: 16,
md: isInVRExperiment ? 16 : 18,
lg: isInVRExperiment ? 24 : 20,
xl: 24,
56: 24,
} as const;

const OLD_TO_NEW_COLOR_MAP = {
Expand All @@ -96,6 +100,7 @@ export default function InternalPog({
transparentDarkGray: isInVRExperiment ? 'light' : 'white',
washLight: isInVRExperiment ? 'dark' : 'darkGray',
white: 'darkGray',
elevation: 'darkGray',
} as const;

const color = (selected && 'white') || iconColor || defaultIconButtonIconColors[bgColor];
Expand Down Expand Up @@ -130,7 +135,7 @@ export default function InternalPog({
[styles.rounding100]: (!rounding && size === 'xs') || rounding === '100',
[styles.rounding200]: (!rounding && size === 'sm') || rounding === '200',
[styles.rounding300]: (!rounding && size === 'md') || rounding === '300',
[styles.rounding400]: (!rounding && size === 'lg') || rounding === '400',
[styles.rounding400]: (!rounding && (size === 'lg' || size === 56)) || rounding === '400',
[styles.rounding500]: (!rounding && size === 'xl') || rounding === '500',
[styles.roundingCircle]: rounding === 'circle',
[styles[bgColor]]: !selected,
Expand Down
50 changes: 48 additions & 2 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 @@ -234,6 +234,9 @@ exports[`ColorSchemeProvider renders styling for dark mode when specified 1`] =
--color-background-button-tertiary-default: rgba(0, 0, 0, 0);
--color-background-button-tertiary-hover: rgba(250, 250, 250, 0.5);
--color-background-button-tertiary-active: rgba(250, 250, 250, 0.6);
--color-background-button-elevation-default: rgba(0, 0, 0, 0);
--color-background-button-elevation-hover: rgba(250, 250, 250, 0.5);
--color-background-button-elevation-active: rgba(250, 250, 250, 0.6);
--color-background-button-shopping-default: #75bfff;
--color-background-button-shopping-hover: #4a8ad4;
--color-background-button-shopping-active: #4a85c9;
Expand Down Expand Up @@ -725,6 +728,10 @@ exports[`ColorSchemeProvider renders styling for light mode when no color scheme
--color-background-button-tertiary-hover: rgba(0, 0, 0, 0.06);
--color-background-button-tertiary-active: rgba(0, 0, 0, 0.1);
--color-background-button-tertiary-disabled: #e9e9e9;
--color-background-button-elevation-default: rgba(0, 0, 0, 0);
--color-background-button-elevation-hover: rgba(0, 0, 0, 0.06);
--color-background-button-elevation-active: rgba(0, 0, 0, 0.1);
--color-background-button-elevation-disabled: #e9e9e9;
--color-background-button-shopping-default: #0074e8;
--color-background-button-shopping-hover: #4a8ad4;
--color-background-button-shopping-active: #4a85c9;
Expand Down Expand Up @@ -1243,6 +1250,10 @@ exports[`ColorSchemeProvider renders styling for light mode when specified 1`] =
--color-background-button-tertiary-hover: rgba(0, 0, 0, 0.06);
--color-background-button-tertiary-active: rgba(0, 0, 0, 0.1);
--color-background-button-tertiary-disabled: #e9e9e9;
--color-background-button-elevation-default: rgba(0, 0, 0, 0);
--color-background-button-elevation-hover: rgba(0, 0, 0, 0.06);
--color-background-button-elevation-active: rgba(0, 0, 0, 0.1);
--color-background-button-elevation-disabled: #e9e9e9;
--color-background-button-shopping-default: #0074e8;
--color-background-button-shopping-hover: #4a8ad4;
--color-background-button-shopping-active: #4a85c9;
Expand Down Expand Up @@ -1761,6 +1772,10 @@ exports[`ColorSchemeProvider renders styling with a custom class if has an id 1`
--color-background-button-tertiary-hover: rgba(0, 0, 0, 0.06);
--color-background-button-tertiary-active: rgba(0, 0, 0, 0.1);
--color-background-button-tertiary-disabled: #e9e9e9;
--color-background-button-elevation-default: rgba(0, 0, 0, 0);
--color-background-button-elevation-hover: rgba(0, 0, 0, 0.06);
--color-background-button-elevation-active: rgba(0, 0, 0, 0.1);
--color-background-button-elevation-disabled: #e9e9e9;
--color-background-button-shopping-default: #0074e8;
--color-background-button-shopping-hover: #4a8ad4;
--color-background-button-shopping-active: #4a85c9;
Expand Down Expand Up @@ -2277,6 +2292,9 @@ exports[`ColorSchemeProvider renders styling with media query when userPreferenc
--color-background-button-tertiary-default: rgba(0, 0, 0, 0);
--color-background-button-tertiary-hover: rgba(250, 250, 250, 0.5);
--color-background-button-tertiary-active: rgba(250, 250, 250, 0.6);
--color-background-button-elevation-default: rgba(0, 0, 0, 0);
--color-background-button-elevation-hover: rgba(250, 250, 250, 0.5);
--color-background-button-elevation-active: rgba(250, 250, 250, 0.6);
--color-background-button-shopping-default: #75bfff;
--color-background-button-shopping-hover: #4a8ad4;
--color-background-button-shopping-active: #4a85c9;
Expand Down Expand Up @@ -3327,11 +3345,15 @@ exports[`visual refresh tokens uses visual refresh dark mode theme when specifie
--color-background-button-secondary-hover: #626260;
--color-background-button-secondary-active: #585856;
--color-background-button-secondary-disabled: #2e2e2d;
--color-background-button-tertiary-default: rgba(0, 0, 0, 0);
--color-background-button-tertiary-default: rgba(255, 255, 255, 0);
--color-background-button-tertiary-hover: rgba(36, 36, 35, 0.85);
--color-background-button-tertiary-active: rgba(57, 57, 55, 0.9);
--color-background-button-tertiary-disabled-default: rgba(0, 0, 0, 0);
--color-background-button-tertiary-disabled-default: rgba(255, 255, 255, 0);
--color-background-button-tertiary-disabled-selected: #2e2e2d;
--color-background-button-elevation-default: #2e2e2d;
--color-background-button-elevation-hover: #242423;
--color-background-button-elevation-active: #393937;
--color-background-button-elevation-disabled: #2e2e2d;
--color-background-button-gray-default: #c7c6c1;
--color-background-button-gray-hover: #b2b0ae;
--color-background-button-gray-active: #969292;
Expand Down Expand Up @@ -4332,6 +4354,10 @@ exports[`visual refresh tokens uses visual refresh light mode theme when specifi
--color-background-button-tertiary-hover: rgba(248, 247, 242, 0.95);
--color-background-button-tertiary-active: #ebebe5;
--color-background-button-tertiary-disabled: rgba(255, 255, 255, 0);
--color-background-button-elevation-default: #ffffff;
--color-background-button-elevation-hover: #f8f7f2;
--color-background-button-elevation-active: #ebebe5;
--color-background-button-elevation-disabled: #e8e7e1;
--color-background-button-gray-default: #757570;
--color-background-button-gray-hover: #626260;
--color-background-button-gray-active: #585856;
Expand Down Expand Up @@ -5331,6 +5357,10 @@ exports[`visual refresh tokens uses visual refresh with ck line height 1`] = `
--color-background-button-tertiary-hover: rgba(248, 247, 242, 0.95);
--color-background-button-tertiary-active: #ebebe5;
--color-background-button-tertiary-disabled: rgba(255, 255, 255, 0);
--color-background-button-elevation-default: #ffffff;
--color-background-button-elevation-hover: #f8f7f2;
--color-background-button-elevation-active: #ebebe5;
--color-background-button-elevation-disabled: #e8e7e1;
--color-background-button-gray-default: #757570;
--color-background-button-gray-hover: #626260;
--color-background-button-gray-active: #585856;
Expand Down Expand Up @@ -6330,6 +6360,10 @@ exports[`visual refresh tokens uses visual refresh with ja line height 1`] = `
--color-background-button-tertiary-hover: rgba(248, 247, 242, 0.95);
--color-background-button-tertiary-active: #ebebe5;
--color-background-button-tertiary-disabled: rgba(255, 255, 255, 0);
--color-background-button-elevation-default: #ffffff;
--color-background-button-elevation-hover: #f8f7f2;
--color-background-button-elevation-active: #ebebe5;
--color-background-button-elevation-disabled: #e8e7e1;
--color-background-button-gray-default: #757570;
--color-background-button-gray-hover: #626260;
--color-background-button-gray-active: #585856;
Expand Down Expand Up @@ -7329,6 +7363,10 @@ exports[`visual refresh tokens uses visual refresh with tall line height 1`] = `
--color-background-button-tertiary-hover: rgba(248, 247, 242, 0.95);
--color-background-button-tertiary-active: #ebebe5;
--color-background-button-tertiary-disabled: rgba(255, 255, 255, 0);
--color-background-button-elevation-default: #ffffff;
--color-background-button-elevation-hover: #f8f7f2;
--color-background-button-elevation-active: #ebebe5;
--color-background-button-elevation-disabled: #e8e7e1;
--color-background-button-gray-default: #757570;
--color-background-button-gray-hover: #626260;
--color-background-button-gray-active: #585856;
Expand Down Expand Up @@ -8328,6 +8366,10 @@ exports[`visual refresh tokens uses visual refresh with th line height 1`] = `
--color-background-button-tertiary-hover: rgba(248, 247, 242, 0.95);
--color-background-button-tertiary-active: #ebebe5;
--color-background-button-tertiary-disabled: rgba(255, 255, 255, 0);
--color-background-button-elevation-default: #ffffff;
--color-background-button-elevation-hover: #f8f7f2;
--color-background-button-elevation-active: #ebebe5;
--color-background-button-elevation-disabled: #e8e7e1;
--color-background-button-gray-default: #757570;
--color-background-button-gray-hover: #626260;
--color-background-button-gray-active: #585856;
Expand Down Expand Up @@ -9327,6 +9369,10 @@ exports[`visual refresh tokens uses visual refresh with vi line height 1`] = `
--color-background-button-tertiary-hover: rgba(248, 247, 242, 0.95);
--color-background-button-tertiary-active: #ebebe5;
--color-background-button-tertiary-disabled: rgba(255, 255, 255, 0);
--color-background-button-elevation-default: #ffffff;
--color-background-button-elevation-hover: #f8f7f2;
--color-background-button-elevation-active: #ebebe5;
--color-background-button-elevation-disabled: #e8e7e1;
--color-background-button-gray-default: #757570;
--color-background-button-gray-hover: #626260;
--color-background-button-gray-active: #585856;
Expand Down
Loading