refactor(classname): simplify base class name when no modifier is needed

lumapps · Jan 30, 2025 · 11d4a9b · 11d4a9b
1 parent 2b6f4d9
commit 11d4a9b
Show file tree

Hide file tree

Showing 18 changed files with 35 additions and 111 deletions.
diff --git a/packages/lumx-react/src/components/autocomplete/Autocomplete.tsx b/packages/lumx-react/src/components/autocomplete/Autocomplete.tsx
@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { Dropdown, DropdownProps, IconButtonProps, Offset, Placement, TextField, TextFieldProps } from '@lumx/react';
 
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { useFocus } from '@lumx/react/hooks/useFocus';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
@@ -245,16 +245,7 @@ export const Autocomplete = forwardRef<AutocompleteProps, HTMLDivElement>((props
     useFocus(inputAnchorRef.current, !isOpen && shouldFocusOnClose);
 
     return (
-        <div
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    prefix: CLASSNAME,
-                }),
-            )}
-        >
+        <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>
             <TextField
                 {...textFieldProps}
                 chips={chips}

diff --git a/packages/lumx-react/src/components/autocomplete/AutocompleteMultiple.tsx b/packages/lumx-react/src/components/autocomplete/AutocompleteMultiple.tsx
@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { mdiClose } from '@lumx/icons';
 
 import { Autocomplete, AutocompleteProps, Chip, HorizontalAlignment, Icon, Size } from '@lumx/react';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
@@ -114,12 +114,7 @@ export const AutocompleteMultiple = forwardRef<AutocompleteMultipleProps, HTMLDi
             ref={ref}
             {...forwardedProps}
             anchorToInput={anchorToInput}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    prefix: CLASSNAME,
-                }),
-            )}
+            className={classNames(className, CLASSNAME)}
             name={name}
             value={value}
             onChange={onChange}

diff --git a/packages/lumx-react/src/components/badge/BadgeWrapper.tsx b/packages/lumx-react/src/components/badge/BadgeWrapper.tsx
@@ -2,7 +2,7 @@ import React, { ReactElement, ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { DEFAULT_PROPS } from '@lumx/react/components/select/WithSelectContext';
 import { GenericProps } from '@lumx/react/utils/type';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
@@ -28,7 +28,7 @@ export const BadgeWrapper = forwardRef<BadgeWrapperProps, HTMLDivElement>((props
     const { badge, children, className, ...forwardedProps } = props;
 
     return (
-        <div ref={ref} {...forwardedProps} className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}>
+        <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>
             {children}
             {badge && <div className={`${CLASSNAME}__badge`}>{badge}</div>}
         </div>

diff --git a/packages/lumx-react/src/components/chip/ChipGroup.tsx b/packages/lumx-react/src/components/chip/ChipGroup.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { HorizontalAlignment } from '@lumx/react/components';
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useChipGroupNavigation } from '@lumx/react/hooks/useChipGroupNavigation';
@@ -46,12 +46,9 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 const InternalChipGroup = forwardRef<ChipGroupProps, HTMLDivElement>((props, ref) => {
     const { align, children, className, ...forwardedProps } = props;
-    const chipGroupClassName = handleBasicClasses({
-        prefix: CLASSNAME,
-    });
 
     return (
-        <div ref={ref} {...forwardedProps} className={classNames(className, chipGroupClassName)}>
+        <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>
             {children}
         </div>
     );

diff --git a/packages/lumx-react/src/components/dropdown/Dropdown.tsx b/packages/lumx-react/src/components/dropdown/Dropdown.tsx
@@ -6,7 +6,7 @@ import { List, ListProps } from '@lumx/react/components/list/List';
 import { Popover, PopoverProps } from '@lumx/react/components/popover/Popover';
 import { useInfiniteScroll } from '@lumx/react/hooks/useInfiniteScroll';
 import { GenericProps, isComponent } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { Offset, Placement } from '@lumx/react/components/popover/constants';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
@@ -162,7 +162,7 @@ export const Dropdown = forwardRef<DropdownProps, HTMLDivElement>((props, ref) =
             {...forwardedProps}
             focusAnchorOnClose={focusAnchorOnClose}
             anchorRef={anchorRef}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}
+            className={classNames(className, CLASSNAME)}
             elevation={0 as any}
             closeOnClickAway={closeOnClickAway}
             closeOnEscape={closeOnEscape}

diff --git a/packages/lumx-react/src/components/grid-column/GridColumn.tsx b/packages/lumx-react/src/components/grid-column/GridColumn.tsx
@@ -5,7 +5,7 @@ import classNames from 'classnames';
 
 import { Size } from '@lumx/react';
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 export type GridColumnGapSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
@@ -66,12 +66,7 @@ export const GridColumn = forwardRef<GridColumnProps>((props, ref): ReactElement
         <Component
             {...forwardedProps}
             ref={ref as React.Ref<any>}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    prefix: CLASSNAME,
-                }),
-            )}
+            className={classNames(className, CLASSNAME)}
             style={{
                 ...style,
                 ['--lumx-grid-column-item-min-width' as any]: isInteger(itemMinWidth) && `${itemMinWidth}px`,

diff --git a/packages/lumx-react/src/components/heading/Heading.tsx b/packages/lumx-react/src/components/heading/Heading.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { HeadingElement } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { Text, TextProps } from '../text';
@@ -48,12 +48,7 @@ export const Heading = forwardRef<HeadingProps>((props, ref) => {
     return (
         <Text
             ref={ref}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    prefix: CLASSNAME,
-                }),
-            )}
+            className={classNames(className, CLASSNAME)}
             as={computedHeadingElement}
             typography={DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement]}
             {...forwardedProps}

diff --git a/packages/lumx-react/src/components/list/ListDivider.tsx b/packages/lumx-react/src/components/list/ListDivider.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
@@ -31,13 +31,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 export const ListDivider = forwardRef<ListDividerProps, HTMLLIElement>((props, ref) => {
     const { className, ...forwardedProps } = props;
 
-    return (
-        <li
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}
-        />
-    );
+    return <li ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)} />;
 });
 ListDivider.displayName = COMPONENT_NAME;
 ListDivider.className = CLASSNAME;
diff --git a/packages/lumx-react/src/components/list/ListSubheader.tsx b/packages/lumx-react/src/components/list/ListSubheader.tsx
@@ -3,7 +3,7 @@ import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
@@ -35,7 +35,7 @@ export const ListSubheader = forwardRef<ListSubheaderProps, HTMLLIElement>((prop
     const { children, className, ...forwardedProps } = props;
 
     return (
-        <li ref={ref} {...forwardedProps} className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}>
+        <li ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>
             {children}
         </li>
     );

diff --git a/packages/lumx-react/src/components/popover-dialog/PopoverDialog.tsx b/packages/lumx-react/src/components/popover-dialog/PopoverDialog.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { HasAriaLabelOrLabelledBy } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { Popover, PopoverProps } from '../popover/Popover';
@@ -51,7 +51,7 @@ export const PopoverDialog = forwardRef<PopoverDialogProps, HTMLDivElement>((pro
         <Popover
             {...forwardedProps}
             ref={ref}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}
+            className={classNames(className, CLASSNAME)}
             role="dialog"
             aria-modal="true"
             /**

diff --git a/packages/lumx-react/src/components/progress-tracker/ProgressTracker.tsx b/packages/lumx-react/src/components/progress-tracker/ProgressTracker.tsx
@@ -3,7 +3,7 @@ import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
@@ -61,11 +61,7 @@ export const ProgressTracker = forwardRef<ProgressTrackerProps, HTMLDivElement>(
         numberOfSteps > 0 ? ((100 / (numberOfSteps - 1)) * (state?.activeTabIndex || 0)) / 100 : 0;
 
     return (
-        <div
-            ref={mergeRefs(ref, stepListRef)}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}
-        >
+        <div ref={mergeRefs(ref, stepListRef)} {...forwardedProps} className={classNames(className, CLASSNAME)}>
             <div className={`${CLASSNAME}__steps`} role="tablist" aria-label={ariaLabel}>
                 {children}
             </div>

diff --git a/packages/lumx-react/src/components/radio-button/RadioGroup.tsx b/packages/lumx-react/src/components/radio-button/RadioGroup.tsx
@@ -3,7 +3,7 @@ import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
@@ -35,16 +35,7 @@ export const RadioGroup = forwardRef<RadioGroupProps, HTMLDivElement>((props, re
     const { children, className, ...forwardedProps } = props;
 
     return (
-        <div
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    prefix: CLASSNAME,
-                }),
-            )}
-        >
+        <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>
             {children}
         </div>
     );

diff --git a/packages/lumx-react/src/components/side-navigation/SideNavigation.tsx b/packages/lumx-react/src/components/side-navigation/SideNavigation.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { SideNavigationItem, Theme } from '@lumx/react';
 import { GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
@@ -42,11 +42,7 @@ export const SideNavigation = forwardRef<SideNavigationProps, HTMLUListElement>(
         <ul
             ref={ref}
             {...forwardedProps}
-            className={classNames(
-                className,
-                theme === Theme.dark && 'lumx-color-font-light-N',
-                handleBasicClasses({ prefix: CLASSNAME }),
-            )}
+            className={classNames(className, theme === Theme.dark && 'lumx-color-font-light-N', CLASSNAME)}
         >
             {content}
         </ul>

diff --git a/packages/lumx-react/src/components/slideshow/SlideshowItem.tsx b/packages/lumx-react/src/components/slideshow/SlideshowItem.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
@@ -34,16 +34,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 export const SlideshowItem = forwardRef<SlideshowItemProps, HTMLDivElement>((props, ref) => {
     const { className, children, ...forwardedProps } = props;
     return (
-        <div
-            ref={ref}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    prefix: CLASSNAME,
-                }),
-            )}
-            {...forwardedProps}
-        >
+        <div ref={ref} className={classNames(className, CLASSNAME)} {...forwardedProps}>
             {children}
         </div>
     );

diff --git a/packages/lumx-react/src/components/slideshow/SlideshowItemGroup.tsx b/packages/lumx-react/src/components/slideshow/SlideshowItemGroup.tsx
@@ -3,9 +3,8 @@ import React from 'react';
 import classNames from 'classnames';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
 import { useSlideFocusManagement } from './useSlideFocusManagement';
 
 /**
@@ -46,12 +45,7 @@ export const SlideshowItemGroup = forwardRef<SlideshowItemGroupProps, HTMLDivEle
         <div
             ref={mergeRefs(groupRef, ref)}
             role={role}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    prefix: CLASSNAME,
-                }),
-            )}
+            className={classNames(className, CLASSNAME)}
             aria-roledescription="slide"
             aria-label={label}
             {...forwardedProps}

diff --git a/packages/lumx-react/src/components/table/TableBody.tsx b/packages/lumx-react/src/components/table/TableBody.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
@@ -32,11 +32,7 @@ export const TableBody = forwardRef<TableBodyProps, HTMLTableSectionElement>((pr
     const { children, className, ...forwardedProps } = props;
 
     return (
-        <tbody
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}
-        >
+        <tbody ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>
             {children}
         </tbody>
     );

diff --git a/packages/lumx-react/src/components/table/TableCell.tsx b/packages/lumx-react/src/components/table/TableCell.tsx
@@ -109,10 +109,7 @@ export const TableCell = forwardRef<TableCellProps, HTMLTableCellElement>((props
             )}
 
             {variant === TableCellVariant.body && (
-                <td
-                    {...forwardedProps}
-                    className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }), `${CLASSNAME}--body`)}
-                >
+                <td {...forwardedProps} className={classNames(className, CLASSNAME, `${CLASSNAME}--body`)}>
                     <div className={`${CLASSNAME}-content`}>{children}</div>
                 </td>
             )}

diff --git a/packages/lumx-react/src/components/table/TableHeader.tsx b/packages/lumx-react/src/components/table/TableHeader.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
@@ -37,11 +37,7 @@ export const TableHeader = forwardRef<TableHeaderProps, HTMLTableSectionElement>
     const { children, className, ...forwardedProps } = props;
 
     return (
-        <thead
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}
-        >
+        <thead ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>
             {children}
         </thead>
     );