Merge pull request #832 from Orfium/fix/NDS-1016_truncated_text_on_st…

…icky_header_table [NDS-1016] fix: truncated text on sticky header table
Orfium · Sep 20, 2024 · df38749 · df38749
2 parents b3fcf2a + 634c0fc
commit df38749
Show file tree

Hide file tree

Showing 14 changed files with 604 additions and 1,855 deletions.
diff --git a/src/__storyshots__/Updated Components/Table/Table/Basics-BasicExample.snap b/src/__storyshots__/Updated Components/Table/Table/Basics-BasicExample.snap
@@ -26,7 +26,7 @@
 }
 
 .emotion-4 {
-  width: 100%;
+  width: 25%;
   height: 2.75rem;
   -webkit-align-content: center;
   -ms-flex-line-pack: center;
@@ -81,7 +81,7 @@
 }
 
 .emotion-18 {
-  width: 100%;
+  width: 25%;
   height: 2.75rem;
   padding: 0.5rem 1rem;
   border-bottom: 0.0625rem solid rgba(200,206,255,0.70);
@@ -92,18 +92,7 @@
 }
 
 .emotion-19 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: flex-start;
-  justify-content: flex-start;
+  text-align: left;
 }
 
 .emotion-20 {
@@ -118,48 +107,6 @@
   text-overflow: ellipsis;
 }
 
-.emotion-29 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 1.5rem;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  box-sizing: border-box;
-  gap: 0.25rem;
-  padding: 0.125rem 0.5rem;
-  cursor: auto;
-  background: #ffffff;
-  color: #194DCC;
-  border: 0.0625rem solid;
-  border-color: rgba(200,206,255,0.70);
-  border-radius: 0.25rem;
-  font-family: Roboto;
-  font-weight: 500;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.emotion-30 {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 <div>
   <div
     class="emotion-0"
@@ -296,19 +243,11 @@
             <div
               class="emotion-19"
             >
-              <div
-                aria-label="Fashion Executive"
-                aria-selected="false"
-                class="emotion-29"
-                data-testid="undefined_tag_container"
-                tabindex="-1"
+              <span
+                class="emotion-20"
               >
-                <div
-                  class="emotion-30"
-                >
-                  Fashion Executive
-                </div>
-              </div>
+                Fashion Executive
+              </span>
             </div>
           </td>
         </tr>
@@ -364,19 +303,11 @@
             <div
               class="emotion-19"
             >
-              <div
-                aria-label="Paleontologist"
-                aria-selected="false"
-                class="emotion-29"
-                data-testid="undefined_tag_container"
-                tabindex="-1"
+              <span
+                class="emotion-20"
               >
-                <div
-                  class="emotion-30"
-                >
-                  Paleontologist
-                </div>
-              </div>
+                Paleontologist
+              </span>
             </div>
           </td>
         </tr>
@@ -432,19 +363,11 @@
             <div
               class="emotion-19"
             >
-              <div
-                aria-label="Chef"
-                aria-selected="false"
-                class="emotion-29"
-                data-testid="undefined_tag_container"
-                tabindex="-1"
+              <span
+                class="emotion-20"
               >
-                <div
-                  class="emotion-30"
-                >
-                  Chef
-                </div>
-              </div>
+                Chef
+              </span>
             </div>
           </td>
         </tr>
@@ -500,19 +423,11 @@
             <div
               class="emotion-19"
             >
-              <div
-                aria-label="?"
-                aria-selected="false"
-                class="emotion-29"
-                data-testid="undefined_tag_container"
-                tabindex="-1"
+              <span
+                class="emotion-20"
               >
-                <div
-                  class="emotion-30"
-                >
-                  ?
-                </div>
-              </div>
+                ?
+              </span>
             </div>
           </td>
         </tr>
@@ -568,19 +483,11 @@
             <div
               class="emotion-19"
             >
-              <div
-                aria-label="Actor"
-                aria-selected="false"
-                class="emotion-29"
-                data-testid="undefined_tag_container"
-                tabindex="-1"
+              <span
+                class="emotion-20"
               >
-                <div
-                  class="emotion-30"
-                >
-                  Actor
-                </div>
-              </div>
+                Actor
+              </span>
             </div>
           </td>
         </tr>
@@ -636,19 +543,11 @@
             <div
               class="emotion-19"
             >
-              <div
-                aria-label="Massage Therapist"
-                aria-selected="false"
-                class="emotion-29"
-                data-testid="undefined_tag_container"
-                tabindex="-1"
+              <span
+                class="emotion-20"
               >
-                <div
-                  class="emotion-30"
-                >
-                  Massage Therapist
-                </div>
-              </div>
+                Massage Therapist
+              </span>
             </div>
           </td>
         </tr>