Skip to content

Commit

Permalink
fix(Tabs): style fixes and align with design spec (#832)
Browse files Browse the repository at this point in the history 
Updating Tabs to align with specs requirements and code cleanup.

Issue: [Link](https://jira.tid.es/browse/WEB-1459)
Specs:
[Link](https://www.figma.com/file/tOb2OmRf6gnEK3fnSWPKOG/%F0%9F%94%B8-Tabs-Specs?type=design&node-id=0-1&mode=design&t=HF5fyFiXXIMFEXCi-0)
  • Loading branch information
@marcoskolodny
marcoskolodny authored Aug 2, 2023
1 parent 21dea84 commit 37de417
Show file tree
Hide file tree
Showing 7 changed files with 55 additions and 70 deletions.
2 changes: 1 addition & 1 deletion playroom/snippets.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -566,7 +566,7 @@ const tabsSnippets: Array<Snippet> = [
tabs={[
{text: 'Tab 1'},
{text: 'Tab 2'},
{text: 'Tab 2'},
{text: 'Tab 3'},
]}
/>`,
},
Expand Down
Binary file modified ...snapshots__/tabs-screenshot-test-tsx-tabs-in-desktop-with-icon-false-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ..._snapshots__/tabs-screenshot-test-tsx-tabs-in-desktop-with-icon-true-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...apshots__/tabs-screenshot-test-tsx-tabs-in-mobile-ios-with-icon-true-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...image_snapshots__/tabs-screenshot-test-tsx-tabs-with-large-font-size-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
84 changes: 33 additions & 51 deletions src/tabs.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ export const outerBorder = style({

export const outer = style([
sprinkles({
height: TAB_HEIGHT,
minHeight: TAB_HEIGHT,
width: '100%',
position: 'relative',
overflow: 'hidden',
}),
{
'@media': {
Expand All @@ -25,88 +25,71 @@ export const outer = style([
},
},
]);
export const inner = style([
sprinkles({
position: 'absolute',
left: 0,
right: 0,
// this height is to hide the scrollbar
height: 80,
}),
{
// if tabs don't fit horizontally they can be scrolled
overflowX: 'scroll',
overflowY: 'hidden',
export const inner = style({
position: 'relative',
width: '100%',
// if tabs don't fit horizontally they can be scrolled
overflowX: 'scroll',

// hide scrollbar
scrollbarWidth: 'none', // Firefox
'::-webkit-scrollbar': {
display: 'none', // Chrome/Safari
},
]);
});
export const tabsContainer = sprinkles({
height: TAB_HEIGHT,
minHeight: TAB_HEIGHT,
width: '100%',
display: 'flex',
});

const baseTab = style([
sprinkles({
display: 'inline-flex',
flexShrink: 0,
alignItems: 'center',
justifyContent: 'center',
paddingLeft: 16,
paddingRight: 16,
height: TAB_HEIGHT,
paddingX: 16,
minWidth: 80,
minHeight: TAB_HEIGHT,
background: 'transparent',
}),
{
flex: '1 0 80px',
textAlign: 'center',
verticalAlign: 'baseline',
borderBottom: '2px solid transparent',
borderTop: 'initial',
borderRight: 'initial',
borderLeft: 'initial',
maxWidth: TAB_MAX_WIDTH,
'@media': {
[mq.supportsHover]: {
':hover': {
color: vars.colors.textPrimary,
},
},
[mq.desktopOrBigger]: {
flex: '0 1 208px',
padding: `16px 32px`,
maxWidth: TAB_MAX_WIDTH,
},
},
},
]);

export const tabVariants = styleVariants({
default: [
default: [baseTab],
fullWidth: [
baseTab,
style({
maxWidth: TAB_MAX_WIDTH,
}),
],
tabs2: [
baseTab,
style({
maxWidth: [`max(50%, ${TAB_MAX_WIDTH}px)`, TAB_MAX_WIDTH], // max() is not supported by all browsers
}),
],
tabs3: [
baseTab,
style({
maxWidth: [`max(33.33%, ${TAB_MAX_WIDTH}px)`, TAB_MAX_WIDTH], // max() is not supported by all browsers
}),
],
});

export const tabWithIcon = style({
flexBasis: 112,
'@media': {
[mq.desktopOrBigger]: {
flexBasis: 208,
{
'@media': {
[mq.tabletOrSmaller]: {
flex: '1 1 0px',
},
},
},
},
],
});

const tabSelectedBae = sprinkles({
const tabSelectedBase = sprinkles({
color: vars.colors.textPrimary,
});

Expand All @@ -117,21 +100,20 @@ export const tabSelectionVariants = styleVariants({
}),
],
selected: [
tabSelectedBae,
tabSelectedBase,
style({
borderBottom: `2px solid ${vars.colors.controlActivated}`,
}),
],
selectedAnimating: [
tabSelectedBae,
tabSelectedBase,
style({
borderBottom: '2px solid transparent',
}),
],
});

export const icon = style({
marginRight: 8,
height: pxToRem(24),
width: pxToRem(24),
});
Expand Down
39 changes: 21 additions & 18 deletions src/tabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,18 @@ import {Text} from './text';
import {isRunningAcceptanceTest} from './utils/platform';
import {getPrefixedDataAttributes} from './utils/dom';
import * as styles from './tabs.css';
import Inline from './inline';

import type {DataAttributes, TrackingEvent} from './utils/types';

const LINE_ANIMATION_DURATION_MS = isRunningAcceptanceTest() ? 0 : 300;

const getTabVariant = (numberOfTabs: number): keyof typeof styles.tabVariants => {
switch (numberOfTabs) {
case 1:
case 2:
return 'tabs2';
case 3:
return 'tabs3';
return 'fullWidth';
default:
return 'default';
}
Expand Down Expand Up @@ -57,9 +58,9 @@ const Tabs: React.FC<TabsProps> = ({selectedIndex, onChange, tabs, dataAttribute
line.style.transform = `translate(${tabFrom.offsetLeft - scrollable.scrollLeft}px, 0)`;
Promise.resolve().then(() => {
// set final line styles
line.style.transition = `transform ${LINE_ANIMATION_DURATION_MS}ms, width ${LINE_ANIMATION_DURATION_MS}ms`;
line.style.width = `${tabTo.offsetWidth}px`;
line.style.transform = `translate(${tabTo.offsetLeft - scrollable.scrollLeft}px, 0)`;
line.style.transition = `transform ${LINE_ANIMATION_DURATION_MS}ms, width ${LINE_ANIMATION_DURATION_MS}ms`;
});
setTimeout(() => {
// hide line
Expand Down Expand Up @@ -94,8 +95,7 @@ const Tabs: React.FC<TabsProps> = ({selectedIndex, onChange, tabs, dataAttribute
? isAnimating
? styles.tabSelectionVariants.selectedAnimating
: styles.tabSelectionVariants.selected
: styles.tabSelectionVariants.noSelected,
icon && styles.tabWithIcon
: styles.tabSelectionVariants.noSelected
)}
onPress={() => {
if (!isAnimating && selectedIndex !== index) {
Expand All @@ -108,19 +108,22 @@ const Tabs: React.FC<TabsProps> = ({selectedIndex, onChange, tabs, dataAttribute
aria-controls={ariaControls}
aria-selected={isSelected ? 'true' : 'false'}
>
{icon && <div className={styles.icon}>{icon}</div>}
<Text
desktopSize={textPresets.tabsLabel.size.desktop}
mobileSize={textPresets.tabsLabel.size.mobile}
desktopLineHeight={textPresets.tabsLabel.lineHeight.desktop}
mobileLineHeight={textPresets.tabsLabel.lineHeight.mobile}
weight={textPresets.tabsLabel.weight}
color="inherit"
wordBreak={false}
textAlign="center"
>
{text}
</Text>
<Inline space={!!icon && !!text ? 8 : 0} alignItems="center">
{icon && <div className={styles.icon}>{icon}</div>}
<Text
desktopSize={textPresets.tabsLabel.size.desktop}
mobileSize={textPresets.tabsLabel.size.mobile}
desktopLineHeight={textPresets.tabsLabel.lineHeight.desktop}
mobileLineHeight={textPresets.tabsLabel.lineHeight.mobile}
weight={textPresets.tabsLabel.weight}
color="inherit"
wordBreak={false}
textAlign="center"
hyphens="auto"
>
{text}
</Text>
</Inline>
</BaseTouchable>
);
})}
Expand Down

1 comment on commit 37de417

@github-actions
Copy link

Choose a reason for hiding this comment

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

Deploy preview for mistica-web ready!

✅ Preview
https://mistica-nz9lp4on0-tuentisre.vercel.app

Built with commit 37de417.
This pull request is being automatically deployed with vercel-action

Please sign in to comment.