From b2ceb70f7cb471e505d77364e55c75b9d149e935 Mon Sep 17 00:00:00 2001 From: ss-dimasm Date: Mon, 16 Dec 2024 14:32:29 +0700 Subject: [PATCH 1/4] chore: update css token --- src/tokens/payprop/tokens.css | 3 ++- src/tokens/payprop/tokens.ts | 3 ++- src/tokens/reapit/tokens.css | 3 ++- src/tokens/reapit/tokens.ts | 3 ++- src/tokens/tokens.json | 6 ++++++ 5 files changed, 14 insertions(+), 4 deletions(-) diff --git a/src/tokens/payprop/tokens.css b/src/tokens/payprop/tokens.css index e7568429..cda5f97b 100644 --- a/src/tokens/payprop/tokens.css +++ b/src/tokens/payprop/tokens.css @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 10 Dec 2024 06:08:05 GMT + * Generated on Mon, 16 Dec 2024 06:57:57 GMT */ :root { @@ -139,6 +139,7 @@ --font-size-sm: 0.875rem; --font-size-xs: 0.8125rem; --font-size-2xs: 0.75rem; + --font-size-3xs: 0.625rem; --line-height-3xl: 2.5rem; --line-height-2xl: 2rem; --line-height-xl: 1.75rem; diff --git a/src/tokens/payprop/tokens.ts b/src/tokens/payprop/tokens.ts index 6f853b27..50b6fe64 100644 --- a/src/tokens/payprop/tokens.ts +++ b/src/tokens/payprop/tokens.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 10 Dec 2024 06:08:05 GMT + * Generated on Mon, 16 Dec 2024 06:57:57 GMT */ export const neutral900 = '#222b33' @@ -138,6 +138,7 @@ export const fontSizeBase = '0.9375rem' export const fontSizeSm = '0.875rem' export const fontSizeXs = '0.8125rem' export const fontSize2xs = '0.75rem' +export const fontSize3xs = '0.625rem' export const lineHeight3xl = '2.5rem' export const lineHeight2xl = '2rem' export const lineHeightXl = '1.75rem' diff --git a/src/tokens/reapit/tokens.css b/src/tokens/reapit/tokens.css index e7568429..cda5f97b 100644 --- a/src/tokens/reapit/tokens.css +++ b/src/tokens/reapit/tokens.css @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 10 Dec 2024 06:08:05 GMT + * Generated on Mon, 16 Dec 2024 06:57:57 GMT */ :root { @@ -139,6 +139,7 @@ --font-size-sm: 0.875rem; --font-size-xs: 0.8125rem; --font-size-2xs: 0.75rem; + --font-size-3xs: 0.625rem; --line-height-3xl: 2.5rem; --line-height-2xl: 2rem; --line-height-xl: 1.75rem; diff --git a/src/tokens/reapit/tokens.ts b/src/tokens/reapit/tokens.ts index 6f853b27..50b6fe64 100644 --- a/src/tokens/reapit/tokens.ts +++ b/src/tokens/reapit/tokens.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 10 Dec 2024 06:08:05 GMT + * Generated on Mon, 16 Dec 2024 06:57:57 GMT */ export const neutral900 = '#222b33' @@ -138,6 +138,7 @@ export const fontSizeBase = '0.9375rem' export const fontSizeSm = '0.875rem' export const fontSizeXs = '0.8125rem' export const fontSize2xs = '0.75rem' +export const fontSize3xs = '0.625rem' export const lineHeight3xl = '2.5rem' export const lineHeight2xl = '2rem' export const lineHeightXl = '1.75rem' diff --git a/src/tokens/tokens.json b/src/tokens/tokens.json index 5e95ad2c..77f2056a 100644 --- a/src/tokens/tokens.json +++ b/src/tokens/tokens.json @@ -1581,6 +1581,12 @@ "parent": "_Primitives/Value", "description": "" }, + "font-size-3xs": { + "value": "0.625rem", + "type": "dimension", + "parent": "_Primitives/Value", + "description": "" + }, "line-height-3xl": { "value": "2.5rem", "type": "dimension", From 8cc42516f0c29546fdb58f20ecd9e793b06ae475 Mon Sep 17 00:00:00 2001 From: ss-dimasm Date: Mon, 16 Dec 2024 14:53:01 +0700 Subject: [PATCH 2/4] chore: remove css fallback variable for bottom bar item --- .../bottom-bar-item/bottom-bar-item.mdx | 28 ++----- .../bottom-bar-item.stories.tsx | 83 ++----------------- src/components/bottom-bar-item/styles.ts | 28 +++---- 3 files changed, 28 insertions(+), 111 deletions(-) diff --git a/src/components/bottom-bar-item/bottom-bar-item.mdx b/src/components/bottom-bar-item/bottom-bar-item.mdx index 28f485ae..b90e9499 100644 --- a/src/components/bottom-bar-item/bottom-bar-item.mdx +++ b/src/components/bottom-bar-item/bottom-bar-item.mdx @@ -22,42 +22,26 @@ The default appearance of the `BottomBarItem` The visual state of the `BottomBarItem` when it's currently selected or active - + ## Badge State The visual state of the `BottomBarItem` when it's currently selected or active with a badge - - -## Style Anchor Usage - -Demonstrates how to use the `BottomBarItem` using a standard `HTMLAnchorElement` - - - - - -## Style Button Usage - -Demonstrates how to use the `BottomBarItem` using a standard `HTMLButtonElement` - - - - + ## React Anchor Usage Demonstrates how to render the `BottomBarItem` using a anchor version - + - + ## React Button Usage Demonstrates how to render the `BottomBarItem` using a button version - + - + diff --git a/src/components/bottom-bar-item/bottom-bar-item.stories.tsx b/src/components/bottom-bar-item/bottom-bar-item.stories.tsx index a69a78e5..38c541b1 100644 --- a/src/components/bottom-bar-item/bottom-bar-item.stories.tsx +++ b/src/components/bottom-bar-item/bottom-bar-item.stories.tsx @@ -1,17 +1,9 @@ -import type { Meta, StoryObj } from '@storybook/react' import { action } from '@storybook/addon-actions' +import type { Meta, StoryObj } from '@storybook/react' -import { BottomBarItem } from './bottom-bar-item' -import { FlexContainer } from '../layout' import { Icon } from '../icon' -import { - ElAnchorBottomBarItemContainer, - ElBottomBarItemBadge, - ElBottomBarItemContent, - ElBottomBarItemIcon, - ElBottomBarItemLabel, - ElButtonBottomBarItemContainer, -} from './styles' +import { FlexContainer } from '../layout' +import { BottomBarItem } from './bottom-bar-item' const meta = { title: 'Components/Bottom Bar Item', @@ -62,7 +54,7 @@ export const Default: Story = { }, } -export const ActiveState: Story = { +export const WithActiveState: Story = { args: { isActive: true, children: 'Label', @@ -70,75 +62,15 @@ export const ActiveState: Story = { }, } -export const BadgeState: Story = { +export const WithBadge: Story = { args: { children: 'Label', icon: , hasBadge: true, }, } -export const StyleAnchorUsage: Story = { - args: { - href: '#', - children: 'Label', - icon: , - }, - render: (args) => { - return ( - - - {args?.icon} - {args?.children} - - - - {args?.icon} - {args?.children} - - - - - {args?.icon} - - - {args?.children} - - - ) - }, -} - -export const StyleButtonUsage: Story = { - args: { - children: 'Label', - icon: , - }, - render: (args) => { - return ( - - - {args?.icon} - {args?.children} - - - - {args?.icon} - {args?.children} - - - - - {args?.icon} - - - {args?.children}{' '} - - - ) - }, -} -export const ReactAnchorUsage: Story = { +export const WithHref: Story = { args: { href: '#', icon: , @@ -155,7 +87,8 @@ export const ReactAnchorUsage: Story = { }, } -export const ReactButtonUsage: Story = { +export const WithOnClick: Story = { + name: 'With OnClick', args: { onClick: action('handleClick'), icon: , diff --git a/src/components/bottom-bar-item/styles.ts b/src/components/bottom-bar-item/styles.ts index f7f0a4c3..234360d4 100644 --- a/src/components/bottom-bar-item/styles.ts +++ b/src/components/bottom-bar-item/styles.ts @@ -3,40 +3,40 @@ import { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react' import { ElIcon } from '../icon' export const ElBottomBarItemIcon = styled.div` - width: var(--icon-default, 24px); - height: var(--icon-default, 24px); + width: var(--icon-default); + height: var(--icon-default); color: inherit; ` export const ElBottomBarItemLabel = styled.span` color: inherit; text-align: center; - font-family: var(--font-family, Inter); - font-size: var(--font-size-3xs, 10px); + font-family: var(--font-family); + font-size: var(--font-size-3xs); font-style: normal; - font-weight: var(--font-weight-regular, Regular); - line-height: var(--line-height-3xs, 12px); - letter-spacing: var(--letter-spacing-2xs, 0px); + font-weight: var(--font-weight-regular); + line-height: var(--line-height-3xs); + letter-spacing: var(--letter-spacing-2xs); ` const baseStyles = ` - background-color: var(--fill-white, white); + background-color: var(--fill-white); outline: none; width: 44px; - border: var(--border-none, 0); + border: var(--border-none); display: flex; cursor: pointer; - padding: var(--space-half, 2px) var(--space-none, 0px); + padding: var(--spacing-half) var(--spacing-none); flex-direction: column; align-items: center; - gap: var(--space-half, 2px); + gap: var(--spacing-half); position: relative; flex: 1 0 0; - color: var(--icon-secondary, #607890); + color: var(--icon-secondary); &:active, &[aria-current="true"], &[aria-current="page"] { - color: var(--icon-action, #4e56ea) + color: var(--icon-action) } ` @@ -50,7 +50,7 @@ export const ElBottomBarItemBadge = styled.span` right: -3px; width: var(--size-2); height: var(--size-2); - background-color: var(--icon-error, #f01830); + background-color: var(--icon-error); border-radius: 100%; ` From f5d0e74d99ff0b9a8a92c518f6c82b473f0a6a2d Mon Sep 17 00:00:00 2001 From: ss-dimasm Date: Mon, 16 Dec 2024 15:19:14 +0700 Subject: [PATCH 3/4] chore: update heading name --- src/components/bottom-bar-item/bottom-bar-item.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/bottom-bar-item/bottom-bar-item.mdx b/src/components/bottom-bar-item/bottom-bar-item.mdx index b90e9499..16c82edb 100644 --- a/src/components/bottom-bar-item/bottom-bar-item.mdx +++ b/src/components/bottom-bar-item/bottom-bar-item.mdx @@ -12,25 +12,25 @@ A versatile component designed to render navigation icon items within a `BottomB -## Default State +## Default The default appearance of the `BottomBarItem` -## Active State +## With Active State The visual state of the `BottomBarItem` when it's currently selected or active -## Badge State +## With Badge The visual state of the `BottomBarItem` when it's currently selected or active with a badge -## React Anchor Usage +## With Href Demonstrates how to render the `BottomBarItem` using a anchor version @@ -38,7 +38,7 @@ Demonstrates how to render the `BottomBarItem` using a anchor version -## React Button Usage +## With OnClick Demonstrates how to render the `BottomBarItem` using a button version From 63d30844ec95ecedaa78dd1962a5104fac24c61a Mon Sep 17 00:00:00 2001 From: ss-dimasm Date: Tue, 17 Dec 2024 10:17:13 +0700 Subject: [PATCH 4/4] chore: update storybook --- src/components/bottom-bar-item/bottom-bar-item.mdx | 4 ++-- src/components/bottom-bar-item/bottom-bar-item.stories.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/bottom-bar-item/bottom-bar-item.mdx b/src/components/bottom-bar-item/bottom-bar-item.mdx index 16c82edb..16358b8f 100644 --- a/src/components/bottom-bar-item/bottom-bar-item.mdx +++ b/src/components/bottom-bar-item/bottom-bar-item.mdx @@ -18,11 +18,11 @@ The default appearance of the `BottomBarItem` -## With Active State +## Active The visual state of the `BottomBarItem` when it's currently selected or active - + ## With Badge diff --git a/src/components/bottom-bar-item/bottom-bar-item.stories.tsx b/src/components/bottom-bar-item/bottom-bar-item.stories.tsx index 38c541b1..9fe81ea6 100644 --- a/src/components/bottom-bar-item/bottom-bar-item.stories.tsx +++ b/src/components/bottom-bar-item/bottom-bar-item.stories.tsx @@ -54,7 +54,7 @@ export const Default: Story = { }, } -export const WithActiveState: Story = { +export const Active: Story = { args: { isActive: true, children: 'Label',