@spark-web/box 1.0.9 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +203 -0
- package/README.md +119 -85
- package/dist/declarations/src/{Box.d.ts → box.d.ts} +11 -5
- package/dist/declarations/src/context.d.ts +1 -1
- package/dist/declarations/src/index.d.ts +4 -4
- package/dist/declarations/src/{useBoxProps.d.ts → use-box-props.d.ts} +1 -1
- package/dist/declarations/src/{useBoxStyles.d.ts → use-box-styles.d.ts} +9 -1
- package/dist/spark-web-box.cjs.dev.js +144 -116
- package/dist/spark-web-box.cjs.prod.js +144 -116
- package/dist/spark-web-box.esm.js +144 -116
- package/package.json +15 -8
- /package/dist/declarations/src/{BackgroundProvider.d.ts → background-provider.d.ts} +0 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
# @spark-web/box
|
|
2
|
+
|
|
3
|
+
## 1.2.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#382](https://github.com/brighte-labs/spark-web/pull/382)
|
|
8
|
+
[`955bf5d`](https://github.com/brighte-labs/spark-web/commit/955bf5d7698bfdf45e7f317aa3e726c81d3444c0)
|
|
9
|
+
Thanks [@dilipt-brighte](https://github.com/dilipt-brighte)! - Updates React
|
|
10
|
+
version to latest (18.2.0)
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
[[`955bf5d`](https://github.com/brighte-labs/spark-web/commit/955bf5d7698bfdf45e7f317aa3e726c81d3444c0)]:
|
|
16
|
+
- @spark-web/theme@3.2.0
|
|
17
|
+
- @spark-web/utils@1.3.0
|
|
18
|
+
|
|
19
|
+
## 1.1.0
|
|
20
|
+
|
|
21
|
+
### Minor Changes
|
|
22
|
+
|
|
23
|
+
- [#234](https://github.com/brighte-labs/spark-web/pull/234)
|
|
24
|
+
[`adc5e9e`](https://github.com/brighte-labs/spark-web/commit/adc5e9e6c99acd117f3261edcefdb5573132441b)
|
|
25
|
+
Thanks [@justinnhan](https://github.com/justinnhan)! - Implemented single
|
|
26
|
+
direction border prop for box component
|
|
27
|
+
|
|
28
|
+
### Patch Changes
|
|
29
|
+
|
|
30
|
+
- [#246](https://github.com/brighte-labs/spark-web/pull/246)
|
|
31
|
+
[`de99b9c`](https://github.com/brighte-labs/spark-web/commit/de99b9c7f72373bd1902cf67f5cfec9a1e1db01c)
|
|
32
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Remove
|
|
33
|
+
destructuring from theme object
|
|
34
|
+
|
|
35
|
+
- [#218](https://github.com/brighte-labs/spark-web/pull/218)
|
|
36
|
+
[`6fc8d1b`](https://github.com/brighte-labs/spark-web/commit/6fc8d1bc37e25d0cd622bc37f68a1d92eb5961b5)
|
|
37
|
+
Thanks [@nderkim](https://github.com/nderkim)! - Rename files to kebab case
|
|
38
|
+
|
|
39
|
+
- [#222](https://github.com/brighte-labs/spark-web/pull/222)
|
|
40
|
+
[`7f93c45`](https://github.com/brighte-labs/spark-web/commit/7f93c45bbae8c765e10df9d0dd7615473797749b)
|
|
41
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update
|
|
42
|
+
dependencies
|
|
43
|
+
|
|
44
|
+
- [#242](https://github.com/brighte-labs/spark-web/pull/242)
|
|
45
|
+
[`6df05f7`](https://github.com/brighte-labs/spark-web/commit/6df05f764e4181c140d6547d6b897d0210468f6a)
|
|
46
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - - Add homepage
|
|
47
|
+
and repository keys to package.json
|
|
48
|
+
- Add CHANGELOG and README to files key in package.json
|
|
49
|
+
- Updated dependencies
|
|
50
|
+
[[`6fc8d1b`](https://github.com/brighte-labs/spark-web/commit/6fc8d1bc37e25d0cd622bc37f68a1d92eb5961b5),
|
|
51
|
+
[`7f93c45`](https://github.com/brighte-labs/spark-web/commit/7f93c45bbae8c765e10df9d0dd7615473797749b),
|
|
52
|
+
[`62f7de8`](https://github.com/brighte-labs/spark-web/commit/62f7de8a2e1df5ae088c093d3acdaa868d3f61fe),
|
|
53
|
+
[`6df05f7`](https://github.com/brighte-labs/spark-web/commit/6df05f764e4181c140d6547d6b897d0210468f6a)]:
|
|
54
|
+
- @spark-web/theme@3.1.0
|
|
55
|
+
- @spark-web/utils@1.2.3
|
|
56
|
+
|
|
57
|
+
## 1.0.9
|
|
58
|
+
|
|
59
|
+
### Patch Changes
|
|
60
|
+
|
|
61
|
+
- [#208](https://github.com/brighte-labs/spark-web/pull/208)
|
|
62
|
+
[`1ea26ef`](https://github.com/brighte-labs/spark-web/commit/1ea26ef04a3b45875ed0dd2326eeab1fbe1e4bc5)
|
|
63
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Lower required
|
|
64
|
+
node version
|
|
65
|
+
|
|
66
|
+
- Updated dependencies
|
|
67
|
+
[[`1ea26ef`](https://github.com/brighte-labs/spark-web/commit/1ea26ef04a3b45875ed0dd2326eeab1fbe1e4bc5)]:
|
|
68
|
+
- @spark-web/theme@3.0.6
|
|
69
|
+
- @spark-web/utils@1.2.2
|
|
70
|
+
|
|
71
|
+
## 1.0.8
|
|
72
|
+
|
|
73
|
+
### Patch Changes
|
|
74
|
+
|
|
75
|
+
- [#197](https://github.com/brighte-labs/spark-web/pull/197)
|
|
76
|
+
[`94016d8`](https://github.com/brighte-labs/spark-web/commit/94016d84e26bbe55833bbcbab847a2cce6041538)
|
|
77
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update packages
|
|
78
|
+
|
|
79
|
+
- Updated dependencies
|
|
80
|
+
[[`94016d8`](https://github.com/brighte-labs/spark-web/commit/94016d84e26bbe55833bbcbab847a2cce6041538)]:
|
|
81
|
+
- @spark-web/theme@3.0.5
|
|
82
|
+
- @spark-web/utils@1.2.1
|
|
83
|
+
|
|
84
|
+
## 1.0.7
|
|
85
|
+
|
|
86
|
+
### Patch Changes
|
|
87
|
+
|
|
88
|
+
- [#173](https://github.com/brighte-labs/spark-web/pull/173)
|
|
89
|
+
[`90b7e9c`](https://github.com/brighte-labs/spark-web/commit/90b7e9cf4eb7e864d765c74b22c3dedf3d262e25)
|
|
90
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update babel
|
|
91
|
+
dependency
|
|
92
|
+
|
|
93
|
+
- Updated dependencies
|
|
94
|
+
[[`90b7e9c`](https://github.com/brighte-labs/spark-web/commit/90b7e9cf4eb7e864d765c74b22c3dedf3d262e25),
|
|
95
|
+
[`c3867af`](https://github.com/brighte-labs/spark-web/commit/c3867af7b77dfae3580ab63a5d5c9e8452f2da62)]:
|
|
96
|
+
- @spark-web/theme@3.0.3
|
|
97
|
+
- @spark-web/utils@1.2.0
|
|
98
|
+
|
|
99
|
+
## 1.0.6
|
|
100
|
+
|
|
101
|
+
### Patch Changes
|
|
102
|
+
|
|
103
|
+
- [#167](https://github.com/brighte-labs/spark-web/pull/167)
|
|
104
|
+
[`4f79350`](https://github.com/brighte-labs/spark-web/commit/4f793508fdb43ddd452f0d59a3126101f9fa5459)
|
|
105
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update Babel
|
|
106
|
+
|
|
107
|
+
- Updated dependencies
|
|
108
|
+
[[`4f79350`](https://github.com/brighte-labs/spark-web/commit/4f793508fdb43ddd452f0d59a3126101f9fa5459),
|
|
109
|
+
[`60f7281`](https://github.com/brighte-labs/spark-web/commit/60f7281c4a194d934a2ce561cad47e737b0fb48e)]:
|
|
110
|
+
- @spark-web/theme@3.0.2
|
|
111
|
+
- @spark-web/utils@1.1.5
|
|
112
|
+
|
|
113
|
+
## 1.0.5
|
|
114
|
+
|
|
115
|
+
### Patch Changes
|
|
116
|
+
|
|
117
|
+
- [#113](https://github.com/brighte-labs/spark-web/pull/113)
|
|
118
|
+
[`156236d`](https://github.com/brighte-labs/spark-web/commit/156236d2474aee66a0b8e2030635f9c08a5b78ba)
|
|
119
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update
|
|
120
|
+
dependencies
|
|
121
|
+
|
|
122
|
+
- Updated dependencies
|
|
123
|
+
[[`156236d`](https://github.com/brighte-labs/spark-web/commit/156236d2474aee66a0b8e2030635f9c08a5b78ba)]:
|
|
124
|
+
- @spark-web/theme@3.0.1
|
|
125
|
+
- @spark-web/utils@1.1.3
|
|
126
|
+
|
|
127
|
+
## 1.0.4
|
|
128
|
+
|
|
129
|
+
### Patch Changes
|
|
130
|
+
|
|
131
|
+
- [#52](https://github.com/brighte-labs/spark-web/pull/52)
|
|
132
|
+
[`82ab744`](https://github.com/brighte-labs/spark-web/commit/82ab744f198466810f3386bc459b8ab4d57c820e)
|
|
133
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Add files array
|
|
134
|
+
to package.json files
|
|
135
|
+
|
|
136
|
+
* [#84](https://github.com/brighte-labs/spark-web/pull/84)
|
|
137
|
+
[`df618d9`](https://github.com/brighte-labs/spark-web/commit/df618d92d534e06f06ecedc95ea6bdd51cdc906b)
|
|
138
|
+
Thanks [@ChristopherMitchell242](https://github.com/ChristopherMitchell242)! -
|
|
139
|
+
Data attribute added to component props to allow consumers to attach custom
|
|
140
|
+
attributes to components
|
|
141
|
+
* Updated dependencies
|
|
142
|
+
[[`182a53a`](https://github.com/brighte-labs/spark-web/commit/182a53a484892df48754e89dd714459a7f69fcff),
|
|
143
|
+
[`82ab744`](https://github.com/brighte-labs/spark-web/commit/82ab744f198466810f3386bc459b8ab4d57c820e)]:
|
|
144
|
+
- @spark-web/theme@3.0.0
|
|
145
|
+
- @spark-web/utils@1.1.2
|
|
146
|
+
|
|
147
|
+
## 1.0.3
|
|
148
|
+
|
|
149
|
+
### Patch Changes
|
|
150
|
+
|
|
151
|
+
- [#42](https://github.com/brighte-labs/spark-web/pull/42)
|
|
152
|
+
[`435779a`](https://github.com/brighte-labs/spark-web/commit/435779aa42bd635bbf43e1fd41724c666402caa2)
|
|
153
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Prevent multiple
|
|
154
|
+
versions of React
|
|
155
|
+
|
|
156
|
+
- Updated dependencies
|
|
157
|
+
[[`435779a`](https://github.com/brighte-labs/spark-web/commit/435779aa42bd635bbf43e1fd41724c666402caa2)]:
|
|
158
|
+
- @spark-web/theme@2.0.2
|
|
159
|
+
- @spark-web/utils@1.1.1
|
|
160
|
+
|
|
161
|
+
## 1.0.2
|
|
162
|
+
|
|
163
|
+
### Patch Changes
|
|
164
|
+
|
|
165
|
+
- [#40](https://github.com/brighte-labs/spark-web/pull/40)
|
|
166
|
+
[`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)
|
|
167
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Add
|
|
168
|
+
@babel/transform-runtime
|
|
169
|
+
|
|
170
|
+
- Updated dependencies
|
|
171
|
+
[[`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)]:
|
|
172
|
+
- @spark-web/theme@2.0.1
|
|
173
|
+
- @spark-web/utils@1.0.2
|
|
174
|
+
|
|
175
|
+
## 1.0.1
|
|
176
|
+
|
|
177
|
+
### Patch Changes
|
|
178
|
+
|
|
179
|
+
- [#36](https://github.com/brighte-labs/spark-web/pull/36)
|
|
180
|
+
[`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)
|
|
181
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update Babel
|
|
182
|
+
config
|
|
183
|
+
|
|
184
|
+
- Updated dependencies
|
|
185
|
+
[[`aebff30`](https://github.com/brighte-labs/spark-web/commit/aebff30c86cb0a9db22b545c46159ce0d1c14afb),
|
|
186
|
+
[`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)]:
|
|
187
|
+
- @spark-web/theme@2.0.0
|
|
188
|
+
- @spark-web/utils@1.0.1
|
|
189
|
+
|
|
190
|
+
## 1.0.0
|
|
191
|
+
|
|
192
|
+
### Major Changes
|
|
193
|
+
|
|
194
|
+
- [#27](https://github.com/brighte-labs/spark-web/pull/27)
|
|
195
|
+
[`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)
|
|
196
|
+
Thanks [@JedWatson](https://github.com/JedWatson)! - Initial Version
|
|
197
|
+
|
|
198
|
+
### Patch Changes
|
|
199
|
+
|
|
200
|
+
- Updated dependencies
|
|
201
|
+
[[`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)]:
|
|
202
|
+
- @spark-web/theme@1.0.0
|
|
203
|
+
- @spark-web/utils@1.0.0
|
package/README.md
CHANGED
|
@@ -4,106 +4,140 @@ storybookPath: page-layout-box--default
|
|
|
4
4
|
isExperimentalPackage: false
|
|
5
5
|
---
|
|
6
6
|
|
|
7
|
-
Box is
|
|
8
|
-
|
|
9
|
-
of
|
|
7
|
+
The Box component is our lowest-level primitive. The goal of the Box component
|
|
8
|
+
is to map props to our tokens so that consumers should be able to use these
|
|
9
|
+
props for all of their styling needs. Ideally, you shouldn't need to use the
|
|
10
|
+
`className` or `style` prop at all. Internally, all Spark Web components are
|
|
11
|
+
composed using the Box component.
|
|
10
12
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
+
Box is a polymorphic component (meaning it will render different elements
|
|
14
|
+
depending on what is provided to the `as` prop). If no `as` prop is provided,
|
|
15
|
+
Box will render a `div`.
|
|
16
|
+
|
|
17
|
+
We also spread in consumer props, so any valid HTML attributes are also valid
|
|
18
|
+
for Box. Due to some clever TypeScript we can even warn you when you use an
|
|
19
|
+
invalid combination of props.
|
|
20
|
+
|
|
21
|
+
```jsx
|
|
22
|
+
<Box as="input" href="https://spark.brighte.com.au" />
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
In the example above, you should see a "red squiggly" under the `href` element
|
|
26
|
+
with the following error:
|
|
27
|
+
|
|
28
|
+
```console
|
|
29
|
+
Type '{ as: "input"; href: string; }' is not assignable to type 'IntrinsicAttributes & { as?: "input" | undefined; ref?: Ref<HTMLInputElement> | undefined; } & Omit<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof InputHTMLAttributes<...>>, "as"> & { ...; } & UnresponsiveBoxProps & ResponsiveBoxProps'.
|
|
30
|
+
Property 'href' does not exist on type 'IntrinsicAttributes & { as?: "input" | undefined; ref?: Ref<HTMLInputElement> | undefined; } & Omit<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof InputHTMLAttributes<...>>, "as"> & { ...; } & UnresponsiveBoxProps & ResponsiveBoxProps'. Did you mean 'ref'?
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
Unfortunately TypeScript errors can be pretty cryptic sometimes 🙃.
|
|
34
|
+
|
|
35
|
+
**Pro tip**: copying the error message and pasting it into
|
|
36
|
+
[TypeScript Error Translator](https://ts-error-translator.vercel.app/) can
|
|
37
|
+
sometimes help make these errors easier to understand.
|
|
38
|
+
|
|
39
|
+
A minimal CSS reset is also applied to each element rendered with Box. This
|
|
40
|
+
helps prevent styles from "leaking" out and effecting other elements (which
|
|
41
|
+
should make it easier to incrementally adopt Spark Web into existing projects).
|
|
42
|
+
If you provide a non-Spark component to the `as` prop instead of an element, it
|
|
43
|
+
is recommended that you also use the `asElement` prop so the appropriate styles
|
|
44
|
+
can be applied.
|
|
13
45
|
|
|
14
46
|
## Examples
|
|
15
47
|
|
|
16
|
-
###
|
|
48
|
+
### Responsive styles
|
|
49
|
+
|
|
50
|
+
Most of Box's props accept a string value (usually corresponding to a token), we
|
|
51
|
+
also accept an object for responsive styles.
|
|
17
52
|
|
|
18
53
|
```jsx live
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
54
|
+
const items = [1, 2, 3];
|
|
55
|
+
|
|
56
|
+
return (
|
|
57
|
+
<Box
|
|
58
|
+
background="primaryLow"
|
|
59
|
+
display="inline-flex"
|
|
60
|
+
flexDirection={{ mobile: 'row', tablet: 'column', desktop: 'rowReverse' }}
|
|
61
|
+
gap={{ mobile: 'small', tablet: 'medium', desktop: 'large' }}
|
|
62
|
+
padding={{ mobile: 'small', tablet: 'medium', desktop: 'large' }}
|
|
63
|
+
>
|
|
64
|
+
{items.map(item => (
|
|
65
|
+
<Row
|
|
66
|
+
key={item}
|
|
67
|
+
align="center"
|
|
68
|
+
alignY="center"
|
|
69
|
+
background="primary"
|
|
70
|
+
height={{ mobile: 'small', tablet: 'medium', desktop: 'large' }}
|
|
71
|
+
width={{ mobile: 'small', tablet: 'medium', desktop: 'large' }}
|
|
72
|
+
>
|
|
73
|
+
<Text>{item}</Text>
|
|
74
|
+
</Row>
|
|
75
|
+
))}
|
|
76
|
+
</Box>
|
|
77
|
+
);
|
|
22
78
|
```
|
|
23
79
|
|
|
24
|
-
|
|
80
|
+
Resize your browser to see the example above change at different breakpoints.
|
|
81
|
+
|
|
82
|
+
### Backgrounds
|
|
83
|
+
|
|
84
|
+
Box stores the background in a provider. We can use this to work out what colour
|
|
85
|
+
to use by default for text elements.
|
|
25
86
|
|
|
26
87
|
```jsx live
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
88
|
+
const backgroundTones = [
|
|
89
|
+
// Light
|
|
90
|
+
['surface', 'positiveLight', 'infoLight', 'cautionLight', 'criticalLight'],
|
|
91
|
+
// Dark
|
|
92
|
+
['muted', 'positive', 'info', 'caution', 'critical'],
|
|
93
|
+
];
|
|
94
|
+
|
|
95
|
+
return (
|
|
96
|
+
<Stack gap="large">
|
|
97
|
+
{backgroundTones.map((backgrounds, index) => (
|
|
98
|
+
<Columns
|
|
99
|
+
key={index}
|
|
100
|
+
collapseBelow="tablet"
|
|
101
|
+
gap="large"
|
|
102
|
+
template={[1, 1, 1]}
|
|
103
|
+
>
|
|
104
|
+
{backgrounds.map(background => (
|
|
105
|
+
<Box
|
|
106
|
+
key={background}
|
|
107
|
+
shadow="medium"
|
|
108
|
+
background={background}
|
|
109
|
+
height="large"
|
|
110
|
+
display="flex"
|
|
111
|
+
flexShrink={0}
|
|
112
|
+
alignItems="center"
|
|
113
|
+
justifyContent="center"
|
|
114
|
+
>
|
|
115
|
+
<Text weight="semibold">{background}</Text>
|
|
116
|
+
</Box>
|
|
117
|
+
))}
|
|
118
|
+
</Columns>
|
|
119
|
+
))}
|
|
120
|
+
</Stack>
|
|
121
|
+
);
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
Notice that the Text in the example above doesn't use the tone prop, the colour
|
|
125
|
+
is worked out using the BackgroundProvider in Box.
|
|
126
|
+
|
|
127
|
+
**Note:** this will only work if you use the `background` prop. If you try to
|
|
128
|
+
style the background colour in any other way the Text component will not know
|
|
129
|
+
what colour the background is and so cannot invert its colour to make sure that
|
|
130
|
+
its contents are readable.
|
|
131
|
+
|
|
132
|
+
```jsx
|
|
133
|
+
<Box style={{ background: 'midnightblue' }} padding="large">
|
|
134
|
+
<Text>Good luck reading this!</Text>
|
|
37
135
|
</Box>
|
|
38
136
|
```
|
|
39
137
|
|
|
40
138
|
## Props
|
|
41
139
|
|
|
42
|
-
|
|
43
|
-
| --------------- | -------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
44
|
-
| children | React.ReactNode | | Children element to be rendered inside the component. |
|
|
45
|
-
| id? | string | | An identifier that must be unique in the whole document. |
|
|
46
|
-
| className? | string | | Custom css styles. |
|
|
47
|
-
| asElement? | string | | An option to indicate what the underlying element of the box should be. |
|
|
48
|
-
| data? | [DataAttributeMap][data-attribute-map] | | Sets data attributes on the component. |
|
|
49
|
-
| | | | |
|
|
50
|
-
| background? | keyof [BrighteTheme][brighte-theme]['color']['background'] | | Sets the backgroud of the component. |
|
|
51
|
-
| cursor? | 'default' \| 'pointer' | | Sets the type of mouse cursor, if any, to show when the mouse pointer is over an element. |
|
|
52
|
-
| minHeight? | 0 | | Sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified. |
|
|
53
|
-
| minWidth? | 0 | | Sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified. |
|
|
54
|
-
| overflow? | 'hidden' \| 'scroll' \| 'visible' \| 'auto' | | Sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions. |
|
|
55
|
-
| shadow? | keyof [BrighteTheme][brighte-theme]['shadow'] | | Adds shadow effects around the element's frame. |
|
|
56
|
-
| userSelect? | 'none' | | Controls whether the user can select text. |
|
|
57
|
-
| | | | |
|
|
58
|
-
| margin? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the margin area on all 4 sides of the element at once. |
|
|
59
|
-
| marginTop? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the margin area on the top side. |
|
|
60
|
-
| marginBottom? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the margin area on the bottom side. |
|
|
61
|
-
| marginLeft? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the margin area on the left side. |
|
|
62
|
-
| marginRight? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the margin area on the right side. |
|
|
63
|
-
| marginY? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the margin area on the top and bottom side. |
|
|
64
|
-
| | | | |
|
|
65
|
-
| padding? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the padding width on all 4 sides of the element at once. |
|
|
66
|
-
| paddingTop? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the padding width on the top side. |
|
|
67
|
-
| paddingBottom? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the padding width on the bottom side. |
|
|
68
|
-
| paddingLeft? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the padding width on the left side. |
|
|
69
|
-
| paddingRight? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the padding width on the right side. |
|
|
70
|
-
| paddingY? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the padding width on the top and bottom side. |
|
|
71
|
-
| paddingX? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the padding width on the left and right side. |
|
|
72
|
-
| | | | |
|
|
73
|
-
| border? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['border']['color']> | | Sets the colour of the element's border. |
|
|
74
|
-
| borderRadius? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['border']['color']> | | Rounds the corners of the element's outer border edge. |
|
|
75
|
-
| borderWidth? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['border']['color']> | | Sets the width of the element's border. |
|
|
76
|
-
| | | | |
|
|
77
|
-
| height? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the element's height. |
|
|
78
|
-
| width? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['spacing']> | | Sets the element's width. |
|
|
79
|
-
| | | | |
|
|
80
|
-
| alignItems? | 'flex-start' \| 'center' \| 'flex-end' \| 'stretch' | | Controls alignment of items on the cross axis. |
|
|
81
|
-
| gap? | 'small' \| 'medium' \| 'xsmall' \| 'large' \| 'xxsmall' \| 'xlarge' \| 'xxlarge' | | Size of the gap between each child element. |
|
|
82
|
-
| flexDirection? | 'row' \| 'row-reverse' \| 'column' \| 'column-reverse' | | Defines the main axis, or how the children are placed. |
|
|
83
|
-
| justifyContent? | 'flex-start' \| 'center' \| 'flex-end' \| 'stretch' \| 'space-between' | | Sets how to distribute space between and around content items along the main axis. |
|
|
84
|
-
| flexWrap? | [ResponsiveProp][responsive-prop]\<'nowrap' \| 'wrap'> | | Allow flex items to flow onto multiple lines. |
|
|
85
|
-
| | | | |
|
|
86
|
-
| alignSelf? | 'flex-start' \| 'center' \| 'flex-end' \| 'stretch' | | Override's parent's `align-items` value and controls alignment of item's on the cross axis. |
|
|
87
|
-
| flex? | [ResponsiveProp][responsive-prop]\<0 \| 1> | | Sets how a flex item will grow or shrink to fit the space available in its flex container. |
|
|
88
|
-
| flexGrow? | [ResponsiveProp][responsive-prop]\<0 \| 1> | | Sets the flex grow factor of a flex item main size. |
|
|
89
|
-
| flexShrink? | [ResponsiveProp][responsive-prop]\<0 \| 1> | | Sets the flex shrink factor of a flex item.If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink. |
|
|
90
|
-
| | | |
|
|
91
|
-
| position? | [ResponsiveProp][responsive-prop]\<'absolute' \| 'fixed' \| 'relative' \| 'sticky'> | | Sets how an element is positioned in a document. The `top`, `right`, `bottom`, and `left` properties determine the final location of positioned elements. |
|
|
92
|
-
| top? | [ResponsiveProp][responsive-prop]\<0> | | Specifies vertical position of a positioned element. Has no effect on non-positioned elements. |
|
|
93
|
-
| bottom? | [ResponsiveProp][responsive-prop]\<0> | | Specifies vertical position of a positioned element. Has no effect on non-positioned elements. |
|
|
94
|
-
| left? | [ResponsiveProp][responsive-prop]\<0> | | Specifies horizontal position of a positioned element. Has no effect on non-positioned elements. |
|
|
95
|
-
| right? | [ResponsiveProp][responsive-prop]\<0> | | Specifies horizontal position of a positioned element. Has no effect on non-positioned elements. |
|
|
96
|
-
| zIndex? | [ResponsiveProp][responsive-prop]\<keyof [BrighteTheme][brighte-theme]['elevation']> | | Sets the z-order of a positioned element and its descendants or flex-items. Overlapping element with a larger z-index cover those with a smaller one. |
|
|
97
|
-
| | | |
|
|
98
|
-
| display? | [ResponsiveProp][responsive-prop]\<'block' \| 'flex' \| 'inline' \| 'inline-block' \| 'inline-flex' \| 'none'> | | Sets the display of element. |
|
|
99
|
-
| opacity? | [ResponsiveProp][responsive-prop]\<number> | | Sets the opacity of the element. |
|
|
140
|
+
<PropsTable displayName="Box" />
|
|
100
141
|
|
|
101
142
|
By default, Box renders a `div` element. You can customise this via the `as`
|
|
102
143
|
prop. Extra props will also be forwarded to the underlying element.
|
|
103
|
-
|
|
104
|
-
[brighte-theme]:
|
|
105
|
-
https://github.com/brighte-labs/spark-web/blob/e503bea4f7668d187ec7a78f99c5ed374417588b/packages/theme/src/makeTheme.ts#L158
|
|
106
|
-
[responsive-prop]:
|
|
107
|
-
https://github.com/brighte-labs/spark-web/blob/e503bea4f7668d187ec7a78f99c5ed374417588b/packages/theme/src/themeUtils.ts#L11
|
|
108
|
-
[data-attribute-map]:
|
|
109
|
-
https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
|
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
import type { DataAttributeMap } from '@spark-web/utils/internal';
|
|
2
2
|
import type { ReactNode } from 'react';
|
|
3
|
-
import type { BoxStyleProps } from './
|
|
3
|
+
import type { BoxStyleProps } from './use-box-styles';
|
|
4
4
|
export declare type BoxProps = {
|
|
5
|
+
/** Children element to be rendered inside the component. */
|
|
5
6
|
children?: ReactNode;
|
|
7
|
+
/** Sets data attributes on the component. */
|
|
6
8
|
data?: DataAttributeMap;
|
|
7
9
|
/** An identifier which must be unique in the whole document. */
|
|
8
10
|
id?: string;
|
|
11
|
+
/** Custom css styles. */
|
|
9
12
|
className?: string;
|
|
10
13
|
/**
|
|
11
14
|
* When providing a component using the "as" prop, optionally tell the system
|
|
@@ -17,12 +20,15 @@ export declare type BoxProps = {
|
|
|
17
20
|
/** Exposes a prop-based API for adding styles to a view, within the constraints of the theme. */
|
|
18
21
|
export declare const Box: <Comp extends import("react").ElementType<any> = "div">(props: {
|
|
19
22
|
as?: Comp | undefined;
|
|
20
|
-
ref?: import("react").Ref<Comp extends "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "
|
|
23
|
+
ref?: import("react").Ref<Comp extends "symbol" | "clipPath" | "filter" | "mask" | "marker" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap | "set" ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "clipPath" | "filter" | "mask" | "marker" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
|
|
21
24
|
} & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & {
|
|
25
|
+
/** Children element to be rendered inside the component. */
|
|
22
26
|
children?: ReactNode;
|
|
27
|
+
/** Sets data attributes on the component. */
|
|
23
28
|
data?: DataAttributeMap | undefined;
|
|
24
29
|
/** An identifier which must be unique in the whole document. */
|
|
25
30
|
id?: string | undefined;
|
|
31
|
+
/** Custom css styles. */
|
|
26
32
|
className?: string | undefined;
|
|
27
33
|
/**
|
|
28
34
|
* When providing a component using the "as" prop, optionally tell the system
|
|
@@ -31,11 +37,11 @@ export declare const Box: <Comp extends import("react").ElementType<any> = "div"
|
|
|
31
37
|
*/
|
|
32
38
|
asElement?: keyof HTMLElementTagNameMap | undefined;
|
|
33
39
|
} & {
|
|
34
|
-
background?: "body" | "input" | "infoLight" | "criticalLight" | "positiveLight" | "cautionLight" | "muted" | "
|
|
40
|
+
background?: "body" | "input" | "disabled" | "infoLight" | "criticalLight" | "positiveLight" | "cautionLight" | "muted" | "backdrop" | "surface" | "surfaceMuted" | "surfacePressed" | "fieldAccent" | "inputPressed" | "inputDisabled" | "accent" | "accentMuted" | "neutral" | "neutralLow" | "primary" | "primaryLow" | "primaryMuted" | "secondary" | "secondaryLow" | "secondaryMuted" | "caution" | "cautionLow" | "cautionMuted" | "critical" | "criticalLow" | "criticalMuted" | "info" | "infoLow" | "infoMuted" | "positive" | "positiveLow" | "positiveMuted" | undefined;
|
|
35
41
|
cursor?: "default" | "pointer" | undefined;
|
|
36
42
|
minHeight?: 0 | undefined;
|
|
37
43
|
minWidth?: 0 | undefined;
|
|
38
|
-
overflow?: "
|
|
44
|
+
overflow?: "auto" | "hidden" | "scroll" | "visible" | undefined;
|
|
39
45
|
shadow?: "small" | "large" | "medium" | undefined;
|
|
40
46
|
userSelect?: "none" | undefined;
|
|
41
|
-
} & import("./
|
|
47
|
+
} & import("./use-box-styles").ResponsiveBoxProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ReactElement } from 'react';
|
|
2
|
-
import type { BoxStyleProps } from './
|
|
2
|
+
import type { BoxStyleProps } from './use-box-styles';
|
|
3
3
|
export declare type BackgroundVariant = NonNullable<BoxStyleProps['background']> | 'UNKNOWN_DARK' | 'UNKNOWN_LIGHT';
|
|
4
4
|
export declare const InternalBackgroundProvider: import("react").Provider<BackgroundVariant>;
|
|
5
5
|
export declare const useBackground: () => BackgroundVariant;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export { BackgroundProvider } from './
|
|
2
|
-
export { Box } from './
|
|
1
|
+
export { BackgroundProvider } from './background-provider';
|
|
2
|
+
export { Box } from './box';
|
|
3
3
|
export { useBackground, useBackgroundLightness } from './context';
|
|
4
|
-
export type { BackgroundProviderProps } from './
|
|
5
|
-
export type { BoxProps } from './
|
|
4
|
+
export type { BackgroundProviderProps } from './background-provider';
|
|
5
|
+
export type { BoxProps } from './box';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { BoxStyleProps } from './
|
|
1
|
+
import type { BoxStyleProps } from './use-box-styles';
|
|
2
2
|
/** Separate the style properties from the element attributes. */
|
|
3
3
|
export declare function useBoxProps(props: BoxStyleProps): {
|
|
4
4
|
styles: import("facepaint").DynamicStyle[];
|
|
@@ -75,6 +75,14 @@ export declare type ResponsiveBoxProps = {
|
|
|
75
75
|
paddingX?: ResponsiveSpacing;
|
|
76
76
|
/** The `border` property sets the color of an element's border. */
|
|
77
77
|
border?: ResponsiveProp<keyof BrighteTheme['border']['color']>;
|
|
78
|
+
/** The `border` property sets the color of an element's border on the top side. */
|
|
79
|
+
borderTop?: ResponsiveProp<keyof BrighteTheme['border']['color']>;
|
|
80
|
+
/** The `border` property sets the color of an element's border on the bottom side. */
|
|
81
|
+
borderBottom?: ResponsiveProp<keyof BrighteTheme['border']['color']>;
|
|
82
|
+
/** The `border` property sets the color of an element's border on the left side. */
|
|
83
|
+
borderLeft?: ResponsiveProp<keyof BrighteTheme['border']['color']>;
|
|
84
|
+
/** The `border` property sets the color of an element's border on the right side. */
|
|
85
|
+
borderRight?: ResponsiveProp<keyof BrighteTheme['border']['color']>;
|
|
78
86
|
/**
|
|
79
87
|
* The `borderRadius` property rounds the corners of an element's outer
|
|
80
88
|
* border edge.
|
|
@@ -194,7 +202,7 @@ declare type UnresponsiveBoxProps = {
|
|
|
194
202
|
userSelect?: 'none';
|
|
195
203
|
};
|
|
196
204
|
export declare type BoxStyleProps = UnresponsiveBoxProps & ResponsiveBoxProps;
|
|
197
|
-
export declare const useBoxStyles: ({ alignItems, alignSelf, background, border, borderRadius, borderWidth, bottom, cursor, display, flex, flexDirection, flexGrow, flexShrink, flexWrap, gap, height, justifyContent, left, margin, marginBottom, marginLeft, marginRight, marginTop, marginX, marginY, minHeight, minWidth, opacity, overflow, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, position, right, shadow, top, userSelect, width, zIndex, }: BoxStyleProps) => import("facepaint").DynamicStyle[];
|
|
205
|
+
export declare const useBoxStyles: ({ alignItems, alignSelf, background, border, borderTop, borderBottom, borderLeft, borderRight, borderRadius, borderWidth, bottom, cursor, display, flex, flexDirection, flexGrow, flexShrink, flexWrap, gap, height, justifyContent, left, margin, marginBottom, marginLeft, marginRight, marginTop, marginX, marginY, minHeight, minWidth, opacity, overflow, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, position, right, shadow, top, userSelect, width, zIndex, }: BoxStyleProps) => import("facepaint").DynamicStyle[];
|
|
198
206
|
declare const flexMap: {
|
|
199
207
|
readonly alignItems: {
|
|
200
208
|
readonly start: "flex-start";
|