fix(Banner): styles (#1022)

Author: tenphi

.changeset/fix-banner-description-styles.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Fixed Banner component description text styling by correcting the style selector from `Label` to `Description`. Improved display style system to respect user-provided `whiteSpace` prop, allowing it to override default white-space values set by `textOverflow`.

.cursor/rules/changeset.mdc .cursor/commands/add-changeset.md.cursor/rules/changeset.mdc renamed to .cursor/commands/add-changeset.md

@@ -1,9 +1,6 @@
----
-description: When user asked to add a changeset
-alwaysApply: false
----
+# add-changeset
 
-Add changeset manually. Place the changeset in the `/.changeset` folder.
+Add changeset manually (direct edit / without cli commands). Place the changeset in the `/.changeset` folder.
 
 ## Version Selection
 - Use `patch` for bug fixes and small changes (even with minor breaking changes)
@@ -14,6 +11,8 @@ Add changeset manually. Place the changeset in the `/.changeset` folder.
   1. Diff introduced in the current chat session
   2. Diff of the working tree (if chat diff is empty)
   3. Diff with the `main` branch (if working tree is empty)
+- Check other changesets in case they can be edited instead of creating a new one
+- Add several changesets instead of one if it makes sense
 - Keep the changeset concise and user-focused
 - Only document changes that affect end users or the public API
 - Exclude fixes for issues that were introduced and resolved within the same PR (internal corrections during development)

src/components/actions/Banner/Banner.stories.tsx

@@ -121,3 +121,19 @@ CustomIcon.args = {
   icon: <IconBell />,
   isDismissible: true,
 };
+
+/**
+ * Shows the `description` prop with a long description that overflows.
+ * Narrow width triggers text truncation with ellipsis after two lines.
+ */
+export const WithDescription: StoryFn<BannerProps> = () => {
+  return (
+    <Banner
+      theme="note"
+      width="300px"
+      description="This is an extended description that spans multiple lines to demonstrate text overflow behavior. When the banner container has limited width, the description should show ellipsis after two lines."
+    >
+      Payment method expiring soon
+    </Banner>
+  );
+};

src/components/actions/Banner/Banner.tsx

@@ -48,9 +48,9 @@ const BannerElement = tasty(Item, {
   styles: {
     width: '100%',
 
-    Label: {
+    Description: {
       textOverflow: 'ellipsis / 2',
-      textWrap: 'initial',
+      whiteSpace: 'normal',
     },
 
     Actions: {

src/tasty/styles/display.test.ts

@@ -74,6 +74,7 @@ describe('displayStyle', () => {
       expect(result).toEqual({
         overflow: 'hidden',
         'text-overflow': 'ellipsis',
+        'white-space': 'initial',
         display: '-webkit-box',
         '-webkit-box-orient': 'vertical',
         '-webkit-line-clamp': 2,
@@ -86,6 +87,7 @@ describe('displayStyle', () => {
       expect(result).toEqual({
         overflow: 'hidden',
         'text-overflow': 'ellipsis',
+        'white-space': 'initial',
         display: '-webkit-box',
         '-webkit-box-orient': 'vertical',
         '-webkit-line-clamp': 3,
@@ -98,6 +100,7 @@ describe('displayStyle', () => {
       expect(result).toEqual({
         overflow: 'hidden',
         'text-overflow': 'clip',
+        'white-space': 'initial',
         display: '-webkit-box',
         '-webkit-box-orient': 'vertical',
         '-webkit-line-clamp': 2,
@@ -132,12 +135,12 @@ describe('displayStyle', () => {
       expect(result!['overflow']).toBe('hidden');
     });
 
-    it('textOverflow white-space takes precedence over user whiteSpace', () => {
+    it('user whiteSpace overrides textOverflow default white-space', () => {
       const result = displayStyle({
         textOverflow: 'ellipsis',
         whiteSpace: 'pre-wrap',
       });
-      expect(result!['white-space']).toBe('nowrap');
+      expect(result!['white-space']).toBe('pre-wrap');
     });
 
     it('multi-line textOverflow display takes precedence over user display', () => {
@@ -166,6 +169,14 @@ describe('displayStyle', () => {
       expect(result!['display']).toBe('flex');
     });
 
+    it('user whiteSpace overrides multi-line textOverflow default white-space', () => {
+      const result = displayStyle({
+        textOverflow: 'ellipsis / 2',
+        whiteSpace: 'pre-wrap',
+      });
+      expect(result!['white-space']).toBe('pre-wrap');
+    });
+
     it('preserves user overflow when textOverflow is reset', () => {
       const result = displayStyle({
         textOverflow: true,

src/tasty/styles/display.ts

@@ -21,7 +21,8 @@ interface DisplayStyleProps {
  * Priority:
  * 1. `hide` takes precedence (display: none)
  * 2. Multi-line `textOverflow` forces display: -webkit-box
- * 3. Single-line `textOverflow` forces white-space: nowrap and overflow: hidden
+ * 3. Single-line `textOverflow` defaults white-space to nowrap, multi-line defaults to initial
+ * 4. Explicit `whiteSpace` overrides the default white-space from `textOverflow`
  */
 export function displayStyle({
   display,
@@ -63,12 +64,13 @@ export function displayStyle({
           result['text-overflow'] = hasEllipsis ? 'ellipsis' : 'clip';
 
           if (clamp === 1) {
-            result['white-space'] = 'nowrap';
+            result['white-space'] = whiteSpace || 'nowrap';
           } else {
             result['display'] = '-webkit-box';
             result['-webkit-box-orient'] = 'vertical';
             result['-webkit-line-clamp'] = clamp;
             result['line-clamp'] = clamp;
+            result['white-space'] = whiteSpace || 'initial';
           }
         }
       }