From a807c8556f733005592c00b36a576637e3d1aec5 Mon Sep 17 00:00:00 2001 From: personal Date: Fri, 8 Nov 2024 14:31:45 +0000 Subject: [PATCH 01/19] add images --- .../radio-group/Modifiers-form-label-2.svg | 8 ++ .../img/components/radio-group/anatomy.svg | 39 ++++++++++ .../assets/img/components/radio-group/ltr.svg | 22 ++++++ .../radio-group/modifiers-assistive-text.svg | 78 +++++++++++++++++++ .../radio-group/modifiers-form-label-1.svg | 21 +++++ .../img/components/radio-group/overflow.svg | 27 +++++++ .../img/components/radio-group/overview.svg | 34 ++++++++ .../assets/img/components/radio-group/rtl.svg | 10 +++ .../img/components/radio-group/states-1.svg | 78 +++++++++++++++++++ .../img/components/radio-group/states-2.svg | 16 ++++ .../radio-group/variations-horizontal.svg | 21 +++++ .../radio-group/variations-vertical.svg | 21 +++++ 12 files changed, 375 insertions(+) create mode 100644 apps/pie-docs/src/assets/img/components/radio-group/Modifiers-form-label-2.svg create mode 100644 apps/pie-docs/src/assets/img/components/radio-group/anatomy.svg create mode 100644 apps/pie-docs/src/assets/img/components/radio-group/ltr.svg create mode 100644 apps/pie-docs/src/assets/img/components/radio-group/modifiers-assistive-text.svg create mode 100644 apps/pie-docs/src/assets/img/components/radio-group/modifiers-form-label-1.svg create mode 100644 apps/pie-docs/src/assets/img/components/radio-group/overflow.svg create mode 100644 apps/pie-docs/src/assets/img/components/radio-group/overview.svg create mode 100644 apps/pie-docs/src/assets/img/components/radio-group/rtl.svg create mode 100644 apps/pie-docs/src/assets/img/components/radio-group/states-1.svg create mode 100644 apps/pie-docs/src/assets/img/components/radio-group/states-2.svg create mode 100644 apps/pie-docs/src/assets/img/components/radio-group/variations-horizontal.svg create mode 100644 apps/pie-docs/src/assets/img/components/radio-group/variations-vertical.svg diff --git a/apps/pie-docs/src/assets/img/components/radio-group/Modifiers-form-label-2.svg b/apps/pie-docs/src/assets/img/components/radio-group/Modifiers-form-label-2.svg new file mode 100644 index 0000000000..e1db9a3db1 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/radio-group/Modifiers-form-label-2.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/radio-group/anatomy.svg b/apps/pie-docs/src/assets/img/components/radio-group/anatomy.svg new file mode 100644 index 0000000000..99d09ab276 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/radio-group/anatomy.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/radio-group/ltr.svg b/apps/pie-docs/src/assets/img/components/radio-group/ltr.svg new file mode 100644 index 0000000000..3518a53e16 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/radio-group/ltr.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/radio-group/modifiers-assistive-text.svg b/apps/pie-docs/src/assets/img/components/radio-group/modifiers-assistive-text.svg new file mode 100644 index 0000000000..946a6cb66f --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/radio-group/modifiers-assistive-text.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/radio-group/modifiers-form-label-1.svg b/apps/pie-docs/src/assets/img/components/radio-group/modifiers-form-label-1.svg new file mode 100644 index 0000000000..21d7feab68 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/radio-group/modifiers-form-label-1.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/radio-group/overflow.svg b/apps/pie-docs/src/assets/img/components/radio-group/overflow.svg new file mode 100644 index 0000000000..0176691de1 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/radio-group/overflow.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/radio-group/overview.svg b/apps/pie-docs/src/assets/img/components/radio-group/overview.svg new file mode 100644 index 0000000000..466f15a5e4 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/radio-group/overview.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/radio-group/rtl.svg b/apps/pie-docs/src/assets/img/components/radio-group/rtl.svg new file mode 100644 index 0000000000..307a0b4df9 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/radio-group/rtl.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/radio-group/states-1.svg b/apps/pie-docs/src/assets/img/components/radio-group/states-1.svg new file mode 100644 index 0000000000..f8f405cd21 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/radio-group/states-1.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/radio-group/states-2.svg b/apps/pie-docs/src/assets/img/components/radio-group/states-2.svg new file mode 100644 index 0000000000..b4666e2040 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/radio-group/states-2.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/radio-group/variations-horizontal.svg b/apps/pie-docs/src/assets/img/components/radio-group/variations-horizontal.svg new file mode 100644 index 0000000000..8661d30a12 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/radio-group/variations-horizontal.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/radio-group/variations-vertical.svg b/apps/pie-docs/src/assets/img/components/radio-group/variations-vertical.svg new file mode 100644 index 0000000000..03638656a5 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/radio-group/variations-vertical.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + From a3e322329fbf23cb2b38b07ace47dc8a6f45e237 Mon Sep 17 00:00:00 2001 From: personal Date: Fri, 8 Nov 2024 14:59:48 +0000 Subject: [PATCH 02/19] provide expected path for missing component index images --- apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js b/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js index 72334216e3..f1ff70a3ba 100644 --- a/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js +++ b/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js @@ -59,7 +59,7 @@ const indexPageDisplay = ({ const hasMobileSource = fs.existsSync(path.join(__dirname, imgMobileSrc)); const throwOnMissingImage = () => { - throw new Error(`Image not provided for ${menuItemSlug}. Please ensure image is provided or add this item to ExcludedElements.`); + throw new Error(`Image not provided for ${menuItemSlug}. Please ensure image is provided or add this item to ExcludedElements. Expected path: ${imgSrc}`); }; return ` From 8df05b288b507609c7e49d0eebcae6ba701fdda9 Mon Sep 17 00:00:00 2001 From: personal Date: Fri, 8 Nov 2024 15:05:15 +0000 Subject: [PATCH 03/19] add placeholder content and page skeleton --- .../img/index/components/radio-group.svg | 34 +++++++++++++++++++ .../radio-group/overview/overview.md | 11 ++++++ .../components/radio-group/radio-group.json | 5 +++ .../src/components/radio-group/radio-group.md | 8 +++++ apps/pie-docs/src/components/rating/rating.md | 2 +- .../segmented-controls/segmented-controls.md | 2 +- .../components/select-input/select-input.md | 2 +- .../src/components/show-more/show-more.md | 2 +- .../src/components/side-sheet/side-sheet.md | 2 +- .../src/components/skeleton/skeleton.md | 2 +- apps/pie-docs/src/components/slider/slider.md | 2 +- .../src/components/spinner/spinner.md | 2 +- apps/pie-docs/src/components/switch/switch.md | 2 +- apps/pie-docs/src/components/tabs/tabs.md | 2 +- apps/pie-docs/src/components/tag/tag.md | 2 +- .../src/components/text-input/text-input.md | 2 +- .../src/components/textarea/textarea.md | 2 +- .../src/components/thumbnail/thumbnail.md | 2 +- apps/pie-docs/src/components/toast/toast.md | 2 +- .../src/components/tooltip/tooltip.md | 2 +- .../src/components/uploader/uploader.md | 2 +- 21 files changed, 75 insertions(+), 17 deletions(-) create mode 100644 apps/pie-docs/src/assets/img/index/components/radio-group.svg create mode 100644 apps/pie-docs/src/components/radio-group/overview/overview.md create mode 100644 apps/pie-docs/src/components/radio-group/radio-group.json create mode 100644 apps/pie-docs/src/components/radio-group/radio-group.md diff --git a/apps/pie-docs/src/assets/img/index/components/radio-group.svg b/apps/pie-docs/src/assets/img/index/components/radio-group.svg new file mode 100644 index 0000000000..466f15a5e4 --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/radio-group.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/components/radio-group/overview/overview.md b/apps/pie-docs/src/components/radio-group/overview/overview.md new file mode 100644 index 0000000000..4c5f2f5460 --- /dev/null +++ b/apps/pie-docs/src/components/radio-group/overview/overview.md @@ -0,0 +1,11 @@ +--- +eleventyNavigation: + key: Overview + parent: 'Radio Group' + order: 1 +shouldShowContents: true +permalink: components/radio-group/ +--- + +## Overview + diff --git a/apps/pie-docs/src/components/radio-group/radio-group.json b/apps/pie-docs/src/components/radio-group/radio-group.json new file mode 100644 index 0000000000..b21c4c99dd --- /dev/null +++ b/apps/pie-docs/src/components/radio-group/radio-group.json @@ -0,0 +1,5 @@ +{ + "title": "Radio Group", + "navKey": "Radio Group", + "description": "" + } diff --git a/apps/pie-docs/src/components/radio-group/radio-group.md b/apps/pie-docs/src/components/radio-group/radio-group.md new file mode 100644 index 0000000000..b85a751a43 --- /dev/null +++ b/apps/pie-docs/src/components/radio-group/radio-group.md @@ -0,0 +1,8 @@ +--- +eleventyNavigation: + key: 'Radio Group' + parent: Components + url: /components/radio-group/ + order: 33 +permalink: false +--- diff --git a/apps/pie-docs/src/components/rating/rating.md b/apps/pie-docs/src/components/rating/rating.md index f977ea3e50..764c9dcdd3 100644 --- a/apps/pie-docs/src/components/rating/rating.md +++ b/apps/pie-docs/src/components/rating/rating.md @@ -2,7 +2,7 @@ eleventyNavigation: key: 'Rating' parent: Components - order: 33 + order: 34 --- ## Overview diff --git a/apps/pie-docs/src/components/segmented-controls/segmented-controls.md b/apps/pie-docs/src/components/segmented-controls/segmented-controls.md index b54fc048c8..d11d270a37 100644 --- a/apps/pie-docs/src/components/segmented-controls/segmented-controls.md +++ b/apps/pie-docs/src/components/segmented-controls/segmented-controls.md @@ -2,7 +2,7 @@ eleventyNavigation: key: 'Segmented Controls' parent: Components - order: 34 + order: 35 --- ## Overview diff --git a/apps/pie-docs/src/components/select-input/select-input.md b/apps/pie-docs/src/components/select-input/select-input.md index 2d15efe1b6..abf80a6302 100644 --- a/apps/pie-docs/src/components/select-input/select-input.md +++ b/apps/pie-docs/src/components/select-input/select-input.md @@ -2,7 +2,7 @@ eleventyNavigation: key: 'Select Input' parent: Components - order: 35 + order: 36 --- ## Overview diff --git a/apps/pie-docs/src/components/show-more/show-more.md b/apps/pie-docs/src/components/show-more/show-more.md index d309b97701..c6128187a3 100644 --- a/apps/pie-docs/src/components/show-more/show-more.md +++ b/apps/pie-docs/src/components/show-more/show-more.md @@ -2,7 +2,7 @@ eleventyNavigation: key: 'Show More' parent: Components - order: 36 + order: 37 --- ## Overview diff --git a/apps/pie-docs/src/components/side-sheet/side-sheet.md b/apps/pie-docs/src/components/side-sheet/side-sheet.md index 915fef46ce..8398bde2ca 100644 --- a/apps/pie-docs/src/components/side-sheet/side-sheet.md +++ b/apps/pie-docs/src/components/side-sheet/side-sheet.md @@ -2,7 +2,7 @@ eleventyNavigation: key: 'Side Sheet' parent: Components - order: 37 + order: 38 --- ## Overview diff --git a/apps/pie-docs/src/components/skeleton/skeleton.md b/apps/pie-docs/src/components/skeleton/skeleton.md index 89925363b5..778362f330 100644 --- a/apps/pie-docs/src/components/skeleton/skeleton.md +++ b/apps/pie-docs/src/components/skeleton/skeleton.md @@ -2,7 +2,7 @@ eleventyNavigation: key: 'Skeleton' parent: Components - order: 38 + order: 39 --- ## Overview diff --git a/apps/pie-docs/src/components/slider/slider.md b/apps/pie-docs/src/components/slider/slider.md index 58e3754c8f..a361f1ec29 100644 --- a/apps/pie-docs/src/components/slider/slider.md +++ b/apps/pie-docs/src/components/slider/slider.md @@ -2,7 +2,7 @@ eleventyNavigation: key: 'Slider' parent: Components - order: 39 + order: 40 --- ## Overview diff --git a/apps/pie-docs/src/components/spinner/spinner.md b/apps/pie-docs/src/components/spinner/spinner.md index 8b719bbaee..af94930bb6 100644 --- a/apps/pie-docs/src/components/spinner/spinner.md +++ b/apps/pie-docs/src/components/spinner/spinner.md @@ -2,7 +2,7 @@ eleventyNavigation: key: 'Spinner' parent: Components - order: 40 + order: 41 --- ## Overview diff --git a/apps/pie-docs/src/components/switch/switch.md b/apps/pie-docs/src/components/switch/switch.md index 0386a73825..9e05b3f5f9 100644 --- a/apps/pie-docs/src/components/switch/switch.md +++ b/apps/pie-docs/src/components/switch/switch.md @@ -2,7 +2,7 @@ eleventyNavigation: key: 'Switch' parent: Components - order: 41 + order: 42 url: /components/switch/ permalink: false --- diff --git a/apps/pie-docs/src/components/tabs/tabs.md b/apps/pie-docs/src/components/tabs/tabs.md index d59bab39d9..47cbd0f6e8 100644 --- a/apps/pie-docs/src/components/tabs/tabs.md +++ b/apps/pie-docs/src/components/tabs/tabs.md @@ -2,7 +2,7 @@ eleventyNavigation: key: 'Tabs' parent: Components - order: 42 + order: 43 --- ## Overview diff --git a/apps/pie-docs/src/components/tag/tag.md b/apps/pie-docs/src/components/tag/tag.md index 92c3e6b2cb..101661979f 100644 --- a/apps/pie-docs/src/components/tag/tag.md +++ b/apps/pie-docs/src/components/tag/tag.md @@ -3,6 +3,6 @@ eleventyNavigation: key: Tag parent: Components url: /components/tag/ - order: 42 + order: 44 permalink: false --- diff --git a/apps/pie-docs/src/components/text-input/text-input.md b/apps/pie-docs/src/components/text-input/text-input.md index 0208695264..a75d60bc05 100644 --- a/apps/pie-docs/src/components/text-input/text-input.md +++ b/apps/pie-docs/src/components/text-input/text-input.md @@ -3,6 +3,6 @@ eleventyNavigation: key: 'Text Input' parent: Components url: /components/text-input/ - order: 45 + order: 46 permalink: false --- diff --git a/apps/pie-docs/src/components/textarea/textarea.md b/apps/pie-docs/src/components/textarea/textarea.md index 20dc6df542..f60ff6f9a6 100644 --- a/apps/pie-docs/src/components/textarea/textarea.md +++ b/apps/pie-docs/src/components/textarea/textarea.md @@ -3,7 +3,7 @@ eleventyNavigation: key: 'Textarea' parent: Components url: /components/textarea/ - order: 46 + order: 47 permalink: false --- diff --git a/apps/pie-docs/src/components/thumbnail/thumbnail.md b/apps/pie-docs/src/components/thumbnail/thumbnail.md index 09a2f5176e..84d45d2853 100644 --- a/apps/pie-docs/src/components/thumbnail/thumbnail.md +++ b/apps/pie-docs/src/components/thumbnail/thumbnail.md @@ -2,7 +2,7 @@ eleventyNavigation: key: 'Thumbnail' parent: Components - order: 47 + order: 48 --- ## Overview diff --git a/apps/pie-docs/src/components/toast/toast.md b/apps/pie-docs/src/components/toast/toast.md index 7630c5d9bb..31d09564ed 100644 --- a/apps/pie-docs/src/components/toast/toast.md +++ b/apps/pie-docs/src/components/toast/toast.md @@ -2,7 +2,7 @@ eleventyNavigation: key: 'Toast' parent: Components - order: 48 + order: 49 --- ## Overview diff --git a/apps/pie-docs/src/components/tooltip/tooltip.md b/apps/pie-docs/src/components/tooltip/tooltip.md index e00a447cea..f93ec7ee4e 100644 --- a/apps/pie-docs/src/components/tooltip/tooltip.md +++ b/apps/pie-docs/src/components/tooltip/tooltip.md @@ -2,7 +2,7 @@ eleventyNavigation: key: 'Tooltip' parent: Components - order: 49 + order: 50 --- ## Overview diff --git a/apps/pie-docs/src/components/uploader/uploader.md b/apps/pie-docs/src/components/uploader/uploader.md index bfa88301e1..ba6952ab28 100644 --- a/apps/pie-docs/src/components/uploader/uploader.md +++ b/apps/pie-docs/src/components/uploader/uploader.md @@ -2,7 +2,7 @@ eleventyNavigation: key: 'Uploader' parent: Components - order: 50 + order: 51 --- ## Overview From fe34de53fc27bf3935849e72ebef2e2653b0e9ff Mon Sep 17 00:00:00 2001 From: personal Date: Tue, 12 Nov 2024 09:47:00 +0000 Subject: [PATCH 04/19] add index cards for checkboxgroup and radiogroup --- .../img/index/components/checkbox-group.svg | 15 +++++++ .../img/index/components/radio-group.svg | 42 +++++++------------ apps/pie-docs/src/components/components.md | 2 +- .../snapshots/expected-routes.snapshot.json | 3 +- 4 files changed, 32 insertions(+), 30 deletions(-) create mode 100644 apps/pie-docs/src/assets/img/index/components/checkbox-group.svg diff --git a/apps/pie-docs/src/assets/img/index/components/checkbox-group.svg b/apps/pie-docs/src/assets/img/index/components/checkbox-group.svg new file mode 100644 index 0000000000..9a6ba9de2a --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/checkbox-group.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/radio-group.svg b/apps/pie-docs/src/assets/img/index/components/radio-group.svg index 466f15a5e4..bbb2a352b2 100644 --- a/apps/pie-docs/src/assets/img/index/components/radio-group.svg +++ b/apps/pie-docs/src/assets/img/index/components/radio-group.svg @@ -1,34 +1,20 @@ - - - - - - - - + + + + + - - - - - - - - - - - - - + + + + - - - - - - - + + + + + diff --git a/apps/pie-docs/src/components/components.md b/apps/pie-docs/src/components/components.md index 6f50785966..42feb88111 100644 --- a/apps/pie-docs/src/components/components.md +++ b/apps/pie-docs/src/components/components.md @@ -11,6 +11,6 @@ title: Components {% indexPageDisplay { collection: collections.all, itemKey: "Components", -excludedElements: ['Component status', 'Checkbox Group'] +excludedElements: ['Component status'] } %} diff --git a/apps/pie-docs/test/snapshots/expected-routes.snapshot.json b/apps/pie-docs/test/snapshots/expected-routes.snapshot.json index e4e5b1b83c..51a50b79e3 100644 --- a/apps/pie-docs/test/snapshots/expected-routes.snapshot.json +++ b/apps/pie-docs/test/snapshots/expected-routes.snapshot.json @@ -61,6 +61,7 @@ "components/progress-bar", "components/progress-stepper", "components/radio", + "components/radio-group", "components/rating", "components/segmented-controls", "components/select-input", @@ -134,4 +135,4 @@ "support", "support/contact-us", "support/faq" -] +] \ No newline at end of file From c5690d6f0d6b67c1c22540c16948b16fdfe13212 Mon Sep 17 00:00:00 2001 From: personal Date: Tue, 12 Nov 2024 10:00:54 +0000 Subject: [PATCH 05/19] start adding content --- .../radio-group/overview/overview.md | 101 ++++++++++++++++++ 1 file changed, 101 insertions(+) diff --git a/apps/pie-docs/src/components/radio-group/overview/overview.md b/apps/pie-docs/src/components/radio-group/overview/overview.md index 4c5f2f5460..e7439485d8 100644 --- a/apps/pie-docs/src/components/radio-group/overview/overview.md +++ b/apps/pie-docs/src/components/radio-group/overview/overview.md @@ -8,4 +8,105 @@ permalink: components/radio-group/ --- ## Overview +Radio groups offer users a single selection method, Each radio button functions independently, providing immediate feedback through its selected or unselected state. +These groups are frequently utilised in forms, settings panels, and various interfaces requiring users to make a single selection or provide input from predefined options. + +--- + +## Dos and Don’ts + +{% usage { + do: { + type: usageTypes.text, + items: [ + "Ensure each radio button has a concise and descriptive label that clearly indicates what selecting it will entail.", + "Use a minimum of 2 radio buttons within a group." + ] + }, + dont: { + type: usageTypes.text, + items: [ + "If the user can select multiple option from a group, checkboxes should be used instead of radio buttons.", + "Limit the number of radio buttons presented to users to avoid overwhelming them with choices." + ] + } +} %} + +--- + +## Anatomy + +{% contentPageImage { + src:"../../../assets/img/components/button/anatomy.svg", + alt: "Anatomy of a button.", + width: 291 +} %} + +{% list { + type: listTypes.ordered, + items: [ + "**Form label (Optional):** The [form label](/components/form-label/) provides necessary content / information to a form.", + "**Radio input:** A radio input indicates the appropriate state. By default it is unselected.", + "**Radio label:** Describes the information you want to select or unselect.", + "**Assistive text (Optional):** The [assistive text](/components/assistive-text/) provides additional instructional information / error / success messaging for the whole radio group." + ] +} %} + +--- + +## Variations +Radio groups can be laid out both horizontally and vertically depending on the use cas and the structure of the UI. Where possible, arrange the radio group vertically for easier reading. + +### Horizontal + +### Vertical + +--- + +## Modifiers + +### Form label +A form label is recommended to provide the user context of the form element and it’s content. + +### Assistive text +Assistive text is used where needed to provide additional information or error / success messaging regarding the whole form element, and never to individual checkboxes. The assistive text is always used for an error state to provide the user with the information required to complete the form element. + + +--- + +## Content +All content should use sentence case. + +### Form label + +### Label +- Always use clear and concise labels for checkboxes. +- Labels appear to the right of checkbox input. + +--- + +## Overflow + +### Multiple words overflow + +When the label exceeds the available width, the label will wrap onto a new line. Radios with the same row remain top aligned for consistency, and any additional rows underneath move down to accommodate the additional content. + +--- + +## States +Individual radios have their own interactive states: default, hover, active, and focus. However, some states apply to the group as a collective because they affect all radios: error and disabled. + +--- + +## Examples + +### LTR examples +Here are some examples of the component in left-to-right context: + +### RTL examples +Here are some examples of the component in right-to-left context: + +--- + +## Resources From 1c79ae7330615fb4240c4184f748dab378356f02 Mon Sep 17 00:00:00 2001 From: personal Date: Tue, 12 Nov 2024 14:46:54 +0000 Subject: [PATCH 06/19] add radio overview page content --- .../radio-group/modifiers-assistive-text.svg | 80 +++-------------- .../img/components/radio-group/states-1.svg | 88 ++++-------------- apps/pie-docs/src/componentStatusData.js | 3 +- .../radio-group/overview/overview.md | 90 +++++++++++++++++-- 4 files changed, 117 insertions(+), 144 deletions(-) diff --git a/apps/pie-docs/src/assets/img/components/radio-group/modifiers-assistive-text.svg b/apps/pie-docs/src/assets/img/components/radio-group/modifiers-assistive-text.svg index 946a6cb66f..01a425d9f1 100644 --- a/apps/pie-docs/src/assets/img/components/radio-group/modifiers-assistive-text.svg +++ b/apps/pie-docs/src/assets/img/components/radio-group/modifiers-assistive-text.svg @@ -1,78 +1,24 @@ - + - + - - - - - - - - - - - - + + + + + + - - + + - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - + diff --git a/apps/pie-docs/src/assets/img/components/radio-group/states-1.svg b/apps/pie-docs/src/assets/img/components/radio-group/states-1.svg index f8f405cd21..01a425d9f1 100644 --- a/apps/pie-docs/src/assets/img/components/radio-group/states-1.svg +++ b/apps/pie-docs/src/assets/img/components/radio-group/states-1.svg @@ -1,78 +1,24 @@ - - - + + + - - + + + + + + + + + - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + - - + + diff --git a/apps/pie-docs/src/componentStatusData.js b/apps/pie-docs/src/componentStatusData.js index 3c453ef941..86f696d177 100644 --- a/apps/pie-docs/src/componentStatusData.js +++ b/apps/pie-docs/src/componentStatusData.js @@ -1435,7 +1435,8 @@ const rows = [ }, { resource: resourceTypes.WEB_COMPONENTS, - status: statusTypes.PLANNED, + link: 'https://webc.pie.design/?path=/story/radio--default', + status: webComponentStatuses['pie-radio'], }, { resource: resourceTypes.VUE, diff --git a/apps/pie-docs/src/components/radio-group/overview/overview.md b/apps/pie-docs/src/components/radio-group/overview/overview.md index e7439485d8..6d4e436a90 100644 --- a/apps/pie-docs/src/components/radio-group/overview/overview.md +++ b/apps/pie-docs/src/components/radio-group/overview/overview.md @@ -12,6 +12,11 @@ Radio groups offer users a single selection method, Each radio button functions These groups are frequently utilised in forms, settings panels, and various interfaces requiring users to make a single selection or provide input from predefined options. +{% contentPageImage { + src:"../../../assets/img/components/radio-group/overview.svg", + alt: "A group of radio buttons that are vertically stacked together." +} %} + --- ## Dos and Don’ts @@ -38,9 +43,9 @@ These groups are frequently utilised in forms, settings panels, and various inte ## Anatomy {% contentPageImage { - src:"../../../assets/img/components/button/anatomy.svg", - alt: "Anatomy of a button.", - width: 291 + src:"../../../assets/img/components/radio-group/anatomy.svg", + alt: "Anatomy of a radio group.", + width: 340 } %} {% list { @@ -59,8 +64,18 @@ These groups are frequently utilised in forms, settings panels, and various inte Radio groups can be laid out both horizontally and vertically depending on the use cas and the structure of the UI. Where possible, arrange the radio group vertically for easier reading. ### Horizontal +{% contentPageImage { + src:"../../../assets/img/components/radio-group/variations-horizontal.svg", + alt: "A row of radio buttons grouped together by a single label above them.", + width: 258 +} %} ### Vertical +{% contentPageImage { + src:"../../../assets/img/components/radio-group/variations-vertical.svg", + alt: "A vertical stack of radio buttons grouped together by a single label above them.", + width: 257 +} %} --- @@ -69,9 +84,32 @@ Radio groups can be laid out both horizontally and vertically depending on the u ### Form label A form label is recommended to provide the user context of the form element and it’s content. +{% contentLayout %} + {% contentItem %} + {% contentPageImage { + src:"../../../assets/img/components/radio-group/modifiers-form-label-1.svg", + alt: "A row of radio buttons grouped together by a single label above them.", + width: 258 + } %} + {% endcontentItem %} + {% contentItem %} + {% contentPageImage { + src:"../../../assets/img/components/radio-group/modifiers-form-label-2.svg", + alt: "A row of radio buttons grouped together but missing a label.", + width: 258 + } %} + {% endcontentItem %} +{% endcontentLayout %} + + ### Assistive text Assistive text is used where needed to provide additional information or error / success messaging regarding the whole form element, and never to individual checkboxes. The assistive text is always used for an error state to provide the user with the information required to complete the form element. +{% contentPageImage { + src:"../../../assets/img/components/radio-group/modifiers-assistive-text.svg", + alt: "A row of radio buttons grouped with an error colour around their borders. Below is a message with an error icon. The colour used for both the text and icon is the same as the error border.", + width: 258 +} %} --- @@ -79,6 +117,11 @@ Assistive text is used where needed to provide additional information or error / All content should use sentence case. ### Form label +{% notification { + type: "neutral", + iconName: "link", + message: "Check out the [form label content](/components/form-label/) documentation." +} %} ### Label - Always use clear and concise labels for checkboxes. @@ -88,15 +131,36 @@ All content should use sentence case. ## Overflow -### Multiple words overflow - When the label exceeds the available width, the label will wrap onto a new line. Radios with the same row remain top aligned for consistency, and any additional rows underneath move down to accommodate the additional content. +{% contentPageImage { + src:"../../../assets/img/components/radio-group/overflow.svg", + alt: "A horizontal row of radio buttons. The first radio has a label that is very long, this forces the row to break to a new line.", + width: 470 +} %} + --- ## States Individual radios have their own interactive states: default, hover, active, and focus. However, some states apply to the group as a collective because they affect all radios: error and disabled. +{% contentLayout %} + {% contentItem %} + {% contentPageImage { + src:"../../../assets/img/components/radio-group/states-1.svg", + alt: "A row of radio buttons grouped with an error colour around their borders. Below is a message with an error icon. The colour used for both the text and icon is the same as the error border.", + width: 258 + } %} + {% endcontentItem %} + {% contentItem %} + {% contentPageImage { + src:"../../../assets/img/components/radio-group/states-2.svg", + alt: "A row of radio buttons grouped together by a single label above them. Their background colours are faded to signify that they are currently in a disabled state.", + width: 258 + } %} + {% endcontentItem %} +{% endcontentLayout %} + --- ## Examples @@ -104,9 +168,25 @@ Individual radios have their own interactive states: default, hover, active, and ### LTR examples Here are some examples of the component in left-to-right context: +{% contentPageImage { + src:"../../../assets/img/components/radio-group/ltr.svg", + alt: "A vertical stack of radio buttons. The first one is selected. The radio buttons sit on the left hand side of the label text. This demonstrates a left-to-right reading direction.", + width: 257 +} %} + ### RTL examples Here are some examples of the component in right-to-left context: +{% contentPageImage { + src:"../../../assets/img/components/radio-group/rtl.svg", + alt: "A vertical stack of radio buttons. The first one is selected. The radio buttons sit on the right hand side of the label text. This demonstrates a right-to-left reading direction.", + width: 88 +} %} + --- ## Resources + +{% resourceTable { + componentName: 'Radio' +} %} From 355ae60bedbdc56b8d63919e061af09b0d11e7aa Mon Sep 17 00:00:00 2001 From: Jamie Maguire Date: Wed, 13 Nov 2024 11:41:33 +0000 Subject: [PATCH 07/19] Update apps/pie-docs/src/components/radio-group/overview/overview.md Co-authored-by: Xander Marjoram --- apps/pie-docs/src/components/radio-group/overview/overview.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/pie-docs/src/components/radio-group/overview/overview.md b/apps/pie-docs/src/components/radio-group/overview/overview.md index 6d4e436a90..31fcde6af2 100644 --- a/apps/pie-docs/src/components/radio-group/overview/overview.md +++ b/apps/pie-docs/src/components/radio-group/overview/overview.md @@ -8,9 +8,9 @@ permalink: components/radio-group/ --- ## Overview -Radio groups offer users a single selection method, Each radio button functions independently, providing immediate feedback through its selected or unselected state. +Radio groups present a set of mutually exclusive options, allowing users to select only one option from a predefined list. -These groups are frequently utilised in forms, settings panels, and various interfaces requiring users to make a single selection or provide input from predefined options. +They are commonly used in forms, settings panels, and other interfaces where users need to make a single selection from multiple options. {% contentPageImage { src:"../../../assets/img/components/radio-group/overview.svg", From e24b43eaad873938de9d5f4d9360282d52f303c4 Mon Sep 17 00:00:00 2001 From: Jamie Maguire Date: Wed, 13 Nov 2024 11:41:45 +0000 Subject: [PATCH 08/19] Update apps/pie-docs/src/components/radio-group/overview/overview.md Co-authored-by: Xander Marjoram --- apps/pie-docs/src/components/radio-group/overview/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/pie-docs/src/components/radio-group/overview/overview.md b/apps/pie-docs/src/components/radio-group/overview/overview.md index 31fcde6af2..4ad7614687 100644 --- a/apps/pie-docs/src/components/radio-group/overview/overview.md +++ b/apps/pie-docs/src/components/radio-group/overview/overview.md @@ -25,7 +25,7 @@ They are commonly used in forms, settings panels, and other interfaces where use do: { type: usageTypes.text, items: [ - "Ensure each radio button has a concise and descriptive label that clearly indicates what selecting it will entail.", + "Make sure each radio button has a label which is clear, concise and accurate.", "Use a minimum of 2 radio buttons within a group." ] }, From 4008b819ba5d9051c74ad686f846e49b5ee0468e Mon Sep 17 00:00:00 2001 From: Jamie Maguire Date: Wed, 13 Nov 2024 11:41:53 +0000 Subject: [PATCH 09/19] Update apps/pie-docs/src/components/radio-group/overview/overview.md Co-authored-by: Xander Marjoram --- apps/pie-docs/src/components/radio-group/overview/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/pie-docs/src/components/radio-group/overview/overview.md b/apps/pie-docs/src/components/radio-group/overview/overview.md index 4ad7614687..d210cf0b73 100644 --- a/apps/pie-docs/src/components/radio-group/overview/overview.md +++ b/apps/pie-docs/src/components/radio-group/overview/overview.md @@ -32,7 +32,7 @@ They are commonly used in forms, settings panels, and other interfaces where use dont: { type: usageTypes.text, items: [ - "If the user can select multiple option from a group, checkboxes should be used instead of radio buttons.", + "If the user can select multiple options from a group, checkboxes should be used instead of radio buttons.", "Limit the number of radio buttons presented to users to avoid overwhelming them with choices." ] } From b1436f574ce1fc22667f895617202359d685a01a Mon Sep 17 00:00:00 2001 From: Jamie Maguire Date: Wed, 13 Nov 2024 11:42:00 +0000 Subject: [PATCH 10/19] Update apps/pie-docs/src/components/radio-group/overview/overview.md Co-authored-by: Xander Marjoram --- apps/pie-docs/src/components/radio-group/overview/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/pie-docs/src/components/radio-group/overview/overview.md b/apps/pie-docs/src/components/radio-group/overview/overview.md index d210cf0b73..13fbe4fc82 100644 --- a/apps/pie-docs/src/components/radio-group/overview/overview.md +++ b/apps/pie-docs/src/components/radio-group/overview/overview.md @@ -51,7 +51,7 @@ They are commonly used in forms, settings panels, and other interfaces where use {% list { type: listTypes.ordered, items: [ - "**Form label (Optional):** The [form label](/components/form-label/) provides necessary content / information to a form.", + "**Form label (Optional):** The [form label](/components/form-label/) provides a clear and accessible description of the form element it is associated with.", "**Radio input:** A radio input indicates the appropriate state. By default it is unselected.", "**Radio label:** Describes the information you want to select or unselect.", "**Assistive text (Optional):** The [assistive text](/components/assistive-text/) provides additional instructional information / error / success messaging for the whole radio group." From 74b998e144651d566e235b069f9e2aaf4e93e1c0 Mon Sep 17 00:00:00 2001 From: Jamie Maguire Date: Wed, 13 Nov 2024 11:42:12 +0000 Subject: [PATCH 11/19] Update apps/pie-docs/src/components/radio-group/overview/overview.md Co-authored-by: Xander Marjoram --- .../src/components/radio-group/overview/overview.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/pie-docs/src/components/radio-group/overview/overview.md b/apps/pie-docs/src/components/radio-group/overview/overview.md index 13fbe4fc82..dae4a769e4 100644 --- a/apps/pie-docs/src/components/radio-group/overview/overview.md +++ b/apps/pie-docs/src/components/radio-group/overview/overview.md @@ -52,9 +52,9 @@ They are commonly used in forms, settings panels, and other interfaces where use type: listTypes.ordered, items: [ "**Form label (Optional):** The [form label](/components/form-label/) provides a clear and accessible description of the form element it is associated with.", - "**Radio input:** A radio input indicates the appropriate state. By default it is unselected.", - "**Radio label:** Describes the information you want to select or unselect.", - "**Assistive text (Optional):** The [assistive text](/components/assistive-text/) provides additional instructional information / error / success messaging for the whole radio group." + "**Radio input:** A radio input indicates the current selected state for the option. By default it is unselected.", + "**Radio label:** Describes the option that can be selected.", + "**Assistive text (Optional):** The [assistive text](/components/assistive-text/) provides additional instructions and error or success messaging for the entire radio group." ] } %} From 291b6e0e58775e4cb4d46c577afffe067121d140 Mon Sep 17 00:00:00 2001 From: Jamie Maguire Date: Wed, 13 Nov 2024 11:43:16 +0000 Subject: [PATCH 12/19] Update apps/pie-docs/src/components/radio-group/overview/overview.md Co-authored-by: Xander Marjoram --- apps/pie-docs/src/components/radio-group/overview/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/pie-docs/src/components/radio-group/overview/overview.md b/apps/pie-docs/src/components/radio-group/overview/overview.md index dae4a769e4..ca9906117b 100644 --- a/apps/pie-docs/src/components/radio-group/overview/overview.md +++ b/apps/pie-docs/src/components/radio-group/overview/overview.md @@ -61,7 +61,7 @@ They are commonly used in forms, settings panels, and other interfaces where use --- ## Variations -Radio groups can be laid out both horizontally and vertically depending on the use cas and the structure of the UI. Where possible, arrange the radio group vertically for easier reading. +Radio groups can be laid out either vertically or horizontally depending on the use-case and the structure of the user interface. The default layout is vertical, and this is recommended for easier reading. ### Horizontal {% contentPageImage { From 8d0d27d969638f10d424f5d1a55111f42a366010 Mon Sep 17 00:00:00 2001 From: Jamie Maguire Date: Wed, 13 Nov 2024 11:43:27 +0000 Subject: [PATCH 13/19] Update apps/pie-docs/src/components/radio-group/overview/overview.md Co-authored-by: Xander Marjoram --- apps/pie-docs/src/components/radio-group/overview/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/pie-docs/src/components/radio-group/overview/overview.md b/apps/pie-docs/src/components/radio-group/overview/overview.md index ca9906117b..1228b0b7d6 100644 --- a/apps/pie-docs/src/components/radio-group/overview/overview.md +++ b/apps/pie-docs/src/components/radio-group/overview/overview.md @@ -82,7 +82,7 @@ Radio groups can be laid out either vertically or horizontally depending on the ## Modifiers ### Form label -A form label is recommended to provide the user context of the form element and it’s content. +A form label is recommended to provide the user context of the form element and its content. {% contentLayout %} {% contentItem %} From 9c828ce9d3881d581abf1a879f4068e6f5949e43 Mon Sep 17 00:00:00 2001 From: Jamie Maguire Date: Wed, 13 Nov 2024 11:43:34 +0000 Subject: [PATCH 14/19] Update apps/pie-docs/src/components/radio-group/overview/overview.md Co-authored-by: Xander Marjoram --- apps/pie-docs/src/components/radio-group/overview/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/pie-docs/src/components/radio-group/overview/overview.md b/apps/pie-docs/src/components/radio-group/overview/overview.md index 1228b0b7d6..885084b23b 100644 --- a/apps/pie-docs/src/components/radio-group/overview/overview.md +++ b/apps/pie-docs/src/components/radio-group/overview/overview.md @@ -166,7 +166,7 @@ Individual radios have their own interactive states: default, hover, active, and ## Examples ### LTR examples -Here are some examples of the component in left-to-right context: +Here are some examples of the component in a left-to-right context: {% contentPageImage { src:"../../../assets/img/components/radio-group/ltr.svg", From d1a2e403f7808b6d96428deaaca2bc3d0bdc6e24 Mon Sep 17 00:00:00 2001 From: Jamie Maguire Date: Wed, 13 Nov 2024 11:43:39 +0000 Subject: [PATCH 15/19] Update apps/pie-docs/src/components/radio-group/overview/overview.md Co-authored-by: Xander Marjoram --- apps/pie-docs/src/components/radio-group/overview/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/pie-docs/src/components/radio-group/overview/overview.md b/apps/pie-docs/src/components/radio-group/overview/overview.md index 885084b23b..2005cf5da5 100644 --- a/apps/pie-docs/src/components/radio-group/overview/overview.md +++ b/apps/pie-docs/src/components/radio-group/overview/overview.md @@ -175,7 +175,7 @@ Here are some examples of the component in a left-to-right context: } %} ### RTL examples -Here are some examples of the component in right-to-left context: +Here are some examples of the component in a right-to-left context: {% contentPageImage { src:"../../../assets/img/components/radio-group/rtl.svg", From eca5beae8d3be673ef0f023bccc069a2040440ab Mon Sep 17 00:00:00 2001 From: personal Date: Wed, 13 Nov 2024 11:55:43 +0000 Subject: [PATCH 16/19] add radio group resource table --- apps/pie-docs/src/componentStatusData.js | 39 +++++++++++++++++++ .../radio-group/overview/overview.md | 8 ++-- 2 files changed, 43 insertions(+), 4 deletions(-) diff --git a/apps/pie-docs/src/componentStatusData.js b/apps/pie-docs/src/componentStatusData.js index 86f696d177..18609d7842 100644 --- a/apps/pie-docs/src/componentStatusData.js +++ b/apps/pie-docs/src/componentStatusData.js @@ -1461,6 +1461,45 @@ const rows = [ status: statusTypes.STABLE, } ], + [ + { componentName: 'Radio Group' }, + { + resource: resourceTypes.COMPONENT, + link: 'https://www.figma.com/design/pPSC73rPin4csb8DiK1CRr/%E2%9C%A8-%5BCore%5D-Web-Components-%5BPIE-3%5D?node-id=198-33663', + status: statusTypes.STABLE, + }, + { + resource: resourceTypes.DOCUMENTATION, + link: 'https://www.figma.com/design/OOgnT2oNMdGFytj5AanYvt/%5BCore%5D-Web-Component-Documentation-%5BPIE-3%5D?node-id=29-22', + status: statusTypes.STABLE, + }, + { + resource: resourceTypes.WEB_COMPONENTS, + link: 'https://webc.pie.design/?path=/story/radio-group--default', + status: webComponentStatuses['pie-radio-group'], + }, + { + resource: resourceTypes.VUE, + status: statusTypes.NOT_APPLICABLE, + }, + { + resource: resourceTypes.REACT, + link: 'https://snacks.takeaway.com/portal/components/radio-group/', + status: statusTypes.STABLE, + }, + { + resource: resourceTypes.IOS_JUST_UI, + status: statusTypes.STABLE, + }, + { + resource: resourceTypes.IOS_PIE, + status: statusTypes.STABLE, + }, + { + resource: resourceTypes.ANDROID_PIE, + status: statusTypes.STABLE, + } + ], [ { componentName: 'Rating' }, { diff --git a/apps/pie-docs/src/components/radio-group/overview/overview.md b/apps/pie-docs/src/components/radio-group/overview/overview.md index 2005cf5da5..a5254c3de1 100644 --- a/apps/pie-docs/src/components/radio-group/overview/overview.md +++ b/apps/pie-docs/src/components/radio-group/overview/overview.md @@ -103,7 +103,7 @@ A form label is recommended to provide the user context of the form element and ### Assistive text -Assistive text is used where needed to provide additional information or error / success messaging regarding the whole form element, and never to individual checkboxes. The assistive text is always used for an error state to provide the user with the information required to complete the form element. +Assistive text is used where needed to provide additional information or error / success messaging regarding the whole form element, and never to individual radios. The assistive text is always used for an error state to provide the user with the information required to complete the form element. {% contentPageImage { src:"../../../assets/img/components/radio-group/modifiers-assistive-text.svg", @@ -124,8 +124,8 @@ All content should use sentence case. } %} ### Label -- Always use clear and concise labels for checkboxes. -- Labels appear to the right of checkbox input. +- Always use clear and concise labels for radio buttons. +- Labels appear to the right of radio buttons. --- @@ -188,5 +188,5 @@ Here are some examples of the component in a right-to-left context: ## Resources {% resourceTable { - componentName: 'Radio' + componentName: 'Radio Group' } %} From 91e0960e89bce33dd55b64a33f2aeadef4a016e8 Mon Sep 17 00:00:00 2001 From: personal Date: Thu, 14 Nov 2024 08:36:53 +0000 Subject: [PATCH 17/19] move vertical above horizontal in variations --- .../components/radio-group/overview/overview.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/apps/pie-docs/src/components/radio-group/overview/overview.md b/apps/pie-docs/src/components/radio-group/overview/overview.md index a5254c3de1..cfbc9b75a1 100644 --- a/apps/pie-docs/src/components/radio-group/overview/overview.md +++ b/apps/pie-docs/src/components/radio-group/overview/overview.md @@ -63,13 +63,6 @@ They are commonly used in forms, settings panels, and other interfaces where use ## Variations Radio groups can be laid out either vertically or horizontally depending on the use-case and the structure of the user interface. The default layout is vertical, and this is recommended for easier reading. -### Horizontal -{% contentPageImage { - src:"../../../assets/img/components/radio-group/variations-horizontal.svg", - alt: "A row of radio buttons grouped together by a single label above them.", - width: 258 -} %} - ### Vertical {% contentPageImage { src:"../../../assets/img/components/radio-group/variations-vertical.svg", @@ -77,6 +70,13 @@ Radio groups can be laid out either vertically or horizontally depending on the width: 257 } %} +### Horizontal +{% contentPageImage { + src:"../../../assets/img/components/radio-group/variations-horizontal.svg", + alt: "A row of radio buttons grouped together by a single label above them.", + width: 258 +} %} + --- ## Modifiers From 6dbd9dc64608432ac11e9c5216cf15a22493405e Mon Sep 17 00:00:00 2001 From: personal Date: Thu, 14 Nov 2024 09:34:55 +0000 Subject: [PATCH 18/19] rename modifiers image --- .../{Modifiers-form-label-2.svg => modifiers-form-label-2.svg} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename apps/pie-docs/src/assets/img/components/radio-group/{Modifiers-form-label-2.svg => modifiers-form-label-2.svg} (100%) diff --git a/apps/pie-docs/src/assets/img/components/radio-group/Modifiers-form-label-2.svg b/apps/pie-docs/src/assets/img/components/radio-group/modifiers-form-label-2.svg similarity index 100% rename from apps/pie-docs/src/assets/img/components/radio-group/Modifiers-form-label-2.svg rename to apps/pie-docs/src/assets/img/components/radio-group/modifiers-form-label-2.svg From 6cffaf60e1a25c88f08a8fd78303300cfc19f943 Mon Sep 17 00:00:00 2001 From: personal Date: Tue, 19 Nov 2024 12:44:32 +0000 Subject: [PATCH 19/19] use improved images --- apps/pie-docs/src/assets/img/components/radio-group/ltr.svg | 4 ++-- .../assets/img/components/radio-group/variations-vertical.svg | 4 ++-- apps/pie-docs/src/components/radio-group/overview/overview.md | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/pie-docs/src/assets/img/components/radio-group/ltr.svg b/apps/pie-docs/src/assets/img/components/radio-group/ltr.svg index 3518a53e16..082a17ccdc 100644 --- a/apps/pie-docs/src/assets/img/components/radio-group/ltr.svg +++ b/apps/pie-docs/src/assets/img/components/radio-group/ltr.svg @@ -1,4 +1,4 @@ - + @@ -13,7 +13,7 @@ - + diff --git a/apps/pie-docs/src/assets/img/components/radio-group/variations-vertical.svg b/apps/pie-docs/src/assets/img/components/radio-group/variations-vertical.svg index 03638656a5..e66705808f 100644 --- a/apps/pie-docs/src/assets/img/components/radio-group/variations-vertical.svg +++ b/apps/pie-docs/src/assets/img/components/radio-group/variations-vertical.svg @@ -1,4 +1,4 @@ - + @@ -12,7 +12,7 @@ - + diff --git a/apps/pie-docs/src/components/radio-group/overview/overview.md b/apps/pie-docs/src/components/radio-group/overview/overview.md index cfbc9b75a1..83345ea97f 100644 --- a/apps/pie-docs/src/components/radio-group/overview/overview.md +++ b/apps/pie-docs/src/components/radio-group/overview/overview.md @@ -67,7 +67,7 @@ Radio groups can be laid out either vertically or horizontally depending on the {% contentPageImage { src:"../../../assets/img/components/radio-group/variations-vertical.svg", alt: "A vertical stack of radio buttons grouped together by a single label above them.", - width: 257 + width: 72 } %} ### Horizontal @@ -171,7 +171,7 @@ Here are some examples of the component in a left-to-right context: {% contentPageImage { src:"../../../assets/img/components/radio-group/ltr.svg", alt: "A vertical stack of radio buttons. The first one is selected. The radio buttons sit on the left hand side of the label text. This demonstrates a left-to-right reading direction.", - width: 257 + width: 94 } %} ### RTL examples