Skip to content

Commit 61885a1

Browse files
ss-dimasmss-dimasm
authored
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
1 parent 08ee377 commit 61885a1

File tree

3 files changed

+36
-114
lines changed

3 files changed

+36
-114
lines changed

‎src/components/nav-icon-item/nav-icon-item.mdx

Lines changed: 11 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -12,56 +12,36 @@ A versatile component designed to render navigation icon items within an AppBar
1212

1313
<Controls />
1414

15-
## Default State
15+
## Default
1616

1717
The default appearance of the `NavIconItem`
1818

1919
<Canvas of={NavIconItemStories.Default} />
2020

21-
## Active State
21+
## Active
2222

2323
The visual state of the `NavIconItem` when it's currently selected or active
2424

25-
<Canvas of={NavIconItemStories.ActiveState} />
25+
<Canvas of={NavIconItemStories.Active} />
2626

27-
## Badge State
27+
## With Badge
2828

2929
The visual state of the `NavIconItem` when it's currently selected or active with a badge
3030

31-
<Canvas of={NavIconItemStories.BadgeState} />
31+
<Canvas of={NavIconItemStories.WithBadge} />
3232

33-
## Style Anchor Usage
34-
35-
Demonstrates how to use the `NavIconItem` using a standard `HTMLAnchorElement`
36-
37-
**note:** to make the `NavIconItem` have an "active" state, you must pass the `aria-current` attribute with a value of `page`
38-
39-
<Canvas of={NavIconItemStories.StyleAnchorUsage} />
40-
41-
<RenderHtmlMarkup of={NavIconItemStories.StyleAnchorUsage} />
42-
43-
## Style Button Usage
44-
45-
Demonstrates how to use the `NavIconItem` using a standard `HTMLButtonElement`
46-
47-
**note:** to make the `NavIconItem` have an "active" state, you must pass the `aria-current` attribute with a value of `true`
48-
49-
<Canvas of={NavIconItemStories.StyleButtonUsage} />
50-
51-
<RenderHtmlMarkup of={NavIconItemStories.StyleButtonUsage} />
52-
53-
## React Anchor Usage
33+
## With Href
5434

5535
Demonstrates how to render the `NavIconItem` using a anchor version
5636

57-
<Canvas of={NavIconItemStories.ReactAnchorUsage} />
37+
<Canvas of={NavIconItemStories.WithHref} />
5838

59-
<RenderHtmlMarkup of={NavIconItemStories.ReactAnchorUsage} />
39+
<RenderHtmlMarkup of={NavIconItemStories.WithHref} />
6040

61-
## React Button Usage
41+
## With OnClick
6242

6343
Demonstrates how to render the `NavIconItem` using a button version
6444

65-
<Canvas of={NavIconItemStories.ReactButtonUsage} />
45+
<Canvas of={NavIconItemStories.WithOnClick} />
6646

67-
<RenderHtmlMarkup of={NavIconItemStories.ReactButtonUsage} />
47+
<RenderHtmlMarkup of={NavIconItemStories.WithOnClick} />

‎src/components/nav-icon-item/nav-icon-item.stories.tsx

Lines changed: 9 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import type { Meta, StoryObj } from '@storybook/react'
22
import { NavIconItem } from './nav-icon-item'
33
import { Icon } from '../icon'
44
import { FlexContainer } from '../layout'
5-
import { ElAnchorNavIconItem, ElButtonNavIconItem, ElNavIconItemBadge } from './styles'
65
import { action } from '@storybook/addon-actions'
76

87
const meta = {
@@ -55,91 +54,33 @@ export const Default: Story = {
5554
onClick: action('handleOnClick'),
5655
},
5756
render: (args) => {
58-
return (
59-
<ElButtonNavIconItem onClick={action('handleClick')} data-state={undefined}>
60-
{args?.icon}
61-
</ElButtonNavIconItem>
62-
)
57+
return <NavIconItem {...args} />
6358
},
6459
}
6560

66-
export const ActiveState: Story = {
61+
export const Active: Story = {
6762
args: {
6863
icon: <Icon icon="star" />,
6964
onClick: action('handleOnClick'),
65+
isActive: true,
7066
},
7167
render: (args) => {
72-
return (
73-
<ElButtonNavIconItem onClick={action('handleClick')} aria-current="true">
74-
{args?.icon}
75-
</ElButtonNavIconItem>
76-
)
68+
return <NavIconItem {...args} />
7769
},
7870
}
7971

80-
export const BadgeState: Story = {
72+
export const WithBadge: Story = {
8173
args: {
8274
icon: <Icon icon="star" />,
8375
onClick: action('handleOnClick'),
8476
hasBadge: true,
8577
},
8678
render: (args) => {
87-
return (
88-
<ElButtonNavIconItem onClick={action('handleClick')}>
89-
{args?.icon}
90-
<ElNavIconItemBadge role="status" />
91-
</ElButtonNavIconItem>
92-
)
93-
},
94-
}
95-
96-
export const StyleAnchorUsage: Story = {
97-
args: {
98-
icon: <Icon icon="star" />,
99-
href: '#',
100-
},
101-
render: (args) => {
102-
return (
103-
<FlexContainer>
104-
<ElAnchorNavIconItem href={args.href!} aria-current={undefined} className="el-mr5">
105-
{args?.icon}
106-
</ElAnchorNavIconItem>
107-
<ElAnchorNavIconItem href={args.href!} aria-current="page" className="el-mx5">
108-
{args?.icon}
109-
</ElAnchorNavIconItem>
110-
<ElAnchorNavIconItem href={args.href!} aria-current={undefined} className="el-mx5">
111-
{args?.icon}
112-
<ElNavIconItemBadge role="status" />
113-
</ElAnchorNavIconItem>
114-
</FlexContainer>
115-
)
116-
},
117-
}
118-
119-
export const StyleButtonUsage: Story = {
120-
args: {
121-
icon: <Icon icon="star" />,
122-
onClick: action('handleClick'),
123-
},
124-
render: (args) => {
125-
return (
126-
<FlexContainer>
127-
<ElButtonNavIconItem onClick={action('handleClick')} aria-current={undefined} className="el-mr5">
128-
{args?.icon}
129-
</ElButtonNavIconItem>
130-
<ElButtonNavIconItem onClick={action('handleClick')} aria-current="true" className="el-mx5">
131-
{args?.icon}
132-
</ElButtonNavIconItem>
133-
<ElButtonNavIconItem onClick={action('handleClick')} aria-current={undefined} className="el-mx5">
134-
{args?.icon}
135-
<ElNavIconItemBadge role="status" />
136-
</ElButtonNavIconItem>
137-
</FlexContainer>
138-
)
79+
return <NavIconItem {...args} />
13980
},
14081
}
14182

142-
export const ReactAnchorUsage: Story = {
83+
export const WithHref: Story = {
14384
args: {
14485
icon: <Icon icon="star" />,
14586
href: '#',
@@ -155,7 +96,8 @@ export const ReactAnchorUsage: Story = {
15596
},
15697
}
15798

158-
export const ReactButtonUsage: Story = {
99+
export const WithOnClick: Story = {
100+
name: 'With OnClick',
159101
args: {
160102
icon: <Icon icon="star" />,
161103
onClick: action('handleClick'),

‎src/components/nav-icon-item/styles.ts

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,34 @@ import { ElIcon } from '../icon'
66
const baseStyles = `
77
position: relative;
88
display: inline-flex;
9-
padding: var(--space-2, 8px);
9+
padding: var(--spacing-2);
1010
justify-content: center;
1111
align-items: center;
12-
gap: var(--space-none, 0px);
13-
border-radius: var(--corner-default, 4px);
14-
background: var(--fill-white, #ffffff);
15-
border: var(--border-none, 0px);
16-
color: var(--icon-app_bar-default, #798da1);
12+
gap: var(--spacing-none);
13+
border-radius: var(--corner-defaul);
14+
background: var(--fill-white);
15+
border: var(--border-none);
16+
color: var(--icon-app_bar-default);
1717
outline: none;
1818
1919
&:focus-visible {
20-
border-radius: var(--corner-default, 4px);
21-
background: var(--fill-white, #ffffff);
20+
border-radius: var(--corner-default);
21+
background: var(--fill-white);
2222
box-shadow:
23-
0px 0px 0px 1px #fff,
24-
0px 0px 0px 4px var(--icon-button_primary-hover, #7e9bfa);
23+
0px 0px 0px 1px var(--fill-white),
24+
0px 0px 0px 4px var(--icon-button_primary-hover);
2525
}
2626
2727
&:hover {
2828
cursor: pointer;
29-
border-radius: var(--corner-default, 4px);
30-
background: var(--fill-default-lightest, #f2f4f6);
29+
border-radius: var(--corner-default);
30+
background: var(--fill-default-lightest);
3131
}
3232
3333
&:active, &[aria-current="page"], &[aria-current="true"] {
34-
color: var(--fill-action-dark, #4e56ea);
35-
border-radius: var(--corner-default, 4px);
36-
background: var(--fill-default-lightest, #f2f4f6);
34+
color: var(--fill-action-dark);
35+
border-radius: var(--corner-default);
36+
background: var(--fill-default-lightest);
3737
}
3838
`
3939

@@ -43,7 +43,7 @@ export const ElNavIconItemBadge = styled.span`
4343
top: 5px;
4444
width: var(--size-2);
4545
height: var(--size-2);
46-
background-color: var(--icon-error, #f01830);
46+
background-color: var(--icon-error);
4747
border-radius: 100%;
4848
`
4949

0 commit comments

Comments
 (0)