fix(styles): add fix for Label truncation in Progress Indicator [ci v…

…isual]
SAP · Jun 22, 2023 · eb8b110 · eb8b110
1 parent 320a816
commit eb8b110
Show file tree

Hide file tree

Showing 3 changed files with 1,530 additions and 321 deletions.
diff --git a/packages/styles/src/progress-indicator.scss b/packages/styles/src/progress-indicator.scss
@@ -65,6 +65,7 @@ $fd-progress-indicator-states: (
 
   &.#{$fd-namespace}-popover {
     margin: var(--rootMargin);
+    cursor: pointer;
   }
 
   &--mobile {
@@ -92,7 +93,7 @@ $fd-progress-indicator-states: (
     }
   }
 
-  &__container {
+  .#{$block}__container {
     @include fd-reset();
     @include fd-flex();
 
@@ -151,18 +152,12 @@ $fd-progress-indicator-states: (
       justify-content: flex-end;
     }
 
-    @include fd-progress-indicator-popover-control() {
-      border: var(--fdProgress_Indicator_Progress_Bar_Popover_Control_Border, 0 solid) var(--progressBarBorderColor);
-      position: var(--fdProgress_Indicator_Progress_Bar_Position, relative);
-    }
-
     height: var(--fdProgress_Indicator_Progress_Bar_Height);
     margin: var(--fdProgress_Indicator_Progress_Bar_Margin);
     border: var(--fdProgress_Indicator_Progress_Bar_Border) var(--progressBarBorderColor);
     border-right: var(--fdProgress_Indicator_Border_Right) var(--progressBarBorderRightColor);
     border-radius: var(--fdProgress_Indicator_Progress_Bar_Border_Radius);
     background: var(--progressBarBackground);
-    position: var(--fdProgress_Indicator_Progress_Bar_Position, static);
     left: var(--fdProgress_Indicator_Progress_Bar_Position_Left);
     bottom: var(--fdProgress_Indicator_Progress_Bar_Position_Bottom);
 
@@ -179,7 +174,7 @@ $fd-progress-indicator-states: (
     }
   }
 
-  &__remaining {
+  .#{$block}__remaining {
     @include fd-reset();
 
     @include fd-flex() {
@@ -190,6 +185,8 @@ $fd-progress-indicator-states: (
       flex-grow: 1;
       min-width: 0;
     }
+
+    position: static;
   }
 
   &__icon {

diff --git a/packages/styles/stories/Components/progress-indicator/truncation.example.html b/packages/styles/stories/Components/progress-indicator/truncation.example.html
@@ -1,11 +1,11 @@
 <div style="width: 400px; margin: auto;">
     <div class="fd-progress-indicator fd-popover" tabindex="-1" role="progressbar" aria-valuemin="0" aria-valuenow="70" aria-valuemax="100" aria-valuetext="In cases where the label is being truncated a small popover appears on click." aria-label="Progress Indicator">
-        <div class="fd-progress-indicator__container">
-            <div class="fd-progress-indicator__progress-bar fd-popover__control" style="min-width: 70%; width: 70%;" onclick="onPopoverClick('popoverF0')">
+        <div class="fd-progress-indicator__container fd-popover__control" onclick="onPopoverClick('popoverF0')">
+            <div class="fd-progress-indicator__progress-bar" style="min-width: 70%; width: 70%;">
                 <span class="fd-progress-indicator__label">In cases where the label is being truncated a small popover appears on click.</span>
             </div>
-            <div class="fd-progress-indicator__remaining"></div>
-            <div class="fd-popover__body" aria-hidden="false" id="popoverF0">
+            <div class="fd-progress-indicator__remaining" ></div>
+            <div class="fd-popover__body fd-popover__body--arrow-x-center" aria-hidden="false" id="popoverF0">
                 <div class="fd-popover__wrapper">
                     <div class="fd-progress-indicator__overflow">
                         <span>In cases where the label is being truncated a small popover appears on click.</span>
@@ -21,13 +21,13 @@
     <div style="margin-bottom: 5rem"></div>
 
     <div class="fd-progress-indicator fd-popover" tabindex="-1" role="progressbar" aria-valuemin="0" aria-valuenow="70" aria-valuemax="100" aria-valuetext="In cases where the label is being truncated a small popover appears on click." aria-label="Progress Indicator">
-        <div class="fd-progress-indicator__container">
+        <div class="fd-progress-indicator__container fd-popover__control" onclick="onPopoverClick('popoverF1')">
             <div class="fd-progress-indicator__progress-bar" style="min-width: 30%; width: 30%;">
             </div>
-            <div class="fd-progress-indicator__remaining fd-popover__control" onclick="onPopoverClick('popoverF1')">
+            <div class="fd-progress-indicator__remaining">
                 <span class="fd-progress-indicator__label">In cases where the label is being truncated a small popover appears on click.</span>
             </div>
-            <div class="fd-popover__body fd-popover__body--right" aria-hidden="false" id="popoverF1">
+            <div class="fd-popover__body fd-popover__body--arrow-x-center" aria-hidden="false" id="popoverF1">
                 <div class="fd-popover__wrapper">
                     <div class="fd-progress-indicator__overflow">
                         <span>In cases where the label is being truncated a small popover appears on click.</span>