Skip to content

Commit 3b39771

Browse files
matthprostmatthprost
committed
feat: responsive capacities based on breakpoints
1 parent a3f9b52 commit 3b39771

File tree

114 files changed

+10491
-11036
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

114 files changed

+10491
-11036
lines changed

‎.changeset/tidy-states-drop.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ultraviolet/themes": major
3+
---
4+
5+
Removal of `theme.screen` into CSS variables and fixed breakpoints

‎.changeset/yummy-jokes-unite.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ultraviolet/ui": minor
3+
---
4+
5+
Implement responsive capacities on component `<Row />` and `<Stack />`

‎.oxlintrc.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@
9191
"react/iframe-missing-sandbox": "error",
9292
"react/jsx-no-target-blank": "off",
9393
"react/react-in-jsx-scope": "off",
94+
"react/no-array-index-key": "off",
9495
"react/jsx-filename-extension": [
9596
"error",
9697
{ "extensions": [".jsx", ".tsx"] }

‎.storybook/preview.tsx

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,31 @@ import { dark, light } from './storybookThemes'
1414
import '@ultraviolet/fonts/fonts.css'
1515
import { scan } from "react-scan"
1616

17+
const BREAKPOINT_ORDER = [
18+
'xlarge',
19+
'large',
20+
'medium',
21+
'small',
22+
'xsmall',
23+
'xxsmall',
24+
]
25+
26+
const VIEWPORTS = BREAKPOINT_ORDER.reduce((acc, key) => {
27+
if (key in lightTheme.breakpoints) {
28+
return {
29+
...acc,
30+
[key]: {
31+
name: key,
32+
styles: {
33+
width: lightTheme.breakpoints[key as keyof typeof lightTheme.breakpoints],
34+
height: '600px',
35+
},
36+
},
37+
}
38+
}
39+
return acc
40+
}, {})
41+
1742
scan({
1843
enabled: true,
1944
log: true,
@@ -52,7 +77,9 @@ const parameters: Preview['parameters'] = {
5277
canvas: { hidden: false },
5378
},
5479
viewport: {
55-
viewports: {},
80+
viewports: {
81+
...VIEWPORTS
82+
}
5683
},
5784
options: {
5885
storySort: {

‎packages/form/src/components/CheckboxField/__tests__/__snapshots__/index.test.tsx.snap

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1646,10 +1646,6 @@ exports[`CheckboxField > should render correctly with errors 1`] = `
16461646
display: -webkit-flex;
16471647
display: -ms-flexbox;
16481648
display: flex;
1649-
gap: 0.25rem;
1650-
-webkit-flex-direction: column;
1651-
-ms-flex-direction: column;
1652-
flex-direction: column;
16531649
-webkit-align-items: normal;
16541650
-webkit-box-align: normal;
16551651
-ms-flex-align: normal;
@@ -1665,17 +1661,17 @@ exports[`CheckboxField > should render correctly with errors 1`] = `
16651661
-webkit-flex: 1;
16661662
-ms-flex: 1;
16671663
flex: 1;
1664+
-webkit-flex-direction: column;
1665+
-ms-flex-direction: column;
1666+
flex-direction: column;
1667+
gap: 0.25rem;
16681668
}
16691669
16701670
.emotion-12 {
16711671
display: -webkit-box;
16721672
display: -webkit-flex;
16731673
display: -ms-flexbox;
16741674
display: flex;
1675-
gap: 0.25rem;
1676-
-webkit-flex-direction: row;
1677-
-ms-flex-direction: row;
1678-
flex-direction: row;
16791675
-webkit-align-items: center;
16801676
-webkit-box-align: center;
16811677
-ms-flex-align: center;
@@ -1691,6 +1687,10 @@ exports[`CheckboxField > should render correctly with errors 1`] = `
16911687
-webkit-flex: 1;
16921688
-ms-flex: 1;
16931689
flex: 1;
1690+
-webkit-flex-direction: row;
1691+
-ms-flex-direction: row;
1692+
flex-direction: row;
1693+
gap: 0.25rem;
16941694
}
16951695
16961696
.emotion-15 {
@@ -2030,10 +2030,6 @@ exports[`CheckboxField > should trigger events correctly 1`] = `
20302030
display: -webkit-flex;
20312031
display: -ms-flexbox;
20322032
display: flex;
2033-
gap: 0.25rem;
2034-
-webkit-flex-direction: column;
2035-
-ms-flex-direction: column;
2036-
flex-direction: column;
20372033
-webkit-align-items: normal;
20382034
-webkit-box-align: normal;
20392035
-ms-flex-align: normal;
@@ -2049,17 +2045,17 @@ exports[`CheckboxField > should trigger events correctly 1`] = `
20492045
-webkit-flex: 1;
20502046
-ms-flex: 1;
20512047
flex: 1;
2048+
-webkit-flex-direction: column;
2049+
-ms-flex-direction: column;
2050+
flex-direction: column;
2051+
gap: 0.25rem;
20522052
}
20532053
20542054
.emotion-12 {
20552055
display: -webkit-box;
20562056
display: -webkit-flex;
20572057
display: -ms-flexbox;
20582058
display: flex;
2059-
gap: 0.25rem;
2060-
-webkit-flex-direction: row;
2061-
-ms-flex-direction: row;
2062-
flex-direction: row;
20632059
-webkit-align-items: center;
20642060
-webkit-box-align: center;
20652061
-ms-flex-align: center;
@@ -2075,6 +2071,10 @@ exports[`CheckboxField > should trigger events correctly 1`] = `
20752071
-webkit-flex: 1;
20762072
-ms-flex: 1;
20772073
flex: 1;
2074+
-webkit-flex-direction: row;
2075+
-ms-flex-direction: row;
2076+
flex-direction: row;
2077+
gap: 0.25rem;
20782078
}
20792079
20802080
.emotion-15 {

‎packages/form/src/components/CheckboxGroupField/__tests__/__snapshots__/index.test.tsx.snap

Lines changed: 44 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,6 @@ exports[`CheckboxField > should render correctly checked 1`] = `
1111
display: -webkit-flex;
1212
display: -ms-flexbox;
1313
display: flex;
14-
gap: 0.5rem;
15-
-webkit-flex-direction: column;
16-
-ms-flex-direction: column;
17-
flex-direction: column;
1814
-webkit-align-items: normal;
1915
-webkit-box-align: normal;
2016
-ms-flex-align: normal;
@@ -27,6 +23,10 @@ exports[`CheckboxField > should render correctly checked 1`] = `
2723
-webkit-flex-wrap: nowrap;
2824
-ms-flex-wrap: nowrap;
2925
flex-wrap: nowrap;
26+
-webkit-flex-direction: column;
27+
-ms-flex-direction: column;
28+
flex-direction: column;
29+
gap: 0.5rem;
3030
}
3131
3232
.emotion-4 {
@@ -40,10 +40,6 @@ exports[`CheckboxField > should render correctly checked 1`] = `
4040
display: -webkit-flex;
4141
display: -ms-flexbox;
4242
display: flex;
43-
gap: 0.75rem;
44-
-webkit-flex-direction: column;
45-
-ms-flex-direction: column;
46-
flex-direction: column;
4743
-webkit-align-items: normal;
4844
-webkit-box-align: normal;
4945
-ms-flex-align: normal;
@@ -56,17 +52,17 @@ exports[`CheckboxField > should render correctly checked 1`] = `
5652
-webkit-flex-wrap: nowrap;
5753
-ms-flex-wrap: nowrap;
5854
flex-wrap: nowrap;
55+
-webkit-flex-direction: column;
56+
-ms-flex-direction: column;
57+
flex-direction: column;
58+
gap: 0.75rem;
5959
}
6060
6161
.emotion-8 {
6262
display: -webkit-box;
6363
display: -webkit-flex;
6464
display: -ms-flexbox;
6565
display: flex;
66-
gap: 0.25rem;
67-
-webkit-flex-direction: column;
68-
-ms-flex-direction: column;
69-
flex-direction: column;
7066
-webkit-align-items: normal;
7167
-webkit-box-align: normal;
7268
-ms-flex-align: normal;
@@ -79,6 +75,10 @@ exports[`CheckboxField > should render correctly checked 1`] = `
7975
-webkit-flex-wrap: nowrap;
8076
-ms-flex-wrap: nowrap;
8177
flex-wrap: nowrap;
78+
-webkit-flex-direction: column;
79+
-ms-flex-direction: column;
80+
flex-direction: column;
81+
gap: 0.25rem;
8282
}
8383
8484
.emotion-11 {
@@ -327,10 +327,6 @@ exports[`CheckboxField > should render correctly checked 1`] = `
327327
display: -webkit-flex;
328328
display: -ms-flexbox;
329329
display: flex;
330-
gap: 0.25rem;
331-
-webkit-flex-direction: column;
332-
-ms-flex-direction: column;
333-
flex-direction: column;
334330
-webkit-align-items: normal;
335331
-webkit-box-align: normal;
336332
-ms-flex-align: normal;
@@ -346,17 +342,17 @@ exports[`CheckboxField > should render correctly checked 1`] = `
346342
-webkit-flex: 1;
347343
-ms-flex: 1;
348344
flex: 1;
345+
-webkit-flex-direction: column;
346+
-ms-flex-direction: column;
347+
flex-direction: column;
348+
gap: 0.25rem;
349349
}
350350
351351
.emotion-26 {
352352
display: -webkit-box;
353353
display: -webkit-flex;
354354
display: -ms-flexbox;
355355
display: flex;
356-
gap: 0.25rem;
357-
-webkit-flex-direction: row;
358-
-ms-flex-direction: row;
359-
flex-direction: row;
360356
-webkit-align-items: center;
361357
-webkit-box-align: center;
362358
-ms-flex-align: center;
@@ -372,6 +368,10 @@ exports[`CheckboxField > should render correctly checked 1`] = `
372368
-webkit-flex: 1;
373369
-ms-flex: 1;
374370
flex: 1;
371+
-webkit-flex-direction: row;
372+
-ms-flex-direction: row;
373+
flex-direction: row;
374+
gap: 0.25rem;
375375
}
376376
377377
.emotion-29 {
@@ -550,10 +550,6 @@ exports[`CheckboxField > should trigger events correctly with required prop 1`]
550550
display: -webkit-flex;
551551
display: -ms-flexbox;
552552
display: flex;
553-
gap: 0.5rem;
554-
-webkit-flex-direction: column;
555-
-ms-flex-direction: column;
556-
flex-direction: column;
557553
-webkit-align-items: normal;
558554
-webkit-box-align: normal;
559555
-ms-flex-align: normal;
@@ -566,6 +562,10 @@ exports[`CheckboxField > should trigger events correctly with required prop 1`]
566562
-webkit-flex-wrap: nowrap;
567563
-ms-flex-wrap: nowrap;
568564
flex-wrap: nowrap;
565+
-webkit-flex-direction: column;
566+
-ms-flex-direction: column;
567+
flex-direction: column;
568+
gap: 0.5rem;
569569
}
570570
571571
.emotion-4 {
@@ -579,10 +579,6 @@ exports[`CheckboxField > should trigger events correctly with required prop 1`]
579579
display: -webkit-flex;
580580
display: -ms-flexbox;
581581
display: flex;
582-
gap: 0.75rem;
583-
-webkit-flex-direction: column;
584-
-ms-flex-direction: column;
585-
flex-direction: column;
586582
-webkit-align-items: normal;
587583
-webkit-box-align: normal;
588584
-ms-flex-align: normal;
@@ -595,17 +591,17 @@ exports[`CheckboxField > should trigger events correctly with required prop 1`]
595591
-webkit-flex-wrap: nowrap;
596592
-ms-flex-wrap: nowrap;
597593
flex-wrap: nowrap;
594+
-webkit-flex-direction: column;
595+
-ms-flex-direction: column;
596+
flex-direction: column;
597+
gap: 0.75rem;
598598
}
599599
600600
.emotion-8 {
601601
display: -webkit-box;
602602
display: -webkit-flex;
603603
display: -ms-flexbox;
604604
display: flex;
605-
gap: 0.25rem;
606-
-webkit-flex-direction: column;
607-
-ms-flex-direction: column;
608-
flex-direction: column;
609605
-webkit-align-items: normal;
610606
-webkit-box-align: normal;
611607
-ms-flex-align: normal;
@@ -618,17 +614,17 @@ exports[`CheckboxField > should trigger events correctly with required prop 1`]
618614
-webkit-flex-wrap: nowrap;
619615
-ms-flex-wrap: nowrap;
620616
flex-wrap: nowrap;
617+
-webkit-flex-direction: column;
618+
-ms-flex-direction: column;
619+
flex-direction: column;
620+
gap: 0.25rem;
621621
}
622622
623623
.emotion-10 {
624624
display: -webkit-box;
625625
display: -webkit-flex;
626626
display: -ms-flexbox;
627627
display: flex;
628-
gap: 0.25rem;
629-
-webkit-flex-direction: row;
630-
-ms-flex-direction: row;
631-
flex-direction: row;
632628
-webkit-align-items: start;
633629
-webkit-box-align: start;
634630
-ms-flex-align: start;
@@ -641,6 +637,10 @@ exports[`CheckboxField > should trigger events correctly with required prop 1`]
641637
-webkit-flex-wrap: nowrap;
642638
-ms-flex-wrap: nowrap;
643639
flex-wrap: nowrap;
640+
-webkit-flex-direction: row;
641+
-ms-flex-direction: row;
642+
flex-direction: row;
643+
gap: 0.25rem;
644644
}
645645
646646
.emotion-13 {
@@ -901,10 +901,6 @@ exports[`CheckboxField > should trigger events correctly with required prop 1`]
901901
display: -webkit-flex;
902902
display: -ms-flexbox;
903903
display: flex;
904-
gap: 0.25rem;
905-
-webkit-flex-direction: column;
906-
-ms-flex-direction: column;
907-
flex-direction: column;
908904
-webkit-align-items: normal;
909905
-webkit-box-align: normal;
910906
-ms-flex-align: normal;
@@ -920,17 +916,17 @@ exports[`CheckboxField > should trigger events correctly with required prop 1`]
920916
-webkit-flex: 1;
921917
-ms-flex: 1;
922918
flex: 1;
919+
-webkit-flex-direction: column;
920+
-ms-flex-direction: column;
921+
flex-direction: column;
922+
gap: 0.25rem;
923923
}
924924
925925
.emotion-30 {
926926
display: -webkit-box;
927927
display: -webkit-flex;
928928
display: -ms-flexbox;
929929
display: flex;
930-
gap: 0.25rem;
931-
-webkit-flex-direction: row;
932-
-ms-flex-direction: row;
933-
flex-direction: row;
934930
-webkit-align-items: center;
935931
-webkit-box-align: center;
936932
-ms-flex-align: center;
@@ -946,6 +942,10 @@ exports[`CheckboxField > should trigger events correctly with required prop 1`]
946942
-webkit-flex: 1;
947943
-ms-flex: 1;
948944
flex: 1;
945+
-webkit-flex-direction: row;
946+
-ms-flex-direction: row;
947+
flex-direction: row;
948+
gap: 0.25rem;
949949
}
950950
951951
.emotion-33 {

0 commit comments

Comments
 (0)