From 4879bbc41e03e244b77d6914f172b0e94689fa01 Mon Sep 17 00:00:00 2001 From: "maryia.radchuk" Date: Wed, 31 Jul 2024 11:37:10 +0200 Subject: [PATCH 1/6] fix(pie-checkbox): DSW-000 design review comments --- .changeset/blue-keys-shout.md | 6 +++++ .../components/pie-checkbox/src/checkbox.scss | 23 +++++++++++-------- 2 files changed, 20 insertions(+), 9 deletions(-) create mode 100644 .changeset/blue-keys-shout.md diff --git a/.changeset/blue-keys-shout.md b/.changeset/blue-keys-shout.md new file mode 100644 index 0000000000..2f8550b0f4 --- /dev/null +++ b/.changeset/blue-keys-shout.md @@ -0,0 +1,6 @@ +--- +"@justeattakeaway/pie-checkbox": minor +--- + +[Changed] - cursor styling for disabled state changed from default to not-allowed. +[Added] - transition styles to border colour in addition to background colour. diff --git a/packages/components/pie-checkbox/src/checkbox.scss b/packages/components/pie-checkbox/src/checkbox.scss index b922f317ee..3a08f0f01e 100644 --- a/packages/components/pie-checkbox/src/checkbox.scss +++ b/packages/components/pie-checkbox/src/checkbox.scss @@ -22,7 +22,6 @@ border-color: #fff; border-bottom-right-radius: 2px; - transform: translate3d(0, -16px, 0) rotate(45deg); } } @@ -65,10 +64,11 @@ border: 1px solid var(--checkbox-border-color); border-radius: var(--checkbox-radius); background-color: var(--checkbox-bg-color); + transition: + background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing), + border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing); @media (prefers-reduced-motion: no-preference) { - transition: background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing); - animation: scaleDown var(--dt-motion-timing-100) var(--checkbox-motion-easing); } @@ -92,8 +92,8 @@ } &[data-pie-status="error"] { - --checkbox-border-color: var(--dt-color-support-error); --checkbox-bg-color: var(--dt-color-support-error); + --checkbox-border-color: var(--dt-color-support-error); } } @@ -113,7 +113,9 @@ animation: checkboxCheck var(--dt-motion-timing-150) var(--checkbox-motion-easing) forwards; @media (prefers-reduced-motion: reduce) { - animation: none; + animation-duration: 1ms !important; + animation-delay: 0 !important; + animation-iteration-count: 1 !important; width: 8px; height: 16px; border-color: #fff; @@ -226,8 +228,9 @@ &:hover { .c-checkbox-tick { --checkbox-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-hover-01)))); - - transition: background-color var(--dt-motion-timing-200) var(--checkbox-motion-easing); + transition: + background-color var(--dt-motion-timing-200) var(--checkbox-motion-easing), + border-color var(--dt-motion-timing-200) var(--checkbox-motion-easing); } } @@ -235,13 +238,15 @@ .c-checkbox-tick { --checkbox-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-active-01)))); - transition: background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing); + transition: + background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing), + border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing); } } &[data-pie-disabled] { label { - cursor: default; + cursor: not-allowed; pointer-events: none; } } From 7eacaa790fb84f357f18f1e968792f916db71554 Mon Sep 17 00:00:00 2001 From: "maryia.radchuk" Date: Thu, 1 Aug 2024 11:40:57 +0200 Subject: [PATCH 2/6] feat(pie-checkbox-group): DSW-000 replaces label prop with the slot + css spacing update --- .changeset/wild-scissors-bathe.md | 7 ++ .../stories/pie-checkbox-group.stories.ts | 76 ++++++++++++------- .../components/pie-checkbox-group/README.md | 9 ++- .../src/checkbox-group.scss | 35 +++++---- .../components/pie-checkbox-group/src/defs.ts | 5 -- .../pie-checkbox-group/src/index.ts | 8 +- .../test/visual/pie-checkbox-group.spec.ts | 29 +++---- .../components/pie-checkbox/src/checkbox.scss | 1 - 8 files changed, 98 insertions(+), 72 deletions(-) create mode 100644 .changeset/wild-scissors-bathe.md diff --git a/.changeset/wild-scissors-bathe.md b/.changeset/wild-scissors-bathe.md new file mode 100644 index 0000000000..09195a865d --- /dev/null +++ b/.changeset/wild-scissors-bathe.md @@ -0,0 +1,7 @@ +--- +"@justeattakeaway/pie-checkbox-group": minor +--- + +[Changed] - replaced label prop with a slot. +[Changed] - increased spacing after label and before assistive text. +[Changed] - reduced spacing detween checkboxes in inline mode. diff --git a/apps/pie-storybook/stories/pie-checkbox-group.stories.ts b/apps/pie-storybook/stories/pie-checkbox-group.stories.ts index 6b9c1ae268..9f59d86827 100644 --- a/apps/pie-storybook/stories/pie-checkbox-group.stories.ts +++ b/apps/pie-storybook/stories/pie-checkbox-group.stories.ts @@ -1,8 +1,8 @@ -import { html } from 'lit'; +import { html, nothing } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; /* eslint-disable import/no-duplicates */ import '@justeattakeaway/pie-checkbox-group'; -import { CheckboxGroupProps, defaultProps, statusTypes } from '@justeattakeaway/pie-checkbox-group'; +import { CheckboxGroupProps as CheckboxGroupBase, defaultProps, statusTypes } from '@justeattakeaway/pie-checkbox-group'; /* eslint-enable import/no-duplicates */ import { type StoryMeta } from '../types'; @@ -10,13 +10,22 @@ import { createStory } from '../utilities'; import '@justeattakeaway/pie-link'; import '@justeattakeaway/pie-checkbox'; +import '@justeattakeaway/pie-form-label'; + +// Extending the props type definition to include storybook specific properties for controls +type CheckboxGroupProps = CheckboxGroupBase & { + labelSlot: typeof slotOptions[number]; +}; type CheckboxGroupStoryMeta = StoryMeta; const defaultArgs: CheckboxGroupProps = { ...defaultProps, + labelSlot: 'None', }; +const slotOptions = ['Checkbox Group Label', 'None'] as const; + const checkboxGroupStoryMeta: CheckboxGroupStoryMeta = { title: 'Checkbox Group', component: 'pie-checkbox-group', @@ -25,9 +34,11 @@ const checkboxGroupStoryMeta: CheckboxGroupStoryMeta = { description: 'The name associated with the group.', control: 'text', }, - label: { - description: 'The visible label for the checkbox group.', - control: 'text', + labelSlot: { + name: 'Label Slot', + description: '**Not a component Prop

Use the `label` slot to pass component with all the relevant props.', + control: 'select', + options: slotOptions, }, isInline: { description: 'Inline (horizontal) positioning of checkbox items.', @@ -72,32 +83,41 @@ export default checkboxGroupStoryMeta; const Template = ({ name, - label, isInline, assistiveText, status, disabled, -}: CheckboxGroupProps) => html` -
-

Please note, the checkboxes are separate components. See - pie-checkbox.

- - checkbox 1 - checkbox 2 - checkbox 3 longer label - checkbox 4 - checkbox 5 even longer label: Lorem ipsum dolor sit amet, - consectetur adipiscing elit. - checkbox 6 - -
-`; + labelSlot, +}: CheckboxGroupProps) => { + function renderLabelSlot (slotValue: typeof slotOptions[number]) { + if (slotValue === slotOptions[0]) { + return html`Checkbox Group Label`; + } + return nothing; + } + + return html` +
+

Please note, the checkboxes are separate components. See + pie-checkbox.

+ + ${renderLabelSlot(labelSlot)} + checkbox 1 + checkbox 2 + checkbox 3 longer label + checkbox 4 + checkbox 5 even longer label: Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + checkbox 6 + +
+ `; +}; export const Default = createStory(Template, defaultArgs)(); diff --git a/packages/components/pie-checkbox-group/README.md b/packages/components/pie-checkbox-group/README.md index b34ec8061f..263cc08dab 100644 --- a/packages/components/pie-checkbox-group/README.md +++ b/packages/components/pie-checkbox-group/README.md @@ -76,12 +76,10 @@ import { PieCheckboxGroup } from '@justeattakeaway/pie-checkbox-group/dist/react | Property | Type | Default | Description | |---|---|---|---| | `name` | string | - | The name associated with the group. | -| `label` | string | - | The label value of the component | | `disabled` | boolean | - | Same as the HTML disabled attribute - indicates whether or not the checkbox group is disabled. | | `assistiveText` | `string` | - | Allows assistive text to be displayed below the checkbox group. | | `status` | `'default'`, `'error'`, `'success'` | `'default'` | The status of the checkbox group / assistive text. If you use `status` you must provide an `assistiveText` prop value for accessibility purposes. | - In your markup or JSX, you can then use these to set the properties for the `pie-checkbox-group` component: ```html @@ -100,6 +98,13 @@ In your markup or JSX, you can then use these to set the properties for the `pie ``` +## Slots + +| Slot | Description | +|---|---| +| `default` | Pass PieCheckbox components as direct children for the CheckboxGroup. | +| `label` | Pass PieFormLabel to render the checkbox group label. | + ## Events | Event | Type | Description | |-------|------|-------------| diff --git a/packages/components/pie-checkbox-group/src/checkbox-group.scss b/packages/components/pie-checkbox-group/src/checkbox-group.scss index fbc720967e..7038e459ce 100644 --- a/packages/components/pie-checkbox-group/src/checkbox-group.scss +++ b/packages/components/pie-checkbox-group/src/checkbox-group.scss @@ -14,9 +14,14 @@ display: flex; } + ::slotted(pie-form-label) { + display: block; + padding-block-end: var(--checkbox-group-label-offset); + } + &:not(.c-checkboxGroup--inline) { - ::slotted(pie-checkbox:not(:first-child)) { - margin-block-start: var(--checkbox-group-offset); + ::slotted(pie-checkbox:not(:last-child)) { + margin-block-end: var(--checkbox-group-offset); } } } @@ -28,26 +33,20 @@ flex-wrap: wrap; } -.c-checkboxGroup-label { - max-width: 100%; - white-space: normal; - padding: 0; - font-size: p.font-size(--dt-font-body-strong-s-size); - line-height: p.line-height(--dt-font-body-strong-s-line-height); - font-weight: var(--dt-font-body-strong-s-weight); - color: var(--dt-color-content-default); - - margin-block-end: var(--checkbox-group-label-offset); -} - .c-checkboxGroup.c-checkboxGroup--inline { - margin: calc(-1 * var(--checkbox-group-offset--inline) / 2) calc(-1 * var(--checkbox-group-offset--inline) / 2); + margin: calc(-1 * var(--checkbox-group-offset) / 2) calc(-1 * var(--checkbox-group-offset--inline) / 2); ::slotted(pie-checkbox) { - margin: calc(var(--checkbox-group-offset--inline) / 2) calc(var(--checkbox-group-offset--inline) / 2); + margin: calc(var(--checkbox-group-offset) / 2) calc(var(--checkbox-group-offset--inline) / 2); } - .c-checkboxGroup-label { - margin: 0 calc(var(--checkbox-group-offset--inline) / 2) calc(-1 * (var(--checkbox-group-offset--inline) / 2 - var(--checkbox-group-label-offset))); + ::slotted(pie-form-label) { + margin: 0 calc(var(--checkbox-group-offset--inline) / 2) calc(-1 * (var(--checkbox-group-offset) / 2 - var(--checkbox-group-label-offset))); + padding-block-end: 0; } } + +.c-checkboxGroup-assistiveText { + display: block; + margin-block-start: 4px; +} diff --git a/packages/components/pie-checkbox-group/src/defs.ts b/packages/components/pie-checkbox-group/src/defs.ts index a252ee5df1..d6aedddc8c 100644 --- a/packages/components/pie-checkbox-group/src/defs.ts +++ b/packages/components/pie-checkbox-group/src/defs.ts @@ -8,11 +8,6 @@ export interface CheckboxGroupProps { */ name?: string; - /** - * The label value of the component - */ - label?: string; - /** * Inline (horizontal) positioning of checkbox items */ diff --git a/packages/components/pie-checkbox-group/src/index.ts b/packages/components/pie-checkbox-group/src/index.ts index 69b67aaf3e..ca500d3194 100644 --- a/packages/components/pie-checkbox-group/src/index.ts +++ b/packages/components/pie-checkbox-group/src/index.ts @@ -29,6 +29,7 @@ const assistiveTextId = 'assistive-text'; /** * @tagname pie-checkbox-group * @slot - Default slot + * @slot label - The label slot * @event {CustomEvent} pie-checkbox-group-disabled - triggered after the disabled state of the checkbox group changes. * @event {CustomEvent} pie-checkbox-group-error - triggered after the state of the checkbox group changes to error. */ @@ -36,9 +37,6 @@ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) imp @property({ type: String }) public name?: CheckboxGroupProps['name']; - @property({ type: String }) - public label?: CheckboxGroupProps['label']; - @property({ type: String }) public assistiveText?: CheckboxGroupProps['assistiveText']; @@ -84,7 +82,6 @@ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) imp render () { const { name, - label, isInline, assistiveText, status, @@ -104,13 +101,14 @@ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) imp data-test-id="pie-checkbox-group" class="${classMap(classes)}" > - ${label && html`${label}`} + ${assistiveText && html` ${assistiveText} `} diff --git a/packages/components/pie-checkbox-group/test/visual/pie-checkbox-group.spec.ts b/packages/components/pie-checkbox-group/test/visual/pie-checkbox-group.spec.ts index ae3cdf77ed..37c8cc6e02 100644 --- a/packages/components/pie-checkbox-group/test/visual/pie-checkbox-group.spec.ts +++ b/packages/components/pie-checkbox-group/test/visual/pie-checkbox-group.spec.ts @@ -13,28 +13,29 @@ import { percyWidths } from '@justeattakeaway/pie-webc-testing/src/percy/breakpo import { setRTL } from '@justeattakeaway/pie-webc-testing/src/helpers/set-rtl-direction.ts'; import { PieAssistiveText } from '@justeattakeaway/pie-assistive-text'; import { PieCheckbox } from '@justeattakeaway/pie-checkbox'; +import { PieFormLabel } from '@justeattakeaway/pie-form-label'; import { PieCheckboxGroup } from '../../src/index.ts'; import { statusTypes } from '../../src/defs.ts'; const readingDirections = ['LTR', 'RTL']; const props: PropObject = { - label: ['Group Label', ''], status: statusTypes, isInline: [true, false], disabled: [true, false], + hasGroupLabel: [true, false], }; const renderTestPieCheckboxGroup = (propVals: WebComponentPropValues) => { let attributes = ''; - if (propVals.label) attributes += ` label="${propVals.label}"`; if (propVals.assistiveText) attributes += ` assistiveText="${propVals.assistiveText}"`; if (propVals.isInline) attributes += ` isInline="${propVals.isInline}"`; if (propVals.disabled) attributes += ` disabled="${propVals.disabled}"`; return ` + ${propVals.hasGroupLabel ? 'Group Label' : ''} Label Label Label @@ -50,14 +51,17 @@ test.beforeEach(async ({ mount }, testInfo) => { // This ensures the checkbox component is registered in the DOM for each test. // It appears to add them to a Playwright cache which we understand is required for the tests to work correctly. - const checkboxPropComponent = await mount(PieCheckboxGroup); - await checkboxPropComponent.unmount(); + const checkboxGroupComponent = await mount(PieCheckboxGroup); + await checkboxGroupComponent.unmount(); const assistiveTextComponent = await mount(PieAssistiveText); await assistiveTextComponent.unmount(); const checkboxComponent = await mount(PieCheckbox); await checkboxComponent.unmount(); + + const formLabelComponent = await mount(PieFormLabel); + await formLabelComponent.unmount(); }); componentVariants.forEach((variant) => test(`should render all prop variations for the isInline state: ${variant}`, async ({ page, mount }) => { @@ -66,7 +70,7 @@ componentVariants.forEach((variant) => test(`should render all prop variations f const propKeyValues = ` isInline: ${testComponent.propValues.isInline}, disabled: ${testComponent.propValues.disabled}, - label: ${testComponent.propValues.label ? 'with label' : 'no label'}, + hasGroupLabel: ${testComponent.propValues.hasGroupLabel}, status: ${testComponent.propValues.status}`; await mount( @@ -90,8 +94,8 @@ for (const dir of readingDirections) { } // Assistive text with no status - let testComponent: WebComponentTestInput = createTestWebComponent({ assistiveText: 'Assistive text', label: 'Group label' }, renderTestPieCheckboxGroup); - let propKeyValues = `assistiveText: ${testComponent.propValues.assistiveText}, label: ${testComponent.propValues.label}`; + let testComponent: WebComponentTestInput = createTestWebComponent({ assistiveText: 'Assistive text', hasGroupLabel: true }, renderTestPieCheckboxGroup); + let propKeyValues = `assistiveText: ${testComponent.propValues.assistiveText}`; await mount( WebComponentTestWrapper, @@ -104,8 +108,8 @@ for (const dir of readingDirections) { ); // Error + assistive text - testComponent = createTestWebComponent({ assistiveText: 'Error text', label: 'Group label', status: 'error' }, renderTestPieCheckboxGroup); - propKeyValues = `assistiveText: ${testComponent.propValues.assistiveText}, label: ${testComponent.propValues.label}, status: ${testComponent.propValues.status}`; + testComponent = createTestWebComponent({ assistiveText: 'Error text', status: 'error', hasGroupLabel: true }, renderTestPieCheckboxGroup); + propKeyValues = `assistiveText: ${testComponent.propValues.assistiveText}, status: ${testComponent.propValues.status}`; await mount( WebComponentTestWrapper, @@ -118,8 +122,8 @@ for (const dir of readingDirections) { ); // Success + assistive text - testComponent = createTestWebComponent({ assistiveText: 'Success text', label: 'Group label', status: 'success' }, renderTestPieCheckboxGroup); - propKeyValues = `assistiveText: ${testComponent.propValues.assistiveText}, label: ${testComponent.propValues.label}, status: ${testComponent.propValues.status}`; + testComponent = createTestWebComponent({ assistiveText: 'Success text', status: 'success', hasGroupLabel: true }, renderTestPieCheckboxGroup); + propKeyValues = `assistiveText: ${testComponent.propValues.assistiveText}, status: ${testComponent.propValues.status}`; await mount( WebComponentTestWrapper, @@ -134,13 +138,12 @@ for (const dir of readingDirections) { // Success + assistive text + isInline testComponent = createTestWebComponent({ assistiveText: 'Success text', - label: 'Group label', status: 'success', isInline: true, + hasGroupLabel: true, }, renderTestPieCheckboxGroup); propKeyValues = ` assistiveText: ${testComponent.propValues.assistiveText}, - label: ${testComponent.propValues.label}, status: ${testComponent.propValues.status}, isInline: ${testComponent.propValues.isInline}`; diff --git a/packages/components/pie-checkbox/src/checkbox.scss b/packages/components/pie-checkbox/src/checkbox.scss index 3a08f0f01e..1da0a55d4d 100644 --- a/packages/components/pie-checkbox/src/checkbox.scss +++ b/packages/components/pie-checkbox/src/checkbox.scss @@ -247,7 +247,6 @@ &[data-pie-disabled] { label { cursor: not-allowed; - pointer-events: none; } } From 019e347d0e1aef0696ac5aa35860c61fdcf67f5b Mon Sep 17 00:00:00 2001 From: "maryia.radchuk" Date: Thu, 1 Aug 2024 16:42:26 +0200 Subject: [PATCH 3/6] fix(pie-checkbox): DSW-000 safari bug fix for the tiny line in checkbox check --- packages/components/pie-checkbox/src/checkbox.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/components/pie-checkbox/src/checkbox.scss b/packages/components/pie-checkbox/src/checkbox.scss index 1da0a55d4d..c598030e8f 100644 --- a/packages/components/pie-checkbox/src/checkbox.scss +++ b/packages/components/pie-checkbox/src/checkbox.scss @@ -22,7 +22,9 @@ border-color: #fff; border-bottom-right-radius: 2px; - transform: translate3d(0, -16px, 0) rotate(45deg); + // had to add 1px to z-axis to fix a bug in Safari + // that adds a tiny line between check borders + transform: translate3d(0, -16px, 1px) rotate(45deg); } } From 3699c46a0310956e12ee5725de0cddb5e106d6b2 Mon Sep 17 00:00:00 2001 From: "maryia.radchuk" Date: Fri, 2 Aug 2024 15:54:57 +0200 Subject: [PATCH 4/6] feat(pie-checkbox-group): DSW-000 render legend element only when label slot is passed --- .../pie-checkbox-group/src/index.ts | 30 +++++++++++++++++-- .../components/pie-checkbox/src/checkbox.scss | 7 +++-- 2 files changed, 31 insertions(+), 6 deletions(-) diff --git a/packages/components/pie-checkbox-group/src/index.ts b/packages/components/pie-checkbox-group/src/index.ts index ca500d3194..bcd39b8ad9 100644 --- a/packages/components/pie-checkbox-group/src/index.ts +++ b/packages/components/pie-checkbox-group/src/index.ts @@ -1,7 +1,7 @@ import { - LitElement, html, unsafeCSS, PropertyValues, + LitElement, html, unsafeCSS, PropertyValues, nothing, type TemplateResult, } from 'lit'; -import { property, queryAssignedElements } from 'lit/decorators.js'; +import { property, queryAssignedElements, state } from 'lit/decorators.js'; import { RtlMixin, defineCustomElement, @@ -34,6 +34,9 @@ const assistiveTextId = 'assistive-text'; * @event {CustomEvent} pie-checkbox-group-error - triggered after the state of the checkbox group changes to error. */ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) implements CheckboxGroupProps { + @state() + labelPassed = false; + @property({ type: String }) public name?: CheckboxGroupProps['name']; @@ -52,6 +55,8 @@ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) imp @queryAssignedElements({ selector: 'pie-checkbox' }) _slottedChildren: Array | undefined; + @queryAssignedElements({ slot: 'label' }) _labelSlot!: Array; + private _handleDisabled () : void { this._slottedChildren?.forEach((child) => child.dispatchEvent(new CustomEvent(ON_CHECKBOX_GROUP_DISABLED, { bubbles: false, composed: false, detail: { disabled: this.disabled }, @@ -69,6 +74,25 @@ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) imp }); } + /** + * Function that updates the local `labelPassed` state in case + * when the label slot receives content. + * @private + */ + private handleSlotchange (e: { target: HTMLSlotElement; }) { + const childNodes = e.target.assignedNodes({ flatten: true }); + this.labelPassed = childNodes.length > 0; + } + + /** + * Template for the label slot to correctly wrap it into a legend element with it has content. + * Called within the main render function. + * @private + */ + private renderWrappedLabel (): TemplateResult | typeof nothing { + return this.labelPassed ? html`` : html``; + } + protected updated (_changedProperties: PropertyValues): void { if (_changedProperties.has('disabled')) { this._handleDisabled(); @@ -101,7 +125,7 @@ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) imp data-test-id="pie-checkbox-group" class="${classMap(classes)}" > - + ${this.renderWrappedLabel()} ${assistiveText && html` diff --git a/packages/components/pie-checkbox/src/checkbox.scss b/packages/components/pie-checkbox/src/checkbox.scss index c598030e8f..4b21bc092f 100644 --- a/packages/components/pie-checkbox/src/checkbox.scss +++ b/packages/components/pie-checkbox/src/checkbox.scss @@ -66,11 +66,12 @@ border: 1px solid var(--checkbox-border-color); border-radius: var(--checkbox-radius); background-color: var(--checkbox-bg-color); - transition: - background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing), - border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing); @media (prefers-reduced-motion: no-preference) { + transition: + background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing), + border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing); + animation: scaleDown var(--dt-motion-timing-100) var(--checkbox-motion-easing); } From fe5583b229fa85994c41b0ded92f8431210ce5ed Mon Sep 17 00:00:00 2001 From: "maryia.radchuk" Date: Fri, 2 Aug 2024 16:49:57 +0200 Subject: [PATCH 5/6] feat(pie-checkbox-group): DSW-000 typos fix and vars renaming --- .../pie-checkbox-group/src/checkbox-group.scss | 3 ++- packages/components/pie-checkbox-group/src/index.ts | 12 ++++++------ 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/components/pie-checkbox-group/src/checkbox-group.scss b/packages/components/pie-checkbox-group/src/checkbox-group.scss index 7038e459ce..d595158509 100644 --- a/packages/components/pie-checkbox-group/src/checkbox-group.scss +++ b/packages/components/pie-checkbox-group/src/checkbox-group.scss @@ -4,6 +4,7 @@ --checkbox-group-offset: var(--dt-spacing-c); --checkbox-group-offset--inline: var(--dt-spacing-e); --checkbox-group-label-offset: var(--dt-spacing-a); + --checkbox-group-assistive-text-offset: var(--dt-spacing-a); margin: 0; padding: 0; @@ -48,5 +49,5 @@ .c-checkboxGroup-assistiveText { display: block; - margin-block-start: 4px; + margin-block-start: var(--checkbox-group-assistive-text-offset); } diff --git a/packages/components/pie-checkbox-group/src/index.ts b/packages/components/pie-checkbox-group/src/index.ts index bcd39b8ad9..307807559f 100644 --- a/packages/components/pie-checkbox-group/src/index.ts +++ b/packages/components/pie-checkbox-group/src/index.ts @@ -35,7 +35,7 @@ const assistiveTextId = 'assistive-text'; */ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) implements CheckboxGroupProps { @state() - labelPassed = false; + hasLabel = false; @property({ type: String }) public name?: CheckboxGroupProps['name']; @@ -75,22 +75,22 @@ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) imp } /** - * Function that updates the local `labelPassed` state in case + * Function that updates the local `hasLabel` state in case * when the label slot receives content. * @private */ - private handleSlotchange (e: { target: HTMLSlotElement; }) { + private handleSlotChange (e: { target: HTMLSlotElement; }) { const childNodes = e.target.assignedNodes({ flatten: true }); - this.labelPassed = childNodes.length > 0; + this.hasLabel = childNodes.length > 0; } /** - * Template for the label slot to correctly wrap it into a legend element with it has content. + * Template for the label slot to correctly wrap it into a legend element when it has content. * Called within the main render function. * @private */ private renderWrappedLabel (): TemplateResult | typeof nothing { - return this.labelPassed ? html`` : html``; + return this.hasLabel ? html`` : html``; } protected updated (_changedProperties: PropertyValues): void { From 5fc4f076edd2d49927e0cf79d417c4a1bd39618f Mon Sep 17 00:00:00 2001 From: "maryia.radchuk" Date: Fri, 2 Aug 2024 17:12:07 +0200 Subject: [PATCH 6/6] fix(pie-checkbox-group): DSW-000 a proper scope for --checkbox-group-assistive-text-offset css var --- packages/components/pie-checkbox-group/src/checkbox-group.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/pie-checkbox-group/src/checkbox-group.scss b/packages/components/pie-checkbox-group/src/checkbox-group.scss index d595158509..33795615d6 100644 --- a/packages/components/pie-checkbox-group/src/checkbox-group.scss +++ b/packages/components/pie-checkbox-group/src/checkbox-group.scss @@ -4,7 +4,6 @@ --checkbox-group-offset: var(--dt-spacing-c); --checkbox-group-offset--inline: var(--dt-spacing-e); --checkbox-group-label-offset: var(--dt-spacing-a); - --checkbox-group-assistive-text-offset: var(--dt-spacing-a); margin: 0; padding: 0; @@ -48,6 +47,8 @@ } .c-checkboxGroup-assistiveText { + --checkbox-group-assistive-text-offset: var(--dt-spacing-a); + display: block; margin-block-start: var(--checkbox-group-assistive-text-offset); }