@veracity/vui 2.20.0-beta.3 → 2.20.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.20.0-beta.3",
+  "version": "2.20.0-beta.4",
   "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/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/notification/consts.ts

@@ -1,15 +1,16 @@
+import { iconDictionary } from '../message/consts'
 import { NotificationStatusMapping } from './notification.types'
 
 export const notificationStatusMapping: NotificationStatusMapping = {
   error: {
     iconProps: {
-      name: 'falTimesCircle',
+      name: iconDictionary.error,
     },
     variant: 'subtleRed',
   },
   info: {
     iconProps: {
-      name: 'falInfoCircle',
+      name: iconDictionary.info,
     },
     variant: 'subtleBlue',
   },
@@ -23,13 +24,13 @@ export const notificationStatusMapping: NotificationStatusMapping = {
   },
   success: {
     iconProps: {
-      name: 'falCheckCircle',
+      name: iconDictionary.success,
     },
     variant: 'subtleGreen',
   },
   warning: {
     iconProps: {
-      name: 'falExclamationCircle',
+      name: iconDictionary.warning,
     },
     variant: 'subtleYellow',
   },

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: {