Skip to content
This repository was archived by the owner on Aug 2, 2024. It is now read-only.

Commit 6b17515

Browse files
mudrilamudrila
authored
Merge pull request #97 from decentdao/fix/icon-button-and-solid-button-disabled-color
Fix primary button disabled color and icon button
2 parents f603690 + 0d25b2c commit 6b17515

12 files changed

Lines changed: 306 additions & 7 deletions

File tree

‎design/atoms/components/iconButton/controls.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
export const buttonArgTypes = {
2+
// hides ref property from controls, causes an error to occur
3+
as: {
4+
table: {
5+
disable: true,
6+
},
7+
},
8+
variant: {
9+
table: {
10+
disable: true,
11+
}
12+
},
13+
children: {
14+
description: '`string` `ReactElement`',
15+
},
16+
isDisabled: {
17+
description: 'Changes the state of button to `disabled`',
18+
control: "boolean",
19+
},
20+
}

‎design/atoms/components/iconButton/iconButton.stories.mdx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import { IconButton, Flex, Icon } from "@chakra-ui/react"
2+
import { Fragment } from 'react';
3+
import { Canvas, Meta, Story } from "@storybook/addon-docs"
4+
import { MagnifyingGlass } from '@phosphor-icons/react'
5+
6+
import { buttonArgTypes } from "./controls"
7+
8+
<Meta title="Atoms/Icon Buttons" component={IconButton} />
9+
10+
export const Template = (args) => { return (<Flex gap="1rem">
11+
<IconButton size="icon-sm" {...args} icon={<Icon width="1.25rem" height="1.25rem" as={MagnifyingGlass} />} />
12+
<IconButton size="icon-md" {...args} icon={<Icon width="1.5rem" height="1.5rem" as={MagnifyingGlass} />} />
13+
<IconButton size="icon-lg" {...args} icon={<Icon width="2rem" height="2rem" as={MagnifyingGlass} />} />
14+
</Flex>)}
15+
16+
## Usage
17+
18+
```ts
19+
import { IconButton, Icon } from '@chakra-ui/react'
20+
import { MagnifyingGlass } from '@phosphor-icons/react'
21+
22+
function SomeComponentWithSecondaryActionHandledByIconButton() {
23+
return (
24+
<>
25+
<IconButton size="icon-sm" variant="primary" icon={<Icon width="1.25rem" height="1.25rem" as={MagnifyingGlass} />} />
26+
<IconButton size="icon-md" variant="secondary" icon={<Icon width="1.5rem" height="1.5rem" as={MagnifyingGlass} />} />
27+
<IconButton size="icon-lg" variant="tertiary" icon={<Icon width="2rem" height="2rem" as={MagnifyingGlass} />} />
28+
</>
29+
);
30+
}
31+
```
32+
33+
34+
35+
## Types of Buttons
36+
37+
#### Primary
38+
39+
<ul>
40+
<li>Used for the most important action on the page.</li>
41+
<li>Solid color buttons based on the primary brand color. </li>
42+
</ul>
43+
44+
<Canvas>
45+
<Story
46+
name="PrimaryIconButton"
47+
argTypes={buttonArgTypes}
48+
args={{
49+
variant: "primary",
50+
}}
51+
>
52+
{Template.bind({})}
53+
</Story>
54+
</Canvas>
55+
56+
#### Secondary
57+
58+
<ul>
59+
<li>Used for the second most important action on the page. </li>
60+
<li>
61+
These are also solid color buttons however the secondary buttons use a muted color palette.
62+
</li>
63+
</ul>
64+
65+
<Canvas>
66+
<Story
67+
name="SecondaryIconButton"
68+
argTypes={buttonArgTypes}
69+
args={{
70+
variant: "secondary",
71+
}}
72+
>
73+
{Template.bind({})}
74+
</Story>
75+
</Canvas>
76+
77+
#### Tertiary
78+
79+
<ul>
80+
<li>
81+
Tertiary buttons are outlined versions of the Primary buttons and should be used for in page
82+
actions like filtering.{" "}
83+
</li>
84+
</ul>
85+
86+
<Canvas>
87+
<Story
88+
name="TertiaryIconButton"
89+
argTypes={buttonArgTypes}
90+
args={{
91+
variant: "tertiary",
92+
}}
93+
>
94+
{Template.bind({})}
95+
</Story>
96+
</Canvas>

‎design/tokens/components/button/theme/button.sizes.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,23 @@ export default {
1313
apply: 'utility-styles-button-small',
1414
height: '1.875rem',
1515
padding: '0.25rem .5rem'
16+
},
17+
'icon-lg': {
18+
apply: 'utility-styles-icon-button-large',
19+
height: '2.5rem',
20+
width: '2.5rem',
21+
borderRadius: '0.5rem'
22+
},
23+
'icon-md': {
24+
apply: 'utility-styles-icon-button-base',
25+
height: '1.75rem',
26+
width: '1.75rem',
27+
borderRadius: '0.25rem'
28+
},
29+
'icon-sm': {
30+
apply: 'utility-styles-icon-button-small',
31+
height: '1.5rem',
32+
width: '1.5rem',
33+
borderRadius: '0.25rem'
1634
}
1735
}

‎design/tokens/components/button/theme/button.variants.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { defineStyle } from "@chakra-ui/react"
22
const primaryDisabled = {
33
bg: "neutral-5",
4-
color: "lilac-0",
4+
color: "neutral-7",
55
}
66

77
const primary = defineStyle({
88
bg: "lilac-0",
99
color: "cosmic-nebula-0",
1010
_hover: {
11-
bg: "#CFB3EA",
11+
bg: "lilac--1",
1212
_disabled: {
1313
...primaryDisabled,
1414
},

‎design/tokens/components/iconButton/theme/iconButton.base.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
// Global Base icon button
2+
import { defineStyle } from '@chakra-ui/react'
3+
4+
const baseStyle = defineStyle({
5+
alignItems: 'center',
6+
borderRadius: '4px',
7+
padding: '4px',
8+
boxShadow: 'none',
9+
display: 'flex',
10+
justifyContent: 'center',
11+
gap: '4px',
12+
_disabled: {
13+
cursor: 'default'
14+
},
15+
_hover: {},
16+
_focus: {}
17+
})
18+
19+
export default baseStyle

‎design/tokens/components/iconButton/theme/iconButton.sizes.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
export default {
2+
'lg': {
3+
apply: 'utility-styles-icon-button-large',
4+
height: '2rem',
5+
width: '2rem',
6+
padding: '0.5rem',
7+
borderRadius: '0.5rem'
8+
},
9+
'base': {
10+
apply: 'utility-styles-icon-button-base',
11+
height: '1.5rem',
12+
width: '1.5rem',
13+
padding: '0.25rem',
14+
borderRadius: '0.25rem'
15+
},
16+
'sm': {
17+
apply: 'utility-styles-icon-button-small',
18+
height: '1.25rem',
19+
width: '1.25rem',
20+
padding: '0.25rem',
21+
borderRadius: '0.25rem'
22+
},
23+
'icon-lg': {
24+
apply: 'utility-styles-icon-button-large',
25+
height: '2rem',
26+
width: '2rem',
27+
padding: '0.5rem',
28+
borderRadius: '0.5rem'
29+
},
30+
'icon-md': {
31+
apply: 'utility-styles-icon-button-base',
32+
height: '1.5rem',
33+
width: '1.5rem',
34+
padding: '0.25rem',
35+
borderRadius: '0.25rem'
36+
},
37+
'icon-sm': {
38+
apply: 'utility-styles-icon-button-small',
39+
height: '1.25rem',
40+
width: '1.25rem',
41+
padding: '0.25rem',
42+
borderRadius: '0.25rem'
43+
}
44+
}

‎design/tokens/components/iconButton/theme/iconButton.variants.ts‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { defineStyle } from "@chakra-ui/react"
2+
const primaryDisabled = {
3+
bg: "neutral-5",
4+
color: "neutral-7",
5+
}
6+
7+
const primary = defineStyle({
8+
bg: "lilac-0",
9+
color: "cosmic-nebula-0",
10+
_hover: {
11+
bg: "lilac--1",
12+
_disabled: {
13+
...primaryDisabled,
14+
},
15+
},
16+
_disabled: {
17+
...primaryDisabled,
18+
},
19+
_active: {
20+
bg: "lilac--2",
21+
},
22+
})
23+
24+
const secondaryDisabled = {
25+
borderColor: "neutral-5",
26+
color: "neutral-5",
27+
}
28+
const secondary = defineStyle({
29+
border: "2px solid",
30+
borderColor: "lilac-0",
31+
color: "lilac-0",
32+
_hover: {
33+
borderColor: "lilac--1",
34+
color: "lilac--1",
35+
_disabled: {
36+
...secondaryDisabled,
37+
},
38+
},
39+
_disabled: {
40+
...secondaryDisabled,
41+
},
42+
_active: {
43+
borderColor: "lilac--2",
44+
color: "lilac--2",
45+
},
46+
})
47+
48+
const tertiaryDisabled = {
49+
color: "neutral-5",
50+
}
51+
52+
const tertiaryLoading = {
53+
// @todo add loading state
54+
}
55+
const tertiary = defineStyle({
56+
bg: "transparent",
57+
color: "lilac-0",
58+
_hover: {
59+
bg: "white-alpha-08",
60+
color: "lilac--1",
61+
_disabled: {
62+
...tertiaryDisabled,
63+
_loading: tertiaryLoading,
64+
},
65+
},
66+
_disabled: {
67+
...tertiaryDisabled,
68+
_loading: tertiaryLoading,
69+
},
70+
_active: {
71+
bg: "white-alpha-08",
72+
color: "lilac--2",
73+
},
74+
_focus: {},
75+
})
76+
77+
const iconButtonVariants = {
78+
primary,
79+
secondary,
80+
tertiary,
81+
}
82+
83+
export default iconButtonVariants

‎design/tokens/components/iconButton/theme/index.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { defineStyleConfig } from '@chakra-ui/react';
2+
3+
import baseStyle from './iconButton.base'
4+
import variants from './iconButton.variants'
5+
import sizes from './iconButton.sizes'
6+
7+
const IconButton = defineStyleConfig({
8+
baseStyle,
9+
variants,
10+
sizes,
11+
defaultProps: {
12+
size: 'icon-md',
13+
variant: 'primary',
14+
},
15+
});
16+
17+
export default IconButton

‎design/tokens/components/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import Alert from './alert/theme';
22
import Button from './button/theme';
3+
import IconButton from './iconButton/theme';
34
import Input from './input/theme';
45
import Textarea from './textarea/theme';
56
import NumberInput from './numberInput/theme';
@@ -9,6 +10,7 @@ import Tooltip from './tooltip/theme';
910
export default {
1011
Alert,
1112
Button,
13+
IconButton,
1214
Input,
1315
Textarea,
1416
NumberInput,

‎design/tokens/components/input/theme/input.base.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ const { definePartsStyle } = createMultiStyleConfigHelpers(inputAnatomy.keys)
55

66
const disabled = {
77
cursor: "default",
8-
border: "white-alpha-08",
9-
color: "neutral-1",
8+
borderColor: "white-alpha-08",
9+
color: "neutral-6",
1010
_placeholder: {
1111
color: "neutral-5",
1212
},

0 commit comments

Comments
 (0)