Refactor(web-react): Use class name prefix for utilities and helpers

refs #DS-926
lmc-eu · Sep 14, 2023 · a9d2841 · a9d2841
1 parent a52215d
commit a9d2841
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -1,10 +1,11 @@
-import React, { ElementType } from 'react';
 import classNames from 'classnames';
-import { useBreadcrumbsStyleProps } from './useBreadcrumbsStyleProps';
-import { SpiritBreadcrumbsProps } from '../../types';
+import React, { ElementType } from 'react';
+import { useClassNamePrefix } from '../../hooks';
 import { useStyleProps } from '../../hooks/styleProps';
+import { SpiritBreadcrumbsProps } from '../../types';
 import { Icon } from '../Icon';
 import { Link } from '../Link';
+import { useBreadcrumbsStyleProps } from './useBreadcrumbsStyleProps';
 
 const defaultProps = {
   items: [],
@@ -15,6 +16,10 @@ export const Breadcrumbs = <T extends ElementType = 'nav'>(props: SpiritBreadcru
   const { classProps, props: modifiedProps } = useBreadcrumbsStyleProps({ ...restProps });
   const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
 
+  const displayTabletNoneClassName = useClassNamePrefix('d-tablet-none');
+  const displayNoneClassName = useClassNamePrefix('d-none');
+  const displayTabletFlexClassName = useClassNamePrefix('d-tablet-flex');
+
   const isLast = (index: number, itemsCount: number) => {
     return index === itemsCount - 1;
   };
@@ -31,14 +36,14 @@ export const Breadcrumbs = <T extends ElementType = 'nav'>(props: SpiritBreadcru
           items?.map((item, index) => (
             <React.Fragment key={`BreadcrumbsItem_${item.title}`}>
               {index === items.length - 2 && goBackTitle && (
-                <li className="d-tablet-none">
+                <li className={displayTabletNoneClassName}>
                   <Icon name="chevron-left" />
                   <Link href={item.url} color="primary" isUnderlined>
                     {goBackTitle}
                   </Link>
                 </li>
               )}
-              <li className="d-none d-tablet-flex">
+              <li className={classNames(displayNoneClassName, displayTabletFlexClassName)}>
                 {index !== 0 && <Icon name="chevron-right" />}
                 <Link
                   href={item.url}

diff --git a/packages/web-react/src/components/FileUploader/FileUploaderAttachment.tsx b/packages/web-react/src/components/FileUploader/FileUploaderAttachment.tsx
@@ -1,7 +1,7 @@
 import React, { useRef, RefObject, MouseEvent, useState } from 'react';
 import classNames from 'classnames';
 import { SpiritFileUploaderAttachmentProps } from '../../types';
-import { useDeprecationMessage, useStyleProps } from '../../hooks';
+import { useClassNamePrefix, useDeprecationMessage, useStyleProps } from '../../hooks';
 import { useFileUploaderStyleProps } from './useFileUploaderStyleProps';
 import { useFileUploaderAttachment } from './useFileUploaderAttachment';
 import AttachmentImagePreview from './AttachmentImagePreview';
@@ -87,7 +87,7 @@ const FileUploaderAttachment = (props: SpiritFileUploaderAttachmentProps) => {
         <Icon name={iconName} aria-hidden="true" />
       )}
       <span className={classProps.attachment.name}>
-        <span className="text-truncate">{label}</span>
+        <span className={useClassNamePrefix('text-truncate')}>{label}</span>
       </span>
       {onEdit && (
         <span className={classProps.attachment.slot}>