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

package/.ai/components/field.md

@@ -95,6 +95,18 @@ You can also pass `readOnly` prop to remove the asterisk symbol (\*) even when t
 
 [View "ReadonlyData" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-field--readonly-data)
 
+Use `readOnly="locked"` when a value is read-only due to user permissions.
+This variation adds a lock icon to the label for a stronger visual cue while
+keeping the field value and label relationship accessible.
+
+```tsx
+<IressField>
+<IressReadonly {...input} />
+</IressField>
+```
+
+[View "LockedReadonlyData" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-field--locked-readonly-data)
+
 ### Supplementary
 
 The `supplementary` prop can be used to display additional information about the field.

package/.ai/components/label.md

@@ -51,6 +51,19 @@ You can render custom content into the label.
 
 [View "RichContent" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-label--rich-content)
 
+### Locked readonly
+
+Use `readOnly="locked"` when the associated field is readonly due to
+permissions. This adds a lock indicator on the label.
+
+```tsx
+<IressLabel readOnly="locked">
+  This label is locked
+</IressLabel>
+```
+
+[View "LockedReadonly" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-label--locked-readonly)
+
 ## Accessibility
 
 Don't place interactive elements such as anchors or buttons inside the `IressLabel`. Doing so makes it difficult for people to activate the form input associated with the label.

package/.ai/components/readonly.md

@@ -41,6 +41,24 @@ The `actions` prop allows you to add buttons next to the readonly field. These c
 
 [View "Actions" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-readonly--actions)
 
+### Locked
+
+Use `variant="locked"` to indicate the value is read-only due to permissions.
+This applies disabled-like styling (greyed out, `not-allowed` cursor) and
+still submits the value via a hidden input, but the locked field itself is
+not focusable or announced as an editable form control by assistive
+technologies.
+
+When form controls such as `IressInput` or `IressSelect` are rendered with
+`readOnly="locked"`, they automatically pass the locked variant through to
+`IressReadonly`.
+
+```tsx
+<IressReadonly value="AU" variant="locked" />
+```
+
+[View "Locked" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-readonly--locked)
+
 ## Props
 
 - **Type:** `IressReadonlyProps`

package/.ai/skills/ui-translation.md

@@ -36,7 +36,7 @@ Translate natural language UI descriptions into IDS (Iress Design System) compon
 | Toggle switch            | `IressToggle`                       | `<IressToggle label="Enable" />`                                                                                               |
 | Slider / range           | `IressSlider`                       | `<IressSlider min={0} max={100} />`                                                                                            |
 | Autocomplete / typeahead | `IressAutocomplete`                 | See component docs                                                                                                             |
-| Read-only display        | `IressReadonly`                     | `<IressReadonly label="Status" value="Active" />` — supports `actions` prop for inline action buttons (e.g. edit toggle) |
+| Read-only display        | `IressReadonly`                     | `<IressReadonly label="Status" value="Active" />` — supports `actions` prop for inline action buttons (e.g. edit toggle). Use `variant="locked"` when the value is read-only due to permissions |
 
 ## Layout
 
@@ -189,7 +189,7 @@ When you need to find the right IDS component for a UI element, read references/
 | Toggle switch            | `IressToggle`                       | `<IressToggle label="Enable" />`                                                                                               |
 | Slider / range           | `IressSlider`                       | `<IressSlider min={0} max={100} />`                                                                                            |
 | Autocomplete / typeahead | `IressAutocomplete`                 | See component docs                                                                                                             |
-| Read-only display        | `IressReadonly`                     | `<IressReadonly label="Status" value="Active" />` — supports `actions` prop for inline action buttons (e.g. edit toggle) |
+| Read-only display        | `IressReadonly`                     | `<IressReadonly label="Status" value="Active" />` — supports `actions` prop for inline action buttons (e.g. edit toggle). Use `variant="locked"` when the value is read-only due to permissions |
 
 ## Layout
 

package/.ai/skills/version-migration.md

@@ -47,7 +47,7 @@ These prop names have been verified against the actual IDS v6 source. Using the
 | `RadioGroup`  | `legendHidden`       | removed              | Use `IressFormField` `hiddenLabel` prop               |
 | `RadioGroup`  | `options`            | `children`           | Use `<IressRadio>` children instead of options array  |
 | `RadioGroup`  | `checked`            | `value`              | —                                                     |
-| `RadioGroup`  | `readOnly`           | `readOnly`           | Unchanged                                             |
+| `RadioGroup`  | `readOnly`           | `readOnly`           | Now accepts `boolean \| 'locked'`                     |
 | `Toggle`      | `legend`             | `children`           | —                                                     |
 | `Toggle`      | `legendHidden`       | `hiddenLabel`        | —                                                     |
 | `Toggle`      | `toggled`            | `checked`            | —                                                     |
@@ -390,7 +390,7 @@ These prop names have been verified against the actual IDS v6 source. Using the
 | `RadioGroup`  | `legendHidden`       | removed              | Use `IressFormField` `hiddenLabel` prop               |
 | `RadioGroup`  | `options`            | `children`           | Use `<IressRadio>` children instead of options array  |
 | `RadioGroup`  | `checked`            | `value`              | —                                                     |
-| `RadioGroup`  | `readOnly`           | `readOnly`           | Unchanged                                             |
+| `RadioGroup`  | `readOnly`           | `readOnly`           | Now accepts `boolean \| 'locked'`                     |
 | `Toggle`      | `legend`             | `children`           | —                                                     |
 | `Toggle`      | `legendHidden`       | `hiddenLabel`        | —                                                     |
 | `Toggle`      | `toggled`            | `checked`            | —                                                     |
@@ -794,7 +794,7 @@ This document covers changes specific to migrating from IDS v5 (`@iress-oss/ids-
 | `errorMessages` | `errorMessages`     | Unchanged                              |
 | `optional`      | removed             | Use `required={false}` instead         |
 | `required`      | `required`          | Unchanged                              |
-| `readOnly`      | `readOnly`          | Unchanged                              |
+| `readOnly`      | `readOnly`          | Now accepts `boolean \| 'locked'`. Use `'locked'` when the field is read-only due to permissions |
 | `htmlFor`       | `htmlFor`           | Unchanged                              |
 | —               | `horizontal`        | New: inline label/input layout         |
 | —               | `labelWidth`        | New: label width in horizontal mode    |
@@ -858,6 +858,7 @@ This document covers changes specific to migrating from IDS v5 (`@iress-oss/ids-
 | v5 prop | v6 prop   | Notes                                                                                                |
 | ------- | --------- | ---------------------------------------------------------------------------------------------------- |
 | —       | `actions` | New: array of button props rendered alongside the readonly value (e.g. edit/save toggles)            |
+| —       | `variant` | New: set to `'locked'` for disabled-like styling when the value is read-only due to permissions      |
 | —       | —         | ⚠️ **Breaking:** DOM structure changed — inner content is now wrapped in an additional `wrapper` div inside `root`. CSS selectors targeting direct children of the root may need updating |
 
 ## Styling Changes
@@ -970,7 +971,7 @@ These prop names have been verified against the actual IDS v6 source. Using the
 | `RadioGroup`  | `legendHidden`       | removed              | Use `IressFormField` `hiddenLabel` prop               |
 | `RadioGroup`  | `options`            | `children`           | Use `<IressRadio>` children instead of options array  |
 | `RadioGroup`  | `checked`            | `value`              | —                                                     |
-| `RadioGroup`  | `readOnly`           | `readOnly`           | Unchanged                                             |
+| `RadioGroup`  | `readOnly`           | `readOnly`           | Now accepts `boolean \| 'locked'`                     |
 | `Toggle`      | `legend`             | `children`           | —                                                     |
 | `Toggle`      | `legendHidden`       | `hiddenLabel`        | —                                                     |
 | `Toggle`      | `toggled`            | `checked`            | —                                                     |
@@ -1374,7 +1375,7 @@ This document covers changes specific to migrating from IDS v5 (`@iress-oss/ids-
 | `errorMessages` | `errorMessages`     | Unchanged                              |
 | `optional`      | removed             | Use `required={false}` instead         |
 | `required`      | `required`          | Unchanged                              |
-| `readOnly`      | `readOnly`          | Unchanged                              |
+| `readOnly`      | `readOnly`          | Now accepts `boolean \| 'locked'`. Use `'locked'` when the field is read-only due to permissions |
 | `htmlFor`       | `htmlFor`           | Unchanged                              |
 | —               | `horizontal`        | New: inline label/input layout         |
 | —               | `labelWidth`        | New: label width in horizontal mode    |
@@ -1438,6 +1439,7 @@ This document covers changes specific to migrating from IDS v5 (`@iress-oss/ids-
 | v5 prop | v6 prop   | Notes                                                                                                |
 | ------- | --------- | ---------------------------------------------------------------------------------------------------- |
 | —       | `actions` | New: array of button props rendered alongside the readonly value (e.g. edit/save toggles)            |
+| —       | `variant` | New: set to `'locked'` for disabled-like styling when the value is read-only due to permissions      |
 | —       | —         | ⚠️ **Breaking:** DOM structure changed — inner content is now wrapped in an additional `wrapper` div inside `root`. CSS selectors targeting direct children of the root may need updating |
 
 ## Styling Changes
@@ -1679,7 +1681,7 @@ This document covers changes specific to migrating from IDS v5 (`@iress-oss/ids-
 | `errorMessages` | `errorMessages`     | Unchanged                              |
 | `optional`      | removed             | Use `required={false}` instead         |
 | `required`      | `required`          | Unchanged                              |
-| `readOnly`      | `readOnly`          | Unchanged                              |
+| `readOnly`      | `readOnly`          | Now accepts `boolean \| 'locked'`. Use `'locked'` when the field is read-only due to permissions |
 | `htmlFor`       | `htmlFor`           | Unchanged                              |
 | —               | `horizontal`        | New: inline label/input layout         |
 | —               | `labelWidth`        | New: label width in horizontal mode    |
@@ -1743,6 +1745,7 @@ This document covers changes specific to migrating from IDS v5 (`@iress-oss/ids-
 | v5 prop | v6 prop   | Notes                                                                                                |
 | ------- | --------- | ---------------------------------------------------------------------------------------------------- |
 | —       | `actions` | New: array of button props rendered alongside the readonly value (e.g. edit/save toggles)            |
+| —       | `variant` | New: set to `'locked'` for disabled-like styling when the value is read-only due to permissions      |
 | —       | —         | ⚠️ **Breaking:** DOM structure changed — inner content is now wrapped in an additional `wrapper` div inside `root`. CSS selectors targeting direct children of the root may need updating |
 
 ## Styling Changes
@@ -1959,7 +1962,7 @@ These prop names have been verified against the actual IDS v6 source. Using the
 | `RadioGroup`  | `legendHidden`       | removed              | Use `IressFormField` `hiddenLabel` prop               |
 | `RadioGroup`  | `options`            | `children`           | Use `<IressRadio>` children instead of options array  |
 | `RadioGroup`  | `checked`            | `value`              | —                                                     |
-| `RadioGroup`  | `readOnly`           | `readOnly`           | Unchanged                                             |
+| `RadioGroup`  | `readOnly`           | `readOnly`           | Now accepts `boolean \| 'locked'`                     |
 | `Toggle`      | `legend`             | `children`           | —                                                     |
 | `Toggle`      | `legendHidden`       | `hiddenLabel`        | —                                                     |
 | `Toggle`      | `toggled`            | `checked`            | —                                                     |
@@ -3033,6 +3036,7 @@ See references/common-gotchas.md for a comprehensive troubleshooting guide cover
 | `IressSelect` `value` not selecting | Passing a string instead of `LabelValueMeta`     | v6 now accepts plain strings for `value`/`defaultValue` — ensure the string matches an option's `value` field. A console warning is logged if the value can't be resolved against the available options |
 | `IressPopover` content has extra padding | Default padding added in v6                  | Popover content now has `padding: spacing.4` by default. Override with `contentStyle={{ padding: 'spacing.0' }}` if you were providing your own inner padding |
 | `IressReadonly` CSS selectors broken | DOM structure changed                            | Inner content is now wrapped in an additional `wrapper` div inside `root`. Update CSS selectors targeting direct children of the readonly root element |
+| Form control `readOnly` type changed | `readOnly` now accepts `boolean \| 'locked'`    | Use `readOnly="locked"` when the field is read-only due to permissions. This applies locked styling via `IressReadonly variant="locked"` |
 | `IressModal` `title` not rendering   | Prop renamed                                     | Use `heading` prop                                                   |
 | `IressSlideout` `eleToPush` selector | Needs valid CSS selector or element ref          | Pass string selector, HTMLElement, or React ref                      |