From de4955eb608c8d42be2ff4c4ea4ab0f0fd4cb72c Mon Sep 17 00:00:00 2001 From: dharini Date: Tue, 25 Jan 2022 16:12:03 -0800 Subject: [PATCH 01/10] =?UTF-8?q?fix:=20=F0=9F=90=9B=20add=20radiocard=20s?= =?UTF-8?q?upport=20to=20group?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../rose/form/radio/group/index.hbs | 7 +- .../rose/form/radio/group/index.stories.mdx | 156 ++++++++++++++++++ .../styles/rose/components/form/_radio.scss | 11 ++ 3 files changed, 172 insertions(+), 2 deletions(-) diff --git a/addons/rose/addon/components/rose/form/radio/group/index.hbs b/addons/rose/addon/components/rose/form/radio/group/index.hbs index de2b010b6..11f60d571 100644 --- a/addons/rose/addon/components/rose/form/radio/group/index.hbs +++ b/addons/rose/addon/components/rose/form/radio/group/index.hbs @@ -1,3 +1,6 @@ -{{yield (hash +
+ {{yield (hash radio=(component 'rose/form/radio/radio' name=@name selectedValue=@selectedValue disabled=@disabled changed=@changed inline=@inline) -)}} \ No newline at end of file + card=(component 'rose/form/radio/card' name=@name selectedValue=@selectedValue disabled=@disabled changed=@changed inline=@inline layout=@layout) +)}} +
\ No newline at end of file diff --git a/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx index e8b8a087a..6425e79d6 100644 --- a/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx +++ b/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx @@ -81,3 +81,159 @@ Renders a form radiofield group. } }} + +```htmlbars + + + + + +``` + + {{ + template: hbs` + + + + + + `, + context: { + name: text('name', 'mustagree'), + disabled: boolean('disabled', false), + inline: boolean('inline', true), + selectedValue: text('selectedValue', 'disagree'), + firstFieldLabel: text('first label', 'Agree'), + firstFieldValue: text('first value', 'agree'), + firstFieldIcon: select( + 'firstFieldIcon', + { + 'none': null, + 'flight-icons/svg/azure-color-16': 'flight-icons/svg/azure-color-16', + }, + null + ), + secondFieldLabel: text('second label', 'Maybe'), + secondFieldValue: text('second value', 'maybe'), + thirdFieldLabel: text('third label', 'Disagree'), + thirdFieldValue: text('third value', 'disagree'), + changed: action('changed') + } + }} + + +```htmlbars + + + + +``` + + {{ + template: hbs` + + + + + + `, + context: { + name: text('name', 'mustagree'), + disabled: boolean('disabled', false), + inline: boolean('inline', true), + selectedValue: text('selectedValue', 'disagree'), + firstFieldLabel: text('first label', 'Agree'), + firstFieldValue: text('first value', 'agree'), + firstFieldIcon: select( + 'firstFieldIcon', + { + 'none': null, + 'flight-icons/svg/azure-color-16': 'flight-icons/svg/azure-color-16', + }, + null + ), + secondFieldLabel: text('second label', 'Maybe'), + secondFieldValue: text('second value', 'maybe'), + thirdFieldLabel: text('third label', 'Disagree'), + thirdFieldValue: text('third value', 'disagree'), + changed: action('changed') + } + }} + \ No newline at end of file diff --git a/addons/rose/addon/styles/rose/components/form/_radio.scss b/addons/rose/addon/styles/rose/components/form/_radio.scss index 32be9a8c5..8c41f98c2 100644 --- a/addons/rose/addon/styles/rose/components/form/_radio.scss +++ b/addons/rose/addon/styles/rose/components/form/_radio.scss @@ -22,6 +22,17 @@ $radio-svg: ( ); $data-svg-prefix: 'data:image/svg+xml;utf-8,'; +.radio-field-wrapper { + &.inline { + display: inline-flex; + .rose-form-radio-label { + margin-right: sizing.rems(s); + } + } + .rose-form-radio-card { + margin-bottom: sizing.rems(s); + } +} .rose-form-radio { &.inline { display: inline-block; From 36375ae0be0f2e241f9028691c2fdad17c53a65a Mon Sep 17 00:00:00 2001 From: dharini Date: Wed, 26 Jan 2022 11:43:30 -0800 Subject: [PATCH 02/10] =?UTF-8?q?fix:=20=F0=9F=90=9B=20remove=20wrapper=20?= =?UTF-8?q?and=20make=20card=20always=20inline?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../rose/form/radio/group/index.hbs | 4 +--- .../rose/form/radio/group/index.stories.mdx | 22 +++++++++++++++---- .../rose/components/form/_radio-card.scss | 2 +- .../styles/rose/components/form/_radio.scss | 11 ---------- 4 files changed, 20 insertions(+), 19 deletions(-) diff --git a/addons/rose/addon/components/rose/form/radio/group/index.hbs b/addons/rose/addon/components/rose/form/radio/group/index.hbs index 11f60d571..187aad87b 100644 --- a/addons/rose/addon/components/rose/form/radio/group/index.hbs +++ b/addons/rose/addon/components/rose/form/radio/group/index.hbs @@ -1,6 +1,4 @@ -
{{yield (hash radio=(component 'rose/form/radio/radio' name=@name selectedValue=@selectedValue disabled=@disabled changed=@changed inline=@inline) - card=(component 'rose/form/radio/card' name=@name selectedValue=@selectedValue disabled=@disabled changed=@changed inline=@inline layout=@layout) + card=(component 'rose/form/radio/card' name=@name selectedValue=@selectedValue disabled=@disabled changed=@changed layout=@layout) )}} -
\ No newline at end of file diff --git a/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx index 6425e79d6..9e2c01009 100644 --- a/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx +++ b/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx @@ -119,7 +119,6 @@ Renders a form radiofield group. @name={{name}} @selectedValue={{selectedValue}} @changed={{changed}} - @inline={{inline}} as |radioGroup| > @@ -143,7 +144,6 @@ Renders a form radiofield group. context: { name: text('name', 'mustagree'), disabled: boolean('disabled', false), - inline: boolean('inline', true), selectedValue: text('selectedValue', 'disagree'), firstFieldLabel: text('first label', 'Agree'), firstFieldValue: text('first value', 'agree'), @@ -154,6 +154,22 @@ Renders a form radiofield group. 'flight-icons/svg/azure-color-16': 'flight-icons/svg/azure-color-16', }, null + ), + secondFieldIcon: select( + 'secondFieldIcon', + { + 'none': null, + 'flight-icons/svg/azure-color-16': 'flight-icons/svg/azure-color-16', + }, + null + ), + thirdFieldIcon: select( + 'thirdFieldIcon', + { + 'none': null, + 'flight-icons/svg/azure-color-16': 'flight-icons/svg/azure-color-16', + }, + null ), secondFieldLabel: text('second label', 'Maybe'), secondFieldValue: text('second value', 'maybe'), @@ -193,7 +209,6 @@ Renders a form radiofield group. @name={{name}} @selectedValue={{selectedValue}} @changed={{changed}} - @inline={{inline}} as |radioGroup| > Date: Wed, 26 Jan 2022 13:27:47 -0800 Subject: [PATCH 03/10] =?UTF-8?q?fix:=20=F0=9F=90=9B=20adjust=20margin?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- addons/rose/addon/styles/rose/components/form/_radio-card.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addons/rose/addon/styles/rose/components/form/_radio-card.scss b/addons/rose/addon/styles/rose/components/form/_radio-card.scss index 4ed548c55..e948334f6 100644 --- a/addons/rose/addon/styles/rose/components/form/_radio-card.scss +++ b/addons/rose/addon/styles/rose/components/form/_radio-card.scss @@ -61,7 +61,7 @@ $radio-svg: ( display: inline-flex; align-items: center; justify-content: center; - + margin-right: $size-xs; .radio-card-overlay { position: absolute; height: $size-l + $size-xxs; From 87bb8e3e394fa0166adec80bff5ace183e63d1fa Mon Sep 17 00:00:00 2001 From: dharini Date: Wed, 26 Jan 2022 13:38:31 -0800 Subject: [PATCH 04/10] add margin bottom --- addons/rose/addon/styles/rose/components/form/_radio-card.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/addons/rose/addon/styles/rose/components/form/_radio-card.scss b/addons/rose/addon/styles/rose/components/form/_radio-card.scss index e948334f6..d296245d6 100644 --- a/addons/rose/addon/styles/rose/components/form/_radio-card.scss +++ b/addons/rose/addon/styles/rose/components/form/_radio-card.scss @@ -62,6 +62,8 @@ $radio-svg: ( align-items: center; justify-content: center; margin-right: $size-xs; + margin-bottom: $size-s; + .radio-card-overlay { position: absolute; height: $size-l + $size-xxs; From bb0eacb108933b99deadd5e3267d08fc6a699d76 Mon Sep 17 00:00:00 2001 From: dharini Date: Wed, 26 Jan 2022 13:55:19 -0800 Subject: [PATCH 05/10] border-color change --- addons/rose/addon/styles/rose/components/form/_radio-card.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addons/rose/addon/styles/rose/components/form/_radio-card.scss b/addons/rose/addon/styles/rose/components/form/_radio-card.scss index d296245d6..e8cdb0c1c 100644 --- a/addons/rose/addon/styles/rose/components/form/_radio-card.scss +++ b/addons/rose/addon/styles/rose/components/form/_radio-card.scss @@ -84,7 +84,7 @@ $radio-svg: ( position: relative; text-align: left; word-break: break-all; - border: $size-xxxxs solid var(--ui-gray-subtler-6); + border: $size-xxxxs solid var(--ui-gray-subtler-2); box-shadow: 0 $size-xxs $size-xxs rgba(var(--stark-components), var(--opacity-2)); border-radius: $size-xxs; From 27582e7c19383fdb02b3b1046c51d6bc76615872 Mon Sep 17 00:00:00 2001 From: dharini Date: Wed, 26 Jan 2022 15:28:16 -0800 Subject: [PATCH 06/10] needs more bottom margin when used in CRUD forms --- addons/rose/addon/styles/rose/components/form/_radio-card.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addons/rose/addon/styles/rose/components/form/_radio-card.scss b/addons/rose/addon/styles/rose/components/form/_radio-card.scss index e8cdb0c1c..06d5d2c97 100644 --- a/addons/rose/addon/styles/rose/components/form/_radio-card.scss +++ b/addons/rose/addon/styles/rose/components/form/_radio-card.scss @@ -62,7 +62,7 @@ $radio-svg: ( align-items: center; justify-content: center; margin-right: $size-xs; - margin-bottom: $size-s; + margin-bottom: $size-m; .radio-card-overlay { position: absolute; From f454ef988f87d4b4b03f0b0023758650f2ff90f6 Mon Sep 17 00:00:00 2001 From: Dharini Jeeva Date: Wed, 26 Jan 2022 15:51:05 -0800 Subject: [PATCH 07/10] Update _radio-card.scss --- addons/rose/addon/styles/rose/components/form/_radio-card.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addons/rose/addon/styles/rose/components/form/_radio-card.scss b/addons/rose/addon/styles/rose/components/form/_radio-card.scss index 06d5d2c97..a4bae3cb3 100644 --- a/addons/rose/addon/styles/rose/components/form/_radio-card.scss +++ b/addons/rose/addon/styles/rose/components/form/_radio-card.scss @@ -62,7 +62,7 @@ $radio-svg: ( align-items: center; justify-content: center; margin-right: $size-xs; - margin-bottom: $size-m; + margin-bottom: $size-xl; .radio-card-overlay { position: absolute; From bfd0b32cb364d110ceadb22517e346d86080d98d Mon Sep 17 00:00:00 2001 From: Dharini Jeeva Date: Wed, 26 Jan 2022 16:19:21 -0800 Subject: [PATCH 08/10] Update _radio-card.scss --- .../rose/addon/styles/rose/components/form/_radio-card.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/addons/rose/addon/styles/rose/components/form/_radio-card.scss b/addons/rose/addon/styles/rose/components/form/_radio-card.scss index a4bae3cb3..870e14ead 100644 --- a/addons/rose/addon/styles/rose/components/form/_radio-card.scss +++ b/addons/rose/addon/styles/rose/components/form/_radio-card.scss @@ -61,8 +61,8 @@ $radio-svg: ( display: inline-flex; align-items: center; justify-content: center; - margin-right: $size-xs; - margin-bottom: $size-xl; + margin: $size-m $size-xs $size-xl 0; + .radio-card-overlay { position: absolute; From f9e3656ce9bef5769e0473e4f6a731ff1634051e Mon Sep 17 00:00:00 2001 From: Dharini Jeeva Date: Wed, 26 Jan 2022 16:19:51 -0800 Subject: [PATCH 09/10] Update _radio-card.scss --- addons/rose/addon/styles/rose/components/form/_radio-card.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/addons/rose/addon/styles/rose/components/form/_radio-card.scss b/addons/rose/addon/styles/rose/components/form/_radio-card.scss index 870e14ead..8a682bbb1 100644 --- a/addons/rose/addon/styles/rose/components/form/_radio-card.scss +++ b/addons/rose/addon/styles/rose/components/form/_radio-card.scss @@ -63,7 +63,6 @@ $radio-svg: ( justify-content: center; margin: $size-m $size-xs $size-xl 0; - .radio-card-overlay { position: absolute; height: $size-l + $size-xxs; From a011278c41f8fe40ebf61ad50f6d44df01574cbc Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Thu, 27 Jan 2022 10:03:17 -0500 Subject: [PATCH 10/10] =?UTF-8?q?chore:=20=F0=9F=A4=96=20tweak=20storybook?= =?UTF-8?q?=20names=20and=20fix=20word=20breaking?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../addon/components/rose/form/radio/card/index.stories.mdx | 4 ++-- .../rose/addon/components/rose/form/radio/group/index.hbs | 2 +- .../components/rose/form/radio/group/index.stories.mdx | 6 +++--- .../rose/addon/styles/rose/components/form/_radio-card.scss | 1 - 4 files changed, 6 insertions(+), 7 deletions(-) diff --git a/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx index 360108563..a730607c7 100644 --- a/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx +++ b/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx @@ -21,7 +21,7 @@ Renders a form radiofield in a Wide format. ``` - {{ + {{ template: hbs` - {{ + {{ template: hbs` ``` - {{ + {{ template: hbs` ``` - {{ + {{ template: hbs` - \ No newline at end of file + diff --git a/addons/rose/addon/styles/rose/components/form/_radio-card.scss b/addons/rose/addon/styles/rose/components/form/_radio-card.scss index 8a682bbb1..5e8018b40 100644 --- a/addons/rose/addon/styles/rose/components/form/_radio-card.scss +++ b/addons/rose/addon/styles/rose/components/form/_radio-card.scss @@ -82,7 +82,6 @@ $radio-svg: ( display: block; position: relative; text-align: left; - word-break: break-all; border: $size-xxxxs solid var(--ui-gray-subtler-2); box-shadow: 0 $size-xxs $size-xxs rgba(var(--stark-components), var(--opacity-2));