Skip to content

Commit

Permalink
feat: add Badge & Tabs truncate props
Browse files Browse the repository at this point in the history
  • Loading branch information
@vadim-kudr
vadim-kudr committed Oct 31, 2024
1 parent 3702ac0 commit 5da622b
Show file tree
Hide file tree
Showing 58 changed files with 713 additions and 197 deletions.
Binary file modified ...ponents/Tabs/Tabs.component-test.tsx/plasma-web Tabs -- item autoFocus.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 ...ponents/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- _disabled.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 ...mponents/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- _stretch.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 ...onents/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- autoscroll.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 ...onents/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- controller.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 ...components/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- simple.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 ...ponents/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- with icon.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.
7 changes: 5 additions & 2 deletions packages/plasma-b2c/api/plasma-b2c.api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -728,6 +728,7 @@ true: PolymorphicClassName;
text?: string | undefined;
contentLeft?: ReactNode;
contentRight?: ReactNode;
maxWidth?: string | undefined;
size?: string | undefined;
view?: string | undefined;
} & {
Expand All @@ -740,6 +741,7 @@ transparent?: false | undefined;
text?: string | undefined;
contentLeft?: ReactNode;
contentRight?: ReactNode;
maxWidth?: string | undefined;
size?: string | undefined;
view?: string | undefined;
} & {
Expand All @@ -752,6 +754,7 @@ clear?: false | undefined;
text?: string | undefined;
contentLeft?: ReactNode;
contentRight?: ReactNode;
maxWidth?: string | undefined;
size?: string | undefined;
view?: string | undefined;
} & {
Expand Down Expand Up @@ -3597,7 +3600,7 @@ view?: string | undefined;
chipView?: string | undefined;
} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & RefAttributes<HTMLButtonElement>) | ({
target?: "button-like" | undefined;
view?: "default" | "accent" | "secondary" | "positive" | "warning" | "negative" | "black" | "white" | "dark" | "clear" | undefined;
view?: "default" | "clear" | "accent" | "secondary" | "positive" | "warning" | "negative" | "black" | "white" | "dark" | undefined;
contentLeft?: undefined;
labelPlacement?: undefined;
placeholder?: undefined;
Expand Down Expand Up @@ -3635,7 +3638,7 @@ view?: string | undefined;
chipView?: string | undefined;
} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & RefAttributes<HTMLButtonElement>) | ({
target?: "button-like" | undefined;
view?: "default" | "accent" | "secondary" | "positive" | "warning" | "negative" | "black" | "white" | "dark" | "clear" | undefined;
view?: "default" | "clear" | "accent" | "secondary" | "positive" | "warning" | "negative" | "black" | "white" | "dark" | undefined;
contentLeft?: undefined;
labelPlacement?: undefined;
placeholder?: undefined;
Expand Down
83 changes: 61 additions & 22 deletions packages/plasma-b2c/src/components/Tabs/Tabs.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ type CustomStoryTabsProps = {

const contentLeftOptions = ['none', 'icon'];
const contentRightOptions = ['none', 'counter', 'icon'];
const labels = ['Label', 'Middle label', 'Very long label'];

const getContentLeft = (contentLeftOption: string, size: Size) => {
const iconSize = size === 'xs' ? 'xs' : 's';
Expand Down Expand Up @@ -81,6 +82,19 @@ const meta: Meta<StoryTabsProps> = {
'outsideScroll',
'index',
]),
contentRight: {
options: contentRightOptions,
control: {
type: 'select',
},
if: { arg: 'helperText', eq: '' },
},
maxItemWidth: {
control: {
type: 'text',
},
if: { arg: 'stretch', truthy: false },
},
},
};

Expand All @@ -95,13 +109,14 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
contentRight: contentRightOption,
hasDivider,
stretch,
maxItemWidth,
helperText,
} = props;
const items = Array(itemQuantity).fill(0);
const [index, setIndex] = useState(0);

return (
<Tabs view="divider" hasDivider={hasDivider} stretch={stretch} disabled={disabled} size={size}>
<Tabs clip="none" view="divider" hasDivider={hasDivider} stretch={stretch} disabled={disabled} size={size}>
{items.map((_, i) => {
if (helperText !== '') {
return (
Expand All @@ -115,8 +130,9 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
value={helperText}
contentLeft={getContentLeft(contentLeftOption, size as Size)}
size={size as Size}
maxItemWidth={maxItemWidth}
>
{`Label${i + 1}`}
{`${labels[i % labels.length]} ${i + 1}`}
</TabItem>
);
}
Expand All @@ -132,8 +148,9 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
contentLeft={getContentLeft(contentLeftOption, size as Size)}
contentRight={getContentRight(contentRightOption, size as Size)}
size={size as Size}
maxItemWidth={maxItemWidth}
>
{`Label${i + 1}`}
{`${labels[i % labels.length]} ${i + 1}`}
</TabItem>
);
})}
Expand All @@ -152,6 +169,7 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
hasDivider,
helperText,
width,
maxItemWidth,
} = props;
const items = Array(itemQuantity).fill(0);
const [index, setIndex] = useState(0);
Expand All @@ -171,8 +189,9 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
value={helperText}
contentLeft={getContentLeft(contentLeftOption, size as Size)}
size={size as Size}
maxItemWidth={maxItemWidth}
>
{`Label${i + 1}`}
{`${labels[i % labels.length]} ${i + 1}`}
</TabItem>
);
}
Expand All @@ -188,8 +207,9 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
contentLeft={getContentLeft(contentLeftOption, size as Size)}
contentRight={getContentRight(contentRightOption, size as Size)}
size={size as Size}
maxItemWidth={maxItemWidth}
>
{`Label${i + 1}`}
{`${labels[i % labels.length]} ${i + 1}`}
</TabItem>
);
})}
Expand All @@ -207,6 +227,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
contentRight: contentRightOption,
hasDivider,
helperText,
maxItemWidth,
} = props;
const maxItemQuantity = 3;
const items = Array(itemQuantity).fill(0);
Expand Down Expand Up @@ -239,8 +260,9 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
value={helperText}
contentLeft={getContentLeft(contentLeftOption, size as Size)}
size={size as Size}
maxItemWidth={maxItemWidth}
>
{`Label${i + 1}`}
{`${labels[i % labels.length]} ${i + 1}`}
</TabItem>
);
}
Expand All @@ -256,8 +278,9 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
contentLeft={getContentLeft(contentLeftOption, size as Size)}
contentRight={getContentRight(contentRightOption, size as Size)}
size={size as Size}
maxItemWidth={maxItemWidth}
>
{`Label${i + 1}`}
{`${labels[i % labels.length]} ${i + 1}`}
</TabItem>
);
})}
Expand All @@ -274,6 +297,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
tabIndex={!disabled ? 0 : -1}
disabled={disabled}
size={size as Size}
maxItemWidth="auto"
>
ShowAll
</TabItem>
Expand All @@ -290,9 +314,10 @@ export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
disabled: false,
hasDivider: true,
helperText: '',
itemQuantity: 8,
itemQuantity: 6,
stretch: false,
width: '15rem',
maxItemWidth: '',
},
argTypes: {
contentLeft: {
Expand Down Expand Up @@ -348,6 +373,7 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
contentRight: contentRightOption,
hasDivider,
helperText,
maxItemWidth,
} = props;
const items = Array(itemQuantity).fill(0);
const [index, setIndex] = useState(0);
Expand All @@ -368,8 +394,9 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
value={helperText}
contentLeft={getContentLeft(contentLeftOption, size as Size)}
size={size as Size}
maxItemWidth={maxItemWidth}
>
{`Label${i + 1}`}
{`${labels[i % labels.length]} ${i + 1}`}
</TabItem>
);
}
Expand All @@ -386,8 +413,9 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
contentLeft={getContentLeft(contentLeftOption, size as Size)}
contentRight={getContentRight(contentRightOption, size as Size)}
size={size as Size}
maxItemWidth={maxItemWidth}
>
{`Label${i + 1}`}
{`${labels[i % labels.length]} ${i + 1}`}
</TabItem>
);
})}
Expand All @@ -406,6 +434,7 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
hasDivider,
helperText,
height,
maxItemWidth,
} = props;
const items = Array(itemQuantity).fill(0);
const [index, setIndex] = useState(0);
Expand Down Expand Up @@ -433,8 +462,9 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
value={helperText}
contentLeft={getContentLeft(contentLeftOption, size as Size)}
size={size as Size}
maxItemWidth={maxItemWidth}
>
{`Label${i + 1}`}
{`${labels[i % labels.length]} ${i + 1}`}
</TabItem>
);
}
Expand All @@ -451,8 +481,9 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
contentLeft={getContentLeft(contentLeftOption, size as Size)}
contentRight={getContentRight(contentRightOption, size as Size)}
size={size as Size}
maxItemWidth={maxItemWidth}
>
{`Label${i + 1}`}
{`${labels[i % labels.length]} ${i + 1}`}
</TabItem>
);
})}
Expand All @@ -470,6 +501,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
contentRight: contentRightOption,
hasDivider,
helperText,
maxItemWidth,
} = props;
const maxItemQuantity = 3;
const items = Array(itemQuantity).fill(0);
Expand Down Expand Up @@ -503,8 +535,9 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
value={helperText}
contentLeft={getContentLeft(contentLeftOption, size as Size)}
size={size as Size}
maxItemWidth={maxItemWidth}
>
{`Label${i + 1}`}
{`${labels[i % labels.length]} ${i + 1}`}
</TabItem>
);
}
Expand All @@ -521,8 +554,9 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
contentLeft={getContentLeft(contentLeftOption, size as Size)}
contentRight={getContentRight(contentRightOption, size as Size)}
size={size as Size}
maxItemWidth={maxItemWidth}
>
{`Label${i + 1}`}
{`${labels[i % labels.length]} ${i + 1}`}
</TabItem>
);
})}
Expand All @@ -539,6 +573,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
tabIndex={!disabled ? 0 : -1}
disabled={disabled}
size={size as Size}
maxItemWidth="auto"
>
ShowAll
</TabItem>
Expand All @@ -553,10 +588,11 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
size: 'xs',
disabled: false,
hasDivider: true,
itemQuantity: 8,
itemQuantity: 6,
orientation: 'vertical',
helperText: '',
height: '10rem',
maxItemWidth: '',
},
argTypes: {
contentLeft: {
Expand Down Expand Up @@ -609,12 +645,12 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
};

const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => {
const { disabled, itemQuantity, size, helperText } = props;
const { disabled, itemQuantity, size, helperText, maxItemWidth } = props;
const items = Array(itemQuantity).fill(0);
const [index, setIndex] = useState(0);

return (
<Tabs view="clear" disabled={disabled} size={size}>
<Tabs view="clear" disabled={disabled} size={size as HeaderSize}>
{items.map((_, i) => (
<TabItem
key={`item:${i}`}
Expand All @@ -624,17 +660,18 @@ const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => {
tabIndex={!disabled ? 0 : -1}
disabled={disabled}
value={helperText}
size={size}
size={size as HeaderSize}
maxItemWidth={maxItemWidth}
>
{`Label${i + 1}`}
{`${labels[i % labels.length]} ${i + 1}`}
</TabItem>
))}
</Tabs>
);
};

const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => {
const { disabled, itemQuantity, size, helperText, width } = props;
const { disabled, itemQuantity, size, helperText, width, maxItemWidth } = props;
const items = Array(itemQuantity).fill(0);
const [index, setIndex] = useState(0);

Expand All @@ -650,8 +687,9 @@ const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => {
disabled={disabled}
value={helperText}
size={size as HeaderSize}
maxItemWidth={maxItemWidth}
>
{`Label${i + 1}`}
{`${labels[i % labels.length]} ${i + 1}`}
</TabItem>
))}
</Tabs>
Expand All @@ -663,8 +701,9 @@ export const HeaderTabs: StoryObj<HorizontalStoryTabsProps> = {
size: 'h5',
disabled: false,
helperText: '',
itemQuantity: 6,
itemQuantity: 4,
width: '12rem',
maxItemWidth: '',
},
argTypes: {
clip: {
Expand Down
3 changes: 3 additions & 0 deletions packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabItem.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -265,5 +265,8 @@ export const config = {
${tabsTokens.itemPilledBorderRadius}: 1.5rem;
`,
},
truncate: {
true: css``,
},
},
};
3 changes: 3 additions & 0 deletions packages/plasma-b2c/src/components/Tabs/vertical/VerticalTabItem.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,5 +114,8 @@ export const config = {
${tabsTokens.disabledOpacity}: 0.4;
`,
},
truncate: {
true: css``,
},
},
};
1 change: 1 addition & 0 deletions packages/plasma-new-hope/src/components/Badge/Badge.tokens.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ export const classes = {
badgePilled: 'badge-pilled',
badgeTransparent: 'badge-transparent',
badgeClear: 'badge-clear',
badgeTruncate: 'badge-truncate',
};

export const tokens = {
Expand Down
Loading

0 comments on commit 5da622b

Please sign in to comment.