From 58cd35ef76389cccbb79b6d95ef8864226d497ae Mon Sep 17 00:00:00 2001 From: Will Martin Date: Thu, 28 Sep 2023 09:04:16 -0400 Subject: [PATCH] [CL-80] feat: indeterminate checkbox (#6357) * add indeterminate svg --- .../src/checkbox/checkbox.component.ts | 25 +++++++++++++++---- .../src/checkbox/checkbox.stories.ts | 9 +++++++ 2 files changed, 29 insertions(+), 5 deletions(-) diff --git a/libs/components/src/checkbox/checkbox.component.ts b/libs/components/src/checkbox/checkbox.component.ts index 8e966fa227..5e1e17a5ca 100644 --- a/libs/components/src/checkbox/checkbox.component.ts +++ b/libs/components/src/checkbox/checkbox.component.ts @@ -44,21 +44,33 @@ export class CheckboxComponent implements BitFormControlAbstraction { "checked:tw-bg-primary-500", "checked:tw-border-primary-500", - "checked:hover:tw-bg-primary-700", "checked:hover:tw-border-primary-700", "[&>label:hover]:checked:tw-bg-primary-700", "[&>label:hover]:checked:tw-border-primary-700", - "checked:before:tw-bg-text-contrast", - "checked:before:tw-mask-image-[var(--mask-image)]", "checked:before:tw-mask-position-[center]", "checked:before:tw-mask-repeat-[no-repeat]", - "checked:disabled:tw-border-secondary-100", "checked:disabled:tw-bg-secondary-100", - "checked:disabled:before:tw-bg-text-muted", + + "[&:not(:indeterminate)]:checked:before:tw-mask-image-[var(--mask-image)]", + "indeterminate:before:tw-mask-image-[var(--indeterminate-mask-image)]", + + "indeterminate:tw-bg-primary-500", + "indeterminate:tw-border-primary-500", + "indeterminate:hover:tw-bg-primary-700", + "indeterminate:hover:tw-border-primary-700", + "[&>label:hover]:indeterminate:tw-bg-primary-700", + "[&>label:hover]:indeterminate:tw-border-primary-700", + "indeterminate:before:tw-bg-text-contrast", + "indeterminate:before:tw-mask-position-[center]", + "indeterminate:before:tw-mask-repeat-[no-repeat]", + "indeterminate:before:tw-mask-image-[var(--indeterminate-mask-image)]", + "indeterminate:disabled:tw-border-secondary-100", + "indeterminate:disabled:tw-bg-secondary-100", + "indeterminate:disabled:before:tw-bg-text-muted", ]; constructor(@Optional() @Self() private ngControl?: NgControl) {} @@ -66,6 +78,9 @@ export class CheckboxComponent implements BitFormControlAbstraction { @HostBinding("style.--mask-image") protected maskImage = `url('data:image/svg+xml,%3Csvg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="8" viewBox="0 0 10 10"%3E%3Cpath d="M0.5 6.2L2.9 8.6L9.5 1.4" fill="none" stroke="white" stroke-width="2"%3E%3C/path%3E%3C/svg%3E')`; + @HostBinding("style.--indeterminate-mask-image") + protected indeterminateImage = `url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="none" viewBox="0 0 13 13"%3E%3Cpath stroke="%23fff" stroke-width="2" d="M2.5 6.5h8"/%3E%3C/svg%3E%0A')`; + @HostBinding() @Input() get disabled() { diff --git a/libs/components/src/checkbox/checkbox.stories.ts b/libs/components/src/checkbox/checkbox.stories.ts index c2c924e2a3..11ef32eac7 100644 --- a/libs/components/src/checkbox/checkbox.stories.ts +++ b/libs/components/src/checkbox/checkbox.stories.ts @@ -110,3 +110,12 @@ export const Custom: Story = { `, }), }; + +export const Indeterminate: Story = { + render: (args) => ({ + props: args, + template: ` + + `, + }), +};