Skip to content

Commit f3d5444

Browse files
pawelgrimmpawelgrimm
committed
feat!: drop Heading in favor of Text heading variants
BREAKING CHANGE: Heading is removed. Use Text with a heading variant, e.g. <Heading level={2}> becomes <Text variant="heading-2">, which renders an h2. Use render to decouple semantics from the visual style.
1 parent 45fc61b commit f3d5444

13 files changed

Lines changed: 166 additions & 647 deletions

‎src/button/button.mdx‎

Lines changed: 36 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { Box } from '../box'
44
import { Inline } from '../inline'
55
import { Stack } from '../stack'
66
import { Text } from '../text'
7-
import { Heading } from '../heading'
87
import { Button } from './button'
98
import * as ButtonStories from './button.stories'
109

@@ -74,6 +73,41 @@ Buttons can be set to take the full width of their container by using the `width
7473

7574
## Dark mode
7675

77-
Dark mode colors are applied when the `.theme_dark` class is set on the root element.
76+
Even though Reactist does not yet owns the concept of dark mode, and leaves it for apps to set it
77+
up, here's a demo on how easily you can set it up by manipulating color variables only.
7878

7979
<Canvas of={ButtonStories.DarkMode} />
80+
81+
## Colors
82+
83+
The following CSS custom properties are available to customize the button-like element appearance.
84+
85+
```
86+
--reactist-actionable-primary-idle-tint
87+
--reactist-actionable-primary-idle-fill
88+
--reactist-actionable-primary-hover-tint
89+
--reactist-actionable-primary-hover-fill
90+
--reactist-actionable-primary-disabled-tint
91+
--reactist-actionable-primary-disabled-fill
92+
93+
--reactist-actionable-secondary-idle-tint
94+
--reactist-actionable-secondary-idle-fill
95+
--reactist-actionable-secondary-hover-tint
96+
--reactist-actionable-secondary-hover-fill
97+
--reactist-actionable-secondary-disabled-tint
98+
--reactist-actionable-secondary-disabled-fill
99+
100+
--reactist-actionable-tertiary-idle-tint
101+
--reactist-actionable-tertiary-idle-fill
102+
--reactist-actionable-tertiary-hover-tint
103+
--reactist-actionable-tertiary-hover-fill
104+
--reactist-actionable-tertiary-disabled-tint
105+
--reactist-actionable-tertiary-disabled-fill
106+
107+
--reactist-actionable-destructive-idle-tint
108+
--reactist-actionable-destructive-idle-fill
109+
--reactist-actionable-destructive-hover-tint
110+
--reactist-actionable-destructive-hover-fill
111+
--reactist-actionable-destructive-disabled-tint
112+
--reactist-actionable-destructive-disabled-fill
113+
```

‎src/button/button.stories.jsx‎

Lines changed: 44 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import * as React from 'react'
22
import { useEffect, useState } from 'react'
33

4-
import { withDarkTheme } from '../../.storybook/dark-theme'
54
import { Box } from '../box'
6-
import { Heading } from '../heading'
75
import { Inline } from '../inline'
86
import { Stack } from '../stack'
97
import { Text } from '../text'
@@ -53,7 +51,7 @@ function FullWidthTemplate({ label, ...otherProps }) {
5351
}
5452
return (
5553
<Stack space="medium">
56-
<Heading level="2">Full-width buttons and label alignment</Heading>
54+
<Text variant="heading-2">Full-width buttons and label alignment</Text>
5755
<Text>
5856
When buttons have `width` other than the default `auto` they can also customize how
5957
the label is aligned horizontally.
@@ -87,7 +85,7 @@ function PlaygroundTemplate({ label, ...props }) {
8785
}
8886
return (
8987
<Stack space="large">
90-
<Heading level="2">Click on the buttons to see the loading state</Heading>
88+
<Text variant="heading-2">Click on the buttons to see the loading state</Text>
9189
<Inline space="large">
9290
<Box>
9391
<Stack space="large">
@@ -136,7 +134,48 @@ function PlaygroundTemplate({ label, ...props }) {
136134

137135
function DarkModeTemplate(props) {
138136
return (
139-
<Box padding="xlarge" background="default">
137+
<Box
138+
padding="xlarge"
139+
style={{
140+
backgroundColor: 'rgb(31, 31, 31)',
141+
'--reactist-content-primary': 'rgba(255, 255, 255, 0.88)',
142+
// variant="primary"
143+
'--reactist-actionable-primary-idle-tint': '#eceeee',
144+
'--reactist-actionable-primary-idle-fill': '#008099',
145+
'--reactist-actionable-primary-hover-tint': '#eceeee',
146+
'--reactist-actionable-primary-hover-fill': '#1f8fa5',
147+
'--reactist-actionable-primary-disabled-tint': '#767777',
148+
'--reactist-actionable-primary-disabled-fill': '#00404c',
149+
// variant="secondary"
150+
'--reactist-actionable-secondary-idle-tint': '#eceeee',
151+
'--reactist-actionable-secondary-idle-fill': '#283233',
152+
'--reactist-actionable-secondary-hover-tint': '#eceeee',
153+
'--reactist-actionable-secondary-hover-fill': '#31393b',
154+
'--reactist-actionable-secondary-disabled-tint': '#767777',
155+
'--reactist-actionable-secondary-disabled-fill': '#283233',
156+
// variant="tertiary"
157+
'--reactist-actionable-tertiary-idle-tint': '#22a5bf',
158+
'--reactist-actionable-tertiary-hover-tint': '#22a5bf',
159+
'--reactist-actionable-tertiary-hover-fill': '#283233',
160+
'--reactist-actionable-tertiary-disabled-tint': '#11525f',
161+
// variant="quaternary"
162+
'--reactist-actionable-quaternary-idle-tint': '#8fa0a3',
163+
'--reactist-actionable-quaternary-hover-tint': '#eceeee',
164+
'--reactist-actionable-quaternary-hover-fill': '#283233',
165+
'--reactist-actionable-quaternary-disabled-tint': '#444d4f',
166+
// colour for the desctructive tone (used in certain ways by all variants)
167+
'--reactist-actionable-primary-destructive-idle-tint': '#fff',
168+
'--reactist-actionable-primary-destructive-idle-fill': '#d26160',
169+
'--reactist-actionable-primary-destructive-hover-tint': '#fff',
170+
'--reactist-actionable-primary-destructive-hover-fill': '#e98786',
171+
'--reactist-actionable-primary-destructive-disabled-tint': '#767777',
172+
'--reactist-actionable-primary-destructive-disabled-fill': '#7f2c24',
173+
/* secondary destructive button colors (no fill, as these are transparent and bordered) */
174+
'--reactist-actionable-secondary-destructive-idle-tint': '#f68584',
175+
'--reactist-actionable-secondary-destructive-hover-tint': '#eFa9a9',
176+
'--reactist-actionable-secondary-destructive-disabled-tint': '#8a5853',
177+
}}
178+
>
140179
<PlaygroundTemplate {...props} />
141180
</Box>
142181
)
@@ -794,19 +833,13 @@ export const Playground = {
794833

795834
export const DarkMode = {
796835
render: DarkModeTemplate.bind({}),
797-
decorators: [withDarkTheme],
798836
name: 'Dark mode',
799837

800838
parameters: {
801839
docs: {
802840
source: {
803841
type: 'dynamic',
804842
},
805-
// Render as an iframe to scope `theme_dark` to the story
806-
story: {
807-
inline: false,
808-
height: '320px',
809-
},
810843
},
811844
},
812845

‎src/button/icon-button.mdx‎

Lines changed: 35 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { Box } from '../box'
44
import { Inline } from '../inline'
55
import { Stack } from '../stack'
66
import { Text } from '../text'
7-
import { Heading } from '../heading'
87
import { IconButton } from '../button'
98
import * as IconButtonStories from './icon-button.stories'
109

@@ -58,10 +57,43 @@ And here's how that look like:
5857

5958
### Dark mode
6059

61-
Dark mode colors are applied when the `.theme_dark` class is set on the root element.
60+
Even though Reactist does not yet owns the concept of dark mode, and leaves it for apps to set it
61+
up, here's a demo on how easily you can set it up by manipulating color variables only.
6262

6363
<Canvas of={IconButtonStories.DarkMode} />
6464

6565
## Style customization
6666

67-
#
67+
### Colors
68+
69+
The following CSS custom properties are available to customize the button-like element appearance.
70+
71+
```
72+
--reactist-actionable-primary-idle-tint
73+
--reactist-actionable-primary-idle-fill
74+
--reactist-actionable-primary-hover-tint
75+
--reactist-actionable-primary-hover-fill
76+
--reactist-actionable-primary-disabled-tint
77+
--reactist-actionable-primary-disabled-fill
78+
79+
--reactist-actionable-secondary-idle-tint
80+
--reactist-actionable-secondary-idle-fill
81+
--reactist-actionable-secondary-hover-tint
82+
--reactist-actionable-secondary-hover-fill
83+
--reactist-actionable-secondary-disabled-tint
84+
--reactist-actionable-secondary-disabled-fill
85+
86+
--reactist-actionable-tertiary-idle-tint
87+
--reactist-actionable-tertiary-idle-fill
88+
--reactist-actionable-tertiary-hover-tint
89+
--reactist-actionable-tertiary-hover-fill
90+
--reactist-actionable-tertiary-disabled-tint
91+
--reactist-actionable-tertiary-disabled-fill
92+
93+
--reactist-actionable-destructive-idle-tint
94+
--reactist-actionable-destructive-idle-fill
95+
--reactist-actionable-destructive-hover-tint
96+
--reactist-actionable-destructive-hover-fill
97+
--reactist-actionable-destructive-disabled-tint
98+
--reactist-actionable-destructive-disabled-fill
99+
```

‎src/button/icon-button.stories.jsx‎

Lines changed: 43 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import * as React from 'react'
22
import { useEffect, useState } from 'react'
33

4-
import { withDarkTheme } from '../../.storybook/dark-theme'
54
import { Box } from '../box'
65
import { IconButton } from '../button'
7-
import { Heading } from '../heading'
86
import { Inline } from '../inline'
97
import { Stack } from '../stack'
108
import { Text } from '../text'
@@ -35,7 +33,7 @@ function LoadingButton(props) {
3533
function PlaygroundTemplate({ label, ...props }) {
3634
return (
3735
<Stack space="large">
38-
<Heading level="2">Click on the buttons to see the loading state</Heading>
36+
<Text variant="heading-2">Click on the buttons to see the loading state</Text>
3937
<Inline space="large">
4038
<Box>
4139
<Stack space="large">
@@ -54,7 +52,48 @@ function PlaygroundTemplate({ label, ...props }) {
5452

5553
function DarkModeTemplate(props) {
5654
return (
57-
<Box padding="xlarge" background="default">
55+
<Box
56+
padding="xlarge"
57+
style={{
58+
backgroundColor: 'rgb(31, 31, 31)',
59+
'--reactist-content-primary': 'rgba(255, 255, 255, 0.88)',
60+
// variant="primary"
61+
'--reactist-actionable-primary-idle-tint': '#eceeee',
62+
'--reactist-actionable-primary-idle-fill': '#008099',
63+
'--reactist-actionable-primary-hover-tint': '#eceeee',
64+
'--reactist-actionable-primary-hover-fill': '#1f8fa5',
65+
'--reactist-actionable-primary-disabled-tint': '#767777',
66+
'--reactist-actionable-primary-disabled-fill': '#00404c',
67+
// variant="secondary"
68+
'--reactist-actionable-secondary-idle-tint': '#eceeee',
69+
'--reactist-actionable-secondary-idle-fill': '#283233',
70+
'--reactist-actionable-secondary-hover-tint': '#eceeee',
71+
'--reactist-actionable-secondary-hover-fill': '#31393b',
72+
'--reactist-actionable-secondary-disabled-tint': '#767777',
73+
'--reactist-actionable-secondary-disabled-fill': '#283233',
74+
// variant="tertiary"
75+
'--reactist-actionable-tertiary-idle-tint': '#22a5bf',
76+
'--reactist-actionable-tertiary-hover-tint': '#22a5bf',
77+
'--reactist-actionable-tertiary-hover-fill': '#283233',
78+
'--reactist-actionable-tertiary-disabled-tint': '#11525f',
79+
// variant="quaternary"
80+
'--reactist-actionable-quaternary-idle-tint': '#8fa0a3',
81+
'--reactist-actionable-quaternary-hover-tint': '#eceeee',
82+
'--reactist-actionable-quaternary-hover-fill': '#283233',
83+
'--reactist-actionable-quaternary-disabled-tint': '#444d4f',
84+
// colour for the desctructive tone (used in certain ways by all variants)
85+
'--reactist-actionable-primary-destructive-idle-tint': '#fff',
86+
'--reactist-actionable-primary-destructive-idle-fill': '#d26160',
87+
'--reactist-actionable-primary-destructive-hover-tint': '#fff',
88+
'--reactist-actionable-primary-destructive-hover-fill': '#e98786',
89+
'--reactist-actionable-primary-destructive-disabled-tint': '#767777',
90+
'--reactist-actionable-primary-destructive-disabled-fill': '#7f2c24',
91+
/* secondary destructive button colors (no fill, as these are transparent and bordered) */
92+
'--reactist-actionable-secondary-destructive-idle-tint': '#f68584',
93+
'--reactist-actionable-secondary-destructive-hover-tint': '#eFa9a9',
94+
'--reactist-actionable-secondary-destructive-disabled-tint': '#8a5853',
95+
}}
96+
>
5897
<PlaygroundTemplate {...props} />
5998
</Box>
6099
)
@@ -484,18 +523,12 @@ export const Playground = {
484523

485524
export const DarkMode = {
486525
render: DarkModeTemplate.bind({}),
487-
decorators: [withDarkTheme],
488526

489527
parameters: {
490528
docs: {
491529
source: {
492530
type: 'dynamic',
493531
},
494-
// Render as an iframe to scope `theme_dark` to the story
495-
story: {
496-
inline: false,
497-
height: '320px',
498-
},
499532
},
500533
},
501534

0 commit comments

Comments
 (0)