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

feat(tabs): new light/dark mode colors #1843

Merged
merged 3 commits into from
Jun 26, 2024
Merged

feat(tabs): new light/dark mode colors #1843

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
107faf5
feat(tabs): new light/dark mode colors
ze-flo Jun 21, 2024
7cf1f25
refactor: use transient props
ze-flo Jun 21, 2024
093f9c6
fix: remove animation color flash
ze-flo Jun 25, 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
6 changes: 3 additions & 3 deletions packages/tabs/src/elements/Tab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export const Tab = React.forwardRef<HTMLDivElement, ITabProps>(
role="tab"
aria-disabled={disabled}
ref={ref}
isVertical={tabsPropGetters?.isVertical}
$isVertical={tabsPropGetters?.isVertical}
{...otherProps}
/>
);
Expand All @@ -39,8 +39,8 @@ export const Tab = React.forwardRef<HTMLDivElement, ITabProps>(

return (
<StyledTab
isSelected={item === tabsPropGetters.selectedValue}
isVertical={tabsPropGetters.isVertical}
$isSelected={item === tabsPropGetters.selectedValue}
$isVertical={tabsPropGetters.isVertical}
{...tabProps}
{...otherProps}
ref={mergeRefs([tabRef, ref])}
Expand Down
2 changes: 1 addition & 1 deletion packages/tabs/src/elements/TabList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export const TabList = React.forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivEl

return (
<StyledTabList
isVertical={tabsPropGetters.isVertical}
$isVertical={tabsPropGetters.isVertical}
{...tabListProps}
{...props}
ref={ref}
Expand Down
2 changes: 1 addition & 1 deletion packages/tabs/src/elements/TabPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export const TabPanel = React.forwardRef<HTMLDivElement, ITabPanelProps>(
return (
<StyledTabPanel
aria-hidden={tabsPropGetters.selectedValue !== item}
isVertical={tabsPropGetters.isVertical}
$isVertical={tabsPropGetters.isVertical}
{...tabPanelProps}
{...otherProps}
ref={ref}
Expand Down
2 changes: 1 addition & 1 deletion packages/tabs/src/elements/Tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export const TabsComponent = forwardRef<HTMLDivElement, ITabsProps>(

return (
<TabsContext.Provider value={contextValue}>
<StyledTabs isVertical={isVertical} {...otherProps} ref={ref}>
<StyledTabs $isVertical={isVertical} {...otherProps} ref={ref}>
{children}
</StyledTabs>
</TabsContext.Provider>
Expand Down
47 changes: 26 additions & 21 deletions packages/tabs/src/styled/StyledTab.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,31 +8,36 @@
import styled, { DefaultTheme, css, ThemeProps } from 'styled-components';
import {
DEFAULT_THEME,
getColorV8,
focusStyles,
retrieveComponentStyles
retrieveComponentStyles,
getColor
} from '@zendeskgarden/react-theming';
import { stripUnit } from 'polished';

const COMPONENT_ID = 'tabs.tab';

interface IStyledTabProps {
isSelected?: boolean;
isVertical?: boolean;
$isSelected?: boolean;
$isVertical?: boolean;
}

const colorStyles = ({
theme,
isSelected,
isVertical
$isSelected,
$isVertical
}: IStyledTabProps & ThemeProps<DefaultTheme>) => {
const borderColor = isSelected ? 'currentcolor' : 'transparent';
const selectedColor = getColorV8('primaryHue', 600, theme);
const borderColor = $isSelected ? 'currentcolor' : 'transparent';
const borderBlockEndColor = $isVertical ? undefined : borderColor;
const borderInlineColor = $isVertical ? borderColor : undefined;

const selectedColor = getColor({ theme, variable: 'foreground.primary' });
const foregroundColor = $isSelected ? selectedColor : 'inherit';
Copy link
Contributor Author

@ze-flo ze-flo Jun 21, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@steue @lucijanblagonic The default foreground color was originally set to inherit the TabsList's foreground.default. This has the benefit of showing a clear distinction between default and disabled tabs.

Screenshot 2024-06-20 at 4 33 14 PM
Screenshot 2024-06-20 at 4 33 02 PM

Should we keep it as such or use foreground.subtle as shown in Figma instead?

CC: @jzempel

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Inheriting feels OK here as long as the intent is preserved by the variable (e.g., disabled vs selected vs. default (inherited)). Hopefully I'm understanding this correctly. haha

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ze-flo Yes, the foreground.default is the preferred color here. We corrected this in design, and we left a note for making the change in the inventory.

const disabledColor = getColor({ theme, variable: 'foreground.disabled' });

return css`
border-bottom-color: ${isVertical ? undefined : borderColor};
border-${theme.rtl ? 'right' : 'left'}-color: ${isVertical ? borderColor : undefined};
color: ${isSelected ? selectedColor : 'inherit'};
border-bottom-color: ${borderBlockEndColor};
border-${theme.rtl ? 'right' : 'left'}-color: ${borderInlineColor};
color: ${foregroundColor};

&:hover {
color: ${selectedColor};
Expand All @@ -54,18 +59,18 @@ const colorStyles = ({

&[aria-disabled='true'] {
border-color: transparent;
color: ${props => getColorV8('neutralHue', 400, props.theme)};
color: ${disabledColor};
}
`;
};

const sizeStyles = ({ theme, isVertical }: IStyledTabProps & ThemeProps<DefaultTheme>) => {
const sizeStyles = ({ theme, $isVertical }: IStyledTabProps & ThemeProps<DefaultTheme>) => {
const borderWidth = theme.borderWidths.md;
const focusHeight = `${theme.space.base * 5}px`;
let marginBottom;
let padding;

if (isVertical) {
if ($isVertical) {
marginBottom = `${theme.space.base * 5}px`;
padding = `${theme.space.base}px ${theme.space.base * 2}px`;
} else {
Expand Down Expand Up @@ -104,17 +109,17 @@ export const StyledTab = styled.div.attrs({
'data-garden-id': COMPONENT_ID,
'data-garden-version': PACKAGE_VERSION
})<IStyledTabProps>`
display: ${props => (props.isVertical ? 'block' : 'inline-block')};
display: ${props => (props.$isVertical ? 'block' : 'inline-block')};
position: relative;
transition: color 0.25s ease-in-out;
border-bottom: ${props => (props.isVertical ? undefined : props.theme.borderStyles.solid)};
border-${props => (props.theme.rtl ? 'right' : 'left')}: ${props => (props.isVertical ? props.theme.borderStyles.solid : undefined)};
border-bottom: ${props => (props.$isVertical ? undefined : props.theme.borderStyles.solid)};
border-${props => (props.theme.rtl ? 'right' : 'left')}: ${props => (props.$isVertical ? props.theme.borderStyles.solid : undefined)};
cursor: pointer;
overflow: hidden; /* [1] */
vertical-align: top; /* [2] */
user-select: none;
text-align: ${props => {
if (props.isVertical) {
if (props.$isVertical) {
return props.theme.rtl ? 'right' : 'left';
}

Expand All @@ -138,9 +143,9 @@ export const StyledTab = styled.div.attrs({

&:focus-visible::before {
position: absolute;
top: ${props => props.theme.space.base * (props.isVertical ? 1 : 2.5)}px;
right: ${props => props.theme.space.base * (props.isVertical ? 1 : 6)}px;
left: ${props => props.theme.space.base * (props.isVertical ? 1 : 6)}px;
top: ${props => props.theme.space.base * (props.$isVertical ? 1 : 2.5)}px;
right: ${props => props.theme.space.base * (props.$isVertical ? 1 : 6)}px;
left: ${props => props.theme.space.base * (props.$isVertical ? 1 : 6)}px;
border-radius: ${props => props.theme.borderRadii.md};
pointer-events: none;
}
Expand Down
22 changes: 11 additions & 11 deletions packages/tabs/src/styled/StyledTabList.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,20 @@
import styled, { DefaultTheme, ThemeProps, css } from 'styled-components';
import {
retrieveComponentStyles,
getColorV8,
DEFAULT_THEME,
getLineHeight
getLineHeight,
getColor
} from '@zendeskgarden/react-theming';

const COMPONENT_ID = 'tabs.tablist';

interface IStyledTabListProps {
isVertical?: boolean;
$isVertical?: boolean;
}

const colorStyles = ({ theme }: ThemeProps<DefaultTheme>) => {
const borderColor = getColorV8('neutralHue', 300, theme);
const foregroundColor = getColorV8('neutralHue', 600, theme);
const borderColor = getColor({ theme, variable: 'border.default' });
const foregroundColor = getColor({ theme, variable: 'foreground.default' });

return css`
border-bottom-color: ${borderColor};
Expand All @@ -32,9 +32,9 @@ const colorStyles = ({ theme }: ThemeProps<DefaultTheme>) => {
/*
* 1. List element reset.
*/
const sizeStyles = ({ theme, isVertical }: IStyledTabListProps & ThemeProps<DefaultTheme>) => {
const marginBottom = isVertical ? 0 : `${theme.space.base * 5}px`;
const borderBottom = isVertical ? undefined : theme.borderWidths.sm;
const sizeStyles = ({ theme, $isVertical }: IStyledTabListProps & ThemeProps<DefaultTheme>) => {
const marginBottom = $isVertical ? 0 : `${theme.space.base * 5}px`;
const borderBottom = $isVertical ? undefined : theme.borderWidths.sm;
const fontSize = theme.fontSizes.md;
const lineHeight = getLineHeight(theme.space.base * 5, fontSize);

Expand All @@ -52,9 +52,9 @@ export const StyledTabList = styled.div.attrs({
'data-garden-id': COMPONENT_ID,
'data-garden-version': PACKAGE_VERSION
})<IStyledTabListProps>`
display: ${props => (props.isVertical ? 'table-cell' : 'block')};
border-bottom: ${props => (props.isVertical ? 'none' : props.theme.borderStyles.solid)};
vertical-align: ${props => (props.isVertical ? 'top' : undefined)};
display: ${props => (props.$isVertical ? 'table-cell' : 'block')};
border-bottom: ${props => (props.$isVertical ? 'none' : props.theme.borderStyles.solid)};
vertical-align: ${props => (props.$isVertical ? 'top' : undefined)};
white-space: nowrap;

${sizeStyles};
Expand Down
8 changes: 4 additions & 4 deletions packages/tabs/src/styled/StyledTabPanel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
const COMPONENT_ID = 'tabs.tabpanel';

interface IStyledTabPanelProps {
isVertical?: boolean;
$isVertical?: boolean;
}

const sizeStyles = ({ theme, isVertical }: IStyledTabPanelProps & ThemeProps<DefaultTheme>) => {
const margin = isVertical ? `${theme.space.base * 8}px` : undefined;
const sizeStyles = ({ theme, $isVertical }: IStyledTabPanelProps & ThemeProps<DefaultTheme>) => {
const margin = $isVertical ? `${theme.space.base * 8}px` : undefined;

return css`
margin-${theme.rtl ? 'right' : 'left'}: ${margin};
Expand All @@ -27,7 +27,7 @@ export const StyledTabPanel = styled.div.attrs({
'data-garden-version': PACKAGE_VERSION
})<IStyledTabPanelProps>`
display: block;
vertical-align: ${props => props.isVertical && 'top'};
vertical-align: ${props => props.$isVertical && 'top'};

${sizeStyles};

Expand Down
4 changes: 2 additions & 2 deletions packages/tabs/src/styled/StyledTabs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
const COMPONENT_ID = 'tabs.tabs';

interface IStyledTabsProps {
isVertical?: boolean;
$isVertical?: boolean;
}

/**
Expand All @@ -21,7 +21,7 @@ export const StyledTabs = styled.div.attrs<IStyledTabsProps>({
'data-garden-id': COMPONENT_ID,
'data-garden-version': PACKAGE_VERSION
})<IStyledTabsProps>`
display: ${props => (props.isVertical ? 'table' : 'block')};
display: ${props => (props.$isVertical ? 'table' : 'block')};
overflow: hidden;
direction: ${props => props.theme.rtl && 'rtl'};

Expand Down
Loading