Redesign OcBreadcrumb (#1975)

* Redesign OcBreadcrumb * Add changelog, linting, snapshots * Fix three-dots hover color * Fix OcBreadcrumb example * remove unused class * Update breadcrumb example docs Co-authored-by: Pascal Wengerter <pascal@wengerter.info>
owncloud · Feb 24, 2022 · 7d8ef69 · 7d8ef69
1 parent fd3c9ff
commit 7d8ef69
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 35 deletions.
diff --git a/changelog/unreleased/enhancement-redesign-breadcrumb b/changelog/unreleased/enhancement-redesign-breadcrumb
@@ -0,0 +1,7 @@
+Enhancement: Redesign OcBreadcrumb
+
+We've adjustet the look of the OcBreadcrumb
+to fit the Redesign
+
+https://github.com/owncloud/web/issues/6218
+https://github.com/owncloud/owncloud-design-system/pull/1975
diff --git a/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue b/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue
@@ -1,10 +1,16 @@
 <template>
   <nav :class="`oc-breadcrumb oc-breadcrumb-${variation}`">
-    <ol class="oc-breadcrumb-list">
+    <ol class="oc-breadcrumb-list oc-mb-s">
       <li v-for="(item, index) in items" :key="index" class="oc-breadcrumb-list-item">
         <router-link v-if="item.to" :aria-current="getAriaCurrent(index)" :to="item.to">
-          {{ item.text }}
+          <span>{{ item.text }}</span>
         </router-link>
+        <oc-icon
+          v-if="item.to"
+          color="var(--oc-color-text-default)"
+          name="arrow-right-s"
+          fill-type="line"
+        />
         <oc-button
           v-else-if="item.onClick"
           :aria-current="getAriaCurrent(index)"
@@ -21,7 +27,7 @@
             :aria-label="contextMenuLabel"
             appearance="raw"
           >
-            <oc-icon name="more-2" />
+            <oc-icon name="more-2" color="var(--oc-color-text-default)" />
           </oc-button>
           <oc-drop
             drop-id="oc-breadcrumb-contextmenu"
@@ -176,6 +182,11 @@ export default {
 
     #oc-breadcrumb-contextmenu-trigger > span {
       vertical-align: middle;
+      border: 3px solid transparent;
+      &:hover {
+        background-color: var(--oc-color-background-hover);
+        border-radius: 3px;
+      }
     }
 
     #oc-breadcrumb-contextmenu li button {
@@ -190,30 +201,25 @@ export default {
     > li button,
     > li span,
     > :nth-child(n + 2)::before {
-      color: var(--oc-color-text-muted);
-    }
-    > :nth-child(n + 2)::before {
-      content: "/";
+      color: var(--oc-color-text-default);
       display: inline-block;
-      margin: 0 var(--oc-space-small) 0 var(--oc-space-xsmall);
-      font-size: 0.875rem;
+      vertical-align: middle;
+      line-height: normal;
     }
 
     > :last-child > span {
       color: var(--oc-color-text-default);
     }
 
     > li a:hover,
-    > li span:not([aria-current="page"]):hover,
+    > li span:not([aria-current="page"]):not(.oc-icon):hover,
     > li button:hover {
-      color: var(--oc-color-swatch-primary-default);
       text-decoration: underline;
     }
   }
 
   /* stylelint-disable */
   &-list-item {
-    &::before,
     a,
     button,
     span {
@@ -222,7 +228,6 @@ export default {
   }
 
   &-lead &-list-item {
-    &::before,
     a,
     button,
     span {
@@ -243,7 +248,7 @@ export default {
       > li a,
       > li button,
       > li span {
-        color: var(--oc-color-text-muted);
+        color: var(--oc-color-text-default);
         font-size: 0.875rem;
       }
 
@@ -282,13 +287,13 @@ export default {
 <template>
 <section>
   <div>
-    <oc-breadcrumb :items="items" class="oc-mb" />
+    <oc-breadcrumb :items="items" />
   </div>
   <div>
     <oc-breadcrumb :items="items" variation="lead" />
-    <oc-breadcrumb :items="items" class="oc-mt-l">
+    <oc-breadcrumb :items="items" >
       <template v-slot:contextMenu>
-        <p>I'm an example item</p>
+        <p class="oc-my-rm">I'm an example item</p>
       </template>
     </oc-breadcrumb>
   </div>
@@ -300,8 +305,8 @@ export default {
       return {
         items: [
           {text:'First folder',to:{path:'folder'}},
-          {text:'Subfolder', onClick:() => alert('Breadcrumb clicked!')},
-          {text:'Deep',to:{path:'folder'}},
+          {text:'Subfolder', to: {path: 'subfolder'}},
+          {text:'Deep',to:{path:'deep'}},
           {text:'Deeper ellipsize in responsive mode'},
         ]
       }

diff --git a/src/components/molecules/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.js.snap b/src/components/molecules/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.js.snap
@@ -2,26 +2,26 @@
 
 exports[`OcBreadcrumb displays all items 1`] = `
 <nav class="oc-breadcrumb oc-breadcrumb-default">
-  <ol class="oc-breadcrumb-list">
+  <ol class="oc-breadcrumb-list oc-mb-s">
     <li class="oc-breadcrumb-list-item">
-      <router-link-stub tag="a" to="[object Object]">
-        First folder
-      </router-link-stub>
+      <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>
       <!---->
     </li>
     <li class="oc-breadcrumb-list-item">
+      <!---->
       <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="center" gapsize="medium">
         Subfolder
       </oc-button-stub>
       <!---->
     </li>
     <li class="oc-breadcrumb-list-item">
-      <router-link-stub tag="a" to="[object Object]">
-        Deep
-      </router-link-stub>
+      <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>
       <!---->
     </li>
-    <li class="oc-breadcrumb-list-item"><span aria-current="page" tabindex="-1">Deeper ellipsize in responsive mode</span>
+    <li class="oc-breadcrumb-list-item">
+      <!----> <span aria-current="page" tabindex="-1">Deeper ellipsize in responsive mode</span>
       <!---->
     </li>
   </ol>
@@ -53,26 +53,26 @@ exports[`OcBreadcrumb displays all items 1`] = `
 
 exports[`OcBreadcrumb sets correct variation 1`] = `
 <nav class="oc-breadcrumb oc-breadcrumb-lead">
-  <ol class="oc-breadcrumb-list">
+  <ol class="oc-breadcrumb-list oc-mb-s">
     <li class="oc-breadcrumb-list-item">
-      <router-link-stub tag="a" to="[object Object]">
-        First folder
-      </router-link-stub>
+      <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>
       <!---->
     </li>
     <li class="oc-breadcrumb-list-item">
+      <!---->
       <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="center" gapsize="medium">
         Subfolder
       </oc-button-stub>
       <!---->
     </li>
     <li class="oc-breadcrumb-list-item">
-      <router-link-stub tag="a" to="[object Object]">
-        Deep
-      </router-link-stub>
+      <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>
       <!---->
     </li>
-    <li class="oc-breadcrumb-list-item"><span aria-current="page" tabindex="-1">Deeper ellipsize in responsive mode</span>
+    <li class="oc-breadcrumb-list-item">
+      <!----> <span aria-current="page" tabindex="-1">Deeper ellipsize in responsive mode</span>
       <!---->
     </li>
   </ol>