refactor(breadcrumb): use link instead of button for expandable item

ovh · Jun 7, 2023 · 08a171b · 08a171b
1 parent 556be24
commit 08a171b
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 18 deletions.
diff --git a/...cil/components/breadcrumb/src/components/osds-breadcrumb-item/osds-breadcrumb-item.e2e.ts b/...cil/components/breadcrumb/src/components/osds-breadcrumb-item/osds-breadcrumb-item.e2e.ts
@@ -103,7 +103,7 @@ describe('e2e:osds-breadcrumb-item', () => {
     async function setupCollapsedItem(attributes: Partial<OdsBreadcrumbItemAttributes>) {
       await setup({ attributes });
 
-      collapsedItem = await page.find('osds-breadcrumb-item >>> osds-button');
+      collapsedItem = await page.find('osds-breadcrumb-item >>> osds-link.expandable');
     }
 
     it('should not be rendered if not isExpandableItem', async () => {

diff --git a/...tencil/components/breadcrumb/src/components/osds-breadcrumb-item/osds-breadcrumb-item.tsx b/...tencil/components/breadcrumb/src/components/osds-breadcrumb-item/osds-breadcrumb-item.tsx
@@ -5,8 +5,6 @@ import {
   odsBreadcrumbItemDefaultAttributes,
   OdsBreadcrumbItemEvents,
   OdsBreadcrumbItemMethods,
-  OdsButtonSize,
-  OdsButtonVariant,
   OdsIconName,
   OdsIconSize,
 } from '@ovhcloud/ods-core';
@@ -80,16 +78,16 @@ export class OsdsBreadcrumbItem implements OdsBreadcrumbItem<OdsStencilMethods<O
 
         {
           this.isExpandableItem &&
-          <osds-button color={this.defaultColorIntent}
-                       contrasted={this.contrasted}
-                       onClick={() => this.onCollapsedElementClick()}
-                       size={OdsButtonSize.sm}
-                       variant={OdsButtonVariant.ghost}>
-            <osds-icon color={this.defaultColorIntent}
+          <osds-link class="expandable"
+                     color={this.defaultColorIntent}
+                     contrasted={this.contrasted}
+                     onClick={() => this.onCollapsedElementClick()}>
+            <osds-text color={this.defaultColorIntent}
                        contrasted={this.contrasted}
-                       name={OdsIconName.ELLIPSIS}>
-            </osds-icon>
-          </osds-button>
+                       aria-hidden="true">
+              &hellip;
+            </osds-text>
+          </osds-link>
         }
 
         {

diff --git a/...ents/breadcrumb/src/components/osds-breadcrumb-item/styles/osds-breadcrumb-item.size.scss b/...ents/breadcrumb/src/components/osds-breadcrumb-item/styles/osds-breadcrumb-item.size.scss
@@ -8,6 +8,7 @@
   $size-properties: ods-get-size-properties($component-size-definition, md);
 
   :host {
+    .expandable,
     .item {
       padding: ods-get-size-property($size-properties, padding);
     }

diff --git a/packages/stencil/components/breadcrumb/src/components/osds-breadcrumb/osds-breadcrumb.e2e.ts b/packages/stencil/components/breadcrumb/src/components/osds-breadcrumb/osds-breadcrumb.e2e.ts
@@ -17,7 +17,7 @@ describe('e2e:osds-breadcrumb', () => {
   }
 
   function isExpandableItem(breadcrumbItemElement: E2EElement): boolean {
-    return !!breadcrumbItemElement.shadowRoot.querySelector('osds-button');
+    return !!breadcrumbItemElement.shadowRoot.querySelector('osds-link.expandable');
   }
 
   async function setup(items: OdsBreadcrumbAttributeItem[] = []) {
@@ -98,7 +98,7 @@ describe('e2e:osds-breadcrumb', () => {
     await page.evaluate((index) => {
       const breadcrumbItemElements = document.querySelector('osds-breadcrumb')?.shadowRoot?.querySelectorAll('osds-breadcrumb-item');
       if (breadcrumbItemElements && breadcrumbItemElements.length > index) {
-        const collapsedItem = breadcrumbItemElements[index].shadowRoot?.querySelector('osds-button') as HTMLButtonElement;
+        const collapsedItem = breadcrumbItemElements[index].shadowRoot?.querySelector('osds-link.expandable') as HTMLButtonElement;
 
         if (collapsedItem) {
           collapsedItem.click();

diff --git a/packages/stencil/components/breadcrumb/src/global.dev.ts b/packages/stencil/components/breadcrumb/src/global.dev.ts
@@ -6,7 +6,6 @@
 import './components';
 import './global';
 import { OdsLogger } from '@ovhcloud/ods-core';
-import '@ovhcloud/ods-stencil/components/button';
 import '@ovhcloud/ods-stencil/components/icon';
 import '@ovhcloud/ods-stencil/components/link';
 import '@ovhcloud/ods-stencil/components/text';

diff --git a/packages/stencil/components/breadcrumb/src/global.test.ts b/packages/stencil/components/breadcrumb/src/global.test.ts
@@ -5,7 +5,6 @@
 
 import './global';
 
-import '@ovhcloud/ods-stencil/components/button';
 import '@ovhcloud/ods-stencil/components/icon';
 import '@ovhcloud/ods-stencil/components/link';
 import '@ovhcloud/ods-stencil/components/text';
diff --git a/packages/stencil/components/breadcrumb/stencil.config.ts b/packages/stencil/components/breadcrumb/stencil.config.ts
@@ -11,11 +11,11 @@ export const config: Config = getStencilConfig({
   reactOutput: {
     componentCorePackage: '@ovhcloud/ods-stencil/components/breadcrumb',
     // exclude peer dependencies that corresponds to www usage
-    excludeComponents: ['osds-button', 'osds-icon', 'osds-link', 'osds-text']
+    excludeComponents: ['osds-icon', 'osds-link', 'osds-text']
   },
   vueOutput: {
     componentCorePackage: '@ovhcloud/ods-stencil/components/breadcrumb',
-    excludeComponents: ['osds-button', 'osds-icon', 'osds-link', 'osds-text']
+    excludeComponents: ['osds-icon', 'osds-link', 'osds-text']
   },
   dev: {
     globalScript: 'src/global.dev.ts',
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,6 +8,7 @@ @@
       $size-properties: ods-get-size-properties($component-size-definition, md);
       :host {
+        .expandable,
         .item {
           padding: ods-get-size-property($size-properties, padding);
         }
@@ Expand Down @@