@snack-uikit/list 0.8.0 → 0.8.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.8.1 (2024-03-19)
+
+
+### Bug Fixes
+
+* **FF-4559:** truncate long group label ([4862a19](https://github.com/cloud-ru-tech/snack-uikit/commit/4862a192452c6e3b735ec0da0218e0af028dc127))
+
+
+
+
+
 # 0.8.0 (2024-03-11)
 
 

package/dist/helperComponents/Separator/Separator.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Divider } from '@snack-uikit/divider';
+import { TruncateString } from '@snack-uikit/truncate-string';
 import styles from './styles.module.css';
 export function Separator({ label, divider, mode = 'secondary', size = 's' }) {
     if (label) {
-        return (_jsxs("div", { className: styles.separatorWithLabel, "data-size": size, children: [_jsx("span", { className: styles.label, "data-mode": mode, children: label }), divider && _jsx(Divider, { weight: mode === 'primary' ? 'regular' : 'light' })] }));
+        return (_jsxs("div", { className: styles.separatorWithLabel, "data-size": size, children: [_jsx("span", { className: styles.label, "data-mode": mode, children: _jsx(TruncateString, { text: label, maxLines: 1 }) }), divider && _jsx(Divider, { weight: mode === 'primary' ? 'regular' : 'light', className: styles.divider })] }));
     }
     if (divider) {
         return (_jsx("div", { className: styles.separatorWithoutLabel, "data-size": size, children: _jsx(Divider, { weight: 'regular' }) }));

package/dist/helperComponents/Separator/styles.module.css

@@ -1,8 +1,11 @@
 .separatorWithLabel{
+  overflow:hidden;
   display:flex;
   gap:var(--dimension-1m, 8px);
   align-items:flex-end;
   box-sizing:border-box;
+  width:100%;
+  min-width:100%;
 }
 .separatorWithLabel[data-size=s]{
   padding-top:var(--space-drop-list-item-s-container-separator-subheader-vertical-padding, 4px);
@@ -102,11 +105,18 @@
 }
 
 .label{
-  flex-shrink:0;
+  overflow:hidden;
+  flex-shrink:1;
 }
 .label[data-mode=primary]{
   color:var(--sys-neutral-text-main, #33333b);
 }
 .label[data-mode=secondary]{
   color:var(--sys-neutral-text-light, #868892);
+}
+
+hr.divider{
+  flex:1;
+  width:auto;
+  min-width:0;
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "List",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -54,5 +54,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "113e80e60c1a5ce1ce6957d48d37a6181991c5fd"
+  "gitHead": "886b294a5276c22c27fe63aaf6f71b0ab3f5e63f"
 }

package/src/helperComponents/Separator/Separator.tsx

@@ -1,4 +1,5 @@
 import { Divider } from '@snack-uikit/divider';
+import { TruncateString } from '@snack-uikit/truncate-string';
 
 import styles from './styles.module.scss';
 
@@ -14,9 +15,10 @@ export function Separator({ label, divider, mode = 'secondary', size = 's' }: Se
     return (
       <div className={styles.separatorWithLabel} data-size={size}>
         <span className={styles.label} data-mode={mode}>
-          {label}
+          <TruncateString text={label} maxLines={1} />
         </span>
-        {divider && <Divider weight={mode === 'primary' ? 'regular' : 'light'} />}
+
+        {divider && <Divider weight={mode === 'primary' ? 'regular' : 'light'} className={styles.divider} />}
       </div>
     );
   }

package/src/helperComponents/Separator/styles.module.scss

@@ -16,10 +16,14 @@ $typography-secondary: (
 );
 
 .separatorWithLabel {
+  overflow: hidden;
   display: flex;
   gap: $dimension-1m;
   align-items: flex-end;
+
   box-sizing: border-box;
+  width: 100%;
+  min-width: 100%;
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {
@@ -51,7 +55,8 @@ $typography-secondary: (
 }
 
 .label {
-  flex-shrink: 0;
+  overflow: hidden;
+  flex-shrink: 1;
 
   &[data-mode='primary'] {
     color: $sys-neutral-text-main;
@@ -61,3 +66,9 @@ $typography-secondary: (
     color: $sys-neutral-text-light;
   }
 }
+
+hr.divider {
+  flex: 1;
+  width: auto;
+  min-width: 0;
+}