feat(oui-radio-toggle-group): add dense attribute

ref: MANAGER-13860 Signed-off-by: Amandine Dectot <[email protected]>
ovh · Mar 26, 2024 · 8141941 · 8141941
1 parent 6efb299
commit 8141941
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 4 deletions.
diff --git a/...orkshop/stories/design-system/components/radio/radio-webcomponent-toggle-group.stories.js b/...orkshop/stories/design-system/components/radio/radio-webcomponent-toggle-group.stories.js
@@ -63,3 +63,50 @@ export const Default = forModule(moduleName).createElement(
     },
   ),
 );
+
+export const Dense = forModule(moduleName).createElement(
+  () => compileTemplate(
+    `
+    <oui-radio-toggle-group
+      direction="{{$ctrl.direction}}"
+      model="$ctrl.model"
+      dense
+      on-change="$ctrl.onChange(modelValue)">
+      <oui-radio
+        disabled="$ctrl.disabled"
+        value="$ctrl.value1">
+        Value A
+      </oui-radio>
+
+      <oui-radio
+        disabled="$ctrl.disabled"
+        value="$ctrl.value2">
+        Value B
+      </oui-radio>
+
+      <oui-radio
+        disabled="$ctrl.disabled"
+        value="$ctrl.value3">
+        Less content tt
+      </oui-radio>
+    </oui-radio-toggle-group>`,
+    {
+      $ctrl: {
+        disabled: boolean('Disabled state', false),
+        direction: radios(
+          'Direction',
+          {
+            Column: 'column',
+            Row: 'row',
+          },
+          'row',
+        ),
+        model: 'a',
+        value1: 'a',
+        value2: 'b',
+        value3: 'c',
+        onChange: action('onChange'),
+      },
+    },
+  ),
+);
diff --git a/packages/components/radio/src/js/toggle-group/radio-toggle-group.component.js b/packages/components/radio/src/js/toggle-group/radio-toggle-group.component.js
@@ -12,6 +12,7 @@ export default {
   bindings: {
     name: '@?',
     direction: '@?',
+    dense: '@?',
     model: '=?',
     onChange: '&',
   },

diff --git a/packages/components/radio/src/less/radio-toggle-group.less b/packages/components/radio/src/less/radio-toggle-group.less
@@ -37,6 +37,7 @@ oui-radio-toggle-group {
 
   &__label-container {
     margin: 0;
+    display: block;
   }
 
   &__input {
@@ -67,12 +68,61 @@ oui-radio-toggle-group {
     color: @oui-radio-toggle-font-color_hover;
   }
 
-  & + & {
-    margin-left: @oui-radio-toggle-spacing;
-  }
-
   .oui-radio-toggle-group_column & + & {
     margin-left: 0;
     margin-top: @oui-radio-toggle-spacing;
   }
 }
+
+oui-radio-toggle-group[dense][direction="row"] {
+  .oui-radio-toggle {
+    margin-left: -1px;
+
+    &__label {
+      border-radius: 0;
+    }
+
+    &:first-child {
+      margin-left: 0;
+
+      .oui-radio-toggle__label {
+        border-bottom-left-radius: @oui-radio-toggle-border-radius;
+        border-top-left-radius: @oui-radio-toggle-border-radius;
+      }
+    }
+
+    &:last-child {
+      .oui-radio-toggle__label {
+        border-bottom-right-radius: @oui-radio-toggle-border-radius;
+        border-top-right-radius: @oui-radio-toggle-border-radius;
+      }
+    }
+  }
+}
+
+oui-radio-toggle-group[dense][direction="column"] {
+  .oui-radio-toggle {
+    margin-top: -1px;
+
+    &__label {
+      border-radius: 0;
+    }
+
+    &:first-child {
+      margin-top: 0;
+
+      .oui-radio-toggle__label {
+        border-top-left-radius: @oui-radio-toggle-border-radius;
+        border-top-right-radius: @oui-radio-toggle-border-radius;
+      }
+    }
+
+    &:last-child {
+      .oui-radio-toggle__label {
+        border-bottom-left-radius: @oui-radio-toggle-border-radius;
+        border-bottom-right-radius: @oui-radio-toggle-border-radius;
+      }
+    }
+  }
+}
+