fix(button): fix width issue, ellipsis when flex & typo for lg (#16)

Signed-off-by: aurore.stagnol <[email protected]>
ovh · Mar 24, 2023 · bb32708 · bb32708
1 parent bc1b05b
commit bb32708
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 13 deletions.
diff --git a/packages/stencil/components/button/src/components/osds-button/osds-button.scss b/packages/stencil/components/button/src/components/osds-button/osds-button.scss
@@ -15,6 +15,7 @@
   overflow: hidden;
   padding: calc(var(--ods-size-inset-02) + var(--ods-size-inset-02));
   width: var(--width);
+  min-width: 0;
 
   @include osds-button-on-main-element() {
     border-color: transparent;
@@ -28,7 +29,7 @@
     overflow: hidden;
     text-decoration: none;
     transition: all ease-in-out 100ms;
-    width: initial;
+    width: auto;
 
     @include osds-button-on-text-container() {
       align-items: center;
@@ -38,11 +39,8 @@
       grid-template: "start center end" / auto 1fr auto;
       height: 100%;
       justify-content: center;
-      overflow: hidden;
       position: relative;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      width: inherit;
+      max-width: inherit;
     }
   }
 }
@@ -73,12 +71,20 @@
   @include osds-button-on-main-element() {
     width: 100%;
   }
+  @include osds-button-on-text-container {
+    width: inherit;
+  }
+
+  .button__centered-text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-break: break-all;
+  }
 }
 
 slot {
-  display: flex;
-  align-self: center;
-
   &[name="start"] {
     grid-area: start;
     justify-self: start;
@@ -110,10 +116,6 @@ slot {
 
 .button__centered-text {
   grid-area: center;
-  display: flex;
-  place-items: center;
-  justify-self: center;
-  line-height: normal;
 }
 
 // apply the theme template for the component

diff --git a/...s/stencil/components/button/src/components/osds-button/styles/osds-button.typography.scss b/...s/stencil/components/button/src/components/osds-button/styles/osds-button.typography.scss
@@ -9,7 +9,7 @@
 
 @mixin osds-button-theme-typography() {
   /** typography properties */
-  @each $size in ('md','sm') {
+  @each $size in ('md','sm', 'lg') {
     :host([size='#{$size}']) .button__text-container {
       $typography-properties: ods-get-typography-properties(button, '100');
       font-family: ods-get-typography-property($typography-properties, font-family);

diff --git a/packages/stencil/components/button/src/index.html b/packages/stencil/components/button/src/index.html
@@ -50,6 +50,17 @@
 <osds-button square disabled>Square</osds-button>
 <osds-button square size='l' disabled>Square large</osds-button>
 
+<p>Flex</p>
+<osds-button flex>Default</osds-button>
+
+<p>Ellipsis</p>
+<osds-button flex size='lg'>
+  <span slot='start'>start</span>
+  Oles ipsum dolor sit amet, sem platform library data veeam vero quis scripta dicant te massa fuisset
+  signiferumque fringilla mus sodales diam eu mazim kpi mac sociis mi ls nullam cu information aperiri
+  <span slot='end'>end</span>
+</osds-button>
+
 <script>
   document.addEventListener('odsInitialized', ({detail}) => {
     const instance = detail.instance;