fix: change #radio group and #toggle-button group property from `dire…

…ction` to `label_direction`
dnbexperience · Jul 4, 2019 · 6fe9a37 · 6fe9a37
1 parent 9dcdc94
commit 6fe9a37
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 26 deletions.
diff --git a/...s/dnb-design-system-portal/src/pages/uilib/components/radio/radio-properties.md b/...s/dnb-design-system-portal/src/pages/uilib/components/radio/radio-properties.md
@@ -27,5 +27,5 @@ draft: true
 | `status`           | _(optional)_ uses the `form-status` component to show failure messages.                                                                                              |
 | `status_state`     | _(optional)_ defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.                                                 |
 | `label`            | _(optional)_ use either the `label` property or provide custom one.                                                                                                  |
-| `direction`        | _(optional)_ to define the `label` layout direction on how the next element should be placed on. Can be either `vertical` or `horizontal`. Defaults to `horizontal`. |
+| `label_direction`  | _(optional)_ to define the `label` layout direction on how the next element should be placed on. Can be either `vertical` or `horizontal`. Defaults to `horizontal`. |
 | `vertical`         | _(optional)_ is a short hand to define a `vertical` direction if set to `true`.                                                                                      |
diff --git a/...tem-portal/src/pages/uilib/components/toggle-button/toggle-button-properties.md b/...tem-portal/src/pages/uilib/components/toggle-button/toggle-button-properties.md
@@ -27,5 +27,5 @@ draft: true
 | `status`           | _(optional)_ uses the `form-status` component to show failure messages.                                                                                                                         |
 | `status_state`     | _(optional)_ defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.                                                                            |
 | `label`            | _(optional)_ use either the `label` property or provide custom one.                                                                                                                             |
-| `direction`        | _(optional)_ to define the `label` layout direction on how the next element should be placed on. Can be either `vertical` or `horizontal`. Defaults to `horizontal`.                            |
+| `label_direction`  | _(optional)_ to define the `label` layout direction on how the next element should be placed on. Can be either `vertical` or `horizontal`. Defaults to `horizontal`.                            |
 | `vertical`         | _(optional)_ is a short hand to define a `vertical` direction if set to `true`.                                                                                                                 |
diff --git a/packages/dnb-ui-lib/src/components/radio/RadioGroup.js b/packages/dnb-ui-lib/src/components/radio/RadioGroup.js
@@ -32,7 +32,7 @@ export const propTypes = {
   status_state: PropTypes.string,
   status_animation: PropTypes.string,
   layout_direction: PropTypes.oneOf(['column', 'row']),
-  direction: PropTypes.oneOf(['horizontal', 'vertical']),
+  label_direction: PropTypes.oneOf(['horizontal', 'vertical']),
   vertical: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   value: PropTypes.string,
   attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
@@ -62,7 +62,7 @@ export const defaultProps = {
   status: null,
   status_state: 'error',
   status_animation: null,
-  direction: 'horizontal',
+  label_direction: null,
   vertical: null,
   layout_direction: 'row',
   value: null,
@@ -137,7 +137,7 @@ export default class RadioGroup extends PureComponent {
       status,
       status_state,
       status_animation,
-      direction,
+      label_direction,
       vertical,
       layout_direction,
       label,
@@ -196,7 +196,7 @@ export default class RadioGroup extends PureComponent {
       id,
       label,
       label_id: id, // send the id along, so the FormRow component can use it
-      direction,
+      direction: label_direction,
       vertical,
       disabled,
       no_fieldset

diff --git a/packages/dnb-ui-lib/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap b/packages/dnb-ui-lib/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap
@@ -100,10 +100,10 @@ exports[`Radio group component have to match group snapshot 1`] = `
   className={null}
   custom_element={null}
   custom_method={null}
-  direction="horizontal"
   disabled={null}
   id="group"
   label="Label"
+  label_direction={null}
   layout_direction="row"
   name="group"
   no_fieldset={true}
@@ -121,7 +121,7 @@ exports[`Radio group component have to match group snapshot 1`] = `
     <FormRow
       class={null}
       className={null}
-      direction="horizontal"
+      direction={null}
       disabled={null}
       id="group"
       label="Label"
@@ -136,7 +136,7 @@ exports[`Radio group component have to match group snapshot 1`] = `
     >
       <Fieldset>
         <div
-          className="dnb-form-row dnb-form-row--horizontal"
+          className="dnb-form-row"
         >
           <FormLabel
             class={null}
@@ -152,13 +152,13 @@ exports[`Radio group component have to match group snapshot 1`] = `
             vertical={null}
           >
             <Element
-              className="dnb-form-label dnb-form-label--horizontal dnb-form-row__label"
+              className="dnb-form-label dnb-form-row__label"
               htmlFor="group"
               id="group-label"
               is="label"
             >
               <label
-                className="dnb-form-label dnb-form-label--horizontal dnb-form-row__label"
+                className="dnb-form-label dnb-form-row__label"
                 htmlFor="group"
                 id="group-label"
               >
@@ -215,14 +215,14 @@ exports[`Radio group component have to match group snapshot 1`] = `
                   >
                     <Element
                       aria-hidden={true}
-                      className="dnb-form-label dnb-form-label--horizontal"
+                      className="dnb-form-label"
                       htmlFor="radio-1"
                       id="radio-1-label"
                       is="label"
                     >
                       <label
                         aria-hidden={true}
-                        className="dnb-form-label dnb-form-label--horizontal"
+                        className="dnb-form-label"
                         htmlFor="radio-1"
                         id="radio-1-label"
                       >
@@ -304,14 +304,14 @@ exports[`Radio group component have to match group snapshot 1`] = `
                   >
                     <Element
                       aria-hidden={true}
-                      className="dnb-form-label dnb-form-label--horizontal"
+                      className="dnb-form-label"
                       htmlFor="radio-2"
                       id="radio-2-label"
                       is="label"
                     >
                       <label
                         aria-hidden={true}
-                        className="dnb-form-label dnb-form-label--horizontal"
+                        className="dnb-form-label"
                         htmlFor="radio-2"
                         id="radio-2-label"
                       >

diff --git a/packages/dnb-ui-lib/src/components/toggle-button/ToggleButtonGroup.js b/packages/dnb-ui-lib/src/components/toggle-button/ToggleButtonGroup.js
@@ -35,7 +35,7 @@ export const propTypes = {
   status_state: PropTypes.string,
   status_animation: PropTypes.string,
   layout_direction: PropTypes.oneOf(['column', 'row']),
-  direction: PropTypes.oneOf(['horizontal', 'vertical']),
+  label_direction: PropTypes.oneOf(['horizontal', 'vertical']),
   vertical: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   value: PropTypes.string,
   values: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
@@ -68,7 +68,7 @@ export const defaultProps = {
   status: null,
   status_state: 'error',
   status_animation: null,
-  direction: 'horizontal',
+  label_direction: null,
   vertical: null,
   layout_direction: 'row',
   value: null,
@@ -172,7 +172,7 @@ export default class ToggleButtonGroup extends PureComponent {
       status,
       status_state,
       status_animation,
-      direction,
+      label_direction,
       vertical,
       layout_direction,
       label,
@@ -250,7 +250,7 @@ export default class ToggleButtonGroup extends PureComponent {
       id,
       label,
       label_id: id, // send the id along, so the FormRow component can use it
-      direction,
+      direction: label_direction,
       vertical,
       disabled
       // status,

diff --git a/...dnb-ui-lib/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap b/...dnb-ui-lib/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap
@@ -266,10 +266,10 @@ exports[`ToggleButton group component have to match group snapshot 1`] = `
   className={null}
   custom_element={null}
   custom_method={null}
-  direction="horizontal"
   disabled={null}
   id="group"
   label="Label"
+  label_direction={null}
   layout_direction="row"
   left_component={null}
   multiselect={null}
@@ -290,7 +290,7 @@ exports[`ToggleButton group component have to match group snapshot 1`] = `
     <FormRow
       class={null}
       className={null}
-      direction="horizontal"
+      direction={null}
       disabled={null}
       id="group"
       label="Label"
@@ -308,7 +308,7 @@ exports[`ToggleButton group component have to match group snapshot 1`] = `
           className="dnb-form-row__wrapper"
         >
           <div
-            className="dnb-form-row dnb-form-row--horizontal"
+            className="dnb-form-row"
           >
             <FormLabel
               class={null}
@@ -324,12 +324,12 @@ exports[`ToggleButton group component have to match group snapshot 1`] = `
               vertical={null}
             >
               <Element
-                className="dnb-form-label dnb-form-label--horizontal dnb-form-row__label"
+                className="dnb-form-label dnb-form-row__label"
                 id="group-label"
                 is="legend"
               >
                 <legend
-                  className="dnb-form-label dnb-form-label--horizontal dnb-form-row__label"
+                  className="dnb-form-label dnb-form-row__label"
                   id="group-label"
                 >
                   Label

diff --git a/packages/dnb-ui-lib/stories/components/Radio.js b/packages/dnb-ui-lib/stories/components/Radio.js
@@ -134,14 +134,31 @@ export default [
         <Radio.Group
           label="Vertical group with error:"
           layout_direction="column"
-          vertical="true"
+          label_direction="vertical"
+          // vertical="true"
           status="Error message Potenti viverra facilisi blandit sodales lorem est fusce pulvinar a imperdiet quis mi parturient mattis feugiat tellus ipsum magnis rutrum"
         >
           <Radio label="First" value="first" />
           <Radio label="Second" value="second" />
           <Radio label="Third" value="third" checked />
         </Radio.Group>
       </Box>
+      <Box>
+        <FormRow direction="vertical">
+          <Radio.Group label="Vertical with FormRow:">
+            <Radio label="First" value="first" />
+            <Radio label="Second" value="second" />
+            <Radio label="Third" value="third" checked />
+          </Radio.Group>
+        </FormRow>
+      </Box>
+      <Box>
+        <Radio.Group label="Vertical label:" label_direction="vertical">
+          <Radio label="First" value="first" />
+          <Radio label="Second" value="second" />
+          <Radio label="Third" value="third" checked />
+        </Radio.Group>
+      </Box>
       <Box>
         <Radio.Group
           label="Group with error:"

diff --git a/packages/dnb-ui-lib/stories/components/ToggleButton.js b/packages/dnb-ui-lib/stories/components/ToggleButton.js
@@ -164,7 +164,8 @@ export default [
         <ToggleButton.Group
           label="Vertical group with error:"
           layout_direction="column"
-          vertical="true"
+          label_direction="vertical"
+          // vertical="true"
           status="Error message Potenti viverra facilisi blandit sodales lorem est fusce pulvinar a imperdiet quis mi parturient mattis feugiat tellus ipsum magnis rutrum"
         >
           <ToggleButton text="First" value="first" />