@redis-ui/components 47.5.5 → 47.5.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@redis-ui/components",
   "license": "UNLICENSED",
-  "version": "47.5.5",
+  "version": "47.5.6",
   "type": "module",
   "sideEffects": false,
   "repository": "git@github.com:redislabsdev/redis-ui.git",
@@ -30,7 +30,7 @@
   },
   "peerDependencies": {
     "@redis-ui/icons": "^8.0.0 || ^9.0.0",
-    "@redis-ui/styles": "^16.4.2",
+    "@redis-ui/styles": "^16.4.3",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "styled-components": "^5.0.0"

package/skills/redis-ui-components/SKILL.md

@@ -16,8 +16,9 @@ import { Button, Modal, Select } from '@redis-ui/components';
 ```
 
 Icons are imported separately. Monochrome icons accept a semantic `variant`; without it they
-inherit color from CSS `currentColor`. Use `style.color` for a custom color, and `customSize`
-or `style.width`/`height` for custom sizing. See the [Icons](./references/Icons.md) reference.
+inherit color from CSS `currentColor`. Use `style.color` for a custom color. Prefer a standard
+`size` from the design-system scale; reach for `customSize` (or `style.width`/`height`) only when
+no `size` value fits, since it bypasses the theme scale. See the [Icons](./references/Icons.md) reference.
 
 ```tsx
 import { EditIcon, DeleteIcon, iconVariants, type IconVariant } from '@redis-ui/icons';

package/skills/redis-ui-components/references/Icons.md

@@ -30,8 +30,8 @@ import {
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | variant | `IconVariant` (`'primary' \| 'secondary' \| 'notice' \| 'success' \| 'attention' \| 'danger' \| 'upsell' \| 'informative'`) | - | Semantic color from the theme. When unset, the icon inherits color from CSS `currentColor`. |
-| size | `IconSizeType` (`'XS' \| 'S' \| 'M' \| 'L' \| 'XL' \| 'XXL'`) | `'L'` | Standard size. Ignored if `customSize` is set. |
-| customSize | `string` | - | Any valid CSS size (e.g. `'2.4rem'`, `'32px'`). Overrides `size`. |
+| size | `IconSizeType` (`'XS' \| 'S' \| 'M' \| 'L' \| 'XL' \| 'XXL' \| 'for-text' \| 'by-font'`) | `'L'` | Standard size from `theme.core.icon.size`. Fixed values: `XS` (0.8rem), `S` (1.2rem), `M` (1.6rem), `L` (2rem), `XL` (2.4rem), `XXL` (3.2rem). Relative values: `for-text` (1.25em — scales to surrounding text), `by-font` (1em — matches surrounding font size). Ignored if `customSize` is set. |
+| customSize | `string` | - | Any valid CSS size (e.g. `'32px'`). Overrides `size`. Prefer a standard `size` — use `customSize` only when no scale value fits. |
 | title | `string` | icon name | Accessible label / native tooltip. |
 | className | `string` | - | Forwarded to the underlying `<svg>`. |
 | style | `CSSProperties` | - | Forwarded to the underlying `<svg>`. Use `style.color` to set a custom color, or `style.width` / `style.height` for custom sizing. |
@@ -60,8 +60,10 @@ import { RedisLogoDarkMinIcon } from '@redis-ui/icons/multicolor';
 
 ### Sizes and Variants
 
-> Demonstrates every supported size against every supported variant. The story uses the
-> `iconVariants` tuple from `@redis-ui/icons` to enumerate all variants.
+> Renders the listed fixed sizes (`XL`, `L`, `M`, `S`, `XS`) against every supported variant. The
+> story uses the `iconVariants` tuple from `@redis-ui/icons` to enumerate all variants.
+> `XXL` and the relative sizes (`for-text`, `by-font`) are valid `size` values but are omitted from
+> this gallery — see the Props table for the full list.
 
 ```tsx
 import { Fragment } from 'react';
@@ -98,13 +100,13 @@ import { StarsIcon } from '@redis-ui/icons';
 
 ### Custom size
 
-Use `customSize` for a single CSS dimension, or pass `style` with `width` and `height` to render
-the icon at any custom size.
+> Prefer a standard `size` value — use `customSize` (or `style` `width`/`height`) only when none of
+the scale values fit, as it bypasses the design-system scale.
 
 ```tsx
 import { StarsIcon } from '@redis-ui/icons';
 
-<StarsIcon customSize="3.2rem" />
+<StarsIcon customSize="2.8rem" />
 <StarsIcon style={{ width: '8rem', height: '8rem' }} />
 ```