@justeattakeaway/pie-radio-group 1.2.7 → 1.2.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +42 -1
- package/dist/index.js +1 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
- [Events](#events)
|
|
20
20
|
- [Forms Usage](#forms-usage)
|
|
21
21
|
- [Usage Examples](#usage-examples)
|
|
22
|
+
- [Wrapping radio buttons in custom markup](#wrapping-radio-buttons-in-custom-markup)
|
|
22
23
|
- [Questions and Support](#questions-and-support)
|
|
23
24
|
- [Contributing](#contributing)
|
|
24
25
|
|
|
@@ -43,7 +44,7 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
|
|
|
43
44
|
### Slots
|
|
44
45
|
| Slot | Description |
|
|
45
46
|
|-----------|--------------------------------------------------------------------------------------------------|
|
|
46
|
-
| `default` | Either [`pie-radio`](https://webc.pie.design/?path=/docs/components-radio--overview) components, or [`pie-list-item`](https://webc.pie.design/?path=/docs/components-list--overview) components that each slot a `pie-radio` for a list-style layout (see [List items in a radio group](#list-items-in-a-radio-group))
|
|
47
|
+
| `default` | Either [`pie-radio`](https://webc.pie.design/?path=/docs/components-radio--overview) components, or [`pie-list-item`](https://webc.pie.design/?path=/docs/components-list--overview) components that each slot a `pie-radio` for a list-style layout (see [List items in a radio group](#list-items-in-a-radio-group)), or your own markup wrapping each `pie-radio` (see [Wrapping radio buttons in custom markup](#wrapping-radio-buttons-in-custom-markup)). |
|
|
47
48
|
| `label` | To provide a custom label for the radio group. Please use [`pie-form-label`](https://webc.pie.design/?path=/docs/components-form-label--overview). |
|
|
48
49
|
|
|
49
50
|
### CSS Variables
|
|
@@ -126,6 +127,46 @@ For full usage details and code examples, see the [`pie-list` documentation](htt
|
|
|
126
127
|
|
|
127
128
|
Group-disabled propagation occurs at runtime via Lit context. If you need disabled styles on page load in an SSR environment, set `disabled` directly on each item rather than relying on the group container.
|
|
128
129
|
|
|
130
|
+
### Wrapping radio buttons in custom markup
|
|
131
|
+
|
|
132
|
+
The group finds its radios anywhere in its subtree, so each `pie-radio` can be wrapped in your own markup. This lets you build layouts such as image tiles while the group keeps ownership of selection, keyboard navigation and the disabled state.
|
|
133
|
+
|
|
134
|
+
The selected state can be styled from the radio's reflected `checked` attribute.
|
|
135
|
+
|
|
136
|
+
```html
|
|
137
|
+
<pie-radio-group name="device" isInline>
|
|
138
|
+
<pie-form-label slot="label">What device do you use to manage orders?</pie-form-label>
|
|
139
|
+
<div class="c-deviceTile">
|
|
140
|
+
<img src="/images/sunmi.jpg" alt="">
|
|
141
|
+
<pie-radio value="sunmi">Sunmi</pie-radio>
|
|
142
|
+
</div>
|
|
143
|
+
<div class="c-deviceTile">
|
|
144
|
+
<img src="/images/citaq.jpg" alt="">
|
|
145
|
+
<pie-radio value="citaq">Citaq</pie-radio>
|
|
146
|
+
</div>
|
|
147
|
+
</pie-radio-group>
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
```css
|
|
151
|
+
.c-deviceTile {
|
|
152
|
+
display: flex;
|
|
153
|
+
flex-direction: column;
|
|
154
|
+
gap: var(--dt-spacing-b);
|
|
155
|
+
padding: var(--dt-spacing-b);
|
|
156
|
+
border: 1px solid var(--dt-color-border-strong);
|
|
157
|
+
border-radius: var(--dt-radius-rounded-c);
|
|
158
|
+
cursor: pointer;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.c-deviceTile:has(pie-radio[checked]) {
|
|
162
|
+
border-color: var(--dt-color-interactive-brand);
|
|
163
|
+
}
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
The group handles the radios, but the wrapper is yours. You are responsible for wiring up its ARIA, testing the result with screen readers, and handling its clicks and interactive styles.
|
|
167
|
+
|
|
168
|
+
We recommend keeping the wrapper free of other interactive elements or components. The group manages focus and keyboard navigation across its radios, so nested controls interfere with both that and how each option is announced.
|
|
169
|
+
|
|
129
170
|
## Questions and Support
|
|
130
171
|
|
|
131
172
|
If you work at Just Eat Takeaway.com, please contact us on **#help-designsystem**. Otherwise, please raise an issue on [Github](https://github.com/justeattakeaway/pie/issues).
|
package/dist/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-radio-group",
|
|
3
3
|
"description": "PIE Design System Radio Group built using Web Components",
|
|
4
|
-
"version": "1.2.
|
|
4
|
+
"version": "1.2.9",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
@@ -44,13 +44,13 @@
|
|
|
44
44
|
"license": "Apache-2.0",
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@justeattakeaway/pie-components-config": "0.21.3",
|
|
47
|
-
"@justeattakeaway/pie-css": "1.
|
|
47
|
+
"@justeattakeaway/pie-css": "1.6.0",
|
|
48
48
|
"@justeattakeaway/pie-monorepo-utils": "0.9.9",
|
|
49
|
-
"@justeattakeaway/pie-radio": "1.2.
|
|
49
|
+
"@justeattakeaway/pie-radio": "1.2.5"
|
|
50
50
|
},
|
|
51
51
|
"dependencies": {
|
|
52
|
-
"@justeattakeaway/pie-assistive-text": "1.0.
|
|
53
|
-
"@justeattakeaway/pie-webc-core": "
|
|
52
|
+
"@justeattakeaway/pie-assistive-text": "1.0.12",
|
|
53
|
+
"@justeattakeaway/pie-webc-core": "19.0.0",
|
|
54
54
|
"@lit/context": "1.1.6"
|
|
55
55
|
},
|
|
56
56
|
"customElements": "custom-elements.json",
|