@veracity/vui 2.25.3 → 2.25.5-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.25.3",
+  "version": "2.25.5-beta.0",
   "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/input/input.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useId, useMemo, useState } from 'react'
 
+import Box from '../box'
 import { IconButton } from '../button'
 import { styled, useStyleConfig, vui, VuiComponent } from '../core'
 import Label from '../label'
@@ -155,7 +156,7 @@ export const Input = vui<'div', InputProps>((props, ref) => {
           filterAutoCompleteOptions={filterAutoCompleteOptions}
           onAutoCompleteSelect={onAutoCompleteSelect}
         >
-          <>
+          <Box className="vui-inputContainer" column>
             {isString(label) ? (
               <Label
                 aria-disabled={disabled}
@@ -233,7 +234,7 @@ export const Input = vui<'div', InputProps>((props, ref) => {
                 </T>
               )}
             </InputBase>
-          </>
+          </Box>
         </AutoCompletePopover>
       )}
 

package/src/notification/consts.ts

@@ -69,3 +69,14 @@ export const notificationStatusMapping: NotificationStatusMapping = {
     variant: 'bannerYellow',
   },
 }
+
+export const closeButtonVariantMapping = {
+  subtleRed: 'subtleRed',
+  subtleBlue: 'subtleBlue',
+  subtleGreen: 'subtleGreen',
+  subtleYellow: 'subtleYellow',
+  bannerRed: 'subtleRed',
+  bannerBlue: 'subtleBlue',
+  bannerGreen: 'subtleGreen',
+  bannerYellow: 'subtleYellow',
+}

package/src/notification/notification.tsx

@@ -1,7 +1,7 @@
 import Box from '../box'
 import { useStyleConfig, vui, VuiComponent } from '../core'
 import { cs, filterUndefined, isReactText, isString } from '../utils'
-import { bannerNotificationElevation, notificationStatusMapping } from './consts'
+import { bannerNotificationElevation, closeButtonVariantMapping, notificationStatusMapping } from './consts'
 import { NotificationProvider } from './context'
 import { NotificationProps } from './notification.types'
 import NotificationButton from './notificationButton'
@@ -70,7 +70,7 @@ export const Notification = vui<'div', NotificationProps>((props, ref) => {
             aria-label="close"
             icon="falTimes"
             onClick={onClose}
-            variant={variant}
+            variant={closeButtonVariantMapping?.[variant] ?? variant}
             w="32px"
           />
         )}

package/src/notification/notification.types.ts

@@ -12,7 +12,7 @@ export type NotificationProps = Omit<BoxProps, 'size' | 'variant'> &
     colorScheme?: 'blue' | 'green' | 'red' | 'yellow'
     /** Socket displaying an icon on the left. */
     icon?: IconProp | JSX.Element
-    /** If provided, displays a close button with this function as onClick. */
+    /** When provided, displays a close button with this function as the callback. */
     onClose?: () => void
     /** Modifies Notification style and content based on the given status. */
     status?: NotificationStatus