Skip to content

Commit

Permalink
Badge: VR fixes (#3872)
Browse files Browse the repository at this point in the history
  • Loading branch information
@AlbertCarreras
AlbertCarreras authored Nov 14, 2024
1 parent cab8f80 commit 2047296
Show file tree
Hide file tree
Showing 13 changed files with 65 additions and 29 deletions.
1 change: 1 addition & 0 deletions packages/gestalt-icons-android/src/vr-theme/compact/ic_vr_compact-sparkle.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions packages/gestalt-icons-android/src/vr-theme/compact/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import compactChevronUp from './ic_vr_compact-chevron-up_gestalt.svg';
import compactDash from './ic_vr_compact-dash_gestalt.svg';
import compactInfoCircleFill from './ic_vr_compact-info-circle-fill_gestalt.svg';
import compactLock from './ic_vr_compact-lock_gestalt.svg';
import compactSparkle from './ic_vr_compact-sparkle.svg';
import compactWorkflowStatusProblem from './ic_vr_compact-workflow-status-problem_gestalt.svg';
import compactWorkflowStatusWarning from './ic_vr_compact-workflow-status-warning_gestalt.svg';

Expand All @@ -28,6 +29,7 @@ const icons = Object.freeze({
'compact-lock': compactLock,
'compact-workflow-status-problem': compactWorkflowStatusProblem,
'compact-workflow-status-warning': compactWorkflowStatusWarning,
'compact-sparkle': compactSparkle,
});

export default icons;
2 changes: 1 addition & 1 deletion packages/gestalt/src/Accordion/__snapshots__/ExpandableItem.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ exports[`AccordionExpandableItem renders correctly with badge 1`] = `
}
>
<div
className="badge info middle"
className="badge info padding middle"
>
<div
className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
Expand Down
11 changes: 8 additions & 3 deletions packages/gestalt/src/Badge.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,17 @@
composes: rounding1 from "./Borders.css";
align-content: center;
display: flex;
padding: var(--space-0) 6px;
white-space: nowrap;
}

.padding {
padding: var(--space-0) 6px;
}

.paddingVR {
padding: var(--sema-space-0) var(--sema-space-100);
}

.focusInnerBorder {
border: 2px solid var(--color-border-badge-default);
padding: var(--space-0) var(--space-100);
Expand All @@ -25,14 +32,12 @@
.middle {
composes: inlineBlock from "./Layout.css";
height: 20px;
min-height: 20px;
vertical-align: middle;
}

.top {
composes: inlineBlock from "./Layout.css";
height: 20px;
min-height: 20px;
vertical-align: super;
}

Expand Down
61 changes: 43 additions & 18 deletions packages/gestalt/src/Badge.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import styles from './Badge.css';
import Box from './Box';
import Flex from './Flex';
import Icon from './Icon';
import IconCompact from './IconCompact';
import TapArea from './TapArea';
import TextUI from './TextUI';
import Tooltip from './Tooltip';
Expand Down Expand Up @@ -90,16 +91,27 @@ export default function Badge({

const shouldUseTooltip = tooltip?.text;

const ICON_MAP = Object.freeze({
'info': 'info-circle',
'error': 'workflow-status-problem',
'warning': 'workflow-status-warning',
'success': 'check-circle',
'neutral': 'lock',
'recommendation': 'sparkle',
'darkWash': 'info-circle',
'lightWash': 'info-circle',
});
const ICON_MAP = isInVRExperiment
? Object.freeze({
'info': 'compact-info-circle-fill',
'error': 'compact-workflow-status-problem',
'warning': 'compact-workflow-status-warning',
'success': 'compact-check-circle-fill',
'neutral': 'compact-lock',
'recommendation': 'compact-sparkle',
'darkWash': 'compact-info-circle-fill',
'lightWash': 'compact-info-circle-fill',
})
: Object.freeze({
'info': 'info-circle',
'error': 'workflow-status-problem',
'warning': 'workflow-status-warning',
'success': 'check-circle',
'neutral': 'lock',
'recommendation': 'sparkle',
'darkWash': 'info-circle',
'lightWash': 'info-circle',
});

const COLOR_ICON_MAP = Object.freeze({
'info': 'info',
Expand Down Expand Up @@ -133,6 +145,8 @@ export default function Badge({
useInteractiveStates();

const cxStyles = cx(styles.badge, styles[styleType], {
[styles.padding]: !isInVRExperiment,
[styles.paddingVR]: isInVRExperiment,
[styles.middle]: !shouldUseTooltip && position === 'middle',
[styles.top]: !shouldUseTooltip && position === 'top',
[styles.focusInnerBorder]:
Expand All @@ -155,14 +169,25 @@ export default function Badge({
<Flex alignItems="center" gap={{ row: 1, column: 0 }}>
{shouldUseTooltip ? (
<Box alignContent="center" display="flex">
<Icon
accessibilityLabel=""
color={isInVRExperiment || type.endsWith('Wash') ? COLOR_ICON_MAP[type] : 'inverse'}
dataTestId={dataTestIdIcon}
icon={ICON_MAP[type] as ComponentProps<typeof Icon>['icon']}
inline
size={isInVRExperiment ? '12' : '14'}
/>
{isInVRExperiment ? (
<IconCompact
accessibilityLabel=""
color={COLOR_ICON_MAP[type]}
dataTestId={dataTestIdIcon}
icon={ICON_MAP[type] as ComponentProps<typeof IconCompact>['icon']}
inline
size="12"
/>
) : (
<Icon
accessibilityLabel=""
color={type.endsWith('Wash') ? COLOR_ICON_MAP[type] : 'inverse'}
dataTestId={dataTestIdIcon}
icon={ICON_MAP[type] as ComponentProps<typeof Icon>['icon']}
inline
size="14"
/>
)}
</Box>
) : null}
<Box alignContent="center" display="flex">
Expand Down
2 changes: 1 addition & 1 deletion packages/gestalt/src/__snapshots__/Accordion.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ exports[`Accordion renders a badge correctly 1`] = `
}
>
<div
className="badge info middle"
className="badge info padding middle"
>
<div
className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
Expand Down
2 changes: 1 addition & 1 deletion packages/gestalt/src/__snapshots__/Badge.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`Badge renders 1`] = `
<div
className="badge info middle"
className="badge info padding middle"
>
<div
className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
Expand Down
2 changes: 1 addition & 1 deletion packages/gestalt/src/__snapshots__/Datapoint.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ exports[`Datapoint renders a badge 1`] = `
className="FlexItem"
>
<div
className="badge info middle"
className="badge info padding middle"
>
<div
className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
Expand Down
4 changes: 2 additions & 2 deletions packages/gestalt/src/__snapshots__/Dropdown.jsdom.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -778,7 +778,7 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
,
</div>
<div
class="badge info middle"
class="badge info padding middle"
>
<div
class="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
Expand Down Expand Up @@ -857,7 +857,7 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
,
</div>
<div
class="badge info middle"
class="badge info padding middle"
>
<div
class="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
Expand Down
2 changes: 1 addition & 1 deletion packages/gestalt/src/__snapshots__/PageHeader.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -215,7 +215,7 @@ exports[`PageHeader renders badge with type 1`] = `
className="FlexItem"
>
<div
className="badge warning middle"
className="badge warning padding middle"
>
<div
className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
Expand Down
2 changes: 1 addition & 1 deletion packages/gestalt/src/__snapshots__/SideNavigation.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -358,7 +358,7 @@ exports[`SideNavigation renders Icon + Badge/Notification + Counter + Border 1`]
,
</div>
<div
className="badge info middle"
className="badge info padding middle"
>
<div
className="Flex rowGap100 columnGap0 xsDirectionRow xsItemsCenter"
Expand Down
1 change: 1 addition & 0 deletions packages/gestalt/src/icons-vr-theme/compact/compact-sparkle.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions packages/gestalt/src/icons-vr-theme/compact/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import compactChevronUp from './compact-chevron-up.svg';
import compactDash from './compact-dash.svg';
import compactInfoCircleFill from './compact-info-circle-fill.svg';
import compactLock from './compact-lock.svg';
import compactSparkle from './compact-sparkle.svg';
import compactWorkflowStatusProblem from './compact-workflow-status-problem.svg';
import compactWorkflowStatusWarning from './compact-workflow-status-warning.svg';

Expand All @@ -26,6 +27,7 @@ const icons = Object.freeze({
'compact-dash': compactDash,
'compact-info-circle-fill': compactInfoCircleFill,
'compact-lock': compactLock,
'compact-sparkle': compactSparkle,
'compact-workflow-status-problem': compactWorkflowStatusProblem,
'compact-workflow-status-warning': compactWorkflowStatusWarning,
});
Expand Down

0 comments on commit 2047296

Please sign in to comment.