From 61885a191a92c9046b972b0cb7bf8fcbedcb96d0 Mon Sep 17 00:00:00 2001
From: Dimas M <96416644+ss-dimasm@users.noreply.github.com>
Date: Tue, 17 Dec 2024 10:07:56 +0700
Subject: [PATCH] chore: remove fallback css variables `NavIconItem` (#257)
* chore: remove css variables fallback values for `NavIconItem`
* chore: amend comma
* chore: update heading mdx doc
* chore: update storybook
---
.../nav-icon-item/nav-icon-item.mdx | 42 +++-------
.../nav-icon-item/nav-icon-item.stories.tsx | 76 +++----------------
src/components/nav-icon-item/styles.ts | 32 ++++----
3 files changed, 36 insertions(+), 114 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..07710a17 100644
--- a/src/components/nav-icon-item/nav-icon-item.mdx
+++ b/src/components/nav-icon-item/nav-icon-item.mdx
@@ -12,56 +12,36 @@ A versatile component designed to render navigation icon items within an AppBar
-## Default State
+## Default
The default appearance of the `NavIconItem`
-## Active State
+## Active
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
-
+
-## 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..3ed98727 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 Active: 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..dd5b7f72 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%;
`