fix(radio): fix height limit and block flow improvements (#640)

Co-authored-by: Murat Çorlu <[email protected]> Co-authored-by: Murat Çorlu <[email protected]>
Trendyol · Jul 14, 2023 · 039af1e · 039af1e
1 parent 0d99a12
commit 039af1e
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 15 deletions.
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -15,4 +15,8 @@
 bl-dialog {
   font: var(--bl-font-body-text-2)
 }
+
+.limited-width {
+  max-width: 300px;
+}
 </style>
diff --git a/src/components/radio-group/bl-radio-group.css b/src/components/radio-group/bl-radio-group.css
@@ -1,6 +1,5 @@
 :host {
-  display: flex;
-  flex-direction: row;
+  display: block;
 }
 
 fieldset {
@@ -16,6 +15,9 @@ legend {
 .options {
   display: flex;
   flex-flow: var(--bl-radio-direction, column) wrap;
+  align-items: var(--bl-radio-group-cross-axis-item-alignment, normal);
+  align-content: var(--bl-radio-group-cross-axis-content-alignment, normal);
+  justify-content: var(--bl-radio-group-main-axis-content-alignment, normal);
   gap: var(--bl-size-m);
   margin-block: var(--bl-size-xs);
 }
diff --git a/src/components/radio-group/bl-radio-group.stories.mdx b/src/components/radio-group/bl-radio-group.stories.mdx
@@ -47,6 +47,32 @@ export const StyledTemplate = (args) => html`
 ${RadioGroupTemplate(args)}
 `
 
+export const AlignmentRadioGroupTemplate = (args) => html`
+<bl-radio-group
+    class='${ifDefined(args.class)}'
+    label='${ifDefined(args.label)}'
+    name='${ifDefined(args.name)}'
+    value='${ifDefined(args.value)}'
+    ?required=${args.required}
+    >${args.options.map((option) =>
+      html`\n  <bl-radio value=${option.value} class='${ifDefined(args.radioClass)}'>${option.label}</bl-radio>`
+    )}
+</bl-radio-group>`
+
+export const AlignmentsTemplate = (args) => html`
+<style>
+  .${args.class} {
+    --bl-radio-direction: row;
+    --bl-radio-group-cross-axis-item-alignment: center;
+    --bl-radio-group-main-axis-content-alignment: center;
+  }
+  .${args.radioClass} {
+    width: 200px;
+  }
+</style>
+${AlignmentRadioGroupTemplate(args)}
+`
+
 export const KeyboardNavigationTemplate = (args) => html`
 <input id="previnput" placeholder="Previous Input" autofocus>
 ${RadioGroupTemplate(args)}
@@ -94,6 +120,14 @@ By default radio options are listed in vertical stack. You can change this by se
   </Story>
 </Canvas>
 
+By default radio options acts as default flex layout. You can change this by setting `--bl-radio-group-cross-axis-item-alignment`, `--bl-radio-group-cross-axis-content-alignment` and `--bl-radio-group-main-axis-content-alignment` CSS variables.
+
+<Canvas>
+  <Story name="Aligning radio elements" args={{ label: 'Alignments', name: 'paymentType', value: 'ideal', class: 'alignment-field', radioClass:'alignment-item', options: [{ value: 'loremone', label: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum amet aperiam provident mollitia.'}, {value: 'loremtwo', label: 'Lorem, ipsum dolor.'}] }}>
+    {AlignmentsTemplate.bind({})}
+  </Story>
+</Canvas>
+
 ## Reference
 
 <ArgsTable of="bl-radio-group" />
diff --git a/src/components/radio-group/bl-radio-group.ts b/src/components/radio-group/bl-radio-group.ts
@@ -15,6 +15,9 @@ export const blChangeEventName = 'bl-radio-change';
  * @summary Baklava Button component
  *
  * @cssproperty [--bl-radio-direction=row] Can be used for showing radio options as columns instead of rows. Options are `row` or `column`
+ * @cssproperty [--bl-radio-group-cross-axis-item-alignment=normal] Can be used for aligning radio items on cross axis. Acts same with align-item
+ * @cssproperty [--bl-radio-group-cross-axis-content-alignment=normal] Can be used for aligning radio group content on cross axis. Acts same with align-content
+ * @cssproperty [--bl-radio-group-main-axis-content-alignment=normal] Can be used for aligning radio group content on main axis. Acts same with justify-content
  */
 @customElement(blRadioGroupTag)
 export default class BlRadioGroup extends FormControlMixin(LitElement) {

diff --git a/src/components/radio-group/radio/bl-radio.css b/src/components/radio-group/radio/bl-radio.css
@@ -1,5 +1,4 @@
 :host {
-  display: inline-block;
   cursor: pointer;
   outline: none;
 }
@@ -13,11 +12,11 @@
 #label {
   display: flex;
   font: var(--bl-font-title-3-regular);
-  height: var(--size);
   line-height: normal;
-  vertical-align: middle;
+  align-items: var(--bl-radio-align-items, center);
   margin-block: 0;
   color: var(--bl-color-neutral-darker);
+  gap: var(--bl-size-2xs);
 }
 
 #label::before {
@@ -31,8 +30,6 @@
   background-color: white;
   border-radius: var(--bl-border-radius-circle);
   border: solid 1px var(--bl-color-neutral-lighter);
-  margin-right: var(--bl-size-2xs);
-  vertical-align: middle;
 }
 
 .selected #label::before {

diff --git a/src/components/radio-group/radio/bl-radio.stories.mdx b/src/components/radio-group/radio/bl-radio.stories.mdx
@@ -1,6 +1,7 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import { when } from 'lit/directives/when.js';
 import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs';
 
 <Meta
@@ -23,18 +24,14 @@ import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs';
 
 export const RadioTemplate = (args) => html`
 <bl-radio
-    class=${ifDefined(args.class)}
+    class=${ifDefined(args.itemClass)}
     value=${ifDefined(args.value)}
     ?disabled=${args.disabled}
     >${args.label}</bl-radio>`
 
-export const RadioGroupTemplate = (args) => html`
-<bl-radio-group value=${args.value}>
-  <bl-radio
-    class=${ifDefined(args.class)}
-    value=${ifDefined(args.value)}
-    ?disabled=${args.disabled}
-    >${args.label}</bl-radio>
+export const RadioGroupTemplate = (args) => html`${ when(args.customStyle, () => html`<style>${args.customStyle}</style>\n`) }
+<bl-radio-group value=${args.value} class=${ifDefined(args.groupClass)}>
+  ${RadioTemplate(args)}
 </bl-radio-group>`
 
 # Radio Component
@@ -71,6 +68,17 @@ An option can be disabled and selected at the same time if value of `radio-group
   </Story>
 </Canvas>
 
+By default radio options are centered vertically. You can change this by setting `--bl-radio-align-items` CSS variable to `flex-start` or `flex-end`.
+
+<Canvas>
+  <Story name="Option with large value" args={{ groupClass: 'limited-width', label: 'Very long option text that will not fit to a single line' }}>
+    {RadioGroupTemplate.bind({})}
+  </Story>
+  <Story name="Setting vertical alignment" args={{ groupClass: 'limited-width my-items', customStyle: '.my-items { --bl-radio-align-items: flex-start; }', label: 'Very long option text that will not fit to a single line' }}>
+    {RadioGroupTemplate.bind({})}
+  </Story>
+</Canvas>
+
 ## Reference
 
 <ArgsTable of="bl-radio" />
diff --git a/src/components/radio-group/radio/bl-radio.ts b/src/components/radio-group/radio/bl-radio.ts
@@ -13,6 +13,8 @@ export const blCheckedEventName = 'bl-checked';
 /**
  * @tag bl-radio
  * @summary Baklava Radio Option component
+ *
+ * @cssprop [--bl-radio-align-items=center] Align items of radio option
  */
 @customElement(blRadioTag)
 export default class BlRadio extends LitElement {