fix: breadcrumbs padding (#5719)

Author: lisalupi

.changeset/twelve-buckets-chew.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+`Breadcrumbs`: add padding on item without prop "to"

packages/ui/src/components/Breadcrumbs/__tests__/__snapshots__/index.test.tsx.snap

@@ -12,7 +12,7 @@ exports[`breadcrumbs > click on middle item 1`] = `
         class="styles__qxa0fl0"
       >
         <li
-          class="styles__1yxbbx44 styles__1yxbbx46"
+          class="styles__1yxbbx44 styles__1yxbbx47"
         >
           <a
             class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_sentiment_info__1dtqm9e2 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_type_standalone__1dtqm9ed styles_undefined_compound_6__1dtqm9ek styles__1dtqm9en"
@@ -23,7 +23,7 @@ exports[`breadcrumbs > click on middle item 1`] = `
           </a>
         </li>
         <li
-          class="styles__1yxbbx44 styles_clickable_true__1yxbbx45 styles__1yxbbx46"
+          class="styles__1yxbbx44 styles_clickable_true__1yxbbx45 styles__1yxbbx47"
         >
           <button
             class="styles__1yxbbx43 styles__e1wcoe0 styles_size_small__e1wcoe3 styles_fullWidth_false__e1wcoe6 styles_disabled_false__e1wcoek styles_variant_ghost__e1wcoei styles_sentiment_neutral__e1wcoed styles_undefined_compound_24__e1wcoe19"
@@ -33,10 +33,10 @@ exports[`breadcrumbs > click on middle item 1`] = `
           </button>
         </li>
         <li
-          class="styles__1yxbbx44 styles__1yxbbx46"
+          class="styles__1yxbbx44 styles__1yxbbx47"
         >
           <div
-            class="styles__1yxbbx43 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_prominence_default__m4c9owi style_variant_bodySmallStrong__m4c9owo style_disabled_false__m4c9ow1b style_undefined_compound_72__m4c9ow3c"
+            class="styles__1yxbbx43 styles__1yxbbx46 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_prominence_default__m4c9owi style_variant_bodySmallStrong__m4c9owo style_disabled_false__m4c9ow1b style_undefined_compound_72__m4c9ow3c"
           >
             Step 3
           </div>
@@ -59,7 +59,7 @@ exports[`breadcrumbs > last item should no be clickable 1`] = `
         class="styles__qxa0fl0"
       >
         <li
-          class="styles__1yxbbx44 styles__1yxbbx46"
+          class="styles__1yxbbx44 styles__1yxbbx47"
         >
           <a
             class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_sentiment_info__1dtqm9e2 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_type_standalone__1dtqm9ed styles_undefined_compound_6__1dtqm9ek styles__1dtqm9en"
@@ -70,7 +70,7 @@ exports[`breadcrumbs > last item should no be clickable 1`] = `
           </a>
         </li>
         <li
-          class="styles__1yxbbx44 styles__1yxbbx46"
+          class="styles__1yxbbx44 styles__1yxbbx47"
         >
           <a
             class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_sentiment_info__1dtqm9e2 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_type_standalone__1dtqm9ed styles_undefined_compound_6__1dtqm9ek styles__1dtqm9en"
@@ -81,7 +81,7 @@ exports[`breadcrumbs > last item should no be clickable 1`] = `
           </a>
         </li>
         <li
-          class="styles__1yxbbx44 styles_clickable_true__1yxbbx45 styles__1yxbbx46"
+          class="styles__1yxbbx44 styles_clickable_true__1yxbbx45 styles__1yxbbx47"
         >
           <button
             class="styles__1yxbbx43 styles__e1wcoe0 styles_size_small__e1wcoe3 styles_fullWidth_false__e1wcoe6 styles_disabled_false__e1wcoek styles_variant_ghost__e1wcoei styles_sentiment_neutral__e1wcoed styles_undefined_compound_24__e1wcoe19"
@@ -108,7 +108,7 @@ exports[`breadcrumbs > renders correctly with default values 1`] = `
         class="styles__qxa0fl0"
       >
         <li
-          class="styles__1yxbbx44 styles__1yxbbx46"
+          class="styles__1yxbbx44 styles__1yxbbx47"
         >
           <a
             class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_sentiment_info__1dtqm9e2 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_type_standalone__1dtqm9ed styles_undefined_compound_6__1dtqm9ek styles__1dtqm9en"
@@ -119,7 +119,7 @@ exports[`breadcrumbs > renders correctly with default values 1`] = `
           </a>
         </li>
         <li
-          class="styles__1yxbbx44 styles__1yxbbx46"
+          class="styles__1yxbbx44 styles__1yxbbx47"
         >
           <a
             class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_sentiment_info__1dtqm9e2 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_type_standalone__1dtqm9ed styles_undefined_compound_6__1dtqm9ek styles__1dtqm9en"
@@ -130,10 +130,10 @@ exports[`breadcrumbs > renders correctly with default values 1`] = `
           </a>
         </li>
         <li
-          class="styles__1yxbbx44 styles__1yxbbx46"
+          class="styles__1yxbbx44 styles__1yxbbx47"
         >
           <div
-            class="styles__1yxbbx43 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_prominence_default__m4c9owi style_variant_bodySmallStrong__m4c9owo style_disabled_false__m4c9ow1b style_undefined_compound_72__m4c9ow3c"
+            class="styles__1yxbbx43 styles__1yxbbx46 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_prominence_default__m4c9owi style_variant_bodySmallStrong__m4c9owo style_disabled_false__m4c9ow1b style_undefined_compound_72__m4c9ow3c"
           >
             Step 3
           </div>
@@ -174,7 +174,7 @@ exports[`breadcrumbs > renders correctly with minWidth and maxWidth 1`] = `
         class="styles__qxa0fl0"
       >
         <li
-          class="styles__1yxbbx44 styles__1yxbbx46"
+          class="styles__1yxbbx44 styles__1yxbbx47"
         >
           <a
             class="styles__1yxbbx42 styles__1dtqm9e0 styles_prominence_stronger__1dtqm9e5 styles_sentiment_info__1dtqm9e2 styles_oneLine_false__1dtqm9e8 styles_variant_bodySmallStrong__1dtqm9ea styles_type_standalone__1dtqm9ed styles_undefined_compound_6__1dtqm9ek styles__1dtqm9en"
@@ -185,7 +185,7 @@ exports[`breadcrumbs > renders correctly with minWidth and maxWidth 1`] = `
           </a>
         </li>
         <li
-          class="styles__1yxbbx44 styles__1yxbbx46"
+          class="styles__1yxbbx44 styles__1yxbbx47"
           style="--_1yxbbx41: 100px; --_1yxbbx40: 200px;"
         >
           <a
@@ -197,10 +197,10 @@ exports[`breadcrumbs > renders correctly with minWidth and maxWidth 1`] = `
           </a>
         </li>
         <li
-          class="styles__1yxbbx44 styles__1yxbbx46"
+          class="styles__1yxbbx44 styles__1yxbbx47"
         >
           <div
-            class="styles__1yxbbx43 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_prominence_default__m4c9owi style_variant_bodySmallStrong__m4c9owo style_disabled_false__m4c9ow1b style_undefined_compound_72__m4c9ow3c"
+            class="styles__1yxbbx43 styles__1yxbbx46 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_prominence_default__m4c9owi style_variant_bodySmallStrong__m4c9owo style_disabled_false__m4c9ow1b style_undefined_compound_72__m4c9ow3c"
           >
             Step 3
           </div>

packages/ui/src/components/Breadcrumbs/components/Item.tsx

@@ -13,6 +13,7 @@ import { Text } from '../../Text'
 import {
   breadcrumbsItem,
   contentBreadcrumbs,
+  contentBreadcrumbsText,
   itemContainerBreadcrumbs,
   linkBreadcrumbs,
   maxWidthVar,
@@ -86,7 +87,11 @@ export const Item = ({
     }
 
     return (
-      <Text as="div" className={contentBreadcrumbs} variant="bodySmallStrong">
+      <Text
+        as="div"
+        className={`${contentBreadcrumbs} ${contentBreadcrumbsText}`}
+        variant="bodySmallStrong"
+      >
         {children}
       </Text>
     )

packages/ui/src/components/Breadcrumbs/components/styles.css.ts

@@ -14,8 +14,7 @@ export const minWidthVar = createVar({
 })
 
 export const linkBreadcrumbs = style({
-  /** TODO :Remove "!important" once Link uses vanilla extract */
-  paddingRight: `${theme.space[1]} !important`,
+  paddingRight: theme.space[1],
   whiteSpace: 'nowrap',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
@@ -47,15 +46,21 @@ export const itemContainerBreadcrumbs = recipe({
   },
 })
 
+export const contentBreadcrumbsText = style({})
 export const breadcrumbsItem = style({})
-globalStyle(`.${breadcrumbsItem}:not(:first-child) .${linkBreadcrumbs}`, {
-  padding: `0 ${theme.space[1]}`,
-})
 
-globalStyle(`.${breadcrumbsItem}:last-child .${linkBreadcrumbs}`, {
+globalStyle(
+  `${breadcrumbsItem}:not(:first-child) ${linkBreadcrumbs}, ${breadcrumbsItem}:not(:first-child) ${contentBreadcrumbsText}`,
+  {
+    padding: `0 ${theme.space[1]}`,
+  },
+)
+
+globalStyle(`${breadcrumbsItem}:last-child ${linkBreadcrumbs}`, {
   pointerEvents: 'none',
 })
-globalStyle(`.${breadcrumbsItem}:last-child .${contentBreadcrumbs}`, {
+
+globalStyle(`${breadcrumbsItem}:last-child ${contentBreadcrumbs}`, {
   pointerEvents: 'none',
   cursor: 'default',
 })