@snack-uikit/status 0.8.8 → 0.10.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.10.0 (2025-07-18)
+
+
+### Features
+
+* **VMWDEV-2607:** add prop for always show badge ([4076c9b](https://github.com/cloud-ru-tech/snack-uikit/commit/4076c9bb0c5f7c376cb138fee236751c58a02e6a))
+
+
+
+
+
+# 0.9.0 (2025-07-17)
+
+
+### Features
+
+* **MC-00:** truncate status label ([06989bf](https://github.com/cloud-ru-tech/snack-uikit/commit/06989bf5fd33b73b543fb3a0b8b55603c0ecbe96))
+
+
+
+
+
 ## 0.8.8 (2025-07-16)
 
 ### Only dependencies have been changed

package/dist/cjs/components/Status/Status.js

@@ -25,6 +25,7 @@ const constants_1 = require("../../constants");
 const StatusIndicator_1 = require("../StatusIndicator");
 const constants_2 = require("./constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const truncate_string_1 = require("@snack-uikit/truncate-string");
 function Status(_a) {
   var {
       label,
@@ -46,9 +47,12 @@ function Status(_a) {
     }) : (0, jsx_runtime_1.jsx)(StatusIndicator_1.StatusIndicator, {
       appearance: appearance,
       size: constants_2.STATUS_INDICATOR_SIZE_MAP[size]
-    }), (0, jsx_runtime_1.jsx)("span", {
+    }), (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
+      text: label,
+      maxLines: 1,
       className: styles_module_scss_1.default.label,
-      children: label
+      "data-test-id": 'status__title',
+      "data-size": size
     })]
   }));
 }

package/dist/cjs/components/Status/styles.module.css

@@ -1,6 +1,7 @@
 .container{
   display:inline-flex;
   align-items:center;
+  max-width:100%;
 }
 .container[data-has-background][data-appearance=primary]{
   background-color:var(--sys-primary-decor-default, #ebdefd);

package/dist/esm/components/Status/Status.js

@@ -17,7 +17,8 @@ import { APPEARANCE } from '../../constants';
 import { StatusIndicator } from '../StatusIndicator';
 import { LOADER_SIZE_MAP, SIZE, STATUS_INDICATOR_SIZE_MAP } from './constants';
 import styles from './styles.module.css';
+import { TruncateString } from '@snack-uikit/truncate-string';
 export function Status(_a) {
     var { label, size = SIZE.Xs, appearance = APPEARANCE.Primary, hasBackground, loading, className } = _a, rest = __rest(_a, ["label", "size", "appearance", "hasBackground", "loading", "className"]);
-    return (_jsxs("div", Object.assign({ className: cn(styles.container, className) }, extractSupportProps(rest), { "data-size": size, "data-has-background": hasBackground || undefined, "data-appearance": loading ? APPEARANCE.Neutral : appearance, children: [loading ? (_jsx(Spinner, { size: LOADER_SIZE_MAP[size] })) : (_jsx(StatusIndicator, { appearance: appearance, size: STATUS_INDICATOR_SIZE_MAP[size] })), _jsx("span", { className: styles.label, children: label })] })));
+    return (_jsxs("div", Object.assign({ className: cn(styles.container, className) }, extractSupportProps(rest), { "data-size": size, "data-has-background": hasBackground || undefined, "data-appearance": loading ? APPEARANCE.Neutral : appearance, children: [loading ? (_jsx(Spinner, { size: LOADER_SIZE_MAP[size] })) : (_jsx(StatusIndicator, { appearance: appearance, size: STATUS_INDICATOR_SIZE_MAP[size] })), _jsx(TruncateString, { text: label, maxLines: 1, className: styles.label, "data-test-id": 'status__title', "data-size": size })] })));
 }

package/dist/esm/components/Status/styles.module.css

@@ -1,6 +1,7 @@
 .container{
   display:inline-flex;
   align-items:center;
+  max-width:100%;
 }
 .container[data-has-background][data-appearance=primary]{
   background-color:var(--sys-primary-decor-default, #ebdefd);

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Status",
-  "version": "0.8.8",
+  "version": "0.10.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -37,8 +37,9 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/loaders": "0.9.8",
+    "@snack-uikit/truncate-string": "0.7.0",
     "@snack-uikit/utils": "3.10.1",
     "classnames": "2.5.1"
   },
-  "gitHead": "2871794a46212ecbb3bc0002d7d8912310643332"
+  "gitHead": "93f66a95830871b0c0c29d43d6d9c28488a4c10a"
 }

package/src/components/Status/Status.tsx

@@ -9,6 +9,7 @@ import { StatusIndicator } from '../StatusIndicator';
 import { LOADER_SIZE_MAP, SIZE, STATUS_INDICATOR_SIZE_MAP } from './constants';
 import styles from './styles.module.scss';
 import { Size } from './types';
+import { TruncateString } from '@snack-uikit/truncate-string';
 
 export type StatusProps = WithSupportProps<{
   /** Текст */
@@ -45,7 +46,13 @@ export function Status({
       ) : (
         <StatusIndicator appearance={appearance} size={STATUS_INDICATOR_SIZE_MAP[size]} />
       )}
-      <span className={styles.label}>{label}</span>
+      <TruncateString
+        text={label}
+        maxLines={1}
+        className={styles.label}
+        data-test-id='status__title'
+        data-size={size}
+      />
     </div>
   );
 }

package/src/components/Status/styles.module.scss

@@ -10,12 +10,13 @@ $appearances: 'primary', 'neutral', 'red', 'orange', 'blue', 'violet', 'pink', '
 .container {
   display: inline-flex;
   align-items: center;
+  max-width: 100%;
 
   &[data-has-background] {
     @each $appearance in $appearances {
       &[data-appearance='#{$appearance}'] {
         background-color: styles-tokens-status.simple-var(styles-tokens-status.$theme-variables, 'sys', $appearance, 'decor-default');
-  
+
         .label {
           color: styles-tokens-status.simple-var(styles-tokens-status.$theme-variables, 'sys', $appearance, 'text-support')
         }
@@ -42,4 +43,4 @@ $appearances: 'primary', 'neutral', 'red', 'orange', 'blue', 'violet', 'pink', '
 
 .label {
   color: styles-tokens-status.$sys-neutral-text-support;
-}
+}