Merge pull request #2329 from owncloud/fix-breadcrumb-spacing

Adjust breadcrumbs spacing

changelog/unreleased/enhancement-breadcrumb-spacing

@@ -0,0 +1,7 @@
+Enhancement: Adjust breadcrumb spacing
+
+We've adjusted some spacing in the breadcrumbs to improve the overall look.
+
+https://github.com/owncloud/web/issues/7676
+https://github.com/owncloud/web/issues/7525
+https://github.com/owncloud/owncloud-design-system/pull/2329

src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue

@@ -1,14 +1,19 @@
 <template>
   <nav :class="`oc-breadcrumb oc-breadcrumb-${variation}`">
-    <ol class="oc-breadcrumb-list oc-mb-s">
-      <li v-for="(item, index) in items" :key="index" class="oc-breadcrumb-list-item">
+    <ol class="oc-breadcrumb-list oc-flex">
+      <li
+        v-for="(item, index) in items"
+        :key="index"
+        class="oc-breadcrumb-list-item oc-flex oc-flex-middle"
+      >
         <router-link v-if="item.to" :aria-current="getAriaCurrent(index)" :to="item.to">
           <span>{{ item.text }}</span>
         </router-link>
         <oc-icon
           v-if="item.to"
           color="var(--oc-color-text-default)"
           name="arrow-right-s"
+          class="oc-mx-xs"
           fill-type="line"
         />
         <oc-button
@@ -175,10 +180,7 @@ export default {
     @extend .oc-p-rm;
 
     list-style: none;
-
-    > * {
-      display: contents;
-    }
+    align-items: baseline;
 
     #oc-breadcrumb-contextmenu-trigger > span {
       vertical-align: middle;
@@ -196,8 +198,6 @@ export default {
     > :nth-child(n + 2)::before {
       color: var(--oc-color-text-default);
       display: inline-block;
-      vertical-align: middle;
-      line-height: normal;
     }
 
     > :last-child > span {
@@ -219,8 +219,6 @@ export default {
       font-size: var(--oc-font-size-medium);
       color: var(--oc-color-text-default);
       display: inline-block;
-      vertical-align: middle;
-      line-height: normal;
     }
   }
 

src/components/molecules/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.js.snap

@@ -2,23 +2,23 @@
 
 exports[`OcBreadcrumb displays all items 1`] = `
 <nav class="oc-breadcrumb oc-breadcrumb-default">
-  <ol class="oc-breadcrumb-list oc-mb-s">
-    <li class="oc-breadcrumb-list-item">
+  <ol class="oc-breadcrumb-list oc-flex">
+    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
       <router-link-stub tag="a" to="[object Object]"><span>First folder</span></router-link-stub>
-      <oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)"></oc-icon-stub>
+      <oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)" class="oc-mx-xs"></oc-icon-stub>
       <!---->
     </li>
-    <li class="oc-breadcrumb-list-item">
+    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
       <!---->
       <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium"><span>Subfolder</span></oc-button-stub>
       <!---->
     </li>
-    <li class="oc-breadcrumb-list-item">
+    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
       <router-link-stub tag="a" to="[object Object]"><span>Deep</span></router-link-stub>
-      <oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)"></oc-icon-stub>
+      <oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)" class="oc-mx-xs"></oc-icon-stub>
       <!---->
     </li>
-    <li class="oc-breadcrumb-list-item">
+    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
       <!----> <span aria-current="page" tabindex="-1">Deeper ellipsize in responsive mode</span>
       <!---->
     </li>
@@ -51,23 +51,23 @@ exports[`OcBreadcrumb displays all items 1`] = `
 
 exports[`OcBreadcrumb sets correct variation 1`] = `
 <nav class="oc-breadcrumb oc-breadcrumb-lead">
-  <ol class="oc-breadcrumb-list oc-mb-s">
-    <li class="oc-breadcrumb-list-item">
+  <ol class="oc-breadcrumb-list oc-flex">
+    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
       <router-link-stub tag="a" to="[object Object]"><span>First folder</span></router-link-stub>
-      <oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)"></oc-icon-stub>
+      <oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)" class="oc-mx-xs"></oc-icon-stub>
       <!---->
     </li>
-    <li class="oc-breadcrumb-list-item">
+    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
       <!---->
       <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium"><span>Subfolder</span></oc-button-stub>
       <!---->
     </li>
-    <li class="oc-breadcrumb-list-item">
+    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
       <router-link-stub tag="a" to="[object Object]"><span>Deep</span></router-link-stub>
-      <oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)"></oc-icon-stub>
+      <oc-icon-stub name="arrow-right-s" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)" class="oc-mx-xs"></oc-icon-stub>
       <!---->
     </li>
-    <li class="oc-breadcrumb-list-item">
+    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
       <!----> <span aria-current="page" tabindex="-1">Deeper ellipsize in responsive mode</span>
       <!---->
     </li>