fix(search-bar): button disabled + contrasted

ovh · Aug 4, 2023 · 9352323 · 9352323
1 parent 84070ec
commit 9352323
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 9 deletions.
diff --git a/packages-new/components/button/src/components/osds-button/osds-button.scss b/packages-new/components/button/src/components/osds-button/osds-button.scss
@@ -74,8 +74,9 @@
 }
 
 :host([disabled]) {
-  cursor: not-allowed;
-  pointer-events: none;
+  @include osds-button-on-main-element() {
+    cursor: not-allowed;
+  }
 }
 
 :host([inline]) {

diff --git a/packages/stencil/components/search-bar/src/components/osds-search-bar/osds-search-bar.scss b/packages/stencil/components/search-bar/src/components/osds-search-bar/osds-search-bar.scss
@@ -36,8 +36,13 @@
   }
 }
 
-:host([disabled]) {
-  cursor: not-allowed;
+:host([contrasted]) {
+  osds-button {
+    &::part(button) {
+      border: solid var(--ods-size-01) var(--ods-color-primary-200);
+      border-left: 0;
+    }  
+  }
 }
 
 // apply the theme template for the component

diff --git a/packages/stencil/components/search-bar/src/components/osds-search-bar/osds-search-bar.tsx b/packages/stencil/components/search-bar/src/components/osds-search-bar/osds-search-bar.tsx
@@ -2,6 +2,7 @@ import { Component, Element, Host, h, Prop, Event, EventEmitter, Listen } from '
 import {
   OdsButtonSize,
   OdsIconName,
+  OdsIconSize,
   OdsInputType,
   OdsInputValueChangeEvent,
   OdsSearchBar,
@@ -111,7 +112,10 @@ export class OsdsSearchBar implements OdsSearchBar<OdsStencilMethods<OdsSearchBa
           color={ OdsThemeColorIntent.primary }
           disabled={ this.disabled }
           contrasted={ this.contrasted }>
-          <osds-icon contrasted name={ OdsIconName.SEARCH } />
+          <osds-icon
+            size={ OdsIconSize.sm } 
+            contrasted={ !this.contrasted }
+            name={ OdsIconName.SEARCH } />
         </osds-button>
       </Host>
     );

diff --git a/packages/stencil/components/search-bar/src/index.html b/packages/stencil/components/search-bar/src/index.html
@@ -33,6 +33,9 @@
 <p>SearchBar disabled</p>
 <osds-search-bar disabled></osds-search-bar>
 
+<p>SearchBar contrasted</p>
+<osds-search-bar contrasted></osds-search-bar>
+
 <script>
   const searchBarOptions = document.querySelector('#search-bar-options');
   searchBarOptions.options = [{

diff --git a/packages/tools/storybook/stories/components/search-bar/search-bar.web-components.stories.ts b/packages/tools/storybook/stories/components/search-bar/search-bar.web-components.stories.ts
@@ -60,10 +60,10 @@ export default {
   argTypes: extractArgTypes({ ...storyParams, ...selectParams })
 };
 
-/* Default */
+
 const TemplateDefault = (args:any) => {
   return html`
-    <osds-search-bar ...=${getTagAttributes(args)}>
+    <osds-search-bar ...=${getTagAttributes(args)} @keydown=${(e: KeyboardEvent) => e.stopPropagation()}>
       SearchBar
     </osds-search-bar>
   `;
@@ -73,10 +73,10 @@ Default.args = {
   ...extractStoryParams(storyParams),
 };
 
-/* Default */
+
 const SelectTemplate = (args:any) => {
   return html`
-    <osds-search-bar ...=${getTagAttributes(args)}>
+    <osds-search-bar ...=${getTagAttributes(args)} @keydown=${(e: KeyboardEvent) => e.stopPropagation()}>
       SearchBar
     </osds-search-bar>
   `;

diff --git a/scripts/testing-report/index.html b/scripts/testing-report/index.html
@@ -122,6 +122,7 @@
     {name: 'osds-radio', id: 'radio'},
     {name: 'osds-radio-button', id: 'radio-button'},
     {name: 'osds-range', id: 'range'},
+    {name: 'osds-search-bar', id: 'search-bar'},
     {name: 'osds-select', id: 'select'},
     {name: 'osds-skeleton', id: 'skeleton'},
     {name: 'osds-spinner', id: 'spinner'},