@hyphen/hyphen-components 6.9.0 → 6.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "6.9.0",
+  "version": "6.12.0",
   "license": "MIT",
   "author": {
     "name": "@hyphen"

package/src/components/Badge/Badge.stories.tsx

@@ -27,7 +27,9 @@ export const Variants = () => {
   return (
     <Box direction="row" gap="sm">
       {variants.map((variant) => (
-        <Badge message={variant} variant={variant} key={variant} />
+        <Badge variant={variant} key={variant}>
+          {variant}
+        </Badge>
       ))}
     </Box>
   );
@@ -45,8 +47,9 @@ export const Sizes = () => (
           tablet: 'md',
           desktop: 'lg',
         }}
-        message="Responsive"
-      />
+      >
+        Responsive
+      </Badge>
     </Box>
   </>
 );

package/src/components/Badge/Badge.test.tsx

@@ -57,9 +57,8 @@ describe('Badge', () => {
             desktop: 'lg',
             hd: 'sm',
           }}
-          message="badge"
         >
-          button
+          badge
         </Badge>
       );
 

package/src/components/Badge/Badge.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { FontSize, BaseSpacing, ResponsiveProp } from '../../types';
 import { generateResponsiveClasses } from '../../lib/generateResponsiveClasses';
 import styles from './Badge.module.scss';
-import { Box } from '../Box/Box';
+import { Box, BoxProps } from '../Box/Box';
 
 export type BadgeSize = 'sm' | 'md' | 'lg';
 
@@ -19,13 +19,9 @@ export type BadgeVariant =
   | 'hyphen';
 
 export type BadgeSizeAttributes = { fontSize: FontSize; padding: BaseSpacing };
-export interface BadgeProps {
+export interface BadgeProps extends BoxProps {
   /**
-   * Custom class to apply to the badge container div.
-   */
-  className?: string;
-  /**
-   * The text message or ReactNode to be rendered in the badge.
+   * @deprecated Use children instead. The text message or ReactNode to be rendered in the badge.
    */
   message?: string | ReactNode;
   /**
@@ -36,10 +32,6 @@ export interface BadgeProps {
    * The type/color of the badge to show.
    */
   variant?: BadgeVariant;
-  /**
-   * Additional props to be spread to rendered element
-   */
-  [x: string]: any; // eslint-disable-line
 }
 
 export const Badge = forwardRef<HTMLDivElement, BadgeProps>(
@@ -49,6 +41,7 @@ export const Badge = forwardRef<HTMLDivElement, BadgeProps>(
       message = '',
       variant = 'light-grey',
       size = 'md',
+      children,
       ...restProps
     },
     ref
@@ -70,10 +63,12 @@ export const Badge = forwardRef<HTMLDivElement, BadgeProps>(
       <Box
         ref={ref}
         className={badgeClasses}
-        display="inline-block"
+        display="inline-flex"
+        alignItems="center"
+        direction="row"
         {...restProps}
       >
-        {message}
+        {children || message}
       </Box>
     );
   }

package/src/components/Formik/FormikToggleGroupMulti/FormikToggleGroupMulti.tsx

@@ -7,6 +7,7 @@ import {
 } from '../../ToggleGroup/ToggleGroup';
 import { Box } from '../../Box/Box';
 import { HelpText } from '../../HelpText/HelpText';
+import { BaseSpacing, ResponsiveProp } from 'src/types';
 
 export interface FormikToggleGroupMultiProps {
   name: string;
@@ -20,6 +21,7 @@ export interface FormikToggleGroupMultiProps {
   label?: string;
   children?: React.ReactNode;
   variant: ToggleVariant;
+  gap?: BaseSpacing | ResponsiveProp<BaseSpacing>;
 }
 
 export const FormikToggleGroupMulti = ({
@@ -29,6 +31,7 @@ export const FormikToggleGroupMulti = ({
   label,
   children,
   variant,
+  gap,
   ...props
 }: FormikToggleGroupMultiProps) => {
   const [field, meta, helpers] = useField(name);
@@ -44,6 +47,7 @@ export const FormikToggleGroupMulti = ({
         {() => (
           <ToggleGroup
             {...props}
+            gap={gap}
             name={name}
             onValueChange={(selectedValues: string[]) => {
               helpers.setValue(selectedValues);

package/src/components/Modal/Modal.tsx

@@ -3,7 +3,7 @@ import ReactModal from 'react-modal';
 import FocusLock from 'react-focus-lock';
 import { RemoveScroll } from 'react-remove-scroll';
 import classNames from 'classnames';
-import { CssOverflowValue } from '../../types';
+import { BackgroundColor, CssOverflowValue } from '../../types';
 import { getDimensionCss } from '../../lib/getDimensionCss';
 import { Box, BoxProps } from '../Box/Box';
 import { ModalFooter, ModalHeader, ModalBody } from './components';
@@ -43,6 +43,10 @@ export interface ModalProps {
    * At mobile viewport widths, the modal will take up the fullscreen
    */
   fullScreenMobile?: boolean;
+  /**
+   * Background color for the modal content using design tokens
+   */
+  background?: BackgroundColor;
   /**
    * By default the first focusable element will receive focus when the dialog
    * opens but you can provide a ref to focus instead.
@@ -67,6 +71,10 @@ export interface ModalProps {
    * The css overflow behavior of the Modal
    */
   overflow?: CssOverflowValue;
+  /**
+   * Inline styles for the modal container
+   */
+  style?: React.CSSProperties;
   /**
    * Allows spread props
    */
@@ -82,6 +90,7 @@ export const ModalBaseComponent: React.FC<ModalProps> = forwardRef<
       ariaLabel,
       ariaLabelledBy,
       allowPinchZoom = false,
+      background = undefined,
       children,
       className,
       containerRef = undefined,
@@ -91,6 +100,7 @@ export const ModalBaseComponent: React.FC<ModalProps> = forwardRef<
       maxWidth = undefined,
       onDismiss,
       overflow = 'hidden',
+      style,
       ...restProps
     },
     ref
@@ -139,12 +149,13 @@ export const ModalBaseComponent: React.FC<ModalProps> = forwardRef<
               onRequestClose={onDismiss}
               ariaHideApp={false}
               parentSelector={parentElement ? () => parentElement : undefined}
-              style={{ content: { ...maxWidthCss.styles } }}
+              style={{ content: { ...maxWidthCss.styles, ...style } }}
               {...restProps}
             >
               <Box
                 aria-label={ariaLabel}
                 aria-labelledby={ariaLabelledBy}
+                background={background}
                 height="100"
                 padding={{ base: '2xl', tablet: '4xl' }}
                 gap="3xl"

package/src/components/SelectInputNative/SelectInputNative.module.scss

@@ -253,6 +253,17 @@
       var(--INTERNAL_form-control-line-height)
     );
 
+    option {
+      background-color: var(
+        --form-control-background-color,
+        var(--INTERNAL_form-control-background-color)
+      );
+      color: var(
+        --form-control-font-color,
+        var(--INTERNAL_form-control-font-color)
+      );
+    }
+
     &:focus {
       outline: none;
       border-color: var(

package/src/components/SelectInputNative/SelectInputNative.stories.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import { SelectInputNative } from './SelectInputNative';
-import type { Meta } from '@storybook/react-vite';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Box } from '../Box/Box';
+import { within, userEvent, expect } from 'storybook/test';
 
 const meta: Meta<typeof SelectInputNative> = {
   title: 'Components/SelectInputNative',
@@ -24,7 +25,7 @@ export const Default = () => {
   return (
     <div>
       <SelectInputNative
-        id="default Select"
+        id="defaultSelect"
         label="Label"
         onChange={(event) => {
           setValue(event.target.value);
@@ -231,3 +232,49 @@ export const Sizes = () => {
     </Box>
   );
 };
+
+export const InteractionTest: StoryObj<typeof SelectInputNative> = {
+  render: Default,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const select = canvas.getByLabelText('Label');
+
+    // Select 'chocolate'
+    await userEvent.selectOptions(select, 'chocolate');
+
+    // Assert value
+    await expect(select).toHaveValue('chocolate');
+  },
+};
+
+export const InteractionDisabled: StoryObj<typeof SelectInputNative> = {
+  render: Disabled,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const select = canvas.getByLabelText('Label');
+
+    // Assert disabled
+    await expect(select).toBeDisabled();
+
+    // Attempt to select should fail (or we just verify it's disabled)
+    // userEvent.selectOptions throws on disabled elements, so we primarily verify state
+  },
+};
+
+export const InteractionChangePreSelected: StoryObj<typeof SelectInputNative> =
+  {
+    render: PreSelected,
+    play: async ({ canvasElement }) => {
+      const canvas = within(canvasElement);
+      const select = canvas.getByLabelText('Label');
+
+      // Assert initial value
+      await expect(select).toHaveValue('strawberry');
+
+      // Select 'vanilla'
+      await userEvent.selectOptions(select, 'vanilla');
+
+      // Assert new value
+      await expect(select).toHaveValue('vanilla');
+    },
+  };

package/src/components/Table/Table.stories.tsx

@@ -871,13 +871,13 @@ export const ComponentAsColumnHeader = () =>
       {
         id: 1,
         color: 'red',
-        status: <Badge message="danger" variant="red" />,
+        status: <Badge variant="red">danger</Badge>,
       },
-      { id: 2, color: 'blue', status: <Badge message="info" variant="blue" /> },
+      { id: 2, color: 'blue', status: <Badge variant="blue">info</Badge> },
       {
         id: 3,
         color: 'green',
-        status: <Badge message="success" variant="green" />,
+        status: <Badge variant="green">success</Badge>,
       },
     ];
     return <Table rowKey="id" columns={columnConfig} rows={tableData} />;

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -45,7 +45,9 @@ export const BadgeTooltip = () => (
   <TooltipProvider delayDuration={100}>
     <Tooltip>
       <TooltipTrigger asChild>
-        <Badge as="button" message="hover" variant="blue" />
+        <Badge as="button" variant="blue">
+          hover
+        </Badge>
       </TooltipTrigger>
       <TooltipPortal>
         <TooltipContent>This is the tooltip content</TooltipContent>