@veracity/vui 2.20.0-beta.5 → 2.20.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.20.0-beta.5",
+  "version": "2.20.0-rc.1",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/button/theme.ts

@@ -1,7 +1,7 @@
 const baseStyle = {}
 
 const defaultProps = {
-  size: 'md',
+  size: 'lg',
   variant: 'primaryDark',
   fontWeight: 'medium',
 }

package/src/checkbox/checkbox.tsx

@@ -5,7 +5,7 @@ import Icon from '../icon'
 import T from '../t'
 import { ChangeEvent, cs, filterUndefined } from '../utils'
 import { CheckboxProps, CheckboxStyleProps } from './checkbox.types'
-import { checkboxColors } from './consts'
+import { checkboxColors, disabled } from './consts'
 import { useCheckboxGroupContext } from './context'
 
 const CheckboxControl = styled.spanBox`
@@ -43,10 +43,11 @@ export const CheckboxBase = styled.labelBox<CheckboxStyleProps>`
   }
 
   &[aria-disabled='true'] {
+    color: ${disabled.text};
     cursor: not-allowed;
 
     .vui-checkboxControl {
-      color: ${checkboxColors.disabled};
+      color: ${disabled.icon};
     }
   }
 `

package/src/checkbox/consts.ts

@@ -3,5 +3,9 @@ export const checkboxColors = {
   checked: 'seaBlue.28',
   hover: 'seaBlue.20',
   focus: 'seaBlue.35',
-  disabled: 'sandstone.90',
+} as const
+
+export const disabled = {
+  icon: 'sandstone.79',
+  text: 'sandstone.60',
 } as const

package/src/header/header.types.ts

@@ -112,7 +112,7 @@ export type LoggedInHeaderProps = HeaderProps &
     notifications?: HeaderNotificationsData | JSX.Element
     /** Socket for services menu icon on the right side. */
     services?: HeaderServicesData | JSX.Element
-    /** Socket for showing the 'alternative' user Info with role (alternative: 3 lines, role. default: 2 lines, no role); introduced for APP; by default it is true. */
+    /** Socket for showing the 'alternative' user Info with role (alternative: 3 lines, role. default: 2 lines, no role); introduced for APP; @default false */
     showAltUserInfo?: boolean
     /** Socket for showing the services trigger up front; introduced for APP; by default it is displayed. */
     showServices?: boolean

package/src/header/loggedInHeader.tsx

@@ -25,7 +25,7 @@ export const LoggedInHeader = vui<'div', LoggedInHeaderProps>((props, ref) => {
     logo,
     mainLinks,
     services,
-    showAltUserInfo = true,
+    showAltUserInfo = false,
     showMainLinks = isApplication ? false : true,
     showServices = true,
     notifications,

package/src/label/label.tsx

@@ -42,9 +42,9 @@ export const Label = vui<'label', LabelProps>((props, ref) => {
             {tooltipText && (
               <>
                 {' '}
-                <T fontWeight={400}>
+                <T fontSize={fontSize} fontWeight={400}>
                   <Tooltip text={tooltipText}>
-                    <Icon mb="-5px" name="falInfoCircle" role="button" size="sm" />
+                    <Icon mb={fontSize === 'xs' ? '-6px' : '-5px'} name="falInfoCircle" role="button" size="sm" />
                   </Tooltip>
                 </T>
               </>

package/src/radio/consts.ts

@@ -3,5 +3,4 @@ export const radioColors = {
   checked: 'seaBlue.28',
   hover: 'seaBlue.20',
   focus: 'seaBlue.35',
-  disabled: 'sandstone.90',
 } as const

package/src/radio/radio.tsx

@@ -1,5 +1,6 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 
+import { disabled } from '../checkbox/consts'
 import { omitThemingProps, styled, th, useStyleConfig, vui } from '../core'
 import Icon from '../icon'
 import T from '../t'
@@ -44,11 +45,11 @@ export const RadioBase = styled.labelBox<RadioStyleProps>`
   }
 
   &[aria-disabled='true'] {
-    color: ${radioColors.disabled};
+    color: ${disabled.text};
     cursor: not-allowed;
 
     .vui-radioControl {
-      color: ${radioColors.disabled};
+      color: ${disabled.icon};
     }
   }
 `
@@ -97,11 +98,8 @@ export const Radio = vui<'span', RadioProps>((props, ref) => {
   const controlHoverColor = hoverColor ? hoverColor : radioColors.hover
 
   useEffect(() => {
-    if (groupIsChecked !== undefined) {
-      setIsChecked(groupIsChecked === value)
-    } else if (checked !== undefined) {
-      setIsChecked(checked)
-    }
+    if (groupIsChecked !== undefined) setIsChecked(groupIsChecked === value)
+    else if (checked !== undefined) setIsChecked(checked)
   }, [checked, groupIsChecked])
 
   function handleOnChange(e: ChangeEvent) {

package/src/select/select.tsx

@@ -43,7 +43,7 @@ export function Select(props: SelectProps) {
     selectButton,
     selectButtonProps,
     showOptionsFilter,
-    size = 'md',
+    size = 'lg',
     value,
     variant,
     ...rest
@@ -56,7 +56,6 @@ export function Select(props: SelectProps) {
   }
 
   const generatedId = useId()
-  const styles = useStyleConfig('Select', useSelectContext())
   const [query, setQuery] = useState<string>('')
   const [filteredOptions, setFilteredOptions] = useState(options)
 
@@ -87,7 +86,15 @@ export function Select(props: SelectProps) {
 
   return (
     <SelectProvider value={context}>
-      {label && <SelectLabel label={label} />}
+      {label && (
+        <SelectLabel
+          disabled={disabled}
+          id={id}
+          label={label}
+          labelMarkOptional={labelMarkOptional}
+          labelTooltipText={labelTooltipText}
+        />
+      )}
       <Popover matchWidth {...rest}>
         <>
           {selectButton ?? <SelectButton {...selectButtonProps} />}
@@ -96,6 +103,7 @@ export function Select(props: SelectProps) {
               <Box mr={2}>
                 <Input
                   iconLeft="falSearch"
+                  id={id} // should be select on the button instead?
                   m={1}
                   mt={0}
                   onChange={onQueryChange}

package/src/select/selectButton.tsx

@@ -50,7 +50,7 @@ export const SelectButton = vui<'button', SelectButtonProps>((props, ref) => {
       }
     : undefined
 
-  const textColor = valueText ? undefined : 'sandstone.10'
+  const textColor = 'sandstone.10'
   const iconColor = disabled ? 'sandstone.10' : 'seaBlue.main'
 
   return (

package/src/select/theme.ts

@@ -1,7 +1,7 @@
 const baseStyle = {}
 
 const defaultProps = {
-  size: 'md',
+  size: 'lg',
   variant: 'outlined',
 }
 
@@ -46,6 +46,20 @@ const sizes = {
     option: {
       size: 'lg',
     },
+    label: {
+      fontSize: 'md',
+    },
+  },
+  xl: {
+    button: {
+      size: 'xl',
+    },
+    group: {
+      size: 'xl',
+    },
+    option: {
+      size: 'xl',
+    },
     label: {
       fontSize: 'lg',
     },
@@ -57,8 +71,8 @@ const variants = {
     button: {
       hoverBg: 'white',
       activeBg: 'white',
-      borderColor: 'grey.60',
-      hoverBorderColor: 'grey.60',
+      borderColor: 'sandstone.60',
+      hoverBorderColor: 'sandstone.60',
     },
   },
   text: {