feat(breadcrumbs): moved delimiter to css

vmware-clarity · Dec 6, 2024 · a7dd25e · a7dd25e
1 parent ba0e974
commit a7dd25e
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 30 deletions.
diff --git a/projects/angular/src/layout/breadcrumbs/_breadcrumb-item.clarity.scss b/projects/angular/src/layout/breadcrumbs/_breadcrumb-item.clarity.scss
@@ -5,19 +5,12 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 @use 'sass:meta';
-@use '../../utils/mixins';
 @use '../breadcrumbs/variables.breadcrumbs' as breadcrumb-variables;
-@use '@cds/core/tokens/tokens.scss';
 
-.clr-breadcrumb-delimiter {
-  margin: 0 breadcrumb-variables.$clr-breadcrumb-item-space;
-  color: breadcrumb-variables.$clr-breadcrumb-active-color;
-}
-
-.active {
-  color: breadcrumb-variables.$clr-breadcrumb-active-color;
-}
-
-.clr-breadcrumb-link:empty + .clr-breadcrumb-delimiter {
-  display: none;
+.clr-breadcrumb-link {
+  &::after {
+    content: '/';
+    margin: 0 breadcrumb-variables.$clr-breadcrumb-item-space;
+    color: breadcrumb-variables.$clr-breadcrumb-active-color;
+  }
 }
diff --git a/projects/angular/src/layout/breadcrumbs/_breadcrumbs.clarity.scss b/projects/angular/src/layout/breadcrumbs/_breadcrumbs.clarity.scss
@@ -12,10 +12,13 @@
 
 .clr-breadcrumb-menu {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  height: 24px; //tokens.$cds-global-space-24; --> Token is missing in core
 
   .clr-breadcrumb-item {
+    display: flex;
+    align-items: center;
+    min-height: 24px; //tokens.$cds-global-space-24; --> TO DO: Add token to clarity core
     font-family: breadcrumb-variables.$clr-breadcrumb-font-family;
     color: breadcrumb-variables.$clr-breadcrumb-link-color;
     @include mixins.generate-typography-token('SECONDARY-13-RG-CPT');
@@ -30,10 +33,13 @@
 
   .clr-breadcrumb-item:last-child {
     color: breadcrumb-variables.$clr-breadcrumb-active-color;
-    .clr-breadcrumb-delimiter {
-      display: none;
+    .clr-breadcrumb-link {
+      &::after {
+        display: none;
+      }
     }
   }
+
   .clr-breadcrumb-expand {
     cursor: pointer;
   }

diff --git a/projects/angular/src/layout/breadcrumbs/breadcrumb-item.ts b/projects/angular/src/layout/breadcrumbs/breadcrumb-item.ts
@@ -7,21 +7,17 @@
 
 import { Component } from '@angular/core';
 
-import { DELIMITER } from './breadcrumbs.constants';
 @Component({
   selector: 'clr-breadcrumb-item',
   template: `
       <span class="clr-breadcrumb-link">
         <ng-content />
       </span>
-      <span class="clr-breadcrumb-delimiter">{{delimiter}}</span>
   `,
   styleUrls: ['./_breadcrumb-item.clarity.scss'],
   host: {
     class: 'clr-breadcrumb-item',
     '[attr.role]': '"list-item"',
   },
 })
-export class ClrBreadcrumbItem {
-  delimiter = DELIMITER;
-}
+export class ClrBreadcrumbItem {}
diff --git a/projects/angular/src/layout/breadcrumbs/breadcrumbs.constants.ts b/projects/angular/src/layout/breadcrumbs/breadcrumbs.constants.ts
@@ -5,5 +5,4 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-export const DELIMITER = '/';
-export const MAX_ITEMS = 3;
+export const MAX_DISPLAY_ITEMS = 3;
diff --git a/projects/angular/src/layout/breadcrumbs/breadcrumbs.spec.ts b/projects/angular/src/layout/breadcrumbs/breadcrumbs.spec.ts
@@ -68,8 +68,9 @@ describe('ClrBreadcrumbs', () => {
   }));
 
   it('should have a seperator between breadcrumbs', () => {
-    const delimiter = breadcrumbList.query(By.css('.clr-breadcrumb-delimiter'));
-    expect(delimiter.nativeElement.textContent).toEqual('/');
+    const link = breadcrumbList.nativeElement.querySelector('.clr-breadcrumb-link');
+    const delimiter = window.getComputedStyle(link, ':after').getPropertyValue('content');
+    expect(delimiter).toEqual('"/"');
   });
 
   it('should have the current page as the last item in a breadcrumb', () => {

diff --git a/projects/angular/src/layout/breadcrumbs/breadcrumbs.ts b/projects/angular/src/layout/breadcrumbs/breadcrumbs.ts
@@ -8,7 +8,7 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 import { ClrCommonStringsService } from '../../utils/i18n/common-strings.service';
-import { MAX_ITEMS } from './breadcrumbs.constants';
+import { MAX_DISPLAY_ITEMS } from './breadcrumbs.constants';
 import { BreadcrumbItem } from './model/breadcrumbs.model';
 
 @Component({
@@ -22,13 +22,13 @@ import { BreadcrumbItem } from './model/breadcrumbs.model';
   },
 })
 export class ClrBreadcrumbs {
+  isExpanded = false;
+  max: number = MAX_DISPLAY_ITEMS;
+  limit: number = MAX_DISPLAY_ITEMS;
+
   @Input() items: BreadcrumbItem[] = [];
   @Output() clrBreadcrumbItemClick: EventEmitter<BreadcrumbItem> = new EventEmitter<BreadcrumbItem>();
 
-  isExpanded = false;
-  max: number = MAX_ITEMS;
-  limit: number = MAX_ITEMS;
-
   constructor(public commonStrings: ClrCommonStringsService) {}
 
   handleItemClick(breadcrumb: BreadcrumbItem) {