From bc8c0756d8072051a002a95907bb8e36d66bfb9f Mon Sep 17 00:00:00 2001 From: Kajsa Eggum Date: Tue, 16 Jan 2024 09:19:25 +0100 Subject: [PATCH 1/5] Wrap checkbox group options --- .../src/formElements/checkboxgroup/checkboxgroup.css | 5 +++++ packages/react/src/formElements/MdCheckboxGroup.tsx | 6 ++++-- stories/CheckboxGroup.stories.tsx | 10 ++++++++++ 3 files changed, 19 insertions(+), 2 deletions(-) diff --git a/packages/css/src/formElements/checkboxgroup/checkboxgroup.css b/packages/css/src/formElements/checkboxgroup/checkboxgroup.css index 247e829d..df98dc07 100644 --- a/packages/css/src/formElements/checkboxgroup/checkboxgroup.css +++ b/packages/css/src/formElements/checkboxgroup/checkboxgroup.css @@ -38,6 +38,11 @@ flex-direction: column; } +.md-checkboxgroup .md-checkboxgroup__options--columns { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); +} + .md-checkboxgroup__error { color: var(--mdErrorColor); font-size: 0.88em; diff --git a/packages/react/src/formElements/MdCheckboxGroup.tsx b/packages/react/src/formElements/MdCheckboxGroup.tsx index 01ef5a65..4a3ed641 100644 --- a/packages/react/src/formElements/MdCheckboxGroup.tsx +++ b/packages/react/src/formElements/MdCheckboxGroup.tsx @@ -1,12 +1,11 @@ import classnames from 'classnames'; + import React, { useState } from 'react'; import { v4 as uuidv4 } from 'uuid'; - import MdHelpButton from '../help/MdHelpButton'; import MdHelpText from '../help/MdHelpText'; import MdCheckbox from './MdCheckbox'; import type { ChangeEvent } from 'react'; - export interface MdCheckboxGroupOptionProps { value: string | number; text?: string | number; @@ -19,6 +18,7 @@ export interface MdCheckboxGroupProps { id?: string | number; disabled?: boolean; direction?: string; + wrap?: boolean; className?: string; error?: string; helpText?: string; @@ -34,6 +34,7 @@ const MdCheckboxGroup: React.FunctionComponent = ({ id, disabled = false, direction, + wrap, className = '', error, helpText, @@ -55,6 +56,7 @@ const MdCheckboxGroup: React.FunctionComponent = ({ const optionsClassNames = classnames('md-checkboxgroup__options', { 'md-checkboxgroup__options--vertical': direction === 'vertical', + 'md-checkboxgroup__options--columns': wrap, }); const optionIsSelected = (option: MdCheckboxGroupOptionProps) => { diff --git a/stories/CheckboxGroup.stories.tsx b/stories/CheckboxGroup.stories.tsx index 5bca4407..54abe115 100644 --- a/stories/CheckboxGroup.stories.tsx +++ b/stories/CheckboxGroup.stories.tsx @@ -124,6 +124,15 @@ export default { }, action: 'Change', }, + wrap: { + type: { name: 'boolean' }, + description: 'Wrap options into columns when there is limited space horizontally.', + table: { + defaultValue: { summary: 'false' }, + type: { summary: 'boolean' }, + }, + control: { type: 'boolean' }, + }, }, }; @@ -182,4 +191,5 @@ CheckboxGroup.args = { direction: 'horizontal', helpText: 'This is a help text!', error: '', + wrap: true, }; From fbb9ef84e4b6e81d800a525db5fd66a3b7ae32a0 Mon Sep 17 00:00:00 2001 From: Kajsa Eggum Date: Tue, 16 Jan 2024 11:48:32 +0100 Subject: [PATCH 2/5] Rename property --- .../src/formElements/checkboxgroup/checkboxgroup.css | 4 ++-- packages/react/src/formElements/MdCheckboxGroup.tsx | 6 ++---- stories/CheckboxGroup.stories.tsx | 12 +----------- 3 files changed, 5 insertions(+), 17 deletions(-) diff --git a/packages/css/src/formElements/checkboxgroup/checkboxgroup.css b/packages/css/src/formElements/checkboxgroup/checkboxgroup.css index df98dc07..dbfaf14c 100644 --- a/packages/css/src/formElements/checkboxgroup/checkboxgroup.css +++ b/packages/css/src/formElements/checkboxgroup/checkboxgroup.css @@ -38,9 +38,9 @@ flex-direction: column; } -.md-checkboxgroup .md-checkboxgroup__options--columns { +.md-checkboxgroup .md-checkboxgroup__options--grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); + grid-template-columns: repeat(2, minmax(max-content, 1fr)); } .md-checkboxgroup__error { diff --git a/packages/react/src/formElements/MdCheckboxGroup.tsx b/packages/react/src/formElements/MdCheckboxGroup.tsx index 4a3ed641..1eca16ca 100644 --- a/packages/react/src/formElements/MdCheckboxGroup.tsx +++ b/packages/react/src/formElements/MdCheckboxGroup.tsx @@ -17,8 +17,7 @@ export interface MdCheckboxGroupProps { label?: string; id?: string | number; disabled?: boolean; - direction?: string; - wrap?: boolean; + direction?: 'horizontal' | 'vertical' | 'grid'; className?: string; error?: string; helpText?: string; @@ -34,7 +33,6 @@ const MdCheckboxGroup: React.FunctionComponent = ({ id, disabled = false, direction, - wrap, className = '', error, helpText, @@ -56,7 +54,7 @@ const MdCheckboxGroup: React.FunctionComponent = ({ const optionsClassNames = classnames('md-checkboxgroup__options', { 'md-checkboxgroup__options--vertical': direction === 'vertical', - 'md-checkboxgroup__options--columns': wrap, + 'md-checkboxgroup__options--grid': direction === 'grid', }); const optionIsSelected = (option: MdCheckboxGroupOptionProps) => { diff --git a/stories/CheckboxGroup.stories.tsx b/stories/CheckboxGroup.stories.tsx index 54abe115..a5b8da85 100644 --- a/stories/CheckboxGroup.stories.tsx +++ b/stories/CheckboxGroup.stories.tsx @@ -83,7 +83,7 @@ export default { direction: { type: { name: 'string' }, description: 'The direction for checkboxes in group.', - options: ['horizontal', 'vertical'], + options: ['horizontal', 'vertical', 'grid'], table: { defaultValue: { summary: 'horizontal' }, type: { @@ -124,15 +124,6 @@ export default { }, action: 'Change', }, - wrap: { - type: { name: 'boolean' }, - description: 'Wrap options into columns when there is limited space horizontally.', - table: { - defaultValue: { summary: 'false' }, - type: { summary: 'boolean' }, - }, - control: { type: 'boolean' }, - }, }, }; @@ -191,5 +182,4 @@ CheckboxGroup.args = { direction: 'horizontal', helpText: 'This is a help text!', error: '', - wrap: true, }; From 2ed1331b44b1fed50dc282627fceab4c0046820d Mon Sep 17 00:00:00 2001 From: Kajsa Eggum Date: Tue, 16 Jan 2024 11:53:45 +0100 Subject: [PATCH 3/5] bump version --- packages/css/package.json | 2 +- packages/react/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/css/package.json b/packages/css/package.json index cbd04da7..1896df39 100644 --- a/packages/css/package.json +++ b/packages/css/package.json @@ -1,6 +1,6 @@ { "name": "@miljodirektoratet/md-css", - "version": "1.0.27", + "version": "1.0.28", "description": "CSS for Miljødirektoratet", "author": "Miljødirektoratet", "main": "./src/index.css", diff --git a/packages/react/package.json b/packages/react/package.json index 2c95020d..a2cee153 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@miljodirektoratet/md-react", - "version": "1.0.48", + "version": "1.0.49", "description": "React-komponenter for Miljødirektoratet", "author": "Miljødirektoratet", "main": "./dist/index.js", From ed66df5a65062a3442d09fa1ba9fbdca4af27dd4 Mon Sep 17 00:00:00 2001 From: Kajsa Eggum Date: Tue, 16 Jan 2024 17:34:38 +0100 Subject: [PATCH 4/5] Customize no. of columns in grid --- packages/react/src/formElements/MdCheckboxGroup.tsx | 3 +++ stories/CheckboxGroup.stories.tsx | 12 ++++++++++++ 2 files changed, 15 insertions(+) diff --git a/packages/react/src/formElements/MdCheckboxGroup.tsx b/packages/react/src/formElements/MdCheckboxGroup.tsx index 1eca16ca..0e637e25 100644 --- a/packages/react/src/formElements/MdCheckboxGroup.tsx +++ b/packages/react/src/formElements/MdCheckboxGroup.tsx @@ -18,6 +18,7 @@ export interface MdCheckboxGroupProps { id?: string | number; disabled?: boolean; direction?: 'horizontal' | 'vertical' | 'grid'; + columns?: number; className?: string; error?: string; helpText?: string; @@ -33,6 +34,7 @@ const MdCheckboxGroup: React.FunctionComponent = ({ id, disabled = false, direction, + columns = 2, className = '', error, helpText, @@ -121,6 +123,7 @@ const MdCheckboxGroup: React.FunctionComponent = ({ id={String(checkboxGroupId) || undefined} aria-describedby={helpText && helpText !== '' ? `md-checkboxgroup_help-text_${checkboxGroupId}` : undefined} className={optionsClassNames} + style={{ gridTemplateColumns: `repeat(${columns}, minmax(max-content, 1fr))` }} > {options.map(option => { return ( diff --git a/stories/CheckboxGroup.stories.tsx b/stories/CheckboxGroup.stories.tsx index a5b8da85..e9cf283d 100644 --- a/stories/CheckboxGroup.stories.tsx +++ b/stories/CheckboxGroup.stories.tsx @@ -124,6 +124,17 @@ export default { }, action: 'Change', }, + columns: { + type: { name: 'number' }, + description: 'Number of columns in options grid', + table: { + defaultValue: { summary: 2 }, + type: { + summary: 'number', + }, + }, + control: { type: 'number' }, + }, }, }; @@ -182,4 +193,5 @@ CheckboxGroup.args = { direction: 'horizontal', helpText: 'This is a help text!', error: '', + columns: 3, }; From e9b170f21c1b58c7b54d7f28da423ab418e20a91 Mon Sep 17 00:00:00 2001 From: Kajsa Eggum Date: Wed, 17 Jan 2024 08:49:21 +0100 Subject: [PATCH 5/5] include new css class in readme --- packages/css/src/formElements/checkboxgroup/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/css/src/formElements/checkboxgroup/README.md b/packages/css/src/formElements/checkboxgroup/README.md index e2ef6510..856f864f 100644 --- a/packages/css/src/formElements/checkboxgroup/README.md +++ b/packages/css/src/formElements/checkboxgroup/README.md @@ -20,7 +20,7 @@ See [Storybook](https://miljodir.github.io/md-components) for examples and more {helpText} -
+