@veracity/vui 2.10.0 → 2.12.0-beta.0

package/src/input/input.tsx

@@ -4,7 +4,7 @@ import { styled, useStyleConfig, vui, VuiComponent } from '../core'
 import { T } from '../t'
 import { ChangeEvent, cs, filterUndefined, isString } from '../utils'
 import AutoCompletePopover from './autoCompletePopover'
-import { inputColors, inputStateMapping } from './consts'
+import { displayValueOnlyTextSize, inputColors, inputStateMapping } from './consts'
 import { InputProvider } from './context'
 import { getInitialCount } from './helpers'
 import HelpText from './helpText'
@@ -67,7 +67,8 @@ export const Input = vui<'div', InputProps>((props, ref) => {
     readOnly,
     required,
     showCount,
-    size,
+    displayValueOnly,
+    size = 'lg',
     state = '',
     stateMapping,
     step,
@@ -113,59 +114,69 @@ export const Input = vui<'div', InputProps>((props, ref) => {
 
   return (
     <InputProvider value={context}>
-      <AutoCompletePopover
-        autoCompleteMaxHeight={autoCompleteMaxHeight}
-        autoCompleteOptions={autoCompleteOptions}
-        filterAutoCompleteOptions={filterAutoCompleteOptions}
-        onAutoCompleteSelect={onAutoCompleteSelect}
-      >
-        <InputBase className={cs('vui-input', className)} ref={ref} {...styles.container} {...aliasedProps} {...rest}>
-          {itemLeft}
-          {isString(iconLeft) ? <InputIcon ml={1} name={iconLeft} /> : iconLeft}
-          {children ?? input ?? (
-            <InputInput
-              ref={inputRef}
-              {...{
-                autoFocus,
-                defaultValue,
-                disabled,
-                id,
-                max,
-                maxLength,
-                min,
-                name,
-                onBlur,
-                onChange,
-                onFocus,
-                pattern,
-                placeholder,
-                readOnly,
-                required,
-                step,
-                type
-              }}
-              autoComplete={autoCompleteOptions?.length ? 'off' : autoComplete}
-              value={valueInternal}
-              {...inputProps}
-            />
-          )}
-          {isString(iconRight) ? <InputIcon mr={1} name={iconRight} /> : iconRight}
-          {itemRight}
-          {state && <InputIcon mr={1} {...states[state]?.iconProps} />}
-          {showCount && (
-            <T
-              className="vui-inputCount"
-              color={maxLength && count > maxLength ? inputColors.error : inputColors.helpText}
-              position="absolute"
-              right={0}
-              size="sm"
-              top="calc(100% + 1px)"
-            >
-              {count} {maxLength ? `/ ${maxLength}` : null}
-            </T>
-          )}
-        </InputBase>
-      </AutoCompletePopover>
+      {displayValueOnly ? (
+        <T
+          className={cs('vui-input-value', className)}
+          size={displayValueOnlyTextSize[size] as 'xs' | 'md' | 'sm' | 'lg'}
+        >
+          {value || defaultValue}
+        </T>
+      ) : (
+        <AutoCompletePopover
+          autoCompleteMaxHeight={autoCompleteMaxHeight}
+          autoCompleteOptions={autoCompleteOptions}
+          filterAutoCompleteOptions={filterAutoCompleteOptions}
+          onAutoCompleteSelect={onAutoCompleteSelect}
+        >
+          <InputBase className={cs('vui-input', className)} ref={ref} {...styles.container} {...aliasedProps} {...rest}>
+            {itemLeft}
+            {isString(iconLeft) ? <InputIcon ml={1} name={iconLeft} /> : iconLeft}
+            {children ?? input ?? (
+              <InputInput
+                ref={inputRef}
+                {...{
+                  autoFocus,
+                  defaultValue,
+                  disabled,
+                  id,
+                  max,
+                  maxLength,
+                  min,
+                  name,
+                  onBlur,
+                  onChange,
+                  onFocus,
+                  pattern,
+                  placeholder,
+                  readOnly,
+                  required,
+                  step,
+                  type
+                }}
+                autoComplete={autoCompleteOptions?.length ? 'off' : autoComplete}
+                value={valueInternal}
+                {...inputProps}
+              />
+            )}
+            {isString(iconRight) ? <InputIcon mr={1} name={iconRight} /> : iconRight}
+            {itemRight}
+            {state && <InputIcon mr={1} {...states[state]?.iconProps} />}
+            {showCount && (
+              <T
+                className="vui-inputCount"
+                color={maxLength && count > maxLength ? inputColors.error : inputColors.helpText}
+                position="absolute"
+                right={0}
+                size="sm"
+                top="calc(100% + 1px)"
+              >
+                {count} {maxLength ? `/ ${maxLength}` : null}
+              </T>
+            )}
+          </InputBase>
+        </AutoCompletePopover>
+      )}
+
       {!!helpText && <HelpText>{helpText}</HelpText>}
       {!!errorText && <HelpText isError>{errorText}</HelpText>}
     </InputProvider>

package/src/input/input.types.ts

@@ -68,6 +68,8 @@ export type InputProps = SystemProps &
     required?: boolean
     /** Displays length of input value if also using maxLength. */
     showCount?: boolean
+    /** Displays the provided value. */
+    displayValueOnly?: boolean
     /** Modifies Input style and content based on the given state. */
     state?: InputState
     /** Object definition of styles and content for each state. */

package/src/modal/index.ts

@@ -1,6 +1,6 @@
 export * from './context'
-export * from './focusLock'
-export * from './focusLock.types'
+export * from '../focusLock/focusLock'
+export * from '../focusLock/focusLock.types'
 export * from './modal'
 export { default as Modal } from './modal'
 export * from './modal.types'

package/src/modal/modal.tsx

@@ -2,10 +2,10 @@ import React, { cloneElement, useRef } from 'react'
 
 import Box from '../box'
 import { vui, VuiComponent } from '../core'
+import FocusLock from '../focusLock'
 import Portal from '../portal'
 import { callAll, cs, KeyboardEvent, mergeRefs, MouseEvent } from '../utils'
 import { ModalProvider } from './context'
-import FocusLock from './focusLock'
 import { ModalProps } from './modal.types'
 import ModalBackdrop from './modalBackdrop'
 import ModalContent from './modalContent'
@@ -95,7 +95,6 @@ export const Modal = vui<'div', ModalProps>((props, ref) => {
           onMouseDown={callAll(props.onMouseDown, onMouseDown)}
         >
           {!hideBackdrop && <ModalBackdrop />}
-
           <FocusLock
             autoFocus={!disableAutoFocus}
             finalFocusRef={finalFocusRef}

package/src/modal/modal.types.ts

@@ -1,9 +1,9 @@
 import { ReactElement } from 'react'
 
+import { FocusableElement } from '../focusLock/focusLock.types'
 import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 import { MouseEvent } from '../utils'
-import { FocusableElement } from './focusLock.types'
 
 export type ModalBackdropProps = SystemProps
 

package/src/modal/modalManager.ts

@@ -1,18 +1,14 @@
 import { Ref, useEffect } from 'react'
 
-import { addBodyClass, removeBodyClass } from '../utils/dom'
+import { useBodyScrollLock } from '../core'
 
 /** State management for nested modals. */
 class ModalManager {
   modals: any[] = []
 
-  add = (modal: any) => {
-    this.modals.push(modal)
-  }
+  add = (modal: any) => this.modals.push(modal)
 
-  remove = (modal: any) => {
-    this.modals = this.modals.filter(m => m !== modal)
-  }
+  remove = (modal: any) => (this.modals = this.modals.filter(m => m !== modal))
 
   isTopModal = (modal: any) => {
     const topmostModal = this.modals[this.modals.length - 1]
@@ -24,15 +20,16 @@ export const manager = new ModalManager()
 
 /** Refs of new modals will be automatically added/removed from the state when rendering. */
 export function useModalManager(ref: Ref<any>, isOpen?: boolean, disableScrollLock?: boolean) {
+  const { setIsScrollLocked } = useBodyScrollLock()
   useEffect(() => {
     if (isOpen) {
       manager.add(ref)
-      if (!disableScrollLock) addBodyClass('vui-no-scroll')
+      if (!disableScrollLock) setIsScrollLocked(true)
     }
 
     return () => {
       manager.remove(ref)
-      if (!disableScrollLock) removeBodyClass('vui-no-scroll')
+      if (!disableScrollLock) setIsScrollLocked(false)
     }
   }, [isOpen, ref])
 }

package/src/onedesign-tokens/dist/js/rem/button.js

@@ -0,0 +1,85 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 22 Mar 2023 12:31:05 GMT
+ */
+
+export const buttonSizeLargeFontSize = "1.125rem";
+export const buttonSizeLargeLineHeight = "1.75rem";
+export const buttonSizeLargePadding = "0.5rem 1rem";
+export const buttonSizeMediumFontSize = "1rem";
+export const buttonSizeMediumLineHeight = "1.5rem";
+export const buttonSizeMediumPadding = "0.25rem calc(0.25rem * 3)";
+export const buttonSizeSmallFontSize = "0.875rem";
+export const buttonSizeSmallLineHeight = "1.25rem";
+export const buttonSizeSmallPadding = "calc(0.25rem / 2) 0.5rem";
+export const buttonSizeDefaultFontSize = "1rem";
+export const buttonSizeDefaultLineHeight = "1.5rem";
+export const buttonSizeDefaultPadding = "0.25rem calc(0.25rem * 3)";
+export const buttonTypePrimaryDefaultBorderColorDark = "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryDefaultBorderColorLight = "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryDefaultBackgroundColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypePrimaryDefaultBackgroundColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypePrimaryDefaultTextColorDark = "hsla(40, 3%, 100%, 1)";
+export const buttonTypePrimaryDefaultTextColorLight = "hsla(223, 67%, 18%, 1)";
+export const buttonTypePrimaryHoverBorderColorDark = "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryHoverBorderColorLight = "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryHoverBackgroundColorDark = "hsla(218, 100%, 20%, 1)";
+export const buttonTypePrimaryHoverBackgroundColorLight = "hsla(139, 100%, 70%, 1)";
+export const buttonTypePrimaryHoverTextColorDark = "hsla(40, 3%, 100%, 1)";
+export const buttonTypePrimaryHoverTextColorLight = "hsla(223, 67%, 18%, 1)";
+export const buttonTypePrimaryActiveBorderColorDark = "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryActiveBorderColorLight = "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryActiveBackgroundColorDark = "hsla(218, 100%, 35%, 1)";
+export const buttonTypePrimaryActiveBackgroundColorLight = "hsla(139, 100%, 85%, 1)";
+export const buttonTypePrimaryActiveTextColorDark = "hsla(40, 3%, 100%, 1)";
+export const buttonTypePrimaryActiveTextColorLight = "hsla(223, 67%, 18%, 1)";
+export const buttonTypePrimaryFocusOutline = "0.25rem solid hsla(196, 100%, 43%, 1)";
+export const buttonTypeSecondaryDefaultBorderColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryDefaultBorderColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryDefaultBackgroundColorDark = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeSecondaryDefaultBackgroundColorLight = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeSecondaryDefaultTextColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryDefaultTextColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryHoverBorderColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryHoverBorderColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryHoverBackgroundColorDark = "hsla(196, 74%, 80%, 1)";
+export const buttonTypeSecondaryHoverBackgroundColorLight = "hsla(218, 100%, 25%, 1)";
+export const buttonTypeSecondaryHoverTextColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryHoverTextColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryActiveBorderColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryActiveBorderColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryActiveBackgroundColorDark = "hsla(196, 74%, 85%, 1)";
+export const buttonTypeSecondaryActiveBackgroundColorLight = "hsla(218, 100%, 35%, 1)";
+export const buttonTypeSecondaryActiveTextColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryActiveTextColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryFocusOutline = "0.25rem solid hsla(196, 100%, 43%, 1)";
+export const buttonTypeTertiaryDefaultBorderColorDark = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryDefaultBorderColorLight = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryDefaultBackgroundColorDark = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryDefaultBackgroundColorLight = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryDefaultTextColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeTertiaryDefaultTextColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeTertiaryHoverBorderColorDark = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryHoverBorderColorLight = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryHoverBackgroundColorDark = "hsla(196, 74%, 80%, 1)";
+export const buttonTypeTertiaryHoverBackgroundColorLight = "hsla(218, 100%, 25%, 1)";
+export const buttonTypeTertiaryHoverTextColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeTertiaryHoverTextColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeTertiaryActiveBorderColorDark = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryActiveBorderColorLight = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryActiveBackgroundColorDark = "hsla(196, 74%, 85%, 1)";
+export const buttonTypeTertiaryActiveBackgroundColorLight = "hsla(218, 100%, 35%, 1)";
+export const buttonTypeTertiaryActiveTextColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeTertiaryActiveTextColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeTertiaryFocusOutline = "0.25rem solid hsla(196, 100%, 43%, 1)";
+export const buttonDisabledCursor = "default";
+export const buttonDisabledOpacity = "0.5";
+export const buttonBorderStyle = "solid";
+export const buttonBorderWidth = "calc(0.125rem / 2)";
+export const buttonFontFamily = "'Avenir Next', Arial, sans-serif";
+export const buttonFontSize = "1rem";
+export const buttonLineHeight = "1.5rem";
+export const buttonFontWeight = "500";
+export const buttonPadding = "calc(0.25rem * 1.5) calc(0.25rem * 3)";
+export const buttonTransition = "all 0.15s ease-in-out";
+export const buttonCursor = "pointer";

package/src/sidemenu/sidemenu.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react'
 
 import Box from '../box'
 import Button from '../button'
-import { styled, useStyleConfig, vui, VuiComponent } from '../core'
+import { useStyleConfig, vui, VuiComponent } from '../core'
 import Icon from '../icon'
 import { cs, filterUndefined } from '../utils'
 import { expandedWidth } from './consts'
@@ -11,17 +11,9 @@ import { SidemenuItemProps, SidemenuProps } from './sidemenu.types'
 import SidemenuItem from './sidemenuItem'
 import SidemenuTop from './sidemenuTop'
 
-export const SidemenuBase = styled.divBox`
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  transition-duration: normal;
-  overflow: hidden;
-`
-
 /** A collapsible side menu for navigation. */
 export const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {
-  const { children, className, items, isExpanded = false, size, variant, width = 280, ...rest } = props
+  const { children, className, items, isExpanded = false, size, variant, width = 280, onNavigate, ...rest } = props
 
   const [isExpandedInternal, setIsExpandedInternal] = useState(isExpanded)
   const context = useMemo(
@@ -43,12 +35,30 @@ export const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {
   const icon = `falArrow${isExpandedInternal ? 'Left' : 'Right'}`
   const justifyContent = isExpandedInternal ? 'flex-end' : 'center'
 
+  function onItemClick(item: SidemenuItemProps) {
+    item?.onClick?.()
+    if (item?.path) onNavigate?.(item.path)
+  }
+
   return (
     <SidemenuProvider value={context}>
-      <SidemenuBase className={cs('vui-sidemenu', className)} ref={ref} w={w} {...styles.container} {...rest}>
+      <Box
+        className={cs('vui-sidemenu', className)}
+        elevation="3"
+        flexDirection="column"
+        minWidth={0}
+        overflowX="hidden"
+        ref={ref}
+        transitionDuration="normal"
+        w={w}
+        {...styles.container}
+        {...rest}
+      >
         <Box flexDirection="column" flexGrow={1} overflowX="hidden" overflowY="auto" w="100%">
           {items
-            ? items?.map?.((item: SidemenuItemProps, key: number) => <SidemenuItem key={key} {...item} />)
+            ? items?.map?.((item: SidemenuItemProps, key: number) => (
+                <SidemenuItem key={key} {...item} onClick={() => onItemClick(item)} />
+              ))
             : children}
         </Box>
         <Box className="vui-sidemenu-bottom" w="100%" {...styles.bottom}>
@@ -63,7 +73,7 @@ export const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {
             <Icon name={icon} />
           </Button>
         </Box>
-      </SidemenuBase>
+      </Box>
     </SidemenuProvider>
   )
 }) as VuiComponent<'div', SidemenuProps> & {

package/src/sidemenu/sidemenu.types.ts

@@ -13,6 +13,8 @@ export type SidemenuProps = SystemProps &
     items?: SidemenuItemProps[]
     /** Whether the menu is expanded @default false  */
     isExpanded?: boolean
+    /** External callback for navigation to the item path, could be a custom function or React Router hook: https://reactrouter.com/en/main/hooks/use-navigate  */
+    onNavigate?: (to: string) => void
     /** With of the container when the side menu is expanded @default 280  */
     width?: number
   }
@@ -30,6 +32,8 @@ export type SidemenuItemProps = BoxProps & {
   isActive?: boolean
   /** On click callback */
   onClick?: () => void
+  /** Router path */
+  path?: string
   /** Title */
   title: string
 }

package/src/sidemenu/sidemenuItem.tsx

@@ -4,6 +4,7 @@ import Box from '../box'
 import Button from '../button'
 import { omitThemingProps, useStyleConfig, vui, VuiComponent } from '../core'
 import Icon from '../icon'
+import { Popover } from '../popover'
 import T from '../t'
 import { cs } from '../utils'
 import { useSidemenuContext } from './context'
@@ -19,17 +20,13 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
   const isDark = variant === 'dark'
   const hasChildrenExpanded = !!children && isExpandedInternal
 
-  const innerContent = isExpandedInternal ? (
+  const innerContent = (
     <Box centerV px={2} py={1} w="100%" whiteSpace="pre">
       <Icon ml={iconSize === 'sm' ? '4px' : 0} name={icon} size={iconSize} />
       <T isTruncated ml={2}>
         {title}
       </T>
     </Box>
-  ) : (
-    <Box centerV px={2} py={1} w="100%">
-      <Icon ml={iconSize === 'sm' ? '4px' : 0} name={icon} size={iconSize} />
-    </Box>
   )
 
   const toggle = (e: MouseEvent<HTMLButtonElement>) => {
@@ -38,39 +35,55 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
     setDisplayChildren(!displayChildren)
   }
 
+  const buttonStyles = {
+    alignItems: 'center',
+    border: 'none',
+    borderRadius: 0,
+    borderLeft: '3px solid transparent',
+    borderLeftColor: isActive ? (isDark ? 'digiGreen.main' : 'seaBlue.main') : undefined,
+    bg: isDark ? 'darkBlue.main' : isActive ? 'skyBlue.95' : 'white',
+    color: hasChildrenExpanded ? 'seaBlue.main' : isDark ? 'digiGreen.main' : 'sandstone.10',
+    h: 'auto',
+    justifyContent: 'space-between',
+    onClick: () => onClick?.(),
+    p: 0,
+    variant: isDark ? 'tertiaryLight' : 'tertiaryDark',
+    w: '100%',
+    ...styles.item,
+    minH: size === 'lg' ? '56px' : '40px',
+    hoverBg: isDark ? 'seaBlue.main' : 'skyBlue.90',
+    ...rest
+  }
+
   return (
     <Box flexDirection="column" ref={ref} w="100%">
-      <Button
-        alignItems="center"
-        border="none"
-        borderLeft="3px solid transparent"
-        borderLeftColor={isActive ? (isDark ? 'digiGreen.main' : 'seaBlue.main') : undefined}
-        borderRadius={0}
-        className={cs('vui-sidemenu-item', className)}
-        color={hasChildrenExpanded ? 'seaBlue.main' : isDark ? 'digiGreen.main' : 'sandstone.10'}
-        h="auto"
-        justifyContent="space-between"
-        onClick={() => onClick?.()}
-        p={0}
-        variant={isDark ? 'tertiaryLight' : 'tertiaryDark'}
-        w="100%"
-        {...styles.item}
-        minH={size === 'lg' ? '56px' : '40px'}
-        {...rest}
-      >
-        {innerContent}
-        {hasChildrenExpanded && (
-          <Button
-            className="vui-sidemenu-item-expand"
-            icon={displayChildren ? 'falChevronUp' : 'falChevronDown'}
-            mr={1}
-            onClick={toggle}
-            size="sm"
-            variant={isDark ? 'tertiaryLight' : 'tertiaryDark'}
-          />
-        )}
-      </Button>
-      {!!children && displayChildren && (
+      {!hasChildrenExpanded && children ? (
+        <Popover offset={[0, 0]} placement="right-start" trigger="mouseenter">
+          <Popover.Trigger className={cs('vui-sidemenu-item-popover', className)} {...buttonStyles}>
+            <Box borderLeft={`3px solid ${isDark ? 'digiGreen.main' : 'seaBlue.main'}`}>{innerContent}</Box>
+          </Popover.Trigger>
+          <Popover.Content shadow={'none'}>
+            <Box flexDirection="column" justifyContent="start" w="100%">
+              {children}
+            </Box>
+          </Popover.Content>
+        </Popover>
+      ) : (
+        <Button className={cs('vui-sidemenu-item', className)} {...buttonStyles}>
+          {innerContent}
+          {hasChildrenExpanded && (
+            <Button
+              className="vui-sidemenu-item-expand"
+              icon={displayChildren ? 'falChevronUp' : 'falChevronDown'}
+              mr={1}
+              onClick={toggle}
+              size="sm"
+              variant={isDark ? 'tertiaryLight' : 'tertiaryDark'}
+            />
+          )}
+        </Button>
+      )}
+      {!!children && hasChildrenExpanded && displayChildren && (
         <Box flexDirection="column" justifyContent="start" w="100%">
           {children}
         </Box>

package/src/spinner/spinner.tsx

@@ -29,8 +29,8 @@ export const Spinner = vui<'div', SpinnerProps>((props, ref) => {
     thickness,
     ...rest
   } = props
-  const styles = useStyleConfig('Spinner', props)
 
+  const styles = useStyleConfig('Spinner', props)
   const isCustomSize = typeof size === 'number'
   const positionProps = spinnerPositionMapping[textPosition]
   const speed = spinnerSpeedMapping[speedProp] ?? speedProp
@@ -49,8 +49,8 @@ export const Spinner = vui<'div', SpinnerProps>((props, ref) => {
       gap={1}
       ref={ref}
       transitionDuration="fast"
-      {...styles.container}
       {...positionProps.container}
+      {...styles.container}
       {...rest}
     >
       <SpinnerCircle
@@ -59,8 +59,7 @@ export const Spinner = vui<'div', SpinnerProps>((props, ref) => {
         {...styles.circle}
         {...circleProps}
       />
-
-      {text && (
+      {!!text && (
         <T className="vui-spinnerText" {...styles.text}>
           {text}
         </T>

package/src/spinner/spinner.types.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react'
+
 import { BoxProps } from '../box'
 import { ThemingProps } from '../theme'
 
@@ -14,7 +16,7 @@ export type SpinnerProps = Omit<BoxProps, 'size' | 'variant'> &
     /** Theme size or a number defining height and width. */
     size?: ThemingProps<'Spinner'>['size'] | number
     /** Displays given text next to the spinner. */
-    text?: string
+    text?: ReactNode
     /** Text placement relative to the spinner. */
     textPosition?: 'bottom' | 'left' | 'right' | 'top'
     /** Thickness of the spinner circle in pixels. */

package/src/spinner/theme.ts

@@ -1,8 +1,12 @@
-const baseStyle = {}
+const baseStyle = {
+  container: {
+    padding: 1
+  }
+}
 
 const defaultProps = {
-  size: 'page',
-  variant: 'lightBackground'
+  size: 'xxxl',
+  variant: 'light'
 }
 
 const parts = ['container', 'circle', 'text']
@@ -10,9 +14,9 @@ const parts = ['container', 'circle', 'text']
 const sizes = {
   xs: {
     circle: {
-      borderWidth: 1,
-      h: 16,
-      w: 16
+      borderWidth: 2,
+      h: 20,
+      w: 20
     }
   },
   sm: {
@@ -36,24 +40,38 @@ const sizes = {
       w: 40
     }
   },
-  card: {
+  xl: {
+    circle: {
+      borderWidth: 3,
+      h: 48,
+      w: 48
+    }
+  },
+  xxl: {
     circle: {
       borderWidth: 4,
       h: 60,
       w: 60
     }
   },
-  page: {
+  xxxl: {
     circle: {
       borderWidth: 5,
       h: 80,
       w: 80
     }
+  },
+  xxxxl: {
+    circle: {
+      borderWidth: 5,
+      h: 120,
+      w: 120
+    }
   }
 }
 
 const variants = {
-  lightBackground: {
+  light: {
     circle: {
       borderColor: 'seaBlue.80',
       borderTopColor: 'seaBlue.main'
@@ -62,13 +80,16 @@ const variants = {
       color: 'seaBlue.main'
     }
   },
-  darkBackground: {
+  dark: {
+    container: {
+      bg: 'darkBlue.main'
+    },
     circle: {
-      borderColor: 'digiGreen.30',
-      borderTopColor: 'digiGreen.78'
+      borderColor: 'hsl(139, 100%, 78%, 0.4)',
+      borderTopColor: 'digiGreen.main'
     },
     text: {
-      color: 'digiGreen.78'
+      color: 'digiGreen.main'
     }
   }
 }