refactor: refactor breadcrumb to fix misc. bugs

acid-info · Feb 17, 2023 · 5a3928f · 5a3928f
1 parent be028db
commit 5a3928f
Show file tree

Hide file tree

Showing 8 changed files with 10 additions and 55 deletions.
diff --git a/packages/lsd-react/src/components/Breadcrumb/Breadcrumb.classes.ts b/packages/lsd-react/src/components/Breadcrumb/Breadcrumb.classes.ts
@@ -6,7 +6,4 @@ export const breadcrumbClasses = {
 
   open: 'lsd-breadcrumb--open',
   disabled: 'lsd-breadcrumb--disabled',
-  small: `lsd-breadcrumb--small`,
-  medium: `lsd-breadcrumb--medium`,
-  large: `lsd-breadcrumb--large`,
 }
diff --git a/packages/lsd-react/src/components/Breadcrumb/Breadcrumb.stories.tsx b/packages/lsd-react/src/components/Breadcrumb/Breadcrumb.stories.tsx
@@ -4,14 +4,6 @@ import { Breadcrumb, BreadcrumbProps } from './Breadcrumb'
 export default {
   title: 'Breadcrumb',
   component: Breadcrumb,
-  argTypes: {
-    size: {
-      type: {
-        name: 'enum',
-        value: ['small', 'medium', 'large'],
-      },
-    },
-  },
 } as Meta
 
 export const Root: Story<BreadcrumbProps> = (args) => (
@@ -21,7 +13,6 @@ export const Root: Story<BreadcrumbProps> = (args) => (
 )
 
 Root.args = {
-  size: 'large',
   disabled: false,
   onChange: undefined,
   options: new Array(6).fill(null).map((value, index) => ({

diff --git a/packages/lsd-react/src/components/Breadcrumb/Breadcrumb.styles.ts b/packages/lsd-react/src/components/Breadcrumb/Breadcrumb.styles.ts
@@ -8,7 +8,7 @@ export const BreadcrumbStyles = css`
   .${breadcrumbClasses.list} {
     display: flex;
     flex-direction: row;
-    align-items: flex-start;
+    align-items: center;
     list-style-type: none;
     margin: 0;
     padding: 0;
@@ -43,6 +43,7 @@ export const BreadcrumbStyles = css`
     &:hover,
     &:focus {
       text-decoration: underline;
+      text-decoration-color: rgb(var(--lsd-border-primary));
     }
   }
 `
diff --git a/packages/lsd-react/src/components/Breadcrumb/Breadcrumb.tsx b/packages/lsd-react/src/components/Breadcrumb/Breadcrumb.tsx
@@ -22,7 +22,6 @@ export type BreadcrumbProps = Omit<
   disabled?: boolean
   ellipsis?: boolean
   maxItems?: number
-  size?: 'small' | 'medium' | 'large'
   options?: BreadcrumbOption[]
   value?: string | string[]
   onChange?: (value: string | string[]) => void
@@ -31,7 +30,6 @@ export type BreadcrumbProps = Omit<
 export const Breadcrumb: React.FC<BreadcrumbProps> & {
   classes: typeof breadcrumbClasses
 } = ({
-  size = 'large',
   disabled = false,
   ellipsis = false,
   maxItems,
@@ -44,7 +42,7 @@ export const Breadcrumb: React.FC<BreadcrumbProps> & {
   const ellipsisRef = useRef<HTMLLIElement>(null)
   const [open, setOpen] = useState<boolean>(false)
 
-  maxItems = Math.max(1, Math.min(maxItems || 1, options.length))
+  maxItems = Math.max(2, Math.min(maxItems || 2, options.length))
 
   const [root, ...rest] = options
   const [collapsed, visible] = !ellipsis
@@ -58,9 +56,8 @@ export const Breadcrumb: React.FC<BreadcrumbProps> & {
     items.map((item, idx) => (
       <BreadcrumbItem
         key={idx}
-        current={idx === visible.length - 1}
+        current={idx === visible.length - 1 && item !== root}
         label={item.value}
-        size={size}
         link={item.link}
         linkComponent={item?.linkComponent}
       />
@@ -80,7 +77,6 @@ export const Breadcrumb: React.FC<BreadcrumbProps> & {
       className={clsx(
         props.className,
         breadcrumbClasses.root,
-        breadcrumbClasses[size],
         disabled && breadcrumbClasses.disabled,
         open && breadcrumbClasses.open,
       )}
@@ -90,7 +86,6 @@ export const Breadcrumb: React.FC<BreadcrumbProps> & {
         {collapsed.length > 0 && (
           <BreadcrumbItem
             ellipsisRef={ellipsisRef}
-            size={size}
             label={'...'}
             onClick={onTrigger}
           />
@@ -109,7 +104,6 @@ export const Breadcrumb: React.FC<BreadcrumbProps> & {
               <BreadcrumbItem
                 key={idx}
                 label={opt.value}
-                size={size}
                 link={opt.link}
                 className={breadcrumbItemClasses.itemLink}
                 linkComponent={opt?.linkComponent}

diff --git a/packages/lsd-react/src/components/BreadcrumbItem/BreadcrumbItem.classes.ts b/packages/lsd-react/src/components/BreadcrumbItem/BreadcrumbItem.classes.ts
@@ -3,8 +3,4 @@ export const breadcrumbItemClasses = {
 
   itemCurrentPage: `lsd-breadcrumb-item--current-page`,
   itemLink: `lsd-breadcrumb-item-link`,
-
-  small: `lsd-breadcrumb-item--small`,
-  medium: `lsd-breadcrumb-item--medium`,
-  large: `lsd-breadcrumb-item--large`,
 }
diff --git a/packages/lsd-react/src/components/BreadcrumbItem/BreadcrumbItem.stories.tsx b/packages/lsd-react/src/components/BreadcrumbItem/BreadcrumbItem.stories.tsx
@@ -4,14 +4,6 @@ import { BreadcrumbItem, BreadcrumbItemProps } from './BreadcrumbItem'
 export default {
   title: 'BreadcrumbItem',
   component: BreadcrumbItem,
-  argTypes: {
-    size: {
-      type: {
-        name: 'enum',
-        value: ['small', 'medium', 'large'],
-      },
-    },
-  },
 } as Meta
 
 export const Root: Story<BreadcrumbItemProps> = (args) => (
@@ -22,6 +14,5 @@ export const Root: Story<BreadcrumbItemProps> = (args) => (
 
 Root.args = {
   label: 'label',
-  size: 'large',
   current: true,
 }
diff --git a/packages/lsd-react/src/components/BreadcrumbItem/BreadcrumbItem.styles.ts b/packages/lsd-react/src/components/BreadcrumbItem/BreadcrumbItem.styles.ts
@@ -5,6 +5,8 @@ import { breadcrumbItemClasses } from './BreadcrumbItem.classes'
 export const BreadcrumbItemStyles = css`
   .${breadcrumbItemClasses.root} {
     list-style-type: none;
+    display: flex;
+    align-items: center;
   }
 
   .${breadcrumbClasses.list} li + li::before {
@@ -32,16 +34,4 @@ export const BreadcrumbItemStyles = css`
       }
     }
   }
-
-  .${breadcrumbItemClasses.small} {
-    padding: 6px 10px;
-  }
-
-  .${breadcrumbItemClasses.medium} {
-    padding: 6px 12px;
-  }
-
-  .${breadcrumbItemClasses.large} {
-    padding: 10px 14px;
-  }
 `
diff --git a/packages/lsd-react/src/components/BreadcrumbItem/BreadcrumbItem.tsx b/packages/lsd-react/src/components/BreadcrumbItem/BreadcrumbItem.tsx
@@ -3,7 +3,6 @@ import React from 'react'
 import { Typography } from '../Typography'
 import { breadcrumbItemClasses } from './BreadcrumbItem.classes'
 export type BreadcrumbItemProps = React.LiHTMLAttributes<HTMLLIElement> & {
-  size: 'small' | 'medium' | 'large'
   label: string
   link?: string
   linkComponent?: React.ComponentType<
@@ -22,20 +21,20 @@ export const BreadcrumbItem: React.FC<BreadcrumbItemProps> & {
   label,
   link,
   linkComponent: LinkComponent = (props) => <a {...props}>{props.children}</a>,
-  size = 'large',
   current,
   selected,
   ellipsisRef,
   onClick,
+  className,
   ...props
 }) => {
   return (
     <li
-      {...props}
-      className={clsx(breadcrumbItemClasses.root)}
+      className={clsx(breadcrumbItemClasses.root, className)}
       aria-selected={selected ? 'true' : 'false'}
       onClick={onClick}
       ref={ellipsisRef}
+      {...props}
     >
       <LinkComponent
         href={link}
@@ -44,11 +43,7 @@ export const BreadcrumbItem: React.FC<BreadcrumbItemProps> & {
           current && breadcrumbItemClasses.itemCurrentPage,
         )}
       >
-        <Typography
-          color="primary"
-          component="span"
-          variant={size === 'large' ? 'label1' : 'label2'}
-        >
+        <Typography color="primary" component="span" variant={'label1'}>
           {label}
         </Typography>
       </LinkComponent>