fix(button): vertical align + test disabled

ovh · Aug 31, 2023 · 268eeb2 · 268eeb2
1 parent b53033f
commit 268eeb2
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 6 deletions.
diff --git a/packages-new/components/button/src/components/osds-button/core/controller.ts b/packages-new/components/button/src/components/osds-button/core/controller.ts
@@ -71,7 +71,7 @@ class OdsButtonController {
    * Checking if the button is in a form to add the form submit behaviour on it
    */
   private submitForm(event: MouseEvent | KeyboardEvent) {
-    if (this.component.type && this.component.type === "submit") {
+    if (this.component.type && this.component.type === "submit" && !this.component.disabled) {
       const form = (event.target as HTMLElement).closest("form");
       if (form) {
         event.preventDefault();

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
@@ -51,11 +51,13 @@
   }
 
   .button__centered-text {
-    min-width: 0;
+    grid-area: center;
+    min-width: 0;    
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     word-break: break-all;
+    --ods-icon-vertical-align: bottom;
   }
 }
 
@@ -114,10 +116,6 @@ slot {
   display: none;
 }
 
-.button__centered-text {
-  grid-area: center;
-}
-
 // apply the theme template for the component
 @include ods-theme-component() {
   @include osds-button-theme-color();

diff --git a/packages-new/components/button/src/index.html b/packages-new/components/button/src/index.html
@@ -28,6 +28,18 @@
 <osds-button>Default</osds-button>
 <osds-button size='lg'>Large</osds-button>
 
+<p>Vertical Align</p>
+<osds-button>
+  <span slot="start"><osds-icon name="close" contrasted="" size="sm" aria-hidden="" alt="" aria-name="" color="default" class="hydrated"></osds-icon><!----></span>
+    <osds-icon name="close" contrasted="" size="sm" aria-hidden="" alt="" aria-name="" color="default" class="hydrated"></osds-icon>
+  <span slot="end"><osds-icon name="close" contrasted="" size="sm" aria-hidden="" alt="" aria-name="" color="default" class="hydrated"></osds-icon><!----></span> 
+</osds-button>
+<osds-button inline>
+  <span slot="start"><osds-icon name="close" contrasted="" size="sm" aria-hidden="" alt="" aria-name="" color="default" class="hydrated"></osds-icon><!----></span>
+  <osds-icon name="close" contrasted="" size="sm" aria-hidden="" alt="" aria-name="" color="default" class="hydrated"></osds-icon>
+  <span slot="end"><osds-icon name="close" contrasted="" size="sm" aria-hidden="" alt="" aria-name="" color="default" class="hydrated"></osds-icon><!----></span> 
+</osds-button>
+
 <p>Variant</p>
 <osds-button variant='ghost'>Ghost</osds-button>
 <osds-button variant='stroked'>Primary</osds-button>
@@ -95,6 +107,16 @@
 <p>Inline</p>
 <osds-button inline>Default</osds-button>
 
+<p>InlineWith Icon</p>
+<osds-button inline>
+  Default
+  <osds-icon
+    name="plus"
+    size="sm"
+    color="primary"
+  />
+</osds-button>
+
 <p>Ellipsis</p>
 <osds-button size='lg'>
   <span slot='start'>start</span>