@vygruppen/spor-react 11.3.9 → 12.0.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/.turbo/turbo-build.log +32 -11
- package/.turbo/turbo-typegen.log +23 -0
- package/CHANGELOG.md +245 -0
- package/dist/index.d.mts +2552 -8319
- package/dist/index.d.ts +2552 -8319
- package/dist/index.js +9609 -8607
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +9487 -8454
- package/dist/index.mjs.map +1 -1
- package/package.json +21 -13
- package/src/accordion/Accordion.tsx +96 -45
- package/src/accordion/Expandable.tsx +54 -127
- package/src/accordion/helpers.ts +31 -0
- package/src/accordion/types.ts +60 -0
- package/src/alert/Alert.tsx +101 -0
- package/src/alert/AlertIcon.tsx +63 -45
- package/src/alert/ExpandableAlert.tsx +96 -64
- package/src/alert/ServiceAlert.tsx +127 -125
- package/src/alert/{index.tsx → index.ts} +1 -2
- package/src/breadcrumb/Breadcrumb.tsx +39 -24
- package/src/button/Button.tsx +86 -105
- package/src/button/ButtonGroup.tsx +45 -20
- package/src/button/Clipboard.tsx +82 -0
- package/src/button/CloseButton.tsx +4 -3
- package/src/button/FloatingActionButton.tsx +35 -41
- package/src/button/IconButton.tsx +34 -30
- package/src/button/index.tsx +1 -0
- package/src/color-mode/color-mode.tsx +75 -0
- package/src/color-mode/index.ts +1 -0
- package/src/datepicker/Calendar.tsx +17 -8
- package/src/datepicker/CalendarCell.tsx +20 -13
- package/src/datepicker/CalendarGrid.tsx +18 -10
- package/src/datepicker/CalendarHeader.tsx +2 -0
- package/src/datepicker/CalendarNavigationButton.tsx +1 -0
- package/src/datepicker/CalendarTriggerButton.tsx +43 -45
- package/src/datepicker/DateField.tsx +21 -12
- package/src/datepicker/DatePicker.tsx +61 -58
- package/src/datepicker/DateRangePicker.tsx +52 -58
- package/src/datepicker/DateTimeSegment.tsx +13 -5
- package/src/datepicker/RangeCalendar.tsx +13 -7
- package/src/datepicker/StyledField.tsx +25 -17
- package/src/datepicker/TimeField.tsx +10 -8
- package/src/datepicker/TimePicker.tsx +48 -45
- package/src/datepicker/types.ts +5 -0
- package/src/dialog/Dialog.tsx +56 -0
- package/src/dialog/Drawer.tsx +187 -0
- package/src/dialog/index.ts +2 -0
- package/src/dialog/types.ts +26 -0
- package/src/image/index.tsx +2 -2
- package/src/index.tsx +5 -3
- package/src/input/AttachedInputs.tsx +17 -42
- package/src/input/CardSelect.tsx +75 -162
- package/src/input/Checkbox.tsx +30 -6
- package/src/input/CheckboxGroup.tsx +25 -16
- package/src/input/ChoiceChip.tsx +58 -77
- package/src/input/Combobox.tsx +172 -172
- package/src/input/CountryCodeSelect.tsx +42 -28
- package/src/input/Dialog.tsx +1 -0
- package/src/input/Field.tsx +71 -0
- package/src/input/Fieldset.tsx +7 -0
- package/src/input/Input.tsx +68 -73
- package/src/input/InputGroup.tsx +66 -0
- package/src/input/ListBox.tsx +83 -70
- package/src/input/NativeSelect.tsx +68 -33
- package/src/input/NumericStepper.tsx +173 -171
- package/src/input/PasswordInput.tsx +99 -52
- package/src/input/PhoneNumberInput.tsx +69 -72
- package/src/input/Popover.tsx +1 -0
- package/src/input/Radio.tsx +37 -17
- package/src/input/SearchInput.tsx +24 -86
- package/src/input/Select.tsx +237 -0
- package/src/input/Switch.tsx +60 -18
- package/src/input/Textarea.tsx +53 -101
- package/src/input/{index.tsx → index.ts} +2 -8
- package/src/layout/PressableCard.tsx +12 -21
- package/src/layout/RadioCard.tsx +68 -100
- package/src/layout/Separator.tsx +32 -0
- package/src/layout/StaticCard.tsx +13 -33
- package/src/layout/index.tsx +3 -7
- package/src/linjetag/InfoTag.tsx +16 -9
- package/src/linjetag/LineIcon.tsx +74 -28
- package/src/linjetag/TravelTag.tsx +38 -27
- package/src/link/TextLink.tsx +25 -16
- package/src/list/index.tsx +24 -2
- package/src/loader/ClientOnly.tsx +8 -7
- package/src/loader/ColorInlineLoader.tsx +4 -3
- package/src/loader/ColorSpinner.tsx +5 -4
- package/src/loader/ContentLoader.tsx +6 -4
- package/src/loader/DarkFullScreenLoader.tsx +11 -3
- package/src/loader/DarkInlineLoader.tsx +5 -3
- package/src/loader/DarkSpinner.tsx +7 -3
- package/src/loader/LightFullScreenLoader.tsx +11 -3
- package/src/loader/LightInlineLoader.tsx +11 -3
- package/src/loader/LightSpinner.tsx +5 -3
- package/src/loader/Lottie.tsx +3 -3
- package/src/loader/ProgressBar.tsx +83 -84
- package/src/loader/ProgressLoader.tsx +120 -75
- package/src/loader/Skeleton.tsx +94 -19
- package/src/loader/index.tsx +0 -2
- package/src/loader/useHydrated.tsx +1 -0
- package/src/loader/useRotatingLabel.tsx +2 -1
- package/src/logo/CargonetLogo.tsx +89 -89
- package/src/logo/VyLogo.tsx +61 -42
- package/src/logo/VyLogoPride.tsx +137 -139
- package/src/media-controller/JumpButton.tsx +48 -38
- package/src/media-controller/PlayPauseButton.tsx +31 -29
- package/src/media-controller/SkipButton.tsx +38 -37
- package/src/nudge/Nudge.tsx +195 -123
- package/src/nudge/index.tsx +0 -1
- package/src/pagination/Pagination.tsx +221 -118
- package/src/pagination/types.ts +23 -0
- package/src/popover/index.tsx +67 -0
- package/src/progress-indicator/ProgressDot.tsx +11 -10
- package/src/progress-indicator/ProgressIndicator.tsx +28 -15
- package/src/provider/SporProvider.tsx +17 -14
- package/src/stepper/Stepper.tsx +88 -85
- package/src/stepper/StepperContext.tsx +2 -1
- package/src/stepper/StepperStep.tsx +28 -21
- package/src/tab/Tabs.tsx +62 -12
- package/src/tab/index.tsx +1 -9
- package/src/table/Table.tsx +35 -30
- package/src/table/index.tsx +11 -7
- package/src/theme/brand.ts +7 -0
- package/src/theme/index.ts +45 -37
- package/src/theme/recipes/attached-inputs.ts +43 -0
- package/src/theme/recipes/badge.ts +104 -0
- package/src/theme/recipes/button.ts +124 -0
- package/src/theme/recipes/choice-chip.ts +144 -0
- package/src/theme/recipes/close-button.ts +41 -0
- package/src/theme/recipes/code.ts +14 -0
- package/src/theme/recipes/group.ts +19 -0
- package/src/theme/recipes/index.ts +29 -0
- package/src/theme/recipes/input.ts +89 -0
- package/src/theme/recipes/link.ts +64 -0
- package/src/theme/recipes/nudge.ts +12 -0
- package/src/theme/recipes/pressable-card.ts +83 -0
- package/src/theme/recipes/progress-loader.ts +14 -0
- package/src/theme/recipes/separator.ts +85 -0
- package/src/theme/recipes/skeleton.ts +57 -0
- package/src/theme/recipes/static-card.ts +39 -0
- package/src/theme/recipes/textarea.ts +27 -0
- package/src/theme/semantic-tokens/colors.ts +22 -0
- package/src/theme/semantic-tokens/index.ts +24 -0
- package/src/theme/semantic-tokens/radii.ts +14 -0
- package/src/theme/semantic-tokens/shadows.ts +17 -0
- package/src/theme/slot-recipes/accordion.ts +131 -0
- package/src/theme/slot-recipes/alert-expandable.ts +133 -0
- package/src/theme/slot-recipes/alert-service.ts +66 -0
- package/src/theme/slot-recipes/alert.ts +72 -0
- package/src/theme/slot-recipes/anatomy.ts +269 -0
- package/src/theme/slot-recipes/breadcrumb.ts +61 -0
- package/src/theme/slot-recipes/checkbox.ts +89 -0
- package/src/theme/slot-recipes/datepicker.ts +214 -0
- package/src/theme/slot-recipes/dialog.ts +221 -0
- package/src/theme/slot-recipes/drawer.ts +205 -0
- package/src/theme/slot-recipes/field.ts +79 -0
- package/src/theme/slot-recipes/floating-action-button.ts +131 -0
- package/src/theme/slot-recipes/index.ts +65 -0
- package/src/theme/slot-recipes/info-tag.ts +62 -0
- package/src/theme/slot-recipes/line-icon.ts +140 -0
- package/src/theme/slot-recipes/list.ts +45 -0
- package/src/theme/slot-recipes/listbox.ts +72 -0
- package/src/theme/slot-recipes/media-controller-button.ts +131 -0
- package/src/theme/slot-recipes/native-select.ts +54 -0
- package/src/theme/slot-recipes/numeric-stepper.ts +65 -0
- package/src/theme/slot-recipes/pagination.ts +41 -0
- package/src/theme/slot-recipes/popover.ts +78 -0
- package/src/theme/slot-recipes/progress-bar.ts +39 -0
- package/src/theme/slot-recipes/progress-indicator.ts +22 -0
- package/src/theme/slot-recipes/radio-card.ts +112 -0
- package/src/theme/slot-recipes/radio.ts +80 -0
- package/src/theme/slot-recipes/select.ts +243 -0
- package/src/theme/slot-recipes/stepper.ts +92 -0
- package/src/theme/slot-recipes/switch.ts +147 -0
- package/src/theme/slot-recipes/table.ts +200 -0
- package/src/theme/slot-recipes/tabs.ts +169 -0
- package/src/theme/slot-recipes/toast.ts +56 -0
- package/src/theme/slot-recipes/travel-tag.ts +192 -0
- package/src/theme/tokens/animation-styles.ts +50 -0
- package/src/theme/tokens/animations.ts +22 -0
- package/src/theme/tokens/aspect-ratios.ts +22 -0
- package/src/theme/tokens/blurs.ts +28 -0
- package/src/theme/tokens/borders.ts +26 -0
- package/src/theme/{foundations → tokens}/breakpoints.ts +0 -1
- package/src/theme/tokens/colors.ts +10 -0
- package/src/theme/tokens/config.ts +10 -0
- package/src/theme/tokens/cursor.ts +28 -0
- package/src/theme/tokens/durations.ts +25 -0
- package/src/theme/tokens/easings.ts +16 -0
- package/src/theme/tokens/font-sizes.ts +30 -0
- package/src/theme/tokens/font-weights.ts +31 -0
- package/src/theme/tokens/fonts.ts +8 -0
- package/src/theme/tokens/global-css.ts +18 -0
- package/src/theme/tokens/index.ts +37 -0
- package/src/theme/tokens/keyframes.ts +255 -0
- package/src/theme/tokens/letter-spacings.ts +19 -0
- package/src/theme/tokens/line-heights.ts +19 -0
- package/src/theme/tokens/radii.ts +13 -0
- package/src/theme/tokens/sizes.ts +51 -0
- package/src/theme/tokens/spacing.ts +20 -0
- package/src/theme/tokens/text-styles.ts +89 -0
- package/src/theme/tokens/z-index.ts +17 -0
- package/src/theme/utils/accent-utils.ts +8 -21
- package/src/theme/utils/bg-utils.ts +4 -6
- package/src/theme/utils/brand-utils.ts +6 -19
- package/src/theme/utils/core-utils.ts +91 -0
- package/src/theme/utils/floating-utils.ts +20 -39
- package/src/theme/utils/ghost-utils.ts +7 -21
- package/src/theme/utils/input-utils.ts +32 -37
- package/src/theme/utils/outline-utils.ts +4 -11
- package/src/theme/utils/surface-utils.ts +5 -19
- package/src/theme/utils/types.ts +1 -0
- package/src/toast/index.tsx +1 -1
- package/src/toast/toast.tsx +105 -0
- package/src/transition/index.ts +2 -8
- package/src/typography/Badge.tsx +15 -61
- package/src/typography/Code.tsx +16 -28
- package/src/typography/Heading.tsx +34 -19
- package/src/typography/Text.tsx +9 -6
- package/src/typography/{index.tsx → index.ts} +1 -0
- package/src/util/externals.tsx +13 -27
- package/tsconfig.json +5 -1
- package/src/accordion/Accordion.test.tsx +0 -20
- package/src/alert/BaseAlert.test.tsx +0 -37
- package/src/alert/BaseAlert.tsx +0 -34
- package/src/alert/ClosableAlert.test.tsx +0 -37
- package/src/alert/ClosableAlert.tsx +0 -85
- package/src/alert/ExpandableAlert.test.tsx +0 -84
- package/src/alert/StaticAlert.tsx +0 -33
- package/src/button/Button.test.tsx +0 -23
- package/src/datepicker/TimePicker.test.tsx +0 -74
- package/src/input/FormControl.tsx +0 -2
- package/src/input/FormErrorMessage.tsx +0 -95
- package/src/input/FormLabel.tsx +0 -11
- package/src/input/InfoSelect.tsx +0 -274
- package/src/input/InputElement.tsx +0 -44
- package/src/input/RadioGroup.tsx +0 -47
- package/src/layout/Divider.tsx +0 -27
- package/src/layout/RadioCardGroup.tsx +0 -79
- package/src/layout/Stack.tsx +0 -42
- package/src/loader/SkeletonCircle.tsx +0 -13
- package/src/loader/SkeletonText.tsx +0 -14
- package/src/media-controller/index.test.tsx +0 -59
- package/src/modal/Drawer.tsx +0 -120
- package/src/modal/FullScreenDrawer.tsx +0 -239
- package/src/modal/Modal.tsx +0 -15
- package/src/modal/ModalHeader.tsx +0 -31
- package/src/modal/SimpleDrawer.tsx +0 -51
- package/src/modal/index.tsx +0 -5
- package/src/nudge/WizardNudge.tsx +0 -107
- package/src/theme/components/accordion.ts +0 -102
- package/src/theme/components/alert-expandable.ts +0 -125
- package/src/theme/components/alert-service.ts +0 -98
- package/src/theme/components/alert.ts +0 -71
- package/src/theme/components/badge.ts +0 -109
- package/src/theme/components/breadcrumb.ts +0 -60
- package/src/theme/components/button.ts +0 -125
- package/src/theme/components/card-select.ts +0 -117
- package/src/theme/components/checkbox.ts +0 -88
- package/src/theme/components/choice-chip.ts +0 -161
- package/src/theme/components/close-button.ts +0 -48
- package/src/theme/components/code.ts +0 -17
- package/src/theme/components/datepicker.ts +0 -198
- package/src/theme/components/divider.ts +0 -50
- package/src/theme/components/drawer.ts +0 -95
- package/src/theme/components/fab.ts +0 -109
- package/src/theme/components/form-label.ts +0 -17
- package/src/theme/components/form.ts +0 -27
- package/src/theme/components/index.ts +0 -45
- package/src/theme/components/info-select.ts +0 -85
- package/src/theme/components/info-tag.ts +0 -63
- package/src/theme/components/input.ts +0 -28
- package/src/theme/components/line-icon.ts +0 -129
- package/src/theme/components/link.ts +0 -78
- package/src/theme/components/list.ts +0 -23
- package/src/theme/components/listbox.ts +0 -77
- package/src/theme/components/media-controller-button.ts +0 -97
- package/src/theme/components/modal.ts +0 -96
- package/src/theme/components/numeric-stepper.ts +0 -65
- package/src/theme/components/pagination.ts +0 -74
- package/src/theme/components/popover.ts +0 -68
- package/src/theme/components/pressable-card.ts +0 -72
- package/src/theme/components/progress-bar.ts +0 -47
- package/src/theme/components/progress-indicator.ts +0 -44
- package/src/theme/components/radio-card.ts +0 -134
- package/src/theme/components/radio.ts +0 -68
- package/src/theme/components/select.ts +0 -74
- package/src/theme/components/skeleton.ts +0 -40
- package/src/theme/components/static-card.ts +0 -82
- package/src/theme/components/stepper.ts +0 -100
- package/src/theme/components/switch.ts +0 -112
- package/src/theme/components/table.ts +0 -161
- package/src/theme/components/tabs.ts +0 -135
- package/src/theme/components/textarea.ts +0 -33
- package/src/theme/components/toast.ts +0 -28
- package/src/theme/components/travel-tag.ts +0 -256
- package/src/theme/foundations/borders.ts +0 -11
- package/src/theme/foundations/colors.ts +0 -12
- package/src/theme/foundations/config.ts +0 -5
- package/src/theme/foundations/fontSizes.ts +0 -29
- package/src/theme/foundations/fontWeights.ts +0 -5
- package/src/theme/foundations/fonts.ts +0 -7
- package/src/theme/foundations/index.ts +0 -15
- package/src/theme/foundations/lineHeights.ts +0 -6
- package/src/theme/foundations/radii.ts +0 -12
- package/src/theme/foundations/shadows.ts +0 -8
- package/src/theme/foundations/sizes.ts +0 -36
- package/src/theme/foundations/spacing.ts +0 -31
- package/src/theme/foundations/styles.ts +0 -12
- package/src/theme/foundations/textStyles.ts +0 -74
- package/src/theme/foundations/zIndices.ts +0 -17
- package/src/theme/utils/base-utils.ts +0 -104
- package/src/theme/utils/focus-utils.ts +0 -10
- package/src/toast/ActionToast.test.tsx +0 -22
- package/src/toast/ActionToast.tsx +0 -28
- package/src/toast/BaseToast.test.tsx +0 -27
- package/src/toast/BaseToast.tsx +0 -75
- package/src/toast/ClosableToast.test.tsx +0 -17
- package/src/toast/ClosableToast.tsx +0 -40
- package/src/toast/useToast.tsx +0 -121
- package/src/tooltip/Tooltip.tsx +0 -70
- package/src/tooltip/index.tsx +0 -1
package/.turbo/turbo-build.log
CHANGED
@@ -1,6 +1,27 @@
|
|
1
1
|
|
2
|
-
> @vygruppen/spor-react@
|
3
|
-
> tsup
|
2
|
+
> @vygruppen/spor-react@12.0.0 build /home/runner/work/spor/spor/packages/spor-react
|
3
|
+
> pnpm typegen && tsup
|
4
|
+
|
5
|
+
|
6
|
+
> @vygruppen/spor-react@12.0.0 typegen /home/runner/work/spor/spor/packages/spor-react
|
7
|
+
> npx @chakra-ui/cli typegen src/theme/index.ts
|
8
|
+
|
9
|
+
[90m┌[39m Chakra CLI ⚡️
|
10
|
+
[?25l[90m│[39m
|
11
|
+
[35m◒[39m Generating conditions types...
|
12
|
+
[999D[J[32m◇[39m ✅ Generated conditions typings
|
13
|
+
[?25h[?25l[90m│[39m
|
14
|
+
[35m◒[39m Generating recipe types...
|
15
|
+
[999D[J[32m◇[39m ✅ Generated recipe typings
|
16
|
+
[?25h[?25l[90m│[39m
|
17
|
+
[32m◇[39m ✅ Generated utility typings
|
18
|
+
[?25h[?25l[90m│[39m
|
19
|
+
[32m◇[39m ✅ Generated token typings
|
20
|
+
[?25h[?25l[90m│[39m
|
21
|
+
[35m◒[39m Generating system types...
|
22
|
+
[999D[J[32m◇[39m ✅ Generated system types
|
23
|
+
[?25h[90m│[39m
|
24
|
+
[90m└[39m 🎉 Done!
|
4
25
|
|
5
26
|
CLI Building entry: src/index.tsx
|
6
27
|
CLI Using tsconfig: tsconfig.json
|
@@ -10,12 +31,12 @@ CLI Target: node16
|
|
10
31
|
CJS Build start
|
11
32
|
ESM Build start
|
12
33
|
DTS Build start
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
DTS ⚡️ Build success in
|
20
|
-
DTS dist/index.d.ts
|
21
|
-
DTS dist/index.d.mts
|
34
|
+
ESM dist/index.mjs 292.29 KB
|
35
|
+
ESM dist/index.mjs.map 619.55 KB
|
36
|
+
ESM ⚡️ Build success in 1903ms
|
37
|
+
CJS dist/index.js 311.52 KB
|
38
|
+
CJS dist/index.js.map 619.55 KB
|
39
|
+
CJS ⚡️ Build success in 1903ms
|
40
|
+
DTS ⚡️ Build success in 21154ms
|
41
|
+
DTS dist/index.d.ts 131.62 KB
|
42
|
+
DTS dist/index.d.mts 131.62 KB
|
@@ -0,0 +1,23 @@
|
|
1
|
+
|
2
|
+
> @vygruppen/spor-react@12.0.0 typegen /home/runner/work/spor/spor/packages/spor-react
|
3
|
+
> npx @chakra-ui/cli typegen src/theme/index.ts
|
4
|
+
|
5
|
+
[90m┌[39m Chakra CLI ⚡️
|
6
|
+
[?25l[90m│[39m
|
7
|
+
[35m◒[39m Generating conditions types...
|
8
|
+
[999D[J[32m◇[39m ✅ Generated conditions typings
|
9
|
+
[?25h[?25l[90m│[39m
|
10
|
+
[35m◒[39m Generating recipe types...
|
11
|
+
[999D[J[32m◇[39m ✅ Generated recipe typings
|
12
|
+
[?25h[?25l[90m│[39m
|
13
|
+
[35m◒[39m Generating utility types...
|
14
|
+
[999D[J[32m◇[39m ✅ Generated utility typings
|
15
|
+
[?25h[?25l[90m│[39m
|
16
|
+
[35m◒[39m Generating token types...
|
17
|
+
[999D[J[32m◇[39m ✅ Generated token typings
|
18
|
+
[?25h[?25l[90m│[39m
|
19
|
+
[35m◒[39m Generating system types...
|
20
|
+
[999D[J[32m◇[39m ✅ Generated system types
|
21
|
+
[?25h[90m│[39m
|
22
|
+
[90m└[39m 🎉 Done!
|
23
|
+
|
package/CHANGELOG.md
CHANGED
@@ -1,5 +1,250 @@
|
|
1
1
|
# @vygruppen/spor-react
|
2
2
|
|
3
|
+
## 12.0.0
|
4
|
+
|
5
|
+
### Major Changes
|
6
|
+
|
7
|
+
- fcd6f80: Checkbox:
|
8
|
+
|
9
|
+
- Updated props, `onChange` is now `onCheckedChange`
|
10
|
+
- "`is`" removed from props names. `invalid`, `disabled` and `checked`
|
11
|
+
|
12
|
+
CheckboxGroup:
|
13
|
+
|
14
|
+
- `defaultChecked` > `defaultValue`
|
15
|
+
|
16
|
+
- fcd6f80: Separator: Changed name from Divider to Separator. Fixed styling on separators to match Figma styling
|
17
|
+
- fcd6f80: Line Tag: isDisabled prop is now disabled
|
18
|
+
- fcd6f80: Line Icon: added label prop to enable aria-label for voice-over
|
19
|
+
- fcd6f80: useDisclosure hooks has changed prop from isOpen to open
|
20
|
+
- fcd6f80: Name update: "base" is now "core" on all platforms. Colors and variants.
|
21
|
+
- fcd6f80: Lists: UnorderedList is removed, use List with prop as="ul"; OrderedList is removed, use List with prop as="ol"
|
22
|
+
- fcd6f80: Table:
|
23
|
+
|
24
|
+
- Thead is now TableHeader,
|
25
|
+
- Tbody is now TableBody,
|
26
|
+
- Tr is now TableRow,
|
27
|
+
- Th is now TableCell,
|
28
|
+
- isNumeric is now textAlign="end"
|
29
|
+
- "line" > "ghost"
|
30
|
+
- "outline" > "core"
|
31
|
+
|
32
|
+
- fcd6f80: Breadcrumb: isCurrentPage prop is deprecated. Use BreadcrumbCurrentLink instead. BreadcrumbLink is deprecated. BreadcrumbItem will act as link and item.
|
33
|
+
- fcd6f80: Stepper: isDisabled is now disabled, variants are now `core` and `accent`
|
34
|
+
- fcd6f80: **Pagination:**
|
35
|
+
Pagination has changed and been converted to composition pattern. Please see docs for info.
|
36
|
+
|
37
|
+
Prop changes:
|
38
|
+
|
39
|
+
- `totalPages` > `count`
|
40
|
+
- `selectedPage` > `page`
|
41
|
+
|
42
|
+
New props: `pageSize`, `siblingsCount`, `defaultPage`, `onPageChange`, `onPageSizeChage`, `page`
|
43
|
+
See docs for more info
|
44
|
+
|
45
|
+
- fcd6f80: Media controller: isDisabled is deprecated, use disabled, isPlaying is deprecated, use now playing
|
46
|
+
- fcd6f80: ## Migrate to Chakra 3
|
47
|
+
|
48
|
+
Spor is getting a major update with Chakra 3.
|
49
|
+
|
50
|
+
## Updated variants
|
51
|
+
|
52
|
+
- `base` is now `core`
|
53
|
+
|
54
|
+
### Update props
|
55
|
+
|
56
|
+
- `isDisabled` is now `disabled`
|
57
|
+
- `isLoading` is now `loading`
|
58
|
+
- `sx` and `__css` is gone, use `css` or `style` instead
|
59
|
+
- `colorScheme` is now `colorPalette`
|
60
|
+
- `onClose` is now `close`
|
61
|
+
- `isOpen` is now `open`
|
62
|
+
- `isFitted` is now `fitted`
|
63
|
+
- `isPlaying` is now `playing`
|
64
|
+
- `isAttached` is now `attached`
|
65
|
+
|
66
|
+
### Updated components
|
67
|
+
|
68
|
+
- `Dialog` replaces `Modal` - And all sizes and placements are now available from the same component
|
69
|
+
- `Accordion`, `Pagination`, `Tabs`, `RadioCard` and `RadioCardGroup` now have a different syntax. Please consult the documentation for name changes.
|
70
|
+
- `Table` components has many changes. Instead of the generic HTML names (Td, Tr etc.), it will now work with full names. Please see docs. Variant `simple` is now `line`.
|
71
|
+
- `Toast` prop `isClosable` is now `closable`. `useToast` is now `createToaster`.
|
72
|
+
- `FormControl`, `FormLabel` and `FormErrorMessage` are removed and replaced by `Field`. `Field` supports the necessary props to support this.
|
73
|
+
- `Separator` replaces `Divider`.
|
74
|
+
- `UnorderedList` and `OrderedList` is deprecated. Use `List` and `as` prop instead.
|
75
|
+
- `Tab` is now `TabsTrigger`, `TabList` is now `TabsList`, `TabsPanel` and `TabPanel` are now `TabsContent`.
|
76
|
+
- `ClosableAlert` and `StaticAlert` are deprecated. Use component `Alert` and prop `closable` instead
|
77
|
+
- `InfoSelect` is now `Select` and has two more variants `rightSideSquare` and `leftSideSquare`
|
78
|
+
- `AttachedInputs` has deprecate FlexDirection prop which is now `orientation`
|
79
|
+
- `PhoneNumberInputs`an `invalid` prop is send for validation purpose, and `errorText` prop is send to give feedback on error
|
80
|
+
- `CardSelect` has new variant: `core`, `ghost` and `floating`
|
81
|
+
- `NumericStepper`isDisabled prop is deprecated, use disabled
|
82
|
+
- `createToast` replaces `useToast`. Now does not support closable toasts or toasts with actions.
|
83
|
+
- `Popover`replaces `ToolTip`. Props are different.
|
84
|
+
- `MediaController`isPlaying prop is now playing
|
85
|
+
- `Nudge` has different props. `WizardNudge`is no longer its own component, but can be easily built with `Nudge`and `NudgeWizardStep`s
|
86
|
+
- `ButtonGroup` has deprecate variant and size since the reference component in Chakra is now Group, variant and size is sent as children
|
87
|
+
- `Alert`: The `indicator` prop has been renamed to `showIndicator`.
|
88
|
+
- New variants: `important`, `alt`, `neutral`, `error-secondary`, and `service`.
|
89
|
+
- Removed variants: `warning` and `alt-transport`.
|
90
|
+
- Unchanged variants: `success`, `info`, and `error`.
|
91
|
+
- `CardSelect` new implementation. Uses same setup as `Popover`. See docs
|
92
|
+
|
93
|
+
### Darkmode
|
94
|
+
|
95
|
+
`DarkMode` and `LightMode` has been removed. Use `className="dark"` instead.
|
96
|
+
|
97
|
+
The `useColorMode` hook exports the state (`colorMode`) and toggle (`toggleColorMode`).
|
98
|
+
|
99
|
+
### Externals from Chakra:
|
100
|
+
|
101
|
+
Removed (as they have been removed from Chakra): `DarkMode, LightMode, defineStyleConfig, useColorModePreference, useMergeRefs, usePreferReducedMotion, CSSWithMultiValues, ComponentStyleConfig, UseClipboardOptions, UseOutsideClickProps, useSize`
|
102
|
+
|
103
|
+
Added: `defineRecipe, defineStyle, For, FormatNumber, FormatByte, LocaleProvider, Show, VisuallyHidden, useMap, useOnClickOutside, useIsClient`
|
104
|
+
|
105
|
+
- fcd6f80: Combobox: default variant is no longer base but core
|
106
|
+
- fcd6f80: Dialog: previous Modal component, and props, is removed and Dialog replace it
|
107
|
+
- fcd6f80: Accordion: Update syntax and props.
|
108
|
+
|
109
|
+
Changes for component:
|
110
|
+
|
111
|
+
- `AccordionButton` > `AccordionItemTrigger`
|
112
|
+
- `AccordionPanel` > `AccordionItemContent`
|
113
|
+
- `AccordionIcon` is deprecated and used in all Accordions
|
114
|
+
- `leftIcon` > `startElement`
|
115
|
+
- `defaultIndex` > `defaultValue`
|
116
|
+
|
117
|
+
- fcd6f80: Radio: can no longer be used without RadioGroup, for accessibility reasons.
|
118
|
+
- fcd6f80: Button Group: variant and size are no longer props of ButtonGroup, these props are passed from children. isAttached is now attached
|
119
|
+
- fcd6f80: RadioCardGroup and RadioCard:
|
120
|
+
|
121
|
+
- Updated props: `onChange` is now `onValueChange`
|
122
|
+
- Deleted props: `name`, `groupLabel` is replaced by `<RadioCardLabel />`
|
123
|
+
- `core` replaces the `base` variant
|
124
|
+
|
125
|
+
- fcd6f80: Numeric stepper: isDisabled is deprecated use now disabled
|
126
|
+
- fcd6f80: Tabs: Tab is now TabsTrigger, TabList is now TabsList, TabsPanel and TabPanel are now TabsContent, isFitted is now fitted, colorScheme is now variant
|
127
|
+
- fcd6f80: TimePicker: isInvalid and isDisabled is deprecated - use invalid and disabled instead
|
128
|
+
- fcd6f80: Popover component
|
129
|
+
- fcd6f80: Drawer: mainly component and some sub component has changed including their props
|
130
|
+
|
131
|
+
SimpleDrawer is deprecated
|
132
|
+
FullPageDrawer is deprecated and replaced by a prop customVariant="full" in DrawerContent
|
133
|
+
|
134
|
+
- fcd6f80: NativeSelect: isDisabled and isInvalid is now disabled and invalid. It is no longer necessary to define true or false.
|
135
|
+
- fcd6f80: Alert & ExpandableAlert
|
136
|
+
|
137
|
+
- `Alert`: `ClosableAlert` and `StaticAlert` are deprecated. Use component `Alert` and prop `closable` instead
|
138
|
+
- `ExpandableAlert`: New colorscheme and styling
|
139
|
+
- `Accordion`: Some styling updates
|
140
|
+
- variant `warning` is now `important` for Alert and ExpandableAlert
|
141
|
+
- `onToggle` is now `onValueChange`
|
142
|
+
- `onFocusChange` is added as prop
|
143
|
+
|
144
|
+
- fcd6f80: Switch: FormLabel is depricated, use label prop. isDisabled, isChecked and isInvalid is now disabled, checked and invalid.
|
145
|
+
- fcd6f80: **spor-design-tokens: major**
|
146
|
+
|
147
|
+
- teal has been removed from the palette. Use the green palette instead
|
148
|
+
- Some aliases are removed to make way for new ones
|
149
|
+
|
150
|
+
**spor-design-tokens: minor**
|
151
|
+
|
152
|
+
- The palette has been extended from 50-600 to 50-1100 with new values
|
153
|
+
- New aliases has been added to support the extended color palette
|
154
|
+
- New tokens has been added to themes; detail.color, surface.color and alert
|
155
|
+
- Some values for tokens has changed to support the new palette
|
156
|
+
|
157
|
+
**spor-react: patch**
|
158
|
+
|
159
|
+
- Updated darkGreen Badge with new alias
|
160
|
+
|
161
|
+
- fcd6f80: CardSelect: the variant are now: core, ghost and floating
|
162
|
+
- fcd6f80: ChoiceChip: isChecked and isDisabled is now checked and disabled
|
163
|
+
- fcd6f80: Floating Action button: isDisabled is now disabled
|
164
|
+
- fcd6f80: AttachedInputs: FlexDirection is deprecated and it is now orientation
|
165
|
+
Select: previously InfoSelect now just Select, disabledKeys is deprecated, onChange is now onValueChange,
|
166
|
+
placeholder is deprecated use label instead, ItemLabel and ItemDescription are deprecated, two more variants are added:
|
167
|
+
rightSideSquare and leftSideSquare to better use Select in AttachedInputs
|
168
|
+
PhoneNumberInputs: invalid prop is send for validation, default is false, and errorText is send to give feedback on error
|
169
|
+
- fcd6f80: TextLink: isExternal prop is now external
|
170
|
+
|
171
|
+
### Minor Changes
|
172
|
+
|
173
|
+
- fcd6f80: Change lottie package
|
174
|
+
- fcd6f80: Textarea: New props `label`, `invalid`, `errorText` and `helperText`
|
175
|
+
- fcd6f80: New alert variants and tokens.
|
176
|
+
- fcd6f80: remove support for elm
|
177
|
+
- fcd6f80: ProgressBar: You can now use showValueText to show the percentage done
|
178
|
+
- fcd6f80: ### Changed
|
179
|
+
|
180
|
+
- Changed the way the theme is switched to work with Chakra 3.
|
181
|
+
- Removed the `theme` prop and its value from `SporProvider`. Specifying brand should be sufficient.
|
182
|
+
|
183
|
+
- fcd6f80: ### Skeleton Component Updates
|
184
|
+
|
185
|
+
- **Skeleton**: Introduced new props. The `isLoaded` prop has been replaced with `loading`, which is its opposite.
|
186
|
+
- **SkeletonCircle**: The `boxSize` prop has been replaced with `size`.
|
187
|
+
|
188
|
+
- fcd6f80: New toast chakra 3
|
189
|
+
- fcd6f80: DatePicker: FormControl is depricated, you may use form
|
190
|
+
- fcd6f80: Update badge and add new borderradius, xxs
|
191
|
+
- fcd6f80: Upgrade to pnpm
|
192
|
+
|
193
|
+
### Patch Changes
|
194
|
+
|
195
|
+
- fcd6f80: ProgressLoader: No big changes
|
196
|
+
- fcd6f80: Button: fix outline width to align with design
|
197
|
+
- fcd6f80: Watch mode for packages
|
198
|
+
- fcd6f80: Update style and code quality in breadcrumbs
|
199
|
+
- fcd6f80: PhoneNumberInput: Fix styling
|
200
|
+
- fcd6f80: Field: fix helper text color
|
201
|
+
- fcd6f80: Simplify styling button
|
202
|
+
- fcd6f80: **Color tokens**: Update structure for alias and themes
|
203
|
+
**scripts**: Add typegen, typegen:watch and typegen:strict as run commands
|
204
|
+
**tokens**: Update structure for import to support colors
|
205
|
+
- fcd6f80: New setup CardSelect.
|
206
|
+
- fcd6f80: Button: fix tertiary styling
|
207
|
+
- fcd6f80: Separator: changed separator to use color token to fix darkmode
|
208
|
+
- fcd6f80: Rename props in alert from `indicator` to `showIndicator`
|
209
|
+
- fcd6f80: NativeSelect: Fix innvalid and disabled
|
210
|
+
- fcd6f80: Datepicker: added active state
|
211
|
+
- fcd6f80: ProgressIndicator: No big changes
|
212
|
+
- fcd6f80: PressableCard: moved \_active inside \_hover. Defaults to core now
|
213
|
+
- fcd6f80: Button: no big changes
|
214
|
+
- fcd6f80: Stepper: update design for active step
|
215
|
+
- fcd6f80: Checkbox: fix outline stroke for focus state
|
216
|
+
- fcd6f80: ServiceAlert: Updated styling with correct tokens
|
217
|
+
- fcd6f80: StaticCard: Changed color values of grey, red, yellow and orange to reflect Figma design.
|
218
|
+
- fcd6f80: Floating Action Button: fix problems with outline stroke
|
219
|
+
- fcd6f80: Update button colors
|
220
|
+
- fcd6f80: Merge main
|
221
|
+
- Updated dependencies [fcd6f80]
|
222
|
+
- Updated dependencies [fcd6f80]
|
223
|
+
- Updated dependencies [fcd6f80]
|
224
|
+
- Updated dependencies [fcd6f80]
|
225
|
+
- Updated dependencies [fcd6f80]
|
226
|
+
- Updated dependencies [fcd6f80]
|
227
|
+
- Updated dependencies [fcd6f80]
|
228
|
+
- Updated dependencies [fcd6f80]
|
229
|
+
- Updated dependencies [fcd6f80]
|
230
|
+
- Updated dependencies [fcd6f80]
|
231
|
+
- Updated dependencies [fcd6f80]
|
232
|
+
- Updated dependencies [fcd6f80]
|
233
|
+
- Updated dependencies [fcd6f80]
|
234
|
+
- Updated dependencies [fcd6f80]
|
235
|
+
- Updated dependencies [fcd6f80]
|
236
|
+
- Updated dependencies [fcd6f80]
|
237
|
+
- Updated dependencies [fcd6f80]
|
238
|
+
- @vygruppen/spor-design-tokens@4.0.0
|
239
|
+
- @vygruppen/spor-icon-react@4.0.0
|
240
|
+
- @vygruppen/spor-loader@0.6.0
|
241
|
+
|
242
|
+
## 11.3.10
|
243
|
+
|
244
|
+
### Patch Changes
|
245
|
+
|
246
|
+
- a3f39e5: Update RadioCard to specify input value
|
247
|
+
|
3
248
|
## 11.3.9
|
4
249
|
|
5
250
|
### Patch Changes
|