@iress-oss/ids-components 6.0.0-alpha.44 → 6.0.0-alpha.45

package/.ai/components/tag.md

@@ -27,10 +27,42 @@ Use tags for **categorization and selection** where users need to interact with
 
 Tags are **interactive** - they can be clicked and deleted by users.
 
-**Not sure?** If you need to display status or highlight information without user interaction, use [Badge](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-badge--docs) instead.
+**Not sure?** If you need to display status or highlight information without user interaction, use [Pill](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-pill--docs) instead.
 
 ## Usage
 
+### Mode
+
+The `mode` prop controls the colour scheme of the tag. Use data palette colours (`10`-`90`) for non-semantic colour needs.
+
+```tsx
+<IressInline gap="sm">
+{BADGE_MODES.map((mode) => (
+<IressTag key={mode} mode={mode}>
+{mode}
+</IressTag>
+))}
+</IressInline>
+```
+
+[View "Mode" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-tag--mode)
+
+### Status mode
+
+Use semantic status values (`danger`, `info`, `success`, `warning`) when tags need to communicate a system status.
+
+```tsx
+<IressInline gap="sm">
+{STATUSES.map((status) => (
+<IressTag key={status} mode={status}>
+{status}
+</IressTag>
+))}
+</IressInline>
+```
+
+[View "Status" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-tag--status)
+
 ### Clickable tags
 
 Tags can be made clickable by passing an `onClick` handler. This will apply hover styles to the tag to indicate it is clickable.

package/dist/components/Tag/Tag.d.ts

@@ -19,11 +19,11 @@ interface TagBaseProps {
      */
     deleteButtonText?: string;
     /**
-     * Style of the tag, based on the data colour palette.
-     * Can be a number (10-90) or a string ('10'-'90').
+     * Style of the tag, based on the data colour palette (10-90) or system status colours (danger, info, success, warning).
+     * Can be a number (10-90), a string ('10'-'90'), or a system status ('danger', 'info', 'success', 'warning').
      * @default '90'
      */
-    mode?: 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | '10' | '20' | '30' | '40' | '50' | '60' | '70' | '80' | '90';
+    mode?: 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | '10' | '20' | '30' | '40' | '50' | '60' | '70' | '80' | '90' | 'danger' | 'info' | 'success' | 'warning';
     /**
      * Callback triggered when the tag is deleted
      */

package/dist/components/Tag/Tag.styles.d.ts

@@ -116,5 +116,33 @@ export declare const tag: import('../../styled-system/types').SlotRecipeRuntimeF
                 '--tag-color': "{colors.colour.data.bold.90}";
             };
         };
+        danger: {
+            root: {
+                '--tag-bg': "{colors.colour.system.danger.surface}";
+                '--tag-border': "{colors.colour.system.danger.surface}";
+                '--tag-color': "{colors.colour.system.danger.text}";
+            };
+        };
+        info: {
+            root: {
+                '--tag-bg': "{colors.colour.system.info.surface}";
+                '--tag-border': "{colors.colour.system.info.surface}";
+                '--tag-color': "{colors.colour.system.info.text}";
+            };
+        };
+        success: {
+            root: {
+                '--tag-bg': "{colors.colour.system.success.surface}";
+                '--tag-border': "{colors.colour.system.success.surface}";
+                '--tag-color': "{colors.colour.system.success.text}";
+            };
+        };
+        warning: {
+            root: {
+                '--tag-bg': "{colors.colour.system.warning.surface}";
+                '--tag-border': "{colors.colour.system.warning.surface}";
+                '--tag-color': "{colors.colour.system.warning.text}";
+            };
+        };
     };
 }>;

package/dist/components/Tag/Tag.styles.js

@@ -152,6 +152,34 @@ const t = o({
           "--tag-border": "{colors.colour.data.subtle.90}",
           "--tag-color": "{colors.colour.data.bold.90}"
         }
+      },
+      danger: {
+        root: {
+          "--tag-bg": "{colors.colour.system.danger.surface}",
+          "--tag-border": "{colors.colour.system.danger.surface}",
+          "--tag-color": "{colors.colour.system.danger.text}"
+        }
+      },
+      info: {
+        root: {
+          "--tag-bg": "{colors.colour.system.info.surface}",
+          "--tag-border": "{colors.colour.system.info.surface}",
+          "--tag-color": "{colors.colour.system.info.text}"
+        }
+      },
+      success: {
+        root: {
+          "--tag-bg": "{colors.colour.system.success.surface}",
+          "--tag-border": "{colors.colour.system.success.surface}",
+          "--tag-color": "{colors.colour.system.success.text}"
+        }
+      },
+      warning: {
+        root: {
+          "--tag-bg": "{colors.colour.system.warning.surface}",
+          "--tag-border": "{colors.colour.system.warning.surface}",
+          "--tag-color": "{colors.colour.system.warning.text}"
+        }
       }
     }
   },