Skip to content
Vy logo
Guides

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

  • isDisabled is now disabled
  • isLoading is now loading
  • sx and __css are gone, use css or style instead
  • colorScheme is now colorPalette
  • onClose is now close
  • isOpen is now open
  • isFitted is now fitted
  • isPlaying is now playing
  • isAttached is now attached


Updated components

  • Dialog replaces 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 simple is now line.
  • `Toast` prop isClosable is now closable. useToast is now createToaster.
  • FormControl, FormLabel and FormErrorMessage are removed and replaced by Field. `Field` supports the necessary props to support this.
  • Separator replaces Divider.
  • UnorderedList and OrderedList is deprecated. Use List with as props instead, examples: as="ul" or as="ol".
  • Tab is now TabsTrigger, TabList is now TabsList, TabsPanel and TabPanel are now TabsContent.
  • ClosableAlert and StaticAlert are deprecated. Use component Alert and prop closable instead
  • InfoSelect is now Select and has two more variants rightSideSquare and leftSideSquare
  • AttachedInputs has deprecate FlexDirection prop 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 isDisabled prop, use disabled instead
  • createToast replaces useToast. It no longer supports closable toasts or toasts with actions.
  • Popover replaces ToolTip. Props are different.
  • MediaController, isPlaying prop 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.