RFL-122 Additional classNames for Axiom components

about/images/CONTRIBUTING.md

@@ -4,4 +4,4 @@
 2. Install dependencies: `pnpm install`
 3. Build the Axiom library: `pnpm ui dev`
 4. Start the Docusaurus documentation site: `pnpm website dev`
-5. Open `http://localhost:3000/axiom/`
+5. Open `http://localhost:3000/ui-components/authored/overview`

packages/ui/src/components/avatar/avatar.tsx

@@ -14,16 +14,27 @@ type Props = {
    * Size of the circle container
    */
   size?: Size;
+  /**
+   * Optional class name for the container element
+   */
+  classNameContainer?: string;
 };
 
 type Size = 'extra-large' | 'large' | 'medium' | 'small';
 
 /**
  * Component for displaying user avatars with various sizes
  */
-export function Avatar({ imageUrl, username, size = 'extra-large' }: Props) {
+export function Avatar({
+  imageUrl,
+  username,
+  size = 'extra-large',
+  classNameContainer,
+}: Props) {
   return (
-    <div className={clsx(styles['container'], styles[size])}>
+    <div
+      className={clsx(styles['container'], styles[size], classNameContainer)}
+    >
       <img src={imageUrl} alt={username} />
     </div>
   );

packages/ui/src/components/checkbox/checkbox.tsx

@@ -18,6 +18,10 @@ type Props = {
    * Whether the checkbox is checked
    */
   checked?: boolean;
+  /**
+   * Optional class name for the container element
+   */
+  classNameContainer?: string;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
 
 /**
@@ -29,14 +33,15 @@ export function Checkbox({
   indeterminate,
   checked,
   onChange,
+  classNameContainer,
   ...props
 }: Props) {
   function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
     onChange?.(event);
   }
 
   return (
-    <label className={styles['container']}>
+    <label className={clsx(styles['container'], classNameContainer)}>
       <input
         type="checkbox"
         className={clsx(styles['checkbox'], styles[size], className)}

packages/ui/src/components/collapsible/collapsible.module.css

@@ -16,7 +16,7 @@
   }
 }
 
-.content-wrapper {
+.content-container {
   display: grid;
   grid-template-rows: 0fr;
   overflow: hidden;

packages/ui/src/components/collapsible/collapsible.tsx

@@ -94,7 +94,7 @@ Collapsible.Content = function CollapsibleContent({
   return (
     <div
       ref={ref}
-      className={clsx(styles['content-wrapper'], {
+      className={clsx(styles['content-container'], {
         [styles['expanded']]: context?.isExpanded,
       })}
     >

packages/ui/src/components/date-picker/date-picker.tsx

@@ -12,6 +12,7 @@ import {
 import { forwardRef } from 'react';
 import type { DatePickerProps } from './types';
 import { MantineProvider } from '@mantine/core';
+
 type Props = DatePickerProps & {
   /**
    * Format string to control how the selected date is displayed
@@ -42,6 +43,10 @@ type Props = DatePickerProps & {
    * Whether the date picker has an error
    */
   error?: boolean;
+  /**
+   * Custom class name for the date picker component
+   */
+  className?: string;
 };
 
 /**
@@ -56,6 +61,7 @@ export const DatePicker = forwardRef<HTMLButtonElement, Props>(
       type = 'default',
       value,
       error = false,
+      className,
       ...props
     },
     ref,
@@ -74,6 +80,7 @@ export const DatePicker = forwardRef<HTMLButtonElement, Props>(
               inputFontStyles[inputSize],
               inputSizeStyles[inputSize],
               styles['container'],
+              className,
               {
                 [styles['container--error']]: error,
               },

packages/ui/src/components/input/input.tsx

@@ -12,16 +12,28 @@ export function Input({
   size = 'medium',
   startAdornment = undefined,
   endAdornment = undefined,
+  className,
+  classNameContainer,
   ...props
 }: InputProps) {
   return (
     <InputBase
       {...props}
       slotProps={{
         root: {
-          className: clsx(inputRootStyles['input-root'], inputSizeStyles[size]),
+          className: clsx(
+            inputRootStyles['input-root'],
+            inputSizeStyles[size],
+            classNameContainer,
+          ),
+        },
+        input: {
+          className: clsx(
+            inputStyles['input'],
+            inputFontStyles[size],
+            className,
+          ),
         },
-        input: { className: clsx(inputStyles['input'], inputFontStyles[size]) },
       }}
       startAdornment={startAdornment}
       endAdornment={endAdornment}

packages/ui/src/components/input/types.ts

@@ -18,4 +18,12 @@ export type InputProps = InputBaseProps & {
    * Element displayed at the start of the input field.
    */
   startAdornment?: ReactNode;
+  /**
+   * Custom class name for the input element
+   */
+  className?: string;
+  /**
+   * Optional class name for the container element
+   */
+  classNameContainer?: string;
 };

packages/ui/src/components/menu/menu-item.tsx

@@ -10,14 +10,20 @@ export function MenuItem({
   disabled,
   destructive,
   size = 'medium',
+  className,
   onClick,
 }: MenuItemProps) {
   return (
     <MenuItemBase
       disabled={disabled}
-      className={clsx(listItemStyles['list-item'], listItemSize[size], {
-        [listItemStyles['destructive']]: destructive,
-      })}
+      className={clsx(
+        listItemStyles['list-item'],
+        listItemSize[size],
+        {
+          [listItemStyles['destructive']]: destructive,
+        },
+        className,
+      )}
       onClick={onClick}
     >
       {icon}

packages/ui/src/components/menu/menu.tsx

@@ -57,11 +57,22 @@ type MenuProps = MenuBaseProps & {
    * Distance between a popup and the trigger element
    */
   offset?: OffsetOptions;
+
   /**
    * The trigger element that will open the menu when clicked.
    * This element will be wrapped in a button with appropriate ARIA attributes.
    */
   children?: ReactElement;
+
+  /**
+   * Optional class name for the container element
+   */
+  classNameContainer?: string;
+
+  /**
+   * Optional class name for the separator inside
+   */
+  classNameSeparator?: string;
 };
 
 export const Menu = memo(
@@ -74,6 +85,8 @@ export const Menu = memo(
     open,
     offset,
     onOpenChange,
+    classNameContainer,
+    classNameSeparator,
     ...props
   }: MenuProps) => {
     const MenuTriggerButton = useMemo(() => {
@@ -95,7 +108,7 @@ export const Menu = memo(
             },
             root: {
               placement: placement,
-              className: clsx(listBoxStyles['popup']),
+              className: clsx(listBoxStyles['popup'], classNameContainer),
               offset,
             },
             ...slotProps,
@@ -104,7 +117,7 @@ export const Menu = memo(
         >
           {items.map((item, index) =>
             item.type === 'separator' ? (
-              <Separator key={index} />
+              <Separator key={index} className={classNameSeparator} />
             ) : (
               <MenuItem key={item.label} {...item} size={size} />
             ),

packages/ui/src/components/menu/types.ts

@@ -5,4 +5,5 @@ export type MenuItemProps = ListItem & {
   destructive?: boolean;
   onClick?: () => void;
   size?: ItemSize;
+  className?: string;
 };

packages/ui/src/components/modal/modal.module.css

@@ -115,7 +115,7 @@
     background: var(--ax-public-modal-header-background);
   }
 
-  .title-wrapper {
+  .title-container {
     display: flex;
     align-items: center;
     gap: var(--ax-token-spacing-modal-m-header-gap);
@@ -181,7 +181,7 @@
     .header {
       padding: var(--ax-public-modal-large-padding);
 
-      .title-wrapper {
+      .title-container {
         gap: var(--ax-public-modal-gap-large);
       }
     }

packages/ui/src/components/modal/modal.tsx

@@ -41,6 +41,14 @@ type ModalProps = Partial<WithIcon> & {
    * Callback function called when the modal is closed
    */
   onClose?: () => void;
+  /**
+   * Custom class name for the input element
+   */
+  className?: string;
+  /**
+   * Optional class name for the container element
+   */
+  classNameContainer?: string;
 };
 
 /**
@@ -58,22 +66,27 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
       footerVariant = 'integrated',
       open,
       onClose,
+      className,
+      classNameContainer,
     },
     ref,
   ) => {
     return (
       <BaseModal
-        className={styles['modal-base']}
+        className={clsx(styles['modal-base'], classNameContainer)}
         open={open}
         onClose={onClose}
         slots={{
           backdrop: Backdrop,
         }}
       >
         <Fade in={open}>
-          <div className={clsx(styles['modal'], styles[size])} ref={ref}>
+          <div
+            className={clsx(styles['modal'], styles[size], className)}
+            ref={ref}
+          >
             <div className={styles['header']}>
-              <div className={styles['title-wrapper']}>
+              <div className={styles['title-container']}>
                 {icon && <div className={styles['icon']}>{icon}</div>}
                 <div className={styles['title-container']}>
                   <span className={clsx(styles['title'], 'ax-public-h6')}>

packages/ui/src/components/node/node-description/node-description.tsx

@@ -2,16 +2,37 @@ import clsx from 'clsx';
 import styles from './node-description.module.css';
 
 type Props = {
+  // The main label or title text to be displayed
   label: string;
+
+  // Optional description or subtitle text
   description?: string;
+
+  // Optional custom class name for the outer container
   className?: string;
+
+  // Optional custom class name for the label element
+  classNameLabel?: string;
+
+  // Optional custom class name for the subtitle/description element
+  classNameSubtitle?: string;
 };
 
-export function NodeDescription({ label, description, className }: Props) {
+export function NodeDescription({
+  label,
+  description,
+  className,
+  classNameLabel,
+  classNameSubtitle,
+}: Props) {
   return (
     <div className={clsx(styles['container'], className)}>
-      <span className={clsx('ax-public-h9', styles['title'])}>{label}</span>
-      <span className={clsx('ax-public-p11', styles['subtitle'])}>
+      <span className={clsx('ax-public-h9', styles['title'], classNameLabel)}>
+        {label}
+      </span>
+      <span
+        className={clsx('ax-public-p11', styles['subtitle'], classNameSubtitle)}
+      >
         {description}
       </span>
     </div>

packages/ui/src/components/radio-button/radio.module.css

@@ -16,7 +16,7 @@
   --ax-public-radio-border-radius: var(--ax-token-radius-radiobutton);
 }
 
-.wrapper {
+.container {
   position: relative;
   display: inline-flex;
   cursor: pointer;

packages/ui/src/components/radio-button/radio.tsx

@@ -16,6 +16,8 @@ type Props = {
   value: string | number;
   /** Callback fired when the radio button state changes */
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  /** Optional class name for the container element */
+  classNameContainer?: string;
 } & Omit<
   InputHTMLAttributes<HTMLInputElement>,
   'size' | 'type' | 'value' | 'name'
@@ -31,14 +33,15 @@ export function Radio({
   name,
   value,
   onChange,
+  classNameContainer,
   ...props
 }: Props) {
   function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
     onChange?.(event);
   }
 
   return (
-    <label className={radioButtonStyles['wrapper']}>
+    <label className={clsx(radioButtonStyles['container'], classNameContainer)}>
       <input
         type="radio"
         className={clsx(

packages/ui/src/components/select/select-option/select-option.tsx

@@ -14,11 +14,16 @@ export function SelectOption({
   value,
   label,
   size = 'medium',
+  className,
   ...props
 }: SelectOptionProps) {
   return (
     <Option
-      className={clsx(listItemStyles['list-item'], listItemSize[size])}
+      className={clsx(
+        listItemStyles['list-item'],
+        listItemSize[size],
+        className,
+      )}
       value={value}
       {...props}
     >