fix: split button overflow (#1975)

* fix: split button overflow * fix: add mixin * fix: tests * fix: change classname and put in span * fix: add namespace * fix: self contained * update storyshot Co-authored-by: Mike O'Donnell <mikerodonnell89@users.noreply.github.com>
SAP · Jan 11, 2021 · 138e766 · 138e766
1 parent 42f56ff
commit 138e766
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 11 deletions.
diff --git a/src/button-split.scss b/src/button-split.scss
@@ -76,4 +76,73 @@ $fd-button-split-margin: 0.125rem / 2;
       }
     }
   }
+
+  & > :first-child {
+    &:hover {
+      .#{$block}__text {
+        color: var(--sapButton_TextColor);
+      }
+    }
+
+    &:active {
+
+      .#{$block}__text {
+        color: var(--sapButton_Selected_TextColor);
+      }
+    }
+  }
+
+  &--emphasized {
+    > [class*="--emphasized"] {
+      & > .#{$block}__text {
+        color: var(--sapButton_Emphasized_TextColor);
+        font-weight: bold;
+      }
+
+      &:hover {
+        & > .#{$block}__text {
+          color: var(--sapButton_Emphasized_Hover_TextColor);
+        }
+      }
+
+      &:active {
+        & > .#{$block}__text {
+          color: var(--sapButton_Selected_TextColor);
+        }
+      }
+    }
+  }
+
+  &--transparent {
+    > [class*="--transparent"] {
+      & > .#{$block}__text {
+        color: var(--sapButton_TextColor);
+      }
+
+      &:hover {
+        & > .#{$block}__text {
+          color: var(--sapButton_TextColor);
+        }
+      }
+
+      &:active {
+        & > .#{$block}__text {
+          color: var(--sapButton_Selected_TextColor);
+        }
+      }
+    }
+  }
+
+  .#{$block}__text {
+    @include fd-reset();
+    @include fd-ellipsis();
+
+    color: var(--sapButton_TextColor);
+    max-width: 9.75rem;
+    display: block;
+
+    &--compact {
+      max-width: 10rem;
+    }
+  }
 }
diff --git a/stories/button/__snapshots__/button.stories.storyshot b/stories/button/__snapshots__/button.stories.storyshot
@@ -1429,7 +1429,15 @@ exports[`Storyshots Components/Button Split menu button 1`] = `
       aria-label="button"
       class="fd-button"
     >
-      Button with text
+
+
+      <span
+        class="fd-button-split__text"
+      >
+        Button with a big amount of text
+      </span>
+
+
     </button>
 
 
@@ -1528,7 +1536,7 @@ exports[`Storyshots Components/Button Split menu button 1`] = `
 
   <div
     aria-label="button-split"
-    class="fd-button-split"
+    class="fd-button-split fd-button-split--emphasized"
     role="group"
   >
 
@@ -1537,7 +1545,15 @@ exports[`Storyshots Components/Button Split menu button 1`] = `
       aria-label="button"
       class="fd-button fd-button--emphasized"
     >
-      Button with text
+
+
+      <span
+        class="fd-button-split__text"
+      >
+        Button with text
+      </span>
+
+
     </button>
 
 
@@ -1637,7 +1653,7 @@ exports[`Storyshots Components/Button Split menu button 1`] = `
 
   <div
     aria-label="button-split"
-    class="fd-button-split"
+    class="fd-button-split fd-button-split--transparent"
     role="group"
   >
 
@@ -1646,7 +1662,17 @@ exports[`Storyshots Components/Button Split menu button 1`] = `
       aria-label="button"
       class="fd-button fd-button--transparent"
     >
-      Button with text
+
+
+      <span
+        class="fd-button-split__text"
+      >
+
+        Button with text
+
+      </span>
+
+
     </button>
 
 

diff --git a/stories/button/button.stories.js b/stories/button/button.stories.js
@@ -19,7 +19,7 @@ export default {
 
 - You want to link to a different page or object. Instead, use the **Link** component.
 `,
-        components: ['popover', 'segmented-button', 'menu', 'icon', 'button-split', 'button']
+        components: ['popover', 'segmented-button', 'menu', 'icon', 'button', 'button-split']
     }
 };
 
@@ -284,7 +284,9 @@ menuButton.parameters = {
 
 export const splitMenuButton = () => `
 <div class="fd-button-split fd-has-margin-right-small" role="group" aria-label="button-split">
-  <button class="fd-button" aria-label="button">Button with text</button>
+  <button class="fd-button" aria-label="button">
+    <span class="fd-button-split__text">Button with a big amount of text</span>
+  </button>
   <button class="fd-button" aria-controls="t4c0o273" aria-haspopup="true" aria-expanded="false" aria-label="More"><i class="sap-icon--slim-arrow-down"></i></button>
   <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right"  aria-hidden="true" 
   id="t4c0o273">
@@ -305,8 +307,10 @@ export const splitMenuButton = () => `
   </div>
 </div>
 
-<div class="fd-button-split" role="group" aria-label="button-split">
-  <button class="fd-button fd-button--emphasized" aria-label="button">Button with text</button>
+<div class="fd-button-split fd-button-split--emphasized" role="group" aria-label="button-split">
+  <button class="fd-button fd-button--emphasized" aria-label="button">
+    <span class="fd-button-split__text">Button with text</span>
+  </button>
   <button class="fd-button fd-button--emphasized" aria-controls="t4c0o2732" 
   aria-haspopup="true" aria-expanded="false" aria-label="More"><i class="sap-icon--slim-arrow-down"></i></button>
 
@@ -329,8 +333,12 @@ export const splitMenuButton = () => `
   </div>
 </div>
 
-<div class="fd-button-split" role="group" aria-label="button-split">
-  <button class="fd-button fd-button--transparent" aria-label="button">Button with text</button>
+<div class="fd-button-split fd-button-split--transparent" role="group" aria-label="button-split">
+  <button class="fd-button fd-button--transparent" aria-label="button">
+    <span class="fd-button-split__text">
+        Button with text
+    </span>
+ </button>
   <button class="fd-button fd-button--transparent" aria-controls="t4c0o27322" aria-haspopup="true" aria-expanded="false" aria-label="More"><i class="sap-icon--slim-arrow-down"></i></button>
   <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right"  aria-hidden="true" 
     id="t4c0o27322">