@fpkit/acss 6.2.0 → 6.4.0

package/src/components/dialog/dialog.test.tsx

@@ -446,5 +446,124 @@ describe("DialogModal", () => {
       expect(triggerButton).toBeInTheDocument();
       expect(triggerButton).not.toBeDisabled();
     });
+
+    it("adds aria-haspopup='dialog' to the regular button trigger", () => {
+      render(
+        <DialogModal dialogTitle="Test" btnLabel="Open">
+          Content
+        </DialogModal>
+      );
+
+      const triggerButton = screen.getByRole("button", { name: /open/i });
+      expect(triggerButton).toHaveAttribute("aria-haspopup", "dialog");
+    });
+  });
+
+  describe("Icon Button Trigger", () => {
+    const TestIcon = () => (
+      <svg data-testid="test-icon" aria-hidden="true">
+        <circle cx="12" cy="12" r="10" />
+      </svg>
+    );
+
+    it("renders IconButton when icon prop is provided", () => {
+      render(
+        <DialogModal dialogTitle="Test" btnLabel="Settings" icon={<TestIcon />}>
+          Content
+        </DialogModal>
+      );
+
+      const iconButton = screen.getByRole("button", { name: /settings/i });
+      expect(iconButton).toHaveAttribute("data-icon-btn");
+    });
+
+    it("renders regular Button when icon prop is not provided", () => {
+      render(
+        <DialogModal dialogTitle="Test" btnLabel="Open">
+          Content
+        </DialogModal>
+      );
+
+      const button = screen.getByRole("button", { name: /open/i });
+      expect(button).not.toHaveAttribute("data-icon-btn");
+    });
+
+    it("uses btnLabel as aria-label on the icon button", () => {
+      render(
+        <DialogModal dialogTitle="Test" btnLabel="Settings" icon={<TestIcon />}>
+          Content
+        </DialogModal>
+      );
+
+      const iconButton = screen.getByRole("button", { name: /settings/i });
+      expect(iconButton).toHaveAttribute("aria-label", "Settings");
+    });
+
+    it("passes btnLabel as visible label on the icon button", () => {
+      render(
+        <DialogModal dialogTitle="Test" btnLabel="Settings" icon={<TestIcon />}>
+          Content
+        </DialogModal>
+      );
+
+      // IconButton renders the label in a span with data-icon-label
+      const iconButton = screen.getByRole("button", { name: /settings/i });
+      expect(iconButton.querySelector("[data-icon-label]")).toHaveTextContent("Settings");
+    });
+
+    it("adds aria-haspopup='dialog' to the icon button trigger", () => {
+      render(
+        <DialogModal dialogTitle="Test" btnLabel="Settings" icon={<TestIcon />}>
+          Content
+        </DialogModal>
+      );
+
+      const iconButton = screen.getByRole("button", { name: /settings/i });
+      expect(iconButton).toHaveAttribute("aria-haspopup", "dialog");
+    });
+
+    it("opens dialog when icon button is clicked", async () => {
+      const user = userEvent.setup();
+
+      render(
+        <DialogModal dialogTitle="Test Dialog" btnLabel="Settings" icon={<TestIcon />}>
+          Dialog content
+        </DialogModal>
+      );
+
+      const iconButton = screen.getByRole("button", { name: /settings/i });
+      await user.click(iconButton);
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument();
+        expect(screen.getByText("Dialog content")).toBeInTheDocument();
+      });
+    });
+
+    it("applies btnSize to the icon button", () => {
+      render(
+        <DialogModal dialogTitle="Test" btnLabel="Settings" icon={<TestIcon />} btnSize="lg">
+          Content
+        </DialogModal>
+      );
+
+      const iconButton = screen.getByRole("button", { name: /settings/i });
+      expect(iconButton).toHaveAttribute("data-btn", "lg");
+    });
+
+    it("forwards btnProps to the icon button", () => {
+      render(
+        <DialogModal
+          dialogTitle="Test"
+          btnLabel="Settings"
+          icon={<TestIcon />}
+          btnProps={{ "data-testid": "icon-trigger" }}
+        >
+          Content
+        </DialogModal>
+      );
+
+      expect(screen.getByTestId("icon-trigger")).toBeInTheDocument();
+    });
   });
 });

package/src/components/dialog/dialog.types.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from "react";
+import { CSSProperties, ReactElement, ReactNode } from "react";
 
 /**
  * Base properties shared by all dialog variants.
@@ -70,6 +70,7 @@ export interface DialogProps extends BaseDialogProps {
  * @property {string} [btnLabel="Open Dialog"] - Text label for the trigger button
  * @property {"sm" | "md" | "lg"} [btnSize="sm"] - Size variant for the trigger button
  * @property {() => void} [btnOnClick] - Callback fired when trigger button is clicked (before opening)
+ * @property {ReactElement} [icon] - Optional icon element. When provided, renders IconButton instead of Button as trigger.
  */
 export interface DialogModalProps extends BaseDialogProps {
   /** If true, renders as non-modal inline alert using dialog.show() */
@@ -92,6 +93,12 @@ export interface DialogModalProps extends BaseDialogProps {
   btnOnClick?: () => void;
   /** Additional props to pass to the trigger button component */
   btnProps?: Record<string, unknown>;
+  /**
+   * Optional icon element. When provided, renders an IconButton instead of a regular Button as the trigger.
+   * `btnLabel` serves as both `aria-label` and the visible label text (shown at desktop widths via IconButton's responsive label).
+   * Note: `aria-labelledby` cannot be passed via `btnProps` when icon is set — use `btnLabel` instead.
+   */
+  icon?: ReactElement;
 }
 
 /**

package/src/components/form/select.tsx

@@ -1,9 +1,9 @@
-import UI from '../ui'
-import React from 'react'
-import { useDisabledState } from '../../hooks/use-disabled-state'
+import UI from "../ui";
+import React from "react";
+import { useDisabledState } from "../../hooks/use-disabled-state";
 
-export type { SelectProps } from './form.types'
-import type { SelectProps } from './form.types'
+export type { SelectProps } from "./form.types";
+import type { SelectProps } from "./form.types";
 
 /**
  * Option component props interface
@@ -11,56 +11,57 @@ import type { SelectProps } from './form.types'
  *
  * @interface OptionProps
  */
-export interface OptionProps extends Omit<React.ComponentPropsWithoutRef<'option'>, 'className'> {
+export interface OptionProps
+  extends Omit<React.ComponentPropsWithoutRef<"option">, "className"> {
   /**
    * Value for the select option (required, unless using legacy selectValue)
    */
-  value?: string | number
+  value?: string | number;
 
   /**
    * Display label for the option (defaults to value if not provided)
    */
-  label?: string
+  label?: string;
 
   /**
    * CSS class names (preferred over 'className' for consistency with fpkit components)
    */
-  classes?: string
+  classes?: string;
 
   /**
    * Inline CSS styles object
    */
-  styles?: React.CSSProperties
+  styles?: React.CSSProperties;
 
   /**
    * Disabled state for the option
    * @default false
    */
-  disabled?: boolean
+  disabled?: boolean;
 
   /**
    * Children content (overrides label if provided)
    */
-  children?: React.ReactNode
+  children?: React.ReactNode;
 
   /**
    * Visual variant for styling via data-option attribute
    * Use with CSS: option[data-option="primary"] { ... }
    * @example 'primary' | 'secondary' | 'success' | 'error'
    */
-  variant?: string
+  variant?: string;
 
   /**
    * Size variant for styling via data-size attribute
    * @example 'sm' | 'md' | 'lg'
    */
-  size?: string
+  size?: string;
 
   /**
    * Additional data attributes for custom styling
    * @example { 'data-highlighted': true, 'data-category': 'premium' }
    */
-  dataAttributes?: Record<string, string | boolean | number>
+  dataAttributes?: Record<string, string | boolean | number>;
 }
 
 /**
@@ -88,7 +89,10 @@ export interface OptionProps extends Omit<React.ComponentPropsWithoutRef<'option
  * @param {OptionProps} props - Component props
  * @returns {JSX.Element} Option element
  */
-export const Option = React.forwardRef<HTMLOptionElement, OptionProps & Partial<SelectOptionsProps>>(
+export const Option = React.forwardRef<
+  HTMLOptionElement,
+  OptionProps & Partial<SelectOptionsProps>
+>(
   (
     {
       value,
@@ -105,18 +109,18 @@ export const Option = React.forwardRef<HTMLOptionElement, OptionProps & Partial<
       selectLabel,
       ...props
     },
-    ref
+    ref,
   ) => {
     // Map legacy props to new props
-    const optionValue = value ?? selectValue
-    const optionLabel = label ?? selectLabel
+    const optionValue = value ?? selectValue;
+    const optionLabel = label ?? selectLabel;
 
     // Build data attributes object for styling
     const combinedDataAttrs = {
-      ...(variant && { 'data-option': variant }),
-      ...(size && { 'data-size': size }),
+      ...(variant && { "data-option": variant }),
+      ...(size && { "data-size": size }),
       ...dataAttributes,
-    }
+    };
 
     return (
       <UI
@@ -131,17 +135,17 @@ export const Option = React.forwardRef<HTMLOptionElement, OptionProps & Partial<
       >
         {children || optionLabel || optionValue}
       </UI>
-    )
-  }
-)
+    );
+  },
+);
 
-Option.displayName = 'Select.Option'
+Option.displayName = "Select.Option";
 
 // Legacy type export for backwards compatibility
-export type SelectOptionsProps = Omit<OptionProps, 'classes' | 'styles'> & {
-  selectValue: string | number
-  selectLabel?: string
-}
+export type SelectOptionsProps = Omit<OptionProps, "classes" | "styles"> & {
+  selectValue: string | number;
+  selectLabel?: string;
+};
 
 /**
  * Select component - Accessible dropdown selection input with validation support
@@ -187,7 +191,7 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
       children,
       required,
       selected,
-      validationState = 'none',
+      validationState = "none",
       errorMessage,
       hintText,
       onBlur,
@@ -197,7 +201,7 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
       onEnter,
       ...props
     },
-    ref
+    ref,
   ) => {
     // Use the disabled state hook with enhanced API for automatic className merging
     const { disabledProps, handlers } = useDisabledState<HTMLSelectElement>(
@@ -210,33 +214,33 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
           onKeyDown: (e: React.KeyboardEvent<HTMLSelectElement>) => {
             // Handle Enter key press for accessibility
             // Enables keyboard-only users to trigger actions after selection
-            if (e.key === 'Enter' && onEnter) {
-              onEnter(e)
+            if (e.key === "Enter" && onEnter) {
+              onEnter(e);
             }
             // Always call consumer's onKeyDown if provided
             if (onKeyDown) {
-              onKeyDown(e)
+              onKeyDown(e);
             }
           },
         },
         // Automatic className merging - hook combines disabled class with user classes
         className: classes,
-      }
-    )
+      },
+    );
 
     // Determine aria-invalid based on validation state
-    const isInvalid = validationState === 'invalid'
+    const isInvalid = validationState === "invalid";
 
     // Generate describedby IDs for error and hint text
-    const describedByIds: string[] = []
+    const describedByIds: string[] = [];
     if (errorMessage && id) {
-      describedByIds.push(`${id}-error`)
+      describedByIds.push(`${id}-error`);
     }
     if (hintText && id) {
-      describedByIds.push(`${id}-hint`)
+      describedByIds.push(`${id}-hint`);
     }
     const ariaDescribedBy =
-      describedByIds.length > 0 ? describedByIds.join(' ') : undefined
+      describedByIds.length > 0 ? describedByIds.join(" ") : undefined;
 
     return (
       <UI
@@ -249,7 +253,7 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
         {...handlers}
         required={required}
         aria-required={required}
-        aria-disabled={disabledProps['aria-disabled']}
+        aria-disabled={disabledProps["aria-disabled"]}
         aria-invalid={isInvalid}
         aria-describedby={ariaDescribedBy}
         style={styles}
@@ -257,19 +261,19 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
       >
         {children || <option value="" />}
       </UI>
-    )
-  }
-)
+    );
+  },
+);
 
-Select.displayName = 'Select'
+Select.displayName = "Select";
 
 // Create a compound component with proper typing
 type SelectComponent = typeof Select & {
-  Option: typeof Option
-}
+  Option: typeof Option;
+};
 
 // Type assertion to allow adding static property to ForwardRefExoticComponent
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-;(Select as any).Option = Option
+(Select as any).Option = Option;
 
-export default Select as SelectComponent
+export default Select as SelectComponent;

package/src/components/link/link.scss

@@ -98,7 +98,7 @@ a[href] {
     font-size: var(--link-fs);
     padding-inline: var(--link-fs);
     padding-block: calc(var(--link-fs) - 0.4rem);
-    border-radius: var(--link-radius, 99rem);
+    border-radius: var(--link-radius, 100vw);
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -126,7 +126,7 @@ a[href] {
   // Pill variant (rounded corners)
   &[data-link~="pill"],
   &:has(> i) {
-    --link-radius: 99rem;
+    --link-radius: 100vw;
     --link-decoration: none;
     font-style: normal;