fix(search-bar): story title + select disabled + button align

ovh · Aug 4, 2023 · 029d392 · 029d392
1 parent 838f284
commit 029d392
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 17 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
@@ -41,6 +41,10 @@
       position: relative;
       max-width: inherit;
     }
+
+    .button__centered-text {
+      display: inline-flex;
+    }
   }
 
   @include osds-button-on-main-element() {

diff --git a/packages-new/components/button/src/index.html b/packages-new/components/button/src/index.html
@@ -17,7 +17,14 @@
 <body>
 
 <p>Size</p>
-<osds-button size='sm'>Small</osds-button>
+<osds-button size='sm'>
+  Small
+  <osds-icon
+    name="plus"
+    size="sm"
+    color="primary"
+  />
+</osds-button>
 <osds-button>Default</osds-button>
 <osds-button size='lg'>Large</osds-button>
 

diff --git a/packages/stencil/components/search-bar/src/index.html b/packages/stencil/components/search-bar/src/index.html
@@ -28,7 +28,7 @@
 <osds-search-bar value="with value" loading></osds-search-bar>
 
 <p>SearchBar with options</p>
-<osds-search-bar id="search-bar-options" value="with value"></osds-search-bar>
+<osds-search-bar disabled id="search-bar-options" value="with value"></osds-search-bar>
 
 <p>SearchBar disabled</p>
 <osds-search-bar disabled></osds-search-bar>

diff --git a/packages/stencil/components/select/src/components/osds-select/osds-select.scss b/packages/stencil/components/select/src/components/osds-select/osds-select.scss
@@ -16,12 +16,6 @@
   cursor: pointer;
   text-align: left;
 
-  &[disabled] {
-    .select-trigger {
-      opacity: 0.5;
-    }
-  }
-
   .select-trigger {
     align-items: center;
     border-style: solid;
@@ -63,7 +57,6 @@
   @include osds-select-on-selected-host() {
     opacity: .5;
     cursor: not-allowed;
-    pointer-events: none;
   }
 }
 

diff --git a/packages/stencil/components/select/src/components/osds-select/styles/osds-select.color.scss b/packages/stencil/components/select/src/components/osds-select/styles/osds-select.color.scss
@@ -42,11 +42,12 @@
     }
   }
 
-  /** disabled colors */
-  [disabled],
-  [disabled]:focus {
-    @include osds-select-on-selected-host() {
-      opacity: .5;
+  :host([disabled]),
+  :host([disabled]:focus) {
+    .select-trigger {
+      &:hover {
+        background-color: inherit;
+      }
     }
   }
 

diff --git a/...s/storybook/stories/components/search-bar/search-bar.specifications.stories.mdx b/...s/storybook/stories/components/search-bar/search-bar.specifications.stories.mdx
@@ -2,7 +2,7 @@ import { Meta } from '@storybook/addon-docs';
 import SpecificationsSearchBar from '@ovhcloud/ods-specifications/components/search-bar/specifications-search-bar.mdx';
 import Notes from '../notes.mdx';
 
-<Meta title="UI Components/SearchBar [atom]/Specifications" />
+<Meta title="UI Components/Search Bar [atom]/Specifications" />
 
 # SearchBar - Technical Specification
 ----

diff --git a/...orybook/stories/components/search-bar/search-bar.web-component.stories.page.mdx b/...orybook/stories/components/search-bar/search-bar.web-component.stories.page.mdx
@@ -3,7 +3,7 @@ import { Canvas, Description, Meta, DocsContainer } from '@storybook/addon-docs'
 import Usage from '@ovhcloud/ods-stencil-search-bar/src/docs/osds-search-bar/usage.mdx';
 import APITable from '@ovhcloud/ods-stencil-search-bar/dist/docs/components/osds-search-bar/readme.md';
 
-<Meta title="UI Components/️SearchBar [atom]/Web Component" />
+<Meta title="UI Components/️Search Bar [atom]/Web Component" />
 
 # `<osds-search-bar>`
 

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
@@ -49,7 +49,7 @@ const selectParams = {
 }
 
 export default {
-  title: 'UI Components/SearchBar [atom]/Web Component',
+  title: 'UI Components/Search Bar [atom]/Web Component',
   parameters: {
     notes: {
       API: iframe('/stencil-search-bar/modules/index.html'),