fix(searchbar): pr comment

ovh · Aug 4, 2023 · 9b04b49 · 9b04b49
1 parent c70e3d7
commit 9b04b49
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 16 deletions.
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
@@ -11,7 +11,7 @@
   osds-select {
     --ods-size-select-border-radius-bottom-right: 0;
     --ods-size-select-border-radius-top-right: 0;
-    --ods-size-select-border-right: none;
+    --ods-size-select-border-right-width: 0;
   }
 
   .first {
@@ -27,9 +27,12 @@
     border-radius: 0;
   }
 
-  osds-button::part(button) {
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
+  osds-button {
+    flex-shrink: 0;
+    &::part(button) {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }  
   }
 }
 

diff --git a/...ages/stencil/components/search-bar/src/components/osds-search-bar/osds-search-bar.spec.ts b/...ages/stencil/components/search-bar/src/components/osds-search-bar/osds-search-bar.spec.ts
@@ -114,6 +114,29 @@ describe('spec:osds-search-bar', () => {
       instance.handlerOnClickSearchButton();
       expect(spyEmitOdsSearchSubmit).toHaveBeenCalledTimes(2);
       expect(spyEmitOdsSearchSubmit).toHaveBeenCalledWith({ optionValue: '', inputValue: '' });
+    });
+
+    it('should call emit odsSearchSubmit with keyboard navigation', async () => {
+      await setup({});
+      const spyEmitOdsSearchSubmit = jest.spyOn(instance.odsSearchSubmit, 'emit');
+      const enterKey = new KeyboardEvent('keydown', { code: 'Enter'});
+      instance.handlerOnKeydownInput(enterKey);
+      const spaceKey = new KeyboardEvent('keydown', { code: 'Space'});
+      instance.handlerOnKeydownInput(spaceKey);
+
+      expect(spyEmitOdsSearchSubmit).toHaveBeenCalledTimes(2);
+      expect(spyEmitOdsSearchSubmit).toHaveBeenCalledWith({ optionValue: '', inputValue: '' });
+    });
+
+    it('should not call emit odsSearchSubmit with keyboard navigation because of wrong key', async () => {
+      await setup({});
+      const spyEmitOdsSearchSubmit = jest.spyOn(instance.odsSearchSubmit, 'emit');
+      const enterKey = new KeyboardEvent('keydown', { code: 'A'});
+      instance.handlerOnKeydownInput(enterKey);
+      const spaceKey = new KeyboardEvent('keydown', { code: '0'});
+      instance.handlerOnKeydownInput(spaceKey);
+
+      expect(spyEmitOdsSearchSubmit).not.toHaveBeenCalled();
     })
   });
 });
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
@@ -10,7 +10,6 @@ import {
   OdsSearchBarEvents,
   OdsSearchBarMethods,
   OdsSelectValueChangeEvent,
-  // odsSearchBarDefaultAttributes
 } from '@ovhcloud/ods-core';
 import { OdsStencilEvents, OdsStencilMethods } from '@ovhcloud/ods-stencil/libraries/stencil-core';
 import { OdsThemeColorIntent } from '@ovhcloud/ods-theming';
@@ -60,6 +59,14 @@ export class OsdsSearchBar implements OdsSearchBar<OdsStencilMethods<OdsSearchBa
     this.value = event.detail.value?.toString() ?? '';
   }
 
+  handlerOnKeydownInput(event: KeyboardEvent): void {
+    const isEnter = event.code.includes('Enter');
+    const isSpace = event.code.includes('Space');
+    if (isEnter || isSpace) {
+      this.handlerOnClickSearchButton();
+    }
+  }
+
   handlerOnClickSearchButton(): void {
     this.emitSearchSubmit();
   }
@@ -69,7 +76,7 @@ export class OsdsSearchBar implements OdsSearchBar<OdsStencilMethods<OdsSearchBa
   }
 
   render() {
-    const hasSelect = this.options?.length;
+    const hasSelect = Boolean(this.options?.length);
 
     return (
       <Host>
@@ -80,7 +87,6 @@ export class OsdsSearchBar implements OdsSearchBar<OdsStencilMethods<OdsSearchBa
             disabled={ this.disabled }>
             { this.options?.map((option) => <osds-select-option value={ option.value }>{ option.label }</osds-select-option>) }
           </osds-select>
-          || ''
         }
 
         <osds-input 
@@ -99,13 +105,7 @@ export class OsdsSearchBar implements OdsSearchBar<OdsStencilMethods<OdsSearchBa
         <osds-button 
           tabindex="2"
           onClick={ () => this.handlerOnClickSearchButton() }
-          onKeyDown={ (event: KeyboardEvent) => {
-            const isEnter = event.code.includes('Enter');
-            const isSpace = event.code.includes('Space');
-            if (isEnter || isSpace) {
-              this.handlerOnClickSearchButton();
-            }
-          }}
+          onKeyDown={ (event: KeyboardEvent) => this.handlerOnKeydownInput(event) }
           size={ OdsButtonSize.sm }
           color={ OdsThemeColorIntent.primary }
           disabled={ this.disabled }

diff --git a/...cil/components/search-bar/src/components/osds-search-bar/styles/osds-search-bar.size.scss b/...cil/components/search-bar/src/components/osds-search-bar/styles/osds-search-bar.size.scss
@@ -4,9 +4,11 @@
 // Main CSS mixin for sizes
 @mixin osds-search-bar-theme-size() {
     :host {
-        width: 654px;
         osds-select {
             width: 30%;
         }
     }
+    :host([flex]) {
+        width: 100%;
+    }     
 }
diff --git a/packages/stencil/components/search-bar/src/index.html b/packages/stencil/components/search-bar/src/index.html
@@ -18,6 +18,9 @@
 <p>SearchBar</p>
 <osds-search-bar></osds-search-bar>
 
+<p>SearchBar Flex</p>
+<osds-search-bar flex></osds-search-bar>
+
 <p>SearchBar with value</p>
 <osds-search-bar value="with value"></osds-search-bar>
 

diff --git a/packages/stencil/components/select/src/components/osds-select/styles/osds-select.size.scss b/packages/stencil/components/select/src/components/osds-select/styles/osds-select.size.scss
@@ -7,7 +7,7 @@
       grid-column-gap: ods-get-size-property($sizes, grid-column-gap);
       height: ods-get-size-property($sizes, height);
       border-width: ods-get-size-property($sizes, border-width);
-      border-right: var(--ods-size-select-border-right, ods-get-size-property($sizes,border-width));
+      border-right-width: var(--ods-size-select-border-right-width, ods-get-size-property($sizes, border-width));
       padding: ods-get-size-property($sizes, padding);
       border-top-left-radius: var(--ods-size-select-border-radius-top-left, ods-get-size-property($sizes, border-radius));
       border-bottom-left-radius: var(--ods-size-select-border-radius-bottom-left, ods-get-size-property($sizes, border-radius));