diff --git a/packages/apps/workshop/stories/design-system/components/radio/radio-webcomponent-toggle-group.stories.js b/packages/apps/workshop/stories/design-system/components/radio/radio-webcomponent-toggle-group.stories.js index 334a8f6ba..2a729185c 100644 --- a/packages/apps/workshop/stories/design-system/components/radio/radio-webcomponent-toggle-group.stories.js +++ b/packages/apps/workshop/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( + ` + + + Value A + + + + Value B + + + + Less content tt + + `, + { + $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 index 62315e08f..b19911b96 100644 --- 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 index 4a833376f..778879025 100644 --- 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; + } + } + } +} +