Site settings
Change the appearance of the site to suit your preferences
Migration
Spor 2 (Version 12) introduces breaking changes that require special attention when upgrading. As mentioned, the Spor library is built on the Chakra framework, which has recently released Version 3 as a breaking change update. Since Spor 2 is based on Chakra 3 and incorporates all the breaking changes introduced in the new components, it must adhere to all breaking changes in Chakra 3, along with those introduced by Spor itself.
---"@vygruppen/spor-react": major---
Migrate to Chakra 3
Spor is getting a major update with Chakra 3.
Updated variants
-base is now core
Update props
isDisabledis now disabledisLoadingis now loadingsxand __cssare gone, use css or style insteadcolorSchemeis now colorPaletteonCloseis now closeisOpenis now openisFittedis now fittedisPlayingis now playingisAttachedis now attached
Updated components
Dialogreplaces Modal- And all sizes and placements are now available from the same component
- Accordion, Pagination, Tabs, RadioCard and RadioCardGroup now have a different syntax. Please consult the documentation for name changes.
- Table components has many changes. Instead of the generic HTML names (Td, Tr etc.), it will now work with full names. Please see documentationEkstern lenke. In addition, variant
simpleis now line. - `Toast` prop
isClosableis now closable. useToastis now createToaster. - FormControl, FormLabel and FormErrorMessage are removed and replaced by Field. `Field` supports the necessary props to support this.
- Separator replaces
Divider. UnorderedListand OrderedListis deprecated. Use List with as props instead, examples: as="ul" or as="ol".Tabis now TabsTrigger, TabListis now TabsList, TabsPaneland TabPanelare now TabsContent.ClosableAlertand StaticAlertare deprecated. Use component Alert and prop closable insteadInfoSelectis now Select and has two more variants rightSideSquare and leftSideSquare- AttachedInputs has deprecate
FlexDirectionprop which is now orientation - PhoneNumberInputs has now an invalid prop is send for validation purpose, and errorText prop is send to give feedback on error
- CardSelect has new variant: core, ghost and floating
- NumericStepper has deprcated
isDisabledprop, use disabled instead - createToast replaces
useToast. It no longer supports closable toasts or toasts with actions. - Popover replaces
ToolTip. Props are different. - MediaController,
isPlayingprop is now playing- Nudge has different props. WizardNudge is no longer its own component, but can be easily built with Nudge and NudgeWizardSteps - ButtonGroup has deprecate variant and size since the reference component in Chakra is now Group, variant and size are sent as children
Darkmode
DarkMode and LightMode has been removed. Use className="dark" instead on the element or parent element.
The useColorMode hook exports the state (colorMode) and toggle (toggleColorMode).
Externals from Chakra:
Removed (as they have been removed from Chakra): `DarkMode, LightMode, defineStyleConfig, useColorModePreference, useMergeRefs, usePreferReducedMotion, CSSWithMultiValues, ComponentStyleConfig, UseClipboardOptions, UseOutsideClickProps, useSize.
Added: defineRecipe, defineStyle, For, FormatNumber, FormatByte, LocaleProvider, Show, VisuallyHidden, useMap, useOnClickOutside, useIsClient.