Skip to content

Commit

Permalink
review comments
Browse files Browse the repository at this point in the history
  • Loading branch information
@dmytrokirpa
dmytrokirpa committed Oct 2, 2024
1 parent 7c95a38 commit 75a68d3
Show file tree
Hide file tree
Showing 10 changed files with 90 additions and 150 deletions.
16 changes: 8 additions & 8 deletions apps/vr-tests-react-components/src/stories/Tabs.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -207,8 +207,8 @@ export const WithIconOnlyAndVertical = () => (

WithIconOnlyAndVertical.storyName = 'With icon only and vertical';

export const CircularSubtleAppearance = () => (
<TabList appearance="subtle" shape="circular">
export const SubtleRoundedAppearance = () => (
<TabList appearance="subtle-rounded">
<Tab value="1">First</Tab>
<Tab className="mouse-target" value="2">
Second
Expand All @@ -217,12 +217,12 @@ export const CircularSubtleAppearance = () => (
</TabList>
);

export const CircularSubtleAppearanceDarkMode = getStoryVariant(CircularSubtleAppearance, DARK_MODE);
export const SubtleRoundedAppearanceDarkMode = getStoryVariant(SubtleRoundedAppearance, DARK_MODE);

export const CircularSubtleAppearanceHighContrast = getStoryVariant(CircularSubtleAppearance, HIGH_CONTRAST);
export const SubtleRoundedAppearanceHighContrast = getStoryVariant(SubtleRoundedAppearance, HIGH_CONTRAST);

export const CircularFilledAppearance = () => (
<TabList appearance="filled" shape="circular">
export const FilledRoundedAppearance = () => (
<TabList appearance="filled-rounded">
<Tab value="1">First</Tab>
<Tab className="mouse-target" value="2">
Second
Expand All @@ -231,6 +231,6 @@ export const CircularFilledAppearance = () => (
</TabList>
);

export const CircularFilledAppearanceDarkMode = getStoryVariant(CircularFilledAppearance, DARK_MODE);
export const FilledRoundedAppearanceDarkMode = getStoryVariant(FilledRoundedAppearance, DARK_MODE);

export const CircularFilledAppearanceHighContrast = getStoryVariant(CircularFilledAppearance, HIGH_CONTRAST);
export const FilledRoundedAppearanceHighContrast = getStoryVariant(FilledRoundedAppearance, HIGH_CONTRAST);
10 changes: 2 additions & 8 deletions packages/react-components/react-tabs/library/src/components/Tab/Tab.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,9 @@ export type TabState = ComponentState<TabInternalSlots> &
Pick<TabProps, 'value'> &
Required<Pick<TabProps, 'disabled'>> & {
/**
* A tab supports 'transparent' and 'subtle' appearance.
* A tab supports 'transparent', 'subtle', `subtle-rounded` and `filled-rounded` appearance.
*/
appearance?: 'transparent' | 'subtle' | 'filled';
appearance?: 'transparent' | 'subtle' | 'subtle-rounded' | 'filled-rounded';

/**
* A tab can have only an icon slot filled and no content.
Expand All @@ -73,12 +73,6 @@ export type TabState = ComponentState<TabInternalSlots> &
* A tab can be either 'small', 'medium', or 'large' size.
*/
size: 'small' | 'medium' | 'large';

/**
* A tab can have a circular shape. Could be used only with 'filled' or 'subtle' appearance.
*/
shape?: 'circular';

/**
* A tab can arrange its content based on if the tabs in the list are arranged vertically.
*/
Expand Down
2 changes: 0 additions & 2 deletions packages/react-components/react-tabs/library/src/components/Tab/useTab.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ export const useTab_unstable = (props: TabProps, ref: React.Ref<HTMLElement>): T
const onSelect = useTabListContext_unstable(ctx => ctx.onSelect);
const size = useTabListContext_unstable(ctx => ctx.size);
const vertical = useTabListContext_unstable(ctx => !!ctx.vertical);
const shape = useTabListContext_unstable(ctx => ctx.shape);
const disabled = listDisabled || tabDisabled;

const innerRef = React.useRef<HTMLElement>(null);
Expand Down Expand Up @@ -89,7 +88,6 @@ export const useTab_unstable = (props: TabProps, ref: React.Ref<HTMLElement>): T
elementType: 'span',
}),
appearance,
shape,
disabled,
selected,
size,
Expand Down
129 changes: 61 additions & 68 deletions packages/react-components/react-tabs/library/src/components/Tab/useTabStyles.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,55 +88,55 @@ const useRootStyles = makeStyles({
},
transparent: {
backgroundColor: tokens.colorTransparentBackground,
':hover': {
':enabled:hover': {
backgroundColor: tokens.colorTransparentBackgroundHover,
},
':active': {
':enabled:active': {
backgroundColor: tokens.colorTransparentBackgroundPressed,
},
'& .fui-Tab__icon': {
color: tokens.colorNeutralForeground2,
},
':hover .fui-Tab__icon': {
':enabled:hover .fui-Tab__icon': {
color: tokens.colorNeutralForeground2Hover,
},
':active .fui-Tab__icon': {
':enabled:active .fui-Tab__icon': {
color: tokens.colorNeutralForeground2Pressed,
},
'& .fui-Tab__content': {
color: tokens.colorNeutralForeground2,
},
':hover .fui-Tab__content': {
':enabled:hover .fui-Tab__content': {
color: tokens.colorNeutralForeground2Hover,
},
':active .fui-Tab__content': {
':enabled:active .fui-Tab__content': {
color: tokens.colorNeutralForeground2Pressed,
},
},
subtle: {
backgroundColor: tokens.colorSubtleBackground,
':hover': {
':enabled:hover': {
backgroundColor: tokens.colorSubtleBackgroundHover,
},
':active': {
':enabled:active': {
backgroundColor: tokens.colorSubtleBackgroundPressed,
},
'& .fui-Tab__icon': {
color: tokens.colorNeutralForeground2,
},
':hover .fui-Tab__icon': {
':enabled:hover .fui-Tab__icon': {
color: tokens.colorNeutralForeground2Hover,
},
':active .fui-Tab__icon': {
':enabled:active .fui-Tab__icon': {
color: tokens.colorNeutralForeground2Pressed,
},
'& .fui-Tab__content': {
color: tokens.colorNeutralForeground2,
},
':hover .fui-Tab__content': {
':enabled:hover .fui-Tab__content': {
color: tokens.colorNeutralForeground2Hover,
},
':active .fui-Tab__content': {
':enabled:active .fui-Tab__content': {
color: tokens.colorNeutralForeground2Pressed,
},
},
Expand All @@ -155,26 +155,23 @@ const useRootStyles = makeStyles({
'& .fui-Tab__icon': {
color: tokens.colorCompoundBrandForeground1,
},
':hover .fui-Tab__icon': {
':enabled:hover .fui-Tab__icon': {
color: tokens.colorCompoundBrandForeground1Hover,
},
':active .fui-Tab__icon': {
':enabled:active .fui-Tab__icon': {
color: tokens.colorCompoundBrandForeground1Pressed,
},
'& .fui-Tab__content': {
color: tokens.colorNeutralForeground1,
},
':hover .fui-Tab__content': {
':enabled:hover .fui-Tab__content': {
color: tokens.colorNeutralForeground1Hover,
},
':active .fui-Tab__content': {
':enabled:active .fui-Tab__content': {
color: tokens.colorNeutralForeground1Pressed,
},
},
});

const useCircularStyles = makeStyles({
base: {
rounded: {
borderRadius: tokens.borderRadiusCircular,
'& .fui-Tab__icon': {
color: 'inherit',
Expand All @@ -183,79 +180,75 @@ const useCircularStyles = makeStyles({
color: 'inherit',
},
},
subtle: {
subtleRounded: {
backgroundColor: tokens.colorTransparentBackground,
border: `solid ${tokens.strokeWidthThin} ${tokens.colorTransparentStroke}`,
color: tokens.colorNeutralForeground2,
':hover': {
':enabled:hover': {
backgroundColor: tokens.colorNeutralBackground1Hover,
border: `solid ${tokens.strokeWidthThin} ${tokens.colorNeutralStroke1Hover}`,
color: tokens.colorNeutralForeground2Hover,
},
':active': {
':enabled:active': {
backgroundColor: tokens.colorNeutralBackground1Pressed,
border: `solid ${tokens.strokeWidthThin} ${tokens.colorNeutralStroke1Pressed}`,
color: tokens.colorNeutralForeground2Pressed,
},
},
subtleSelected: {
subtleRoundedSelected: {
backgroundColor: tokens.colorBrandBackground2,
border: `solid ${tokens.strokeWidthThin} ${tokens.colorCompoundBrandStroke}`,
color: tokens.colorBrandForeground2,
':hover': {
':enabled:hover': {
backgroundColor: tokens.colorBrandBackground2Hover,
border: `solid ${tokens.strokeWidthThin} ${tokens.colorCompoundBrandStrokeHover}`,
color: tokens.colorBrandForeground2Hover,
},
':active': {
':enabled:active': {
backgroundColor: tokens.colorBrandBackground2Pressed,
border: `solid ${tokens.strokeWidthThin} ${tokens.colorCompoundBrandStrokePressed}`,
color: tokens.colorBrandForeground2Pressed,
},
},
subtleDisabled: {
subtleRoundedDisabled: {
backgroundColor: tokens.colorTransparentBackground,
color: tokens.colorNeutralForegroundDisabled,
border: `solid ${tokens.strokeWidthThin} ${tokens.colorTransparentStroke}`,
},
subtleDisabledSelected: {
backgroundColor: tokens.colorTransparentBackground,
color: tokens.colorNeutralForegroundDisabled,
subtleRoundedDisabledSelected: {
border: `solid ${tokens.strokeWidthThin} ${tokens.colorNeutralStrokeDisabled}`,
},
filled: {
filledRounded: {
backgroundColor: tokens.colorNeutralBackground3,
color: tokens.colorNeutralForeground2,
':hover': {
':enabled:hover': {
backgroundColor: tokens.colorNeutralBackground3Hover,
color: tokens.colorNeutralForeground2Hover,
},
':active': {
':enabled:active': {
backgroundColor: tokens.colorNeutralBackground3Pressed,
color: tokens.colorNeutralForeground2Pressed,
},
},
filledSelected: {
filledRoundedSelected: {
backgroundColor: tokens.colorBrandBackground,
color: tokens.colorNeutralForegroundOnBrand,
':hover': {
':enabled:hover': {
backgroundColor: tokens.colorBrandBackgroundHover,
color: tokens.colorNeutralForegroundOnBrand,
},
':active': {
':enabled:active': {
backgroundColor: tokens.colorBrandBackgroundPressed,
color: tokens.colorNeutralForegroundOnBrand,
},
},
filledDisabled: {
filledRoundedDisabled: {
backgroundColor: tokens.colorNeutralBackgroundDisabled,
border: `solid ${tokens.strokeWidthThin} ${tokens.colorTransparentStroke}`,
color: tokens.colorNeutralForegroundDisabled,
},
filledDisabledSelected: {
backgroundColor: tokens.colorNeutralBackgroundDisabled,
filledRoundedDisabledSelected: {
border: `solid ${tokens.strokeWidthThin} ${tokens.colorNeutralStrokeDisabled}`,
color: tokens.colorNeutralForegroundDisabled,
},
});

Expand Down Expand Up @@ -377,20 +370,20 @@ const useActiveIndicatorStyles = makeStyles({
'::after': {
backgroundColor: tokens.colorCompoundBrandStroke,
},
':hover::after': {
':enabled:hover::after': {
backgroundColor: tokens.colorCompoundBrandStrokeHover,
},
':active::after': {
':enabled:active::after': {
backgroundColor: tokens.colorCompoundBrandStrokePressed,
},
'@media (forced-colors: active)': {
'::after': {
backgroundColor: 'ButtonText',
},
':hover::after': {
':enabled:hover::after': {
backgroundColor: 'ButtonText',
},
':active::after': {
':enabled:active::after': {
backgroundColor: 'ButtonText',
},
},
Expand Down Expand Up @@ -558,12 +551,11 @@ export const useTabIndicatorStyles_unstable = (state: TabState): TabState => {
const pendingIndicatorStyles = usePendingIndicatorStyles();
const activeIndicatorStyles = useActiveIndicatorStyles();

const { disabled, selected, size, shape, vertical } = state;
const { appearance, disabled, selected, size, vertical } = state;

const classes: Parameters<typeof mergeClasses> = [tabClassNames.root, rootStyles.root];

// Only apply indicator styles if the shape is not circular
if (shape !== 'circular') {
if (appearance !== 'subtle-rounded' && appearance !== 'filled-rounded') {
classes.push(
// pending indicator (before pseudo element)
pendingIndicatorStyles.base,
Expand Down Expand Up @@ -610,11 +602,26 @@ export const useTabButtonStyles_unstable = (state: TabState, slot: TabState['roo

const rootStyles = useRootStyles();
const focusStyles = useFocusStyles();
const circularStyles = useCircularStyles();

const { appearance, shape, disabled, selected, size, vertical } = state;

const isCircular = shape === 'circular';
const { appearance, disabled, selected, size, vertical } = state;

const isSubtleRounded = appearance === 'subtle-rounded';
const isFilledRounded = appearance === 'filled-rounded';
const isRounded = isSubtleRounded || isFilledRounded;

const roundedAppearance = [
rootStyles.rounded,
// subtle-rounded appearance
isSubtleRounded && rootStyles.subtleRounded,
selected && isSubtleRounded && rootStyles.subtleRoundedSelected,
disabled && isSubtleRounded && rootStyles.subtleRoundedDisabled,
selected && disabled && isSubtleRounded && rootStyles.subtleRoundedDisabledSelected,
// filled-rounded appearance
isFilledRounded && rootStyles.filledRounded,
selected && isFilledRounded && rootStyles.filledRoundedSelected,
disabled && isFilledRounded && rootStyles.filledRoundedDisabled,
selected && disabled && isFilledRounded && rootStyles.filledRoundedDisabledSelected,
];

slot.className = mergeClasses(
rootStyles.button,
Expand All @@ -625,25 +632,11 @@ export const useTabButtonStyles_unstable = (state: TabState, slot: TabState['roo
size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal),
size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal),
focusStyles.base,
// appearance
!disabled && appearance === 'subtle' && !isCircular && rootStyles.subtle,
!disabled && appearance === 'transparent' && rootStyles.transparent,
!disabled && selected && !isCircular && rootStyles.selected,
appearance === 'subtle' && rootStyles.subtle,
appearance === 'transparent' && rootStyles.transparent,
...(isRounded ? roundedAppearance : [selected && rootStyles.selected]),
disabled && rootStyles.disabled,

// circular tabs
isCircular && circularStyles.base,
// subtle + circular
!disabled && appearance === 'subtle' && isCircular && circularStyles.subtle,
!disabled && appearance === 'subtle' && selected && isCircular && circularStyles.subtleSelected,
disabled && appearance === 'subtle' && isCircular && circularStyles.subtleDisabled,
disabled && appearance === 'subtle' && selected && isCircular && circularStyles.subtleDisabledSelected,
// filled + circular
!disabled && appearance === 'filled' && isCircular && circularStyles.filled,
!disabled && appearance === 'filled' && selected && isCircular && circularStyles.filledSelected,
disabled && appearance === 'filled' && isCircular && circularStyles.filledDisabled,
disabled && appearance === 'filled' && selected && isCircular && circularStyles.filledDisabledSelected,

slot.className,
);

Expand Down
Loading

0 comments on commit 75a68d3

Please sign in to comment.