From cb0a407af360bbbbc621877c7c061b00dd6ed91c Mon Sep 17 00:00:00 2001 From: ss-dimasm Date: Mon, 16 Dec 2024 15:10:20 +0700 Subject: [PATCH 1/4] chore: remove css variables fallback values for `NavIconItem` --- .../nav-icon-item/nav-icon-item.mdx | 36 ++------- .../nav-icon-item/nav-icon-item.stories.tsx | 76 +++---------------- src/components/nav-icon-item/styles.ts | 32 ++++---- 3 files changed, 33 insertions(+), 111 deletions(-) diff --git a/src/components/nav-icon-item/nav-icon-item.mdx b/src/components/nav-icon-item/nav-icon-item.mdx index 76c9c79b..03459f60 100644 --- a/src/components/nav-icon-item/nav-icon-item.mdx +++ b/src/components/nav-icon-item/nav-icon-item.mdx @@ -22,46 +22,26 @@ The default appearance of the `NavIconItem` The visual state of the `NavIconItem` when it's currently selected or active - + ## Badge State The visual state of the `NavIconItem` when it's currently selected or active with a badge - + -## Style Anchor Usage - -Demonstrates how to use the `NavIconItem` using a standard `HTMLAnchorElement` - -**note:** to make the `NavIconItem` have an "active" state, you must pass the `aria-current` attribute with a value of `page` - - - - - -## Style Button Usage - -Demonstrates how to use the `NavIconItem` using a standard `HTMLButtonElement` - -**note:** to make the `NavIconItem` have an "active" state, you must pass the `aria-current` attribute with a value of `true` - - - - - -## React Anchor Usage +## With Href Demonstrates how to render the `NavIconItem` using a anchor version - + - + -## React Button Usage +## With OnClick Demonstrates how to render the `NavIconItem` using a button version - + - + diff --git a/src/components/nav-icon-item/nav-icon-item.stories.tsx b/src/components/nav-icon-item/nav-icon-item.stories.tsx index b5d5c0ca..c3fe93f7 100644 --- a/src/components/nav-icon-item/nav-icon-item.stories.tsx +++ b/src/components/nav-icon-item/nav-icon-item.stories.tsx @@ -2,7 +2,6 @@ import type { Meta, StoryObj } from '@storybook/react' import { NavIconItem } from './nav-icon-item' import { Icon } from '../icon' import { FlexContainer } from '../layout' -import { ElAnchorNavIconItem, ElButtonNavIconItem, ElNavIconItemBadge } from './styles' import { action } from '@storybook/addon-actions' const meta = { @@ -55,91 +54,33 @@ export const Default: Story = { onClick: action('handleOnClick'), }, render: (args) => { - return ( - - {args?.icon} - - ) + return }, } -export const ActiveState: Story = { +export const WithActiveState: Story = { args: { icon: , onClick: action('handleOnClick'), + isActive: true, }, render: (args) => { - return ( - - {args?.icon} - - ) + return }, } -export const BadgeState: Story = { +export const WithBadge: Story = { args: { icon: , onClick: action('handleOnClick'), hasBadge: true, }, render: (args) => { - return ( - - {args?.icon} - - - ) - }, -} - -export const StyleAnchorUsage: Story = { - args: { - icon: , - href: '#', - }, - render: (args) => { - return ( - - - {args?.icon} - - - {args?.icon} - - - {args?.icon} - - - - ) - }, -} - -export const StyleButtonUsage: Story = { - args: { - icon: , - onClick: action('handleClick'), - }, - render: (args) => { - return ( - - - {args?.icon} - - - {args?.icon} - - - {args?.icon} - - - - ) + return }, } -export const ReactAnchorUsage: Story = { +export const WithHref: Story = { args: { icon: , href: '#', @@ -155,7 +96,8 @@ export const ReactAnchorUsage: Story = { }, } -export const ReactButtonUsage: Story = { +export const WithOnClick: Story = { + name: 'With OnClick', args: { icon: , onClick: action('handleClick'), diff --git a/src/components/nav-icon-item/styles.ts b/src/components/nav-icon-item/styles.ts index 8c88f7fb..35b04c5b 100644 --- a/src/components/nav-icon-item/styles.ts +++ b/src/components/nav-icon-item/styles.ts @@ -6,34 +6,34 @@ import { ElIcon } from '../icon' const baseStyles = ` position: relative; display: inline-flex; - padding: var(--space-2, 8px); + padding: var(--spacing-2); justify-content: center; align-items: center; - gap: var(--space-none, 0px); - border-radius: var(--corner-default, 4px); - background: var(--fill-white, #ffffff); - border: var(--border-none, 0px); - color: var(--icon-app_bar-default, #798da1); + gap: var(--spacing-none); + border-radius: var(--corner-defaul); + background: var(--fill-white); + border: var(--border-none); + color: var(--icon-app_bar-default); outline: none; &:focus-visible { - border-radius: var(--corner-default, 4px); - background: var(--fill-white, #ffffff); + border-radius: var(--corner-default); + background: var(--fill-white); box-shadow: - 0px 0px 0px 1px #fff, - 0px 0px 0px 4px var(--icon-button_primary-hover, #7e9bfa); + 0px 0px 0px 1px var(--fill-white) + 0px 0px 0px 4px var(--icon-button_primary-hover); } &:hover { cursor: pointer; - border-radius: var(--corner-default, 4px); - background: var(--fill-default-lightest, #f2f4f6); + border-radius: var(--corner-default); + background: var(--fill-default-lightest); } &:active, &[aria-current="page"], &[aria-current="true"] { - color: var(--fill-action-dark, #4e56ea); - border-radius: var(--corner-default, 4px); - background: var(--fill-default-lightest, #f2f4f6); + color: var(--fill-action-dark); + border-radius: var(--corner-default); + background: var(--fill-default-lightest); } ` @@ -43,7 +43,7 @@ export const ElNavIconItemBadge = styled.span` top: 5px; width: var(--size-2); height: var(--size-2); - background-color: var(--icon-error, #f01830); + background-color: var(--icon-error); border-radius: 100%; ` From 867f06ca6773993e98c2daa4b10e1373b54a0085 Mon Sep 17 00:00:00 2001 From: ss-dimasm Date: Mon, 16 Dec 2024 15:14:22 +0700 Subject: [PATCH 2/4] chore: amend comma --- src/components/nav-icon-item/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/nav-icon-item/styles.ts b/src/components/nav-icon-item/styles.ts index 35b04c5b..dd5b7f72 100644 --- a/src/components/nav-icon-item/styles.ts +++ b/src/components/nav-icon-item/styles.ts @@ -20,7 +20,7 @@ const baseStyles = ` border-radius: var(--corner-default); background: var(--fill-white); box-shadow: - 0px 0px 0px 1px var(--fill-white) + 0px 0px 0px 1px var(--fill-white), 0px 0px 0px 4px var(--icon-button_primary-hover); } From 753b03cda55c83c70ce89d728861bc3614a51ce2 Mon Sep 17 00:00:00 2001 From: ss-dimasm Date: Mon, 16 Dec 2024 15:20:43 +0700 Subject: [PATCH 3/4] chore: update heading mdx doc --- src/components/nav-icon-item/nav-icon-item.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/nav-icon-item/nav-icon-item.mdx b/src/components/nav-icon-item/nav-icon-item.mdx index 03459f60..495502ee 100644 --- a/src/components/nav-icon-item/nav-icon-item.mdx +++ b/src/components/nav-icon-item/nav-icon-item.mdx @@ -12,19 +12,19 @@ A versatile component designed to render navigation icon items within an AppBar -## Default State +## Default The default appearance of the `NavIconItem` -## Active State +## With Active State The visual state of the `NavIconItem` when it's currently selected or active -## Badge State +## With Badge The visual state of the `NavIconItem` when it's currently selected or active with a badge From cfc6251724784ec25ddb649faedd5c1d7ca8764e Mon Sep 17 00:00:00 2001 From: ss-dimasm Date: Tue, 17 Dec 2024 10:03:52 +0700 Subject: [PATCH 4/4] chore: update storybook --- src/components/nav-icon-item/nav-icon-item.mdx | 4 ++-- src/components/nav-icon-item/nav-icon-item.stories.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/nav-icon-item/nav-icon-item.mdx b/src/components/nav-icon-item/nav-icon-item.mdx index 495502ee..07710a17 100644 --- a/src/components/nav-icon-item/nav-icon-item.mdx +++ b/src/components/nav-icon-item/nav-icon-item.mdx @@ -18,11 +18,11 @@ The default appearance of the `NavIconItem` -## With Active State +## Active The visual state of the `NavIconItem` when it's currently selected or active - + ## With Badge diff --git a/src/components/nav-icon-item/nav-icon-item.stories.tsx b/src/components/nav-icon-item/nav-icon-item.stories.tsx index c3fe93f7..3ed98727 100644 --- a/src/components/nav-icon-item/nav-icon-item.stories.tsx +++ b/src/components/nav-icon-item/nav-icon-item.stories.tsx @@ -58,7 +58,7 @@ export const Default: Story = { }, } -export const WithActiveState: Story = { +export const Active: Story = { args: { icon: , onClick: action('handleOnClick'),