feat(Item): clamp composite bar item (#342)

* feat(Item): moved action title margin to base [#342] * chore(AsideHeader): updated visual tests [#342] * feat(Item): wrapped title text in 2 lines [#342] * chore(AsideHeader): updated visual tests w/ 2 title lines [#342] * chore(AsideHeader): added line clamp visual test [#342] --------- Co-authored-by: Vladimir Kubantsev <[email protected]>
gravity-ui · Jan 14, 2025 · 9e71cad · 9e71cad
1 parent 95e7100
commit 9e71cad
Show file tree

Hide file tree

Showing 26 changed files with 16 additions and 6 deletions.
diff --git a/...tsx-snapshots/AsideHeader-render-story-CustomBackground-dark-chromium-linux.png b/...tsx-snapshots/AsideHeader-render-story-CustomBackground-dark-chromium-linux.png
diff --git a/...t.tsx-snapshots/AsideHeader-render-story-CustomBackground-dark-webkit-linux.png b/...t.tsx-snapshots/AsideHeader-render-story-CustomBackground-dark-webkit-linux.png
diff --git a/...sx-snapshots/AsideHeader-render-story-CustomBackground-light-chromium-linux.png b/...sx-snapshots/AsideHeader-render-story-CustomBackground-light-chromium-linux.png
diff --git a/....tsx-snapshots/AsideHeader-render-story-CustomBackground-light-webkit-linux.png b/....tsx-snapshots/AsideHeader-render-story-CustomBackground-light-webkit-linux.png
diff --git a/...test.tsx-snapshots/AsideHeader-render-story-CustomTheme-dark-chromium-linux.png b/...test.tsx-snapshots/AsideHeader-render-story-CustomTheme-dark-chromium-linux.png
diff --git a/...l.test.tsx-snapshots/AsideHeader-render-story-CustomTheme-dark-webkit-linux.png b/...l.test.tsx-snapshots/AsideHeader-render-story-CustomTheme-dark-webkit-linux.png
diff --git a/...est.tsx-snapshots/AsideHeader-render-story-CustomTheme-light-chromium-linux.png b/...est.tsx-snapshots/AsideHeader-render-story-CustomTheme-light-chromium-linux.png
diff --git a/....test.tsx-snapshots/AsideHeader-render-story-CustomTheme-light-webkit-linux.png b/....test.tsx-snapshots/AsideHeader-render-story-CustomTheme-light-webkit-linux.png
diff --git a/...test.tsx-snapshots/AsideHeader-render-story-HeaderAlert-dark-chromium-linux.png b/...test.tsx-snapshots/AsideHeader-render-story-HeaderAlert-dark-chromium-linux.png
diff --git a/...l.test.tsx-snapshots/AsideHeader-render-story-HeaderAlert-dark-webkit-linux.png b/...l.test.tsx-snapshots/AsideHeader-render-story-HeaderAlert-dark-webkit-linux.png
diff --git a/...est.tsx-snapshots/AsideHeader-render-story-HeaderAlert-light-chromium-linux.png b/...est.tsx-snapshots/AsideHeader-render-story-HeaderAlert-light-chromium-linux.png
diff --git a/....test.tsx-snapshots/AsideHeader-render-story-HeaderAlert-light-webkit-linux.png b/....test.tsx-snapshots/AsideHeader-render-story-HeaderAlert-light-webkit-linux.png
diff --git a/...-snapshots/AsideHeader-render-story-HeaderAlertCentered-dark-chromium-linux.png b/...-snapshots/AsideHeader-render-story-HeaderAlertCentered-dark-chromium-linux.png
diff --git a/...sx-snapshots/AsideHeader-render-story-HeaderAlertCentered-dark-webkit-linux.png b/...sx-snapshots/AsideHeader-render-story-HeaderAlertCentered-dark-webkit-linux.png
diff --git a/...snapshots/AsideHeader-render-story-HeaderAlertCentered-light-chromium-linux.png b/...snapshots/AsideHeader-render-story-HeaderAlertCentered-light-chromium-linux.png
diff --git a/...x-snapshots/AsideHeader-render-story-HeaderAlertCentered-light-webkit-linux.png b/...x-snapshots/AsideHeader-render-story-HeaderAlertCentered-light-webkit-linux.png
diff --git a/...l.test.tsx-snapshots/AsideHeader-render-story-LineClamp-dark-chromium-linux.png b/...l.test.tsx-snapshots/AsideHeader-render-story-LineClamp-dark-chromium-linux.png
diff --git a/...ual.test.tsx-snapshots/AsideHeader-render-story-LineClamp-dark-webkit-linux.png b/...ual.test.tsx-snapshots/AsideHeader-render-story-LineClamp-dark-webkit-linux.png
diff --git a/....test.tsx-snapshots/AsideHeader-render-story-LineClamp-light-chromium-linux.png b/....test.tsx-snapshots/AsideHeader-render-story-LineClamp-light-chromium-linux.png
diff --git a/...al.test.tsx-snapshots/AsideHeader-render-story-LineClamp-light-webkit-linux.png b/...al.test.tsx-snapshots/AsideHeader-render-story-LineClamp-light-webkit-linux.png
diff --git a/...al.test.tsx-snapshots/AsideHeader-render-story-Showcase-dark-chromium-linux.png b/...al.test.tsx-snapshots/AsideHeader-render-story-Showcase-dark-chromium-linux.png
diff --git a/...sual.test.tsx-snapshots/AsideHeader-render-story-Showcase-dark-webkit-linux.png b/...sual.test.tsx-snapshots/AsideHeader-render-story-Showcase-dark-webkit-linux.png
diff --git a/...l.test.tsx-snapshots/AsideHeader-render-story-Showcase-light-chromium-linux.png b/...l.test.tsx-snapshots/AsideHeader-render-story-Showcase-light-chromium-linux.png
diff --git a/...ual.test.tsx-snapshots/AsideHeader-render-story-Showcase-light-webkit-linux.png b/...ual.test.tsx-snapshots/AsideHeader-render-story-Showcase-light-webkit-linux.png
diff --git a/src/components/AsideHeader/__tests__/AsideHeader.visual.test.tsx b/src/components/AsideHeader/__tests__/AsideHeader.visual.test.tsx
@@ -85,4 +85,13 @@ test.describe('AsideHeader', () => {
 
         await expectScreenshot();
     });
+
+    test('render story: <LineClamp>', async ({mount, expectScreenshot}) => {
+        await mount(<AsideHeaderStories.LineClamp />, undefined, {
+            width: 1200,
+            height: 720,
+        });
+
+        await expectScreenshot();
+    });
 });
diff --git a/src/components/CompositeBar/Item/Item.scss b/src/components/CompositeBar/Item/Item.scss
@@ -72,12 +72,17 @@ $block: '.#{variables.$ns}composite-bar-item';
 
     &__title {
         display: flex;
+        align-items: center;
         overflow: hidden;
+        margin-right: 16px;
     }
 
     &__title-text {
-        white-space: nowrap;
-        text-overflow: ellipsis;
+        /* stylelint-disable-next-line value-no-vendor-prefix */
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        /* NOTE @vladimir-kuba: 2 lines fits in container height, more lines leads overflow container */
+        -webkit-line-clamp: 2;
         overflow: hidden;
 
         color: var(--gn-aside-header-item-text-color, var(--_--item-text-color));
@@ -181,10 +186,6 @@ $block: '.#{variables.$ns}composite-bar-item';
         & #{$class}__icon-place {
             width: var(--gn-composite-bar-item-action-size);
         }
-
-        & #{$class}__title {
-            margin-right: 16px;
-        }
     }
 
     &__icon-tooltip_item-type_action {