From 438f76f3d73a2ca3189a4761667b9be4b58f64e9 Mon Sep 17 00:00:00 2001 From: Arlindo Pereira Date: Wed, 30 Oct 2024 16:27:48 +0100 Subject: [PATCH 01/11] Component ComponentField with label, title etc. --- .../forms/controls/Checkbox/Checkbox.tsx | 2 +- .../CheckboxField/CheckboxField.module.scss | 40 +++++++ .../CheckboxField/CheckboxField.stories.tsx | 74 ++++++++++++ .../controls/CheckboxField/CheckboxField.tsx | 111 ++++++++++++++++++ 4 files changed, 226 insertions(+), 1 deletion(-) create mode 100644 src/components/forms/controls/CheckboxField/CheckboxField.module.scss create mode 100644 src/components/forms/controls/CheckboxField/CheckboxField.stories.tsx create mode 100644 src/components/forms/controls/CheckboxField/CheckboxField.tsx diff --git a/src/components/forms/controls/Checkbox/Checkbox.tsx b/src/components/forms/controls/Checkbox/Checkbox.tsx index 49977d7..60ef8ca 100644 --- a/src/components/forms/controls/Checkbox/Checkbox.tsx +++ b/src/components/forms/controls/Checkbox/Checkbox.tsx @@ -15,7 +15,7 @@ export type CheckboxProps = ComponentProps<'input'> & { unstyled?: undefined | boolean, }; /** - * Checkbox control. + * A simple Checkbox control, just the <input type="checkbox"> and nothing else. */ export const Checkbox = (props: CheckboxProps) => { const { diff --git a/src/components/forms/controls/CheckboxField/CheckboxField.module.scss b/src/components/forms/controls/CheckboxField/CheckboxField.module.scss new file mode 100644 index 0000000..55b17f8 --- /dev/null +++ b/src/components/forms/controls/CheckboxField/CheckboxField.module.scss @@ -0,0 +1,40 @@ +/* Copyright (c) Fortanix, Inc. +|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of +|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@use '../../../../styling/defs.scss' as bk; + +@layer baklava.components { + .bk-checkbox-field { + @include bk.component-base(bk-checkbox-field); + + .bk-checkbox-field__label { + color: bk.$theme-text-label-default; + position: relative; + margin-left: bk.$spacing-2; + top: -4px; + + .bk-checkbox-field__label__sublabel { + font-size: bk.$font-size-xs; + padding-left: 26px; + } + } + + .bk-checkbox-field__title { + color: bk.$theme-text-label-default; + font-weight: bk.$font-weight-semibold; + margin-bottom: bk.$spacing-1; + + .bk-checkbox-field__title__icon { + font-size: 18px; + margin-left: bk.$spacing-1; + } + + .bk-checkbox-field__title__optional { + font-size: bk.$font-size-xs; + font-weight: bk.$font-weight-regular; + margin-left: bk.$spacing-1; + } + } + } +} \ No newline at end of file diff --git a/src/components/forms/controls/CheckboxField/CheckboxField.stories.tsx b/src/components/forms/controls/CheckboxField/CheckboxField.stories.tsx new file mode 100644 index 0000000..8011969 --- /dev/null +++ b/src/components/forms/controls/CheckboxField/CheckboxField.stories.tsx @@ -0,0 +1,74 @@ +/* Copyright (c) Fortanix, Inc. +|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of +|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +import type { Meta, StoryObj } from '@storybook/react'; + +import * as React from 'react'; + +import { CheckboxField } from './CheckboxField.tsx'; + + +type CheckboxFieldArgs = React.ComponentProps; +type Story = StoryObj; + +export default { + component: CheckboxField, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: { + }, + args: {}, + decorators: [ + Story =>
{ event.preventDefault(); }}>, + ], + render: (args) => , +} satisfies Meta; + + +export const CheckboxFieldWithLabel: Story = { + args: { + label: 'Label', + }, +}; + +export const CheckboxFieldWithLabelAndTitle: Story = { + args: { + title: 'Title', + label: 'Label', + }, +}; + +export const CheckboxFieldWithLabelWithTitleWithTooltip: Story = { + args: { + title: 'Title', + label: 'Label', + titleTooltip: 'This is a tooltip', + } +}; + +export const CheckboxFieldWithLabelWithTitleWithOptional: Story = { + args: { + title: 'Title', + label: 'Label', + titleOptional: true, + }, +}; + +export const CheckboxFieldWithLabelWithTitleWithTooltipWithOptional: Story = { + args: { + title: 'Title', + label: 'Label', + titleTooltip: 'This is a tooltip', + titleOptional: true, + }, +}; + +export const CheckboxFieldWithLabelAndSublabel: Story = { + args: { + label: 'Label', + sublabel: 'Supporting copy', + }, +}; diff --git a/src/components/forms/controls/CheckboxField/CheckboxField.tsx b/src/components/forms/controls/CheckboxField/CheckboxField.tsx new file mode 100644 index 0000000..02b841b --- /dev/null +++ b/src/components/forms/controls/CheckboxField/CheckboxField.tsx @@ -0,0 +1,111 @@ +/* Copyright (c) Fortanix, Inc. +|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of +|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +import { classNames as cx, type ComponentProps, type ClassNameArgument } from '../../../../util/componentUtil.ts'; +import * as React from 'react'; + +import { Checkbox } from '../Checkbox/Checkbox.tsx'; +import { Icon } from '../../../graphics/Icon/Icon.tsx'; +import { TooltipProvider } from '../../../overlays/Tooltip/TooltipProvider.tsx'; + +import cl from './CheckboxField.module.scss'; + + +export { cl as CheckboxFieldClassNames }; + + +export type CheckboxFieldTitleProps = React.PropsWithChildren<{ + className?: ClassNameArgument; + + /** Whether to display the optional observation on title. */ + titleOptional?: undefined | boolean, + + /** An optional tooltip to be displayed on an info icon next to the title. */ + titleTooltip?: undefined | string, +}>; + +export const CheckboxFieldTitle = ({ className, children, titleOptional, titleTooltip }: CheckboxFieldTitleProps) => ( +

+ {children} + {titleTooltip && ( + + + + )} + {titleOptional && ( + (Optional) + )} +

+); + +export type CheckboxFieldProps = ComponentProps<'div'> & { + /** Whether this component should be unstyled. */ + unstyled?: undefined | boolean, + + /** A label to be displayed after the checkbox. */ + label: string, + + /** An optional supporting copy to be displayed under the label. */ + sublabel?: undefined | string, + + /** An optional title. */ + title?: undefined | string, + + /** An optional tooltip to be displayed on an info icon next to the title. */ + titleTooltip?: undefined | string, + + /** Whether to display the optional observation on title. */ + titleOptional?: undefined | boolean, + + /** Whether the checkbox is checked by default. Passed down to Checkbox component. */ + defaultChecked?: undefined | boolean, + + /** Whether the checkbox is checked. Passed down to Checkbox component. */ + checked?: undefined | boolean, + + /** Whether the checkbox is disabled. Passed down to Checkbox component. */ + disabled?: undefined | boolean, +}; + +/** + * A full-fledged Checkbox field, with optional label, title, icon etc. + */ +export const CheckboxField = (props: CheckboxFieldProps) => { + const { + unstyled = false, + label = '', + sublabel, + title, + titleOptional, + titleTooltip, + className, + ...propsRest + } = props; + + return ( +
+ {title && {title}} + +
+ ); +}; \ No newline at end of file From 28aa1ed58ae6432e701ca0cbb249f7afd2010d8e Mon Sep 17 00:00:00 2001 From: Arlindo Pereira Date: Wed, 30 Oct 2024 18:00:26 +0100 Subject: [PATCH 02/11] CheckboxGroup --- .../CheckboxGroup/Checkbox.module.scss | 54 ------------------- .../CheckboxGroup/Checkbox.stories.tsx | 46 ---------------- .../forms/controls/CheckboxGroup/Checkbox.tsx | 20 ------- .../CheckboxGroup/CheckboxGroup.module.scss | 22 ++++++++ .../CheckboxGroup/CheckboxGroup.stories.tsx | 37 +++++++++++++ .../controls/CheckboxGroup/CheckboxGroup.tsx | 30 +++++++++++ 6 files changed, 89 insertions(+), 120 deletions(-) delete mode 100644 src/components/forms/controls/CheckboxGroup/Checkbox.module.scss delete mode 100644 src/components/forms/controls/CheckboxGroup/Checkbox.stories.tsx delete mode 100644 src/components/forms/controls/CheckboxGroup/Checkbox.tsx create mode 100644 src/components/forms/controls/CheckboxGroup/CheckboxGroup.module.scss create mode 100644 src/components/forms/controls/CheckboxGroup/CheckboxGroup.stories.tsx create mode 100644 src/components/forms/controls/CheckboxGroup/CheckboxGroup.tsx diff --git a/src/components/forms/controls/CheckboxGroup/Checkbox.module.scss b/src/components/forms/controls/CheckboxGroup/Checkbox.module.scss deleted file mode 100644 index f4df75f..0000000 --- a/src/components/forms/controls/CheckboxGroup/Checkbox.module.scss +++ /dev/null @@ -1,54 +0,0 @@ -/* Copyright (c) Fortanix, Inc. -|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of -|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */ - -@use '../../../../styling/defs.scss' as bk; - -@layer baklava.components { - .bk-checkbox { - @include bk.component-base(bk-checkbox); - - /* Note: `appearance: none` removes all default checkbox styling and behavior */ - appearance: none; - - width: calc(var(--bk-sizing-3) + var(--bk-sizing-2)); - height: calc(var(--bk-sizing-3) + var(--bk-sizing-2)); - - &::after { - content: ''; - display: block; - width: inherit; - height: inherit; - background: transparent; - border: var(--bk-sizing-1) solid bk.$theme-checkbox-border-default; - border-radius: var(--bk-sizing-1); - } - - &:checked::after { - border-color: bk.$theme-checkbox-background-default; - background-color: bk.$theme-checkbox-background-default; - background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"%3E %3Cpath d="M15.88 8.29L10 14.17l-1.88-1.88a.996.996 0 1 0-1.41 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0z" fill="%23fff"/%3E %3C/svg%3E'); - background-position: -3px -3px; - } - } - - .bk-checkbox-field { - cursor: pointer; - user-select: none; - - display: flex; - flex-direction: row; - align-items: center; - column-gap: var(--bk-sizing-2); - - .bk-checkbox { - /* align-self: center; */ - } - } - - .bk-checkbox-field-group { - display: flex; - flex-direction: column; - row-gap: var(--bk-sizing-2); - } -} diff --git a/src/components/forms/controls/CheckboxGroup/Checkbox.stories.tsx b/src/components/forms/controls/CheckboxGroup/Checkbox.stories.tsx deleted file mode 100644 index e06c887..0000000 --- a/src/components/forms/controls/CheckboxGroup/Checkbox.stories.tsx +++ /dev/null @@ -1,46 +0,0 @@ -/* Copyright (c) Fortanix, Inc. -|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of -|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import * as React from 'react'; - -import type { Meta, StoryObj } from '@storybook/react'; -import { userEvent, within } from '@storybook/test'; - -import { Checkbox } from './Checkbox.tsx'; - - -type CheckboxArgs = React.ComponentProps; -type Story = StoryObj; - -export default { - component: Checkbox, - parameters: { - layout: 'centered', - }, - tags: ['autodocs'], - argTypes: { - }, -} satisfies Meta; - - -const CheckboxField = () => { - return ( - - ); -}; - -export const Standard: Story = { - render: () => -
- - - -
, - play: async ({ canvasElement }) => { - // const canvas = within(canvasElement); - }, -}; diff --git a/src/components/forms/controls/CheckboxGroup/Checkbox.tsx b/src/components/forms/controls/CheckboxGroup/Checkbox.tsx deleted file mode 100644 index 41a0355..0000000 --- a/src/components/forms/controls/CheckboxGroup/Checkbox.tsx +++ /dev/null @@ -1,20 +0,0 @@ -/* Copyright (c) Fortanix, Inc. -|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of -|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import * as React from 'react'; - -import cl from './Checkbox.module.scss'; - - -type CheckboxProps = { -}; - -/** - * Checkbox component. - */ -export const Checkbox = ({}: CheckboxProps) => { - return ( - - ); -}; diff --git a/src/components/forms/controls/CheckboxGroup/CheckboxGroup.module.scss b/src/components/forms/controls/CheckboxGroup/CheckboxGroup.module.scss new file mode 100644 index 0000000..34b03ca --- /dev/null +++ b/src/components/forms/controls/CheckboxGroup/CheckboxGroup.module.scss @@ -0,0 +1,22 @@ +/* Copyright (c) Fortanix, Inc. +|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of +|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@use '../../../../styling/defs.scss' as bk; + +@layer baklava.components { + .bk-checkbox-group { + @include bk.component-base(bk-checkbox-group); + display: flex; + + &.bk-checkbox-group--vertical { + flex-direction: column; + row-gap: 20px; + } + + &.bk-checkbox-group--horizontal { + flex-direction: row; + column-gap: bk.$spacing-7; + } + } +} diff --git a/src/components/forms/controls/CheckboxGroup/CheckboxGroup.stories.tsx b/src/components/forms/controls/CheckboxGroup/CheckboxGroup.stories.tsx new file mode 100644 index 0000000..2577bac --- /dev/null +++ b/src/components/forms/controls/CheckboxGroup/CheckboxGroup.stories.tsx @@ -0,0 +1,37 @@ +/* Copyright (c) Fortanix, Inc. +|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of +|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +import * as React from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + +import { CheckboxGroup } from './CheckboxGroup.tsx'; +import { CheckboxField } from '../CheckboxField/CheckboxField.tsx'; + + +type CheckboxGroupArgs = React.ComponentProps; +type Story = StoryObj; + +export default { + component: CheckboxGroup, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: { + }, + render: (args) => + + + + , +} satisfies Meta; + +export const CheckboxGroupVertical: Story = {}; + +export const CheckboxGroupHorizontal: Story = { + args: { + alignment: 'horizontal', + }, +}; diff --git a/src/components/forms/controls/CheckboxGroup/CheckboxGroup.tsx b/src/components/forms/controls/CheckboxGroup/CheckboxGroup.tsx new file mode 100644 index 0000000..5a9e495 --- /dev/null +++ b/src/components/forms/controls/CheckboxGroup/CheckboxGroup.tsx @@ -0,0 +1,30 @@ +/* Copyright (c) Fortanix, Inc. +|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of +|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +import { classNames as cx, type ComponentProps, type ClassNameArgument } from '../../../../util/componentUtil.ts'; +import * as React from 'react'; + +import cl from './CheckboxGroup.module.scss'; + + +export { cl as CheckboxGroupClassNames }; + + +export type CheckboxGroupProps = React.PropsWithChildren<{ + alignment?: undefined | "vertical" | "horizontal"; +}>; + +/** + * Checkbox component. + */ +export const CheckboxGroup = ({children, alignment = 'vertical'}: CheckboxGroupProps) => ( +
+ {children} +
+); From 8246552c714140722a18774e7b265724dc00d11b Mon Sep 17 00:00:00 2001 From: Arlindo Pereira Date: Thu, 31 Oct 2024 17:48:52 +0100 Subject: [PATCH 03/11] Checkbox: Indeterminate state --- .../controls/Checkbox/Checkbox.module.scss | 46 +++++++++++-------- .../controls/Checkbox/Checkbox.stories.tsx | 20 +++++--- .../forms/controls/Checkbox/Checkbox.tsx | 18 +++++++- 3 files changed, 58 insertions(+), 26 deletions(-) diff --git a/src/components/forms/controls/Checkbox/Checkbox.module.scss b/src/components/forms/controls/Checkbox/Checkbox.module.scss index dba73d1..56067ed 100644 --- a/src/components/forms/controls/Checkbox/Checkbox.module.scss +++ b/src/components/forms/controls/Checkbox/Checkbox.module.scss @@ -7,37 +7,45 @@ @layer baklava.components { .bk-checkbox { @include bk.component-base(bk-checkbox); - - --bk-checkbox-background-color: transparent; - --bk-checkbox-border-color: #{bk.$theme-checkbox-border-default}; - + cursor: pointer; - + appearance: none; width: 18px; aspect-ratio: 1; border-radius: 3px; - - background: var(--bk-checkbox-background-color); + + background: transparent; background-position: top; /* Transition background-image from top */ - border: 1px solid var(--bk-checkbox-border-color); - + border: 1px solid bk.$theme-checkbox-border-default; + + &:checked, &:indeterminate { + background-color: bk.$theme-checkbox-background-default; + background-position: center; + background-repeat: no-repeat; + border: none; + } &:checked { - --bk-checkbox-background-color: #{bk.$theme-checkbox-background-default}; - --bk-checkbox-border-color: var(--bk-checkbox-background-color); - background: - center url('data:image/svg+xml;utf8,') no-repeat, - var(--bk-checkbox-background-color); + background-image: url('data:image/svg+xml;utf8,'); + } + &:indeterminate { + background-image: url('data:image/svg+xml;utf8,'); } &:disabled { - --bk-checkbox-border-color: #{bk.$theme-checkbox-border-disabled}; - --bk-checkbox-background-color: transparent; - + border-color: bk.$theme-checkbox-border-disabled; + background-color: transparent; + + &:checked, &:indeterminate { + background-color: bk.$theme-checkbox-background-non-active; + } &:checked { - --bk-checkbox-background-color: bk.$theme-checkbox-background-non-active; + background-image: url('data:image/svg+xml;utf8,'); + } + &:indeterminate { + background-image: url('data:image/svg+xml;utf8,'); } } - + @media (prefers-reduced-motion: no-preference) { transition: none 100ms ease-out; transition-property: background-color, background-position, border-color; diff --git a/src/components/forms/controls/Checkbox/Checkbox.stories.tsx b/src/components/forms/controls/Checkbox/Checkbox.stories.tsx index 2c2722a..e5fcddf 100644 --- a/src/components/forms/controls/Checkbox/Checkbox.stories.tsx +++ b/src/components/forms/controls/Checkbox/Checkbox.stories.tsx @@ -20,9 +20,7 @@ export default { tags: ['autodocs'], argTypes: { }, - args: { - defaultChecked: true, - }, + args: {}, decorators: [ Story =>
{ event.preventDefault(); }}>, ], @@ -30,10 +28,16 @@ export default { } satisfies Meta; -export const Checked: Story = {}; +export const Checked: Story = { + args: { defaultChecked: true }, +}; export const Unchecked: Story = { - args: { defaultChecked: false }, + args: {}, +}; + +export const Indeterminate: Story = { + args: { defaultChecked: false, indeterminate: true }, }; export const DisabledChecked: Story = { @@ -43,5 +47,9 @@ export const DisabledChecked: Story = { export const DisabledUnchecked: Story = { name: 'Disabled (unchecked)', - args: { disabled: true, defaultChecked: false }, + args: { disabled: true }, +}; + +export const DisabledIndeterminate: Story = { + args: { defaultChecked: false, disabled: true, indeterminate: true }, }; diff --git a/src/components/forms/controls/Checkbox/Checkbox.tsx b/src/components/forms/controls/Checkbox/Checkbox.tsx index 60ef8ca..6158fc0 100644 --- a/src/components/forms/controls/Checkbox/Checkbox.tsx +++ b/src/components/forms/controls/Checkbox/Checkbox.tsx @@ -13,19 +13,35 @@ export { cl as CheckboxClassNames }; export type CheckboxProps = ComponentProps<'input'> & { /** Whether this component should be unstyled. */ unstyled?: undefined | boolean, + + /** Whether the checkbox is in indeterminate state (minus sign) */ + indeterminate?: undefined | boolean, }; /** - * A simple Checkbox control, just the <input type="checkbox"> and nothing else. + * A simple Checkbox control, just the <input type="checkbox"> and nothing else.. */ export const Checkbox = (props: CheckboxProps) => { const { unstyled = false, + indeterminate = false, ...propsRest } = props; + + const checkboxRef = React.useRef>(null); + + React.useEffect(() => { + if (checkboxRef && checkboxRef.current) { + if (indeterminate) { + checkboxRef.current.checked = false; + } + checkboxRef.current.indeterminate = indeterminate; + } + }, [checkboxRef, indeterminate]); return ( Date: Tue, 5 Nov 2024 10:05:10 +0100 Subject: [PATCH 04/11] Simplify Checkbox CSS with mixins for SVGs --- .../forms/controls/Checkbox/Checkbox.module.scss | 16 ++++++++++++---- .../CheckboxField/CheckboxField.module.scss | 2 +- .../controls/CheckboxField/CheckboxField.tsx | 3 +-- .../controls/CheckboxGroup/CheckboxGroup.tsx | 1 - 4 files changed, 14 insertions(+), 8 deletions(-) diff --git a/src/components/forms/controls/Checkbox/Checkbox.module.scss b/src/components/forms/controls/Checkbox/Checkbox.module.scss index 56067ed..69bf1cb 100644 --- a/src/components/forms/controls/Checkbox/Checkbox.module.scss +++ b/src/components/forms/controls/Checkbox/Checkbox.module.scss @@ -4,6 +4,14 @@ @use '../../../../styling/defs.scss' as bk; +@mixin svg-checkbox { + background-image: url('data:image/svg+xml;utf8,'); +} + +@mixin svg-dash { + background-image: url('data:image/svg+xml;utf8,'); +} + @layer baklava.components { .bk-checkbox { @include bk.component-base(bk-checkbox); @@ -26,10 +34,10 @@ border: none; } &:checked { - background-image: url('data:image/svg+xml;utf8,'); + @include svg-checkbox; } &:indeterminate { - background-image: url('data:image/svg+xml;utf8,'); + @include svg-dash; } &:disabled { border-color: bk.$theme-checkbox-border-disabled; @@ -39,10 +47,10 @@ background-color: bk.$theme-checkbox-background-non-active; } &:checked { - background-image: url('data:image/svg+xml;utf8,'); + @include svg-checkbox; } &:indeterminate { - background-image: url('data:image/svg+xml;utf8,'); + @include svg-dash; } } diff --git a/src/components/forms/controls/CheckboxField/CheckboxField.module.scss b/src/components/forms/controls/CheckboxField/CheckboxField.module.scss index 55b17f8..3604200 100644 --- a/src/components/forms/controls/CheckboxField/CheckboxField.module.scss +++ b/src/components/forms/controls/CheckboxField/CheckboxField.module.scss @@ -37,4 +37,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/components/forms/controls/CheckboxField/CheckboxField.tsx b/src/components/forms/controls/CheckboxField/CheckboxField.tsx index 02b841b..c376c3b 100644 --- a/src/components/forms/controls/CheckboxField/CheckboxField.tsx +++ b/src/components/forms/controls/CheckboxField/CheckboxField.tsx @@ -14,7 +14,6 @@ import cl from './CheckboxField.module.scss'; export { cl as CheckboxFieldClassNames }; - export type CheckboxFieldTitleProps = React.PropsWithChildren<{ className?: ClassNameArgument; @@ -108,4 +107,4 @@ export const CheckboxField = (props: CheckboxFieldProps) => { ); -}; \ No newline at end of file +}; diff --git a/src/components/forms/controls/CheckboxGroup/CheckboxGroup.tsx b/src/components/forms/controls/CheckboxGroup/CheckboxGroup.tsx index 5a9e495..11bbb03 100644 --- a/src/components/forms/controls/CheckboxGroup/CheckboxGroup.tsx +++ b/src/components/forms/controls/CheckboxGroup/CheckboxGroup.tsx @@ -10,7 +10,6 @@ import cl from './CheckboxGroup.module.scss'; export { cl as CheckboxGroupClassNames }; - export type CheckboxGroupProps = React.PropsWithChildren<{ alignment?: undefined | "vertical" | "horizontal"; }>; From c6c89bf9a259b000644c1f47f68a9b240f6c2aa2 Mon Sep 17 00:00:00 2001 From: Arlindo Pereira Date: Tue, 5 Nov 2024 11:33:32 +0100 Subject: [PATCH 05/11] put colors in alphabetical order --- src/styling/variables.scss | 96 +++++++++++++++++++------------------- 1 file changed, 48 insertions(+), 48 deletions(-) diff --git a/src/styling/variables.scss b/src/styling/variables.scss index 1db7619..7d1a9e3 100644 --- a/src/styling/variables.scss +++ b/src/styling/variables.scss @@ -16,29 +16,18 @@ // Primitive colors // -$color-neutral-0: #ffffff !default; -$color-neutral-10: #fbfbfb !default; -$color-neutral-20: #f7f7f7 !default; -$color-neutral-30: #eeeeef !default; -$color-neutral-40: #e3e4e5 !default; -$color-neutral-50: #cacacd !default; -$color-neutral-70: #b3b3b7 !default; -$color-neutral-80: #a6a6ab !default; -$color-blueberry-800: #0d4e8a !default; -$color-blueberry-900: #0a3b69 !default; -$color-blueberry-700: #1064b2 !default; -$color-neutral-60: #bdbec1 !default; -$color-blueberry-600: #1580e4 !default; -$color-blueberry-500: #178dfb !default; $color-apple-50: #f1f9e8 !default; $color-apple-100: #d2ebb9 !default; -$color-blueberry-100: #b7dcfe !default; +$color-apple-200: #bde197 !default; +$color-apple-300: #9fd368 !default; +$color-apple-400: #8ccb4a !default; +$color-apple-500: #6fbe1d !default; +$color-apple-600: #65ad1a !default; +$color-apple-700: #4f8715 !default; +$color-apple-800: #3d6910 !default; +$color-apple-900: #2f500c !default; +$color-blackberry-0: #f6f6fb !default; $color-blackberry-10: #e8e7f6 !default; -$color-blueberry-50: #e8f4ff !default; -$color-blueberry-200: #94cbfd !default; -$color-blueberry-300: #64b3fc !default; -$color-blueberry-400: #45a4fc !default; -$color-grape-50: #f0eff9 !default; $color-blackberry-20: #dfdef2 !default; $color-blackberry-30: #c4c2d9 !default; $color-blackberry-40: #8e98a8 !default; @@ -53,34 +42,16 @@ $color-blackberry-700: #202440 !default; $color-blackberry-800: #1a1c37 !default; $color-blackberry-900: #14152e !default; $color-blackberry-1000: #0f0e25 !default; -$color-blackberry-0: #f6f6fb !default; -$color-grape-100: #cfcdec !default; -$color-grape-200: #b8b5e3 !default; -$color-grape-300: #9793d7 !default; -$color-grape-400: #837ecf !default; -$color-grape-500: #645ec3 !default; -$color-grape-600: #5b56b1 !default; -$color-grape-700: #47438a !default; -$color-grape-800: #37346b !default; -$color-grape-900: #2a2752 !default; -$color-neutral-90: #999a9f !default; -$color-neutral-100: #8d8d92 !default; -$color-neutral-200: #808086 !default; -$color-neutral-300: #73747a !default; -$color-neutral-400: #686970 !default; -$color-neutral-500: #5c5d64 !default; -$color-neutral-600: #51525a !default; -$color-neutral-700: #42434c !default; -$color-neutral-800: #363740 !default; -$color-neutral-900: #2b2c36 !default; -$color-apple-200: #bde197 !default; -$color-apple-300: #9fd368 !default; -$color-apple-400: #8ccb4a !default; -$color-apple-500: #6fbe1d !default; -$color-apple-600: #65ad1a !default; -$color-apple-700: #4f8715 !default; -$color-apple-800: #3d6910 !default; -$color-apple-900: #2f500c !default; +$color-blueberry-50: #e8f4ff !default; +$color-blueberry-100: #b7dcfe !default; +$color-blueberry-200: #94cbfd !default; +$color-blueberry-300: #64b3fc !default; +$color-blueberry-400: #45a4fc !default; +$color-blueberry-500: #178dfb !default; +$color-blueberry-600: #1580e4 !default; +$color-blueberry-700: #1064b2 !default; +$color-blueberry-800: #0d4e8a !default; +$color-blueberry-900: #0a3b69 !default; $color-cherry-50: #ffebe7 !default; $color-cherry-100: #ffc0b5 !default; $color-cherry-200: #ffa191 !default; @@ -91,6 +62,16 @@ $color-cherry-600: #e82e0f !default; $color-cherry-700: #b5240b !default; $color-cherry-800: #8c1c09 !default; $color-cherry-900: #6b1507 !default; +$color-grape-50: #f0eff9 !default; +$color-grape-100: #cfcdec !default; +$color-grape-200: #b8b5e3 !default; +$color-grape-300: #9793d7 !default; +$color-grape-400: #837ecf !default; +$color-grape-500: #645ec3 !default; +$color-grape-600: #5b56b1 !default; +$color-grape-700: #47438a !default; +$color-grape-800: #37346b !default; +$color-grape-900: #2a2752 !default; $color-lemon-50: #fbf9e6 !default; $color-lemon-100: #f2ebb1 !default; $color-lemon-200: #ece28b !default; @@ -101,6 +82,25 @@ $color-lemon-600: #c2ae02 !default; $color-lemon-700: #978801 !default; $color-lemon-800: #756901 !default; $color-lemon-900: #595001 !default; +$color-neutral-0: #ffffff !default; +$color-neutral-10: #fbfbfb !default; +$color-neutral-20: #f7f7f7 !default; +$color-neutral-30: #eeeeef !default; +$color-neutral-40: #e3e4e5 !default; +$color-neutral-50: #cacacd !default; +$color-neutral-60: #bdbec1 !default; +$color-neutral-70: #b3b3b7 !default; +$color-neutral-80: #a6a6ab !default; +$color-neutral-90: #999a9f !default; +$color-neutral-100: #8d8d92 !default; +$color-neutral-200: #808086 !default; +$color-neutral-300: #73747a !default; +$color-neutral-400: #686970 !default; +$color-neutral-500: #5c5d64 !default; +$color-neutral-600: #51525a !default; +$color-neutral-700: #42434c !default; +$color-neutral-800: #363740 !default; +$color-neutral-900: #2b2c36 !default; $color-orange-50: #fbf2e6 !default; $color-orange-100: #f2d8b0 !default; $color-orange-200: #ecc58a !default; From 2e49f7dc957341e1154295d8306d640c18caa432 Mon Sep 17 00:00:00 2001 From: Arlindo Pereira Date: Tue, 5 Nov 2024 13:37:50 +0100 Subject: [PATCH 06/11] Focused checkbox --- .../controls/Checkbox/Checkbox.module.scss | 4 + .../controls/Checkbox/Checkbox.stories.tsx | 84 ++++++++++++++++--- 2 files changed, 78 insertions(+), 10 deletions(-) diff --git a/src/components/forms/controls/Checkbox/Checkbox.module.scss b/src/components/forms/controls/Checkbox/Checkbox.module.scss index 69bf1cb..91074b5 100644 --- a/src/components/forms/controls/Checkbox/Checkbox.module.scss +++ b/src/components/forms/controls/Checkbox/Checkbox.module.scss @@ -53,6 +53,10 @@ @include svg-dash; } } + &:focus-visible, &.pseudo-focused { + outline: 2px solid bk.$theme-checkbox-border-focus !important; + outline-offset: 0 !important; + } @media (prefers-reduced-motion: no-preference) { transition: none 100ms ease-out; diff --git a/src/components/forms/controls/Checkbox/Checkbox.stories.tsx b/src/components/forms/controls/Checkbox/Checkbox.stories.tsx index e5fcddf..73cb17f 100644 --- a/src/components/forms/controls/Checkbox/Checkbox.stories.tsx +++ b/src/components/forms/controls/Checkbox/Checkbox.stories.tsx @@ -8,6 +8,8 @@ import * as React from 'react'; import { Checkbox } from './Checkbox.tsx'; +import cl from './Checkbox.module.scss'; + type CheckboxArgs = React.ComponentProps; type Story = StoryObj; @@ -28,21 +30,19 @@ export default { } satisfies Meta; -export const Checked: Story = { - args: { defaultChecked: true }, -}; - export const Unchecked: Story = { args: {}, }; -export const Indeterminate: Story = { - args: { defaultChecked: false, indeterminate: true }, +export const Checked: Story = { + args: { defaultChecked: true }, }; -export const DisabledChecked: Story = { - name: 'Disabled (checked)', - args: { disabled: true, defaultChecked: true }, +export const Indeterminate: Story = { + args: { + defaultChecked: false, + indeterminate: true, + }, }; export const DisabledUnchecked: Story = { @@ -50,6 +50,70 @@ export const DisabledUnchecked: Story = { args: { disabled: true }, }; +export const DisabledChecked: Story = { + name: 'Disabled (checked)', + args: { + defaultChecked: true, + disabled: true, + }, +}; + export const DisabledIndeterminate: Story = { - args: { defaultChecked: false, disabled: true, indeterminate: true }, + name: 'Disabled (indeterminate)', + args: { + defaultChecked: false, + disabled: true, + indeterminate: true, + }, +}; + +export const FocusedUnchecked: Story = { + name: 'Focused (unchecked)', + args: { + className: cl['pseudo-focused'], + }, +}; + +export const FocusedChecked: Story = { + name: 'Focused (checked)', + args: { + className: cl['pseudo-focused'], + defaultChecked: true, + }, +}; + +export const FocusedIndeterminate: Story = { + name: 'Focused (indeterminate)', + args: { + className: cl['pseudo-focused'], + defaultChecked: false, + indeterminate: true, + }, +}; + +export const FocusedDisabledUnchecked: Story = { + name: 'Focused & Disabled (unchecked)', + args: { + className: cl['pseudo-focused'], + disabled: true, + }, +}; + +export const FocusedDisabledChecked: Story = { + name: 'Focused & Disabled (checked)', + args: { + className: cl['pseudo-focused'], + defaultChecked: true, + disabled: true, + }, +}; + +export const FocusedDisabledIndeterminate: Story = { + name: 'Focused & Disabled (indeterminate)', + args: { + className: cl['pseudo-focused'], + defaultChecked: false, + disabled: true, + indeterminate: true, + }, }; From da54ca0b6f4861e98a97a467aed66e0d2dade97d Mon Sep 17 00:00:00 2001 From: Arlindo Pereira Date: Thu, 7 Nov 2024 10:44:52 +0100 Subject: [PATCH 07/11] Code review fixes --- .../controls/Checkbox/Checkbox.module.scss | 1 + .../forms/controls/Checkbox/Checkbox.tsx | 4 ++-- .../CheckboxField/CheckboxField.module.scss | 1 + .../controls/CheckboxField/CheckboxField.tsx | 23 +++++++++++++------ .../CheckboxGroup/CheckboxGroup.stories.tsx | 2 +- .../controls/CheckboxGroup/CheckboxGroup.tsx | 10 ++++---- 6 files changed, 26 insertions(+), 15 deletions(-) diff --git a/src/components/forms/controls/Checkbox/Checkbox.module.scss b/src/components/forms/controls/Checkbox/Checkbox.module.scss index 91074b5..5106747 100644 --- a/src/components/forms/controls/Checkbox/Checkbox.module.scss +++ b/src/components/forms/controls/Checkbox/Checkbox.module.scss @@ -42,6 +42,7 @@ &:disabled { border-color: bk.$theme-checkbox-border-disabled; background-color: transparent; + cursor: not-allowed; &:checked, &:indeterminate { background-color: bk.$theme-checkbox-background-non-active; diff --git a/src/components/forms/controls/Checkbox/Checkbox.tsx b/src/components/forms/controls/Checkbox/Checkbox.tsx index 6158fc0..fb77e29 100644 --- a/src/components/forms/controls/Checkbox/Checkbox.tsx +++ b/src/components/forms/controls/Checkbox/Checkbox.tsx @@ -30,13 +30,13 @@ export const Checkbox = (props: CheckboxProps) => { const checkboxRef = React.useRef>(null); React.useEffect(() => { - if (checkboxRef && checkboxRef.current) { + if (checkboxRef?.current) { if (indeterminate) { checkboxRef.current.checked = false; } checkboxRef.current.indeterminate = indeterminate; } - }, [checkboxRef, indeterminate]); + }, [indeterminate]); return ( ; export const CheckboxFieldTitle = ({ className, children, titleOptional, titleTooltip }: CheckboxFieldTitleProps) => ( -

+

{children} {titleTooltip && ( @@ -81,14 +85,22 @@ export const CheckboxField = (props: CheckboxFieldProps) => { className, ...propsRest } = props; - + return (
- {title && {title}} + {title && ( + + {title} + + )} + {/* biome ignore lint/a11y/noLabelWithoutControl: the `` will resolve to an `` */} diff --git a/src/components/forms/controls/CheckboxGroup/CheckboxGroup.stories.tsx b/src/components/forms/controls/CheckboxGroup/CheckboxGroup.stories.tsx index 2577bac..ea7f6c5 100644 --- a/src/components/forms/controls/CheckboxGroup/CheckboxGroup.stories.tsx +++ b/src/components/forms/controls/CheckboxGroup/CheckboxGroup.stories.tsx @@ -32,6 +32,6 @@ export const CheckboxGroupVertical: Story = {}; export const CheckboxGroupHorizontal: Story = { args: { - alignment: 'horizontal', + direction: 'horizontal', }, }; diff --git a/src/components/forms/controls/CheckboxGroup/CheckboxGroup.tsx b/src/components/forms/controls/CheckboxGroup/CheckboxGroup.tsx index 11bbb03..9309792 100644 --- a/src/components/forms/controls/CheckboxGroup/CheckboxGroup.tsx +++ b/src/components/forms/controls/CheckboxGroup/CheckboxGroup.tsx @@ -2,7 +2,7 @@ |* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of |* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import { classNames as cx, type ComponentProps, type ClassNameArgument } from '../../../../util/componentUtil.ts'; +import { classNames as cx } from '../../../../util/componentUtil.ts'; import * as React from 'react'; import cl from './CheckboxGroup.module.scss'; @@ -11,18 +11,18 @@ import cl from './CheckboxGroup.module.scss'; export { cl as CheckboxGroupClassNames }; export type CheckboxGroupProps = React.PropsWithChildren<{ - alignment?: undefined | "vertical" | "horizontal"; + direction?: undefined | "vertical" | "horizontal"; }>; /** * Checkbox component. */ -export const CheckboxGroup = ({children, alignment = 'vertical'}: CheckboxGroupProps) => ( +export const CheckboxGroup = ({children, direction = 'vertical'}: CheckboxGroupProps) => (
{children}
From f8450eccce8b35e9d291c6db5698ec325abdbeec Mon Sep 17 00:00:00 2001 From: Arlindo Pereira Date: Thu, 7 Nov 2024 16:52:53 +0100 Subject: [PATCH 08/11] Move CheckboxField and CheckboxGroup to forms/fields directory --- .../CheckboxField/CheckboxField.module.scss | 0 .../CheckboxField/CheckboxField.stories.tsx | 0 .../forms/{controls => fields}/CheckboxField/CheckboxField.tsx | 2 +- .../CheckboxGroup/CheckboxGroup.module.scss | 0 .../CheckboxGroup/CheckboxGroup.stories.tsx | 0 .../forms/{controls => fields}/CheckboxGroup/CheckboxGroup.tsx | 0 6 files changed, 1 insertion(+), 1 deletion(-) rename src/components/forms/{controls => fields}/CheckboxField/CheckboxField.module.scss (100%) rename src/components/forms/{controls => fields}/CheckboxField/CheckboxField.stories.tsx (100%) rename src/components/forms/{controls => fields}/CheckboxField/CheckboxField.tsx (98%) rename src/components/forms/{controls => fields}/CheckboxGroup/CheckboxGroup.module.scss (100%) rename src/components/forms/{controls => fields}/CheckboxGroup/CheckboxGroup.stories.tsx (100%) rename src/components/forms/{controls => fields}/CheckboxGroup/CheckboxGroup.tsx (100%) diff --git a/src/components/forms/controls/CheckboxField/CheckboxField.module.scss b/src/components/forms/fields/CheckboxField/CheckboxField.module.scss similarity index 100% rename from src/components/forms/controls/CheckboxField/CheckboxField.module.scss rename to src/components/forms/fields/CheckboxField/CheckboxField.module.scss diff --git a/src/components/forms/controls/CheckboxField/CheckboxField.stories.tsx b/src/components/forms/fields/CheckboxField/CheckboxField.stories.tsx similarity index 100% rename from src/components/forms/controls/CheckboxField/CheckboxField.stories.tsx rename to src/components/forms/fields/CheckboxField/CheckboxField.stories.tsx diff --git a/src/components/forms/controls/CheckboxField/CheckboxField.tsx b/src/components/forms/fields/CheckboxField/CheckboxField.tsx similarity index 98% rename from src/components/forms/controls/CheckboxField/CheckboxField.tsx rename to src/components/forms/fields/CheckboxField/CheckboxField.tsx index 0ebd6de..f8160eb 100644 --- a/src/components/forms/controls/CheckboxField/CheckboxField.tsx +++ b/src/components/forms/fields/CheckboxField/CheckboxField.tsx @@ -5,7 +5,7 @@ import { classNames as cx, type ComponentProps, type ClassNameArgument } from '../../../../util/componentUtil.ts'; import * as React from 'react'; -import { Checkbox } from '../Checkbox/Checkbox.tsx'; +import { Checkbox } from '../../controls/Checkbox/Checkbox.tsx'; import { Icon } from '../../../graphics/Icon/Icon.tsx'; import { TooltipProvider } from '../../../overlays/Tooltip/TooltipProvider.tsx'; diff --git a/src/components/forms/controls/CheckboxGroup/CheckboxGroup.module.scss b/src/components/forms/fields/CheckboxGroup/CheckboxGroup.module.scss similarity index 100% rename from src/components/forms/controls/CheckboxGroup/CheckboxGroup.module.scss rename to src/components/forms/fields/CheckboxGroup/CheckboxGroup.module.scss diff --git a/src/components/forms/controls/CheckboxGroup/CheckboxGroup.stories.tsx b/src/components/forms/fields/CheckboxGroup/CheckboxGroup.stories.tsx similarity index 100% rename from src/components/forms/controls/CheckboxGroup/CheckboxGroup.stories.tsx rename to src/components/forms/fields/CheckboxGroup/CheckboxGroup.stories.tsx diff --git a/src/components/forms/controls/CheckboxGroup/CheckboxGroup.tsx b/src/components/forms/fields/CheckboxGroup/CheckboxGroup.tsx similarity index 100% rename from src/components/forms/controls/CheckboxGroup/CheckboxGroup.tsx rename to src/components/forms/fields/CheckboxGroup/CheckboxGroup.tsx From 019b411bded86baeda775864fc531dbd412b8948 Mon Sep 17 00:00:00 2001 From: Arlindo Pereira Date: Thu, 7 Nov 2024 17:02:48 +0100 Subject: [PATCH 09/11] Export CheckboxField within CheckboxGroup --- .../CheckboxGroup/CheckboxGroup.stories.tsx | 7 ++--- .../fields/CheckboxGroup/CheckboxGroup.tsx | 28 ++++++++++++------- 2 files changed, 21 insertions(+), 14 deletions(-) diff --git a/src/components/forms/fields/CheckboxGroup/CheckboxGroup.stories.tsx b/src/components/forms/fields/CheckboxGroup/CheckboxGroup.stories.tsx index ea7f6c5..b332db5 100644 --- a/src/components/forms/fields/CheckboxGroup/CheckboxGroup.stories.tsx +++ b/src/components/forms/fields/CheckboxGroup/CheckboxGroup.stories.tsx @@ -7,7 +7,6 @@ import * as React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { CheckboxGroup } from './CheckboxGroup.tsx'; -import { CheckboxField } from '../CheckboxField/CheckboxField.tsx'; type CheckboxGroupArgs = React.ComponentProps; @@ -22,9 +21,9 @@ export default { argTypes: { }, render: (args) => - - - + + + , } satisfies Meta; diff --git a/src/components/forms/fields/CheckboxGroup/CheckboxGroup.tsx b/src/components/forms/fields/CheckboxGroup/CheckboxGroup.tsx index 9309792..2396639 100644 --- a/src/components/forms/fields/CheckboxGroup/CheckboxGroup.tsx +++ b/src/components/forms/fields/CheckboxGroup/CheckboxGroup.tsx @@ -7,6 +7,8 @@ import * as React from 'react'; import cl from './CheckboxGroup.module.scss'; +import { CheckboxField } from '../CheckboxField/CheckboxField.tsx'; + export { cl as CheckboxGroupClassNames }; @@ -15,15 +17,21 @@ export type CheckboxGroupProps = React.PropsWithChildren<{ }>; /** - * Checkbox component. + * Checkbox group component, wrapping multiple CheckboxField components vertically or horizontally. */ -export const CheckboxGroup = ({children, direction = 'vertical'}: CheckboxGroupProps) => ( -
- {children} -
+export const CheckboxGroup = Object.assign( + (props: CheckboxGroupProps) => { + const { children, direction = 'vertical' } = props; + return ( +
+ {children} +
+ ); + }, + { CheckboxField }, ); From 3a172fd1b474286391b19618e9da3f48edfcd1cc Mon Sep 17 00:00:00 2001 From: Arlindo Pereira Date: Fri, 8 Nov 2024 10:10:39 +0100 Subject: [PATCH 10/11] Code Review fixes --- .../CheckboxField/CheckboxField.module.scss | 30 +++++++++++-------- .../fields/CheckboxField/CheckboxField.tsx | 7 ++--- 2 files changed, 20 insertions(+), 17 deletions(-) diff --git a/src/components/forms/fields/CheckboxField/CheckboxField.module.scss b/src/components/forms/fields/CheckboxField/CheckboxField.module.scss index aa268fc..fba5145 100644 --- a/src/components/forms/fields/CheckboxField/CheckboxField.module.scss +++ b/src/components/forms/fields/CheckboxField/CheckboxField.module.scss @@ -8,19 +8,6 @@ .bk-checkbox-field { @include bk.component-base(bk-checkbox-field); - .bk-checkbox-field__label { - color: bk.$theme-text-label-default; - cursor: pointer; - position: relative; - margin-left: bk.$spacing-2; - top: -4px; - - .bk-checkbox-field__label__sublabel { - font-size: bk.$font-size-xs; - padding-left: 26px; - } - } - .bk-checkbox-field__title { color: bk.$theme-text-label-default; font-weight: bk.$font-weight-semibold; @@ -37,5 +24,22 @@ margin-left: bk.$spacing-1; } } + + .bk-checkbox-field__label { + display: flex; + align-items: flex-start; + } + + .bk-checkbox-field__label__content { + color: bk.$theme-text-label-default; + cursor: pointer; + position: relative; + margin-left: bk.$spacing-2; + top: -2px; + + .bk-checkbox-field__label__sublabel { + font-size: bk.$font-size-xs; + } + } } } diff --git a/src/components/forms/fields/CheckboxField/CheckboxField.tsx b/src/components/forms/fields/CheckboxField/CheckboxField.tsx index f8160eb..00a621b 100644 --- a/src/components/forms/fields/CheckboxField/CheckboxField.tsx +++ b/src/components/forms/fields/CheckboxField/CheckboxField.tsx @@ -83,7 +83,6 @@ export const CheckboxField = (props: CheckboxFieldProps) => { titleOptional, titleTooltip, className, - ...propsRest } = props; return ( @@ -101,18 +100,18 @@ export const CheckboxField = (props: CheckboxFieldProps) => { )} {/* biome ignore lint/a11y/noLabelWithoutControl: the `` will resolve to an `` */} -
); From 2b8b9acd5f9c4e19730ef2611004dceea19e8900 Mon Sep 17 00:00:00 2001 From: Arlindo Pereira Date: Fri, 8 Nov 2024 14:26:21 +0100 Subject: [PATCH 11/11] Code Review fixes --- .../fields/CheckboxField/CheckboxField.module.scss | 7 ++++--- .../forms/fields/CheckboxField/CheckboxField.tsx | 10 +++++----- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/components/forms/fields/CheckboxField/CheckboxField.module.scss b/src/components/forms/fields/CheckboxField/CheckboxField.module.scss index fba5145..981b732 100644 --- a/src/components/forms/fields/CheckboxField/CheckboxField.module.scss +++ b/src/components/forms/fields/CheckboxField/CheckboxField.module.scss @@ -36,10 +36,11 @@ position: relative; margin-left: bk.$spacing-2; top: -2px; + } - .bk-checkbox-field__label__sublabel { - font-size: bk.$font-size-xs; - } + .bk-checkbox-field__sublabel { + font-size: bk.$font-size-xs; + padding-left: 26px; } } } diff --git a/src/components/forms/fields/CheckboxField/CheckboxField.tsx b/src/components/forms/fields/CheckboxField/CheckboxField.tsx index 00a621b..1046974 100644 --- a/src/components/forms/fields/CheckboxField/CheckboxField.tsx +++ b/src/components/forms/fields/CheckboxField/CheckboxField.tsx @@ -106,13 +106,13 @@ export const CheckboxField = (props: CheckboxFieldProps) => { defaultChecked={props.defaultChecked} disabled={props.disabled} /> -
+ {label} - {sublabel && ( -
{sublabel}
- )} -
+ + {sublabel && ( +
{sublabel}
+ )} ); };