Skip to content

Commit 669623e

Browse files
stuarthendrenstuarthendren
authored
Merge pull request #212 from commitd/stuarthendren/radix-update
feat: updates radix component to latest versions
2 parents 4f92a0b + 5e17c1f commit 669623e

22 files changed

+876
-482
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ test-report.xml
2222
.env.development.local
2323
.env.test.local
2424
.env.production.local
25+
.eslintcache
2526
.parcel-cache
2627
example/.parcel-cache
2728

‎package-lock.json

Lines changed: 489 additions & 387 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -202,23 +202,23 @@
202202
"@committed/hooks": "^0.4.0",
203203
"@mdi/js": "^5.9.55",
204204
"@radix-ui/colors": "^0.1.7",
205-
"@radix-ui/react-accordion": "0.0.17",
206-
"@radix-ui/react-alert-dialog": "0.0.19",
207-
"@radix-ui/react-avatar": "0.0.14",
208-
"@radix-ui/react-checkbox": "0.0.16",
209-
"@radix-ui/react-context-menu": "0.0.23",
210-
"@radix-ui/react-dialog": "0.0.19",
211-
"@radix-ui/react-dropdown-menu": "0.0.22",
212-
"@radix-ui/react-label": "0.0.14",
213-
"@radix-ui/react-polymorphic": "0.0.12",
214-
"@radix-ui/react-popover": "^0.0.19",
215-
"@radix-ui/react-progress": "^0.0.14",
216-
"@radix-ui/react-radio-group": "0.0.18",
217-
"@radix-ui/react-separator": "0.0.14",
218-
"@radix-ui/react-slider": "0.0.16",
219-
"@radix-ui/react-switch": "0.0.14",
220-
"@radix-ui/react-tabs": "0.0.15",
221-
"@radix-ui/react-tooltip": "0.0.20",
222-
"@stitches/react": "^0.2.2"
205+
"@radix-ui/react-accordion": "0.0.18",
206+
"@radix-ui/react-alert-dialog": "0.0.20",
207+
"@radix-ui/react-avatar": "0.0.15",
208+
"@radix-ui/react-checkbox": "0.0.17",
209+
"@radix-ui/react-context-menu": "0.0.24",
210+
"@radix-ui/react-dialog": "0.0.20",
211+
"@radix-ui/react-dropdown-menu": "0.0.23",
212+
"@radix-ui/react-label": "0.0.15",
213+
"@radix-ui/react-polymorphic": "0.0.13",
214+
"@radix-ui/react-popover": "0.0.20",
215+
"@radix-ui/react-progress": "0.0.15",
216+
"@radix-ui/react-radio-group": "0.0.19",
217+
"@radix-ui/react-separator": "0.0.15",
218+
"@radix-ui/react-slider": "0.0.17",
219+
"@radix-ui/react-switch": "0.0.15",
220+
"@radix-ui/react-tabs": "0.0.16",
221+
"@radix-ui/react-tooltip": "0.0.21",
222+
"@stitches/react": "^0.2.5"
223223
}
224224
}

‎src/components/Accordion/Accordion.stories.tsx

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,23 @@ export default {
99
argTypes: {
1010
type: {
1111
defaultValue: 'single',
12+
control: {
13+
type: 'select',
14+
},
15+
options: ['single', 'multiple'],
16+
description: 'Defines the policy for how many items can be open',
17+
},
18+
collapsible: {
19+
defaultValue: true,
20+
control: {
21+
type: 'boolean',
22+
},
23+
description: 'In single mode only, declares that they can all be closed.',
1224
},
1325
},
1426
} as Meta
1527

16-
export const Default: Story<React.ComponentProps<typeof Accordion>> = ({
17-
...args
18-
}) => {
28+
export const Default: Story = ({ ...args }) => {
1929
return (
2030
<Accordion {...args}>
2131
<AccordionItem value="item-1">

‎src/components/Accordion/Accordion.tsx

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -39,16 +39,20 @@ type AccordionProps = Partial<Polymorphic.OwnProps<typeof Root>> &
3939
CSSProps
4040

4141
export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
42-
({ collapsible = true, type = 'single', ...props }, forwardedRef) => (
43-
<StyledRoot
44-
type={type}
45-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
46-
// @ts-ignore This type is allowed when type single.
47-
collapsible={collapsible}
48-
ref={forwardedRef}
49-
{...props}
50-
/>
51-
)
42+
({ collapsible = true, type = 'single', ...props }, forwardedRef) => {
43+
let additionalProps = {}
44+
if (type == 'single' && collapsible) {
45+
additionalProps = { collapsible: true }
46+
}
47+
return (
48+
<StyledRoot
49+
type={type}
50+
{...additionalProps}
51+
ref={forwardedRef}
52+
{...props}
53+
/>
54+
)
55+
}
5256
) as Polymorphic.ForwardRefComponent<
5357
Polymorphic.IntrinsicElement<typeof Root>,
5458
AccordionProps

‎src/components/Box/Box.stories.tsx

Lines changed: 39 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,52 @@ import { Box } from '.'
55
export default {
66
title: 'Components/Box',
77
component: Box,
8+
argTypes: {
9+
onClick: { action: 'clicked' },
10+
container: {
11+
control: {
12+
type: 'select',
13+
},
14+
options: ['flex', 'block'],
15+
defaultValue: 'block',
16+
description:
17+
'Change the display type of the container to see the effect on the variants of the box.',
18+
},
19+
variant: {
20+
control: {
21+
type: 'select',
22+
},
23+
options: ['grow', 'max', 'high', 'wide', 'fullscreen'],
24+
description:
25+
'Some commonly styles are provided as variants for convenience (and improved performance).',
26+
},
27+
},
828
} as Meta
929

10-
export const Default: React.FC = () => (
30+
export const Default: React.FC<{ container?: 'block' | 'flex' }> = ({
31+
container,
32+
...args
33+
}) => (
1134
<Box
1235
css={{
13-
backgroundColor: '$paper',
14-
color: '$text',
36+
display: container,
37+
backgroundColor: '$default',
1538
border: '$colors$red500 solid $sizes$3',
16-
padding: '$4',
39+
width: '100%',
40+
height: '300px',
1741
}}
1842
>
19-
Box
43+
<Box
44+
{...args}
45+
css={{
46+
backgroundColor: '$paper',
47+
color: '$text',
48+
border: '$colors$red500 solid $sizes$3',
49+
padding: '$4',
50+
}}
51+
>
52+
Box
53+
</Box>
2054
</Box>
2155
)
2256

‎src/components/Box/Box.test.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import React from 'react'
22
import { renderLight, renderDark } from 'test-utils'
3-
import { Default } from './Box.stories'
3+
import { Primary } from './Box.stories'
44

55
it('renders light without error', () => {
6-
const { asFragment } = renderLight(<Default />)
6+
const { asFragment } = renderLight(<Primary />)
77
expect(asFragment()).toBeDefined()
88
})
99

1010
it('renders dark without error', () => {
11-
const { asFragment } = renderDark(<Default />)
11+
const { asFragment } = renderDark(<Primary />)
1212
expect(asFragment()).toBeDefined()
1313
})

‎src/components/Box/Box.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,37 @@ import { styled } from '../../stitches.config'
66
* Use the `Box` component where you might otherwise use a div.
77
* It has access to our design tokens to control width, margin, padding, color etc. though the css prop.
88
*
9+
* Some utility variants are provided for standard box behaviors.
10+
*
11+
* - `grow` for use with `flex` layout sets `flex-grow` to 1
12+
* - `high` adds 100% height
13+
* - `wide` adds 100% width
14+
* - `max` adds 100% height and width
15+
* - `fullscreen` adds 100vh height and 100% width
916
*/
1017
export const Box = styled('div', {
1118
// Reset
1219
boxSizing: 'border-box',
20+
21+
variants: {
22+
variant: {
23+
grow: {
24+
flex: 1,
25+
},
26+
high: {
27+
height: '100%',
28+
},
29+
wide: {
30+
width: '100%',
31+
},
32+
max: {
33+
height: '100%',
34+
width: '100%',
35+
},
36+
fullscreen: {
37+
width: '100%',
38+
height: '100vh',
39+
},
40+
},
41+
},
1342
})

‎src/components/Button/Button.stories.tsx

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Meta, Story } from '@storybook/react'
22
import React, { ComponentProps } from 'react'
3-
import { Grid, Row } from '../'
3+
import { Grid, Row, Column } from '../'
44
import { Variants } from '../../docs/util'
55
import { Button } from './Button'
66

@@ -59,19 +59,36 @@ export const Default: Story<ComponentProps<typeof Button>> = (args) => {
5959
return <Button {...args}>Button</Button>
6060
}
6161

62-
const Template: Story = (args) => <Button {...args} />
63-
64-
export const Primary = Template.bind({})
65-
Primary.args = { children: 'Button' }
66-
62+
/* Three size options are available */
6763
export const Size = () => (
68-
<Row css={{ gap: '$3' }}>
64+
<Row css={{ gap: '$3', mb: '$3' }}>
6965
<Button size="small">Small</Button>
7066
<Button size="default">Default</Button>
7167
<Button size="large">Large</Button>
7268
</Row>
7369
)
7470

71+
/* Add `full-width` to make the button grow to take the full width */
72+
export const FullWidth = () => (
73+
<Column css={{ gap: '$3' }}>
74+
<Button full-width size="small">
75+
Small
76+
</Button>
77+
<Button full-width size="default">
78+
Default
79+
</Button>
80+
<Button full-width size="large">
81+
Large
82+
</Button>
83+
</Column>
84+
)
85+
86+
/* Three variants are supported,
87+
*
88+
* - `primary` use for the main action, try to only use one per page
89+
* - `secondary` use for other actions on the page
90+
* - `tertiary` use to pair with others as cancel or for icon buttons
91+
*/
7592
export const Variant = () => (
7693
<Row css={{ gap: '$3' }}>
7794
<Button variant="primary">Primary</Button>
@@ -80,6 +97,7 @@ export const Variant = () => (
8097
</Row>
8198
)
8299

100+
/** If the action is destructive, say a delete or an action that cannot be undone, add the `destructive` flag */
83101
export const Destructive = () => (
84102
<Row css={{ gap: '$3' }}>
85103
<Button destructive variant="primary">
@@ -94,6 +112,7 @@ export const Destructive = () => (
94112
</Row>
95113
)
96114

115+
/** The `disabled` state is controlled in the standard way */
97116
export const Disabled = () => (
98117
<Row css={{ gap: '$3' }}>
99118
<Button disabled variant="primary">

‎src/components/Button/Button.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,7 @@ export const active = {
2323

2424
export const disabled = {
2525
pointerEvents: 'none',
26-
$$main: '$$lowlight',
27-
opacity: 0.4,
26+
opacity: 0.3,
2827
}
2928

3029
export const buttonInteractionStyles = {
@@ -143,6 +142,11 @@ const buttonVariants = {
143142
variant: mainVariants,
144143
destructive: destructiveVariants,
145144
size: sizeVariants,
145+
['full-width']: {
146+
true: {
147+
width: '100%',
148+
},
149+
},
146150
force: {
147151
hover,
148152
focus,

0 commit comments

Comments
 (0)