fix(select-button): add support for mobile devices

baloise · Feb 10, 2022 · 75647d2 · 75647d2
1 parent 32d4ac7
commit 75647d2
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 7 deletions.
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -1039,6 +1039,10 @@ export namespace Components {
           * The value of the control.
          */
         "value": string;
+        /**
+          * If `true`, the controls will be vertically on mobile devices.
+         */
+        "verticalOnMobile": boolean;
     }
     interface BalSelect {
         /**
@@ -3042,6 +3046,10 @@ declare namespace LocalJSX {
           * The value of the control.
          */
         "value"?: string;
+        /**
+          * If `true`, the controls will be vertically on mobile devices.
+         */
+        "verticalOnMobile"?: boolean;
     }
     interface BalSelect {
         /**

diff --git a/packages/components/src/components/form/bal-radio/bal-radio-group/bal-radio-group.scss b/packages/components/src/components/form/bal-radio/bal-radio-group/bal-radio-group.scss
@@ -3,12 +3,19 @@ bal-radio-group {
   position: relative;
   width: 100%;
 
-  &.bal-select-button > div {
-    display: flex;
-    flex: 1;
-    border: 1px solid $blue-2;
-    border-radius: 100px;
-    padding: 4px;
+  &.bal-select-button {
+    > div {
+      display: flex;
+      flex: 1;
+      border: 1px solid $blue-2;
+      border-radius: 100px;
+      padding: 4px;
+    }
+
+    &.is-vertical-mobile > div {
+      flex-direction: column;
+      border-radius: 12px;
+    }
   }
 
   &:not(.bal-select-button) {
@@ -22,4 +29,11 @@ bal-radio-group {
       }
     }
   }
+
+  @include tablet() {
+    &.bal-select-button.is-vertical-mobile > div {
+      flex-direction: row;
+      border-radius: 100px;
+    }
+  }
 }
diff --git a/packages/components/src/components/form/bal-radio/bal-radio-group/bal-radio-group.tsx b/packages/components/src/components/form/bal-radio/bal-radio-group/bal-radio-group.tsx
@@ -40,6 +40,11 @@ export class RadioGroup implements ComponentInterface {
    */
   @Prop() disabled?: boolean = undefined
 
+  /**
+   * If `true`, the controls will be vertically on mobile devices.
+   */
+  @Prop() verticalOnMobile = false
+
   @Watch('disabled')
   disabledChanged(value: boolean | undefined) {
     if (value !== undefined) {
@@ -114,7 +119,15 @@ export class RadioGroup implements ComponentInterface {
   render() {
     const label = findItemLabel(this.el)
     return (
-      <Host role="radiogroup" aria-labelledby={label?.id} onClick={this.onClick} class={`bal-${this.interface}`}>
+      <Host
+        role="radiogroup"
+        aria-labelledby={label?.id}
+        onClick={this.onClick}
+        class={{
+          [`bal-${this.interface}`]: true,
+          'is-vertical-mobile': this.verticalOnMobile,
+        }}
+      >
         <div>
           <slot></slot>
         </div>