@purpurds/checkbox 5.16.1 → 5.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/LICENSE.txt +4 -4
- package/dist/checkbox.cjs.js +7 -7
- package/dist/checkbox.cjs.js.map +1 -1
- package/dist/checkbox.d.ts +5 -0
- package/dist/checkbox.d.ts.map +1 -1
- package/dist/checkbox.es.js +253 -247
- package/dist/checkbox.es.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +6 -6
- package/src/checkbox.module.scss +3 -3
- package/src/checkbox.stories.tsx +3 -0
- package/src/checkbox.tsx +21 -9
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._purpur-
|
|
1
|
+
._purpur-checkbox_m4999_1{all:unset;padding:calc((var(--purpur-spacing-400) + var(--purpur-spacing-150) - var(--purpur-spacing-300)) / 2);margin:calc(-1 * (var(--purpur-spacing-400) + var(--purpur-spacing-150) - var(--purpur-spacing-300)) / 2);cursor:pointer}._purpur-checkbox_m4999_1:active>._purpur-checkbox__box_m4999_7{box-shadow:var(--purpur-color-border-interactive-subtle-hover) 0 0 0 var(--purpur-border-width-xs) inset}._purpur-checkbox_m4999_1:disabled{cursor:default}._purpur-checkbox_m4999_1:disabled>._purpur-checkbox__box_m4999_7{box-shadow:var(--purpur-color-border-weak) 0 0 0 var(--purpur-border-width-xs) inset}._purpur-checkbox--error_m4999_16>._purpur-checkbox__box_m4999_7,._purpur-checkbox--error-checkbox_m4999_16>._purpur-checkbox__box_m4999_7{box-shadow:var(--purpur-color-border-status-error) 0 0 0 var(--purpur-border-width-xs) inset}._purpur-checkbox--error_m4999_16:not(:disabled)~label *{color:var(--purpur-color-text-status-error-strong)}._purpur-checkbox_m4999_1:not(:disabled):not(:active):hover>._purpur-checkbox__box_m4999_7{box-shadow:var(--purpur-color-border-interactive-subtle-hover) 0 0 0 var(--purpur-border-width-sm) inset}._purpur-checkbox_m4999_1:focus-visible:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--purpur-border-radius-xs);outline:var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-focus);outline-offset:var(--purpur-spacing-25);pointer-events:none}._purpur-checkbox_m4999_1[data-state=checked]>._purpur-checkbox__box_m4999_7,._purpur-checkbox_m4999_1[data-state=indeterminate]>._purpur-checkbox__box_m4999_7{box-shadow:none;background-color:var(--purpur-color-background-interactive-primary)}._purpur-checkbox_m4999_1[data-state=checked]:active>._purpur-checkbox__box_m4999_7,._purpur-checkbox_m4999_1[data-state=indeterminate]:active>._purpur-checkbox__box_m4999_7{background-color:var(--purpur-color-background-interactive-primary-active)}._purpur-checkbox_m4999_1[data-state=checked]:disabled>._purpur-checkbox__box_m4999_7,._purpur-checkbox_m4999_1[data-state=indeterminate]:disabled>._purpur-checkbox__box_m4999_7{box-shadow:var(--purpur-color-border-weak) 0 0 0 var(--purpur-border-width-xs) inset;background-color:var(--purpur-color-background-interactive-disabled)}._purpur-checkbox_m4999_1[data-state=checked]:not(:disabled):not(:active):hover>._purpur-checkbox__box_m4999_7,._purpur-checkbox_m4999_1[data-state=indeterminate]:not(:disabled):not(:active):hover>._purpur-checkbox__box_m4999_7{box-shadow:none;background-color:var(--purpur-color-background-interactive-primary-hover)}._purpur-checkbox__box_m4999_7{display:block;height:var(--purpur-spacing-300);width:var(--purpur-spacing-300);background-color:var(--purpur-color-background-primary);border-radius:var(--purpur-border-radius-xs);box-shadow:var(--purpur-color-border-interactive-subtle) 0 0 0 var(--purpur-border-width-xs) inset;transition:box-shadow var(--purpur-motion-duration-150) ease,background-color var(--purpur-motion-duration-150) ease;box-sizing:border-box}._purpur-checkbox__indicator_m4999_59{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--purpur-color-text-interactive-on-primary)}._purpur-checkbox__indicator_m4999_59[data-disabled]{color:var(--purpur-color-text-weak)}._purpur-checkbox__label_m4999_70{padding-left:var(--purpur-spacing-150)}._purpur-checkbox__wrapper_m4999_73{display:flex;flex-direction:column;justify-content:center;width:fit-content}._purpur-checkbox__container_m4999_79{position:relative;display:flex;align-items:flex-start;width:fit-content;padding:calc((var(--purpur-spacing-400) + var(--purpur-spacing-150) - var(--purpur-spacing-300)) / 2) 0}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purpurds/checkbox",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.17.0",
|
|
4
4
|
"license": "AGPL-3.0-only",
|
|
5
5
|
"main": "./dist/checkbox.cjs.js",
|
|
6
6
|
"types": "./dist/checkbox.d.ts",
|
|
@@ -16,11 +16,11 @@
|
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@radix-ui/react-checkbox": "~1.0.4",
|
|
18
18
|
"classnames": "~2.5.0",
|
|
19
|
-
"@purpurds/
|
|
20
|
-
"@purpurds/
|
|
21
|
-
"@purpurds/
|
|
22
|
-
"@purpurds/
|
|
23
|
-
"@purpurds/
|
|
19
|
+
"@purpurds/icon": "5.17.0",
|
|
20
|
+
"@purpurds/tokens": "5.17.0",
|
|
21
|
+
"@purpurds/paragraph": "5.17.0",
|
|
22
|
+
"@purpurds/field-error-text": "5.17.0",
|
|
23
|
+
"@purpurds/label": "5.17.0"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
26
26
|
"@rushstack/eslint-patch": "~1.10.0",
|
package/src/checkbox.module.scss
CHANGED
|
@@ -29,7 +29,8 @@ $checkbox-target-area-padding: calc(calc($target-area-size - $checkbox-size) / 2
|
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
&--error > #{$root}__box
|
|
32
|
+
&--error > #{$root}__box,
|
|
33
|
+
&--error-checkbox > #{$root}__box {
|
|
33
34
|
@include border(var(--purpur-color-border-status-error), var(--purpur-border-width-xs));
|
|
34
35
|
}
|
|
35
36
|
|
|
@@ -85,8 +86,7 @@ $checkbox-target-area-padding: calc(calc($target-area-size - $checkbox-size) / 2
|
|
|
85
86
|
background-color: var(--purpur-color-background-primary);
|
|
86
87
|
border-radius: var(--purpur-border-radius-xs);
|
|
87
88
|
@include border(var(--purpur-color-border-interactive-subtle), var(--purpur-border-width-xs));
|
|
88
|
-
transition:
|
|
89
|
-
box-shadow var(--purpur-motion-duration-150) ease,
|
|
89
|
+
transition: box-shadow var(--purpur-motion-duration-150) ease,
|
|
90
90
|
background-color var(--purpur-motion-duration-150) ease;
|
|
91
91
|
box-sizing: border-box;
|
|
92
92
|
}
|
package/src/checkbox.stories.tsx
CHANGED
package/src/checkbox.tsx
CHANGED
|
@@ -4,9 +4,10 @@ import { checkmarkBold, Icon, minusBold } from "@purpurds/icon";
|
|
|
4
4
|
import { Label } from "@purpurds/label";
|
|
5
5
|
import { Paragraph } from "@purpurds/paragraph";
|
|
6
6
|
import * as RadixCheckbox from "@radix-ui/react-checkbox";
|
|
7
|
-
import c from "classnames";
|
|
7
|
+
import c from "classnames/bind";
|
|
8
8
|
|
|
9
9
|
import styles from "./checkbox.module.scss";
|
|
10
|
+
const cx = c.bind(styles);
|
|
10
11
|
|
|
11
12
|
export const checkedState = ["indeterminate", true, false] as const;
|
|
12
13
|
|
|
@@ -34,6 +35,11 @@ export type CheckboxProps = {
|
|
|
34
35
|
* When `true`, prevents the user from interacting with the checkbox.
|
|
35
36
|
*/
|
|
36
37
|
disabled?: boolean;
|
|
38
|
+
/**
|
|
39
|
+
* Use to render error state on the actual checkbox only. No error text below the checkbox will appear and the label will not
|
|
40
|
+
* be shown as an error, unless errorText is set.
|
|
41
|
+
* */
|
|
42
|
+
error?: boolean;
|
|
37
43
|
/**
|
|
38
44
|
* Use to render error message below the checkbox. The checkbox renders with error appearance.
|
|
39
45
|
* */
|
|
@@ -71,6 +77,7 @@ const CheckboxComponent = (
|
|
|
71
77
|
["data-testid"]: dataTestId,
|
|
72
78
|
checked,
|
|
73
79
|
className,
|
|
80
|
+
error = false,
|
|
74
81
|
errorText,
|
|
75
82
|
label,
|
|
76
83
|
onChange,
|
|
@@ -79,22 +86,27 @@ const CheckboxComponent = (
|
|
|
79
86
|
ref: ForwardedRef<HTMLButtonElement>
|
|
80
87
|
) => {
|
|
81
88
|
const isError = errorText && !checked;
|
|
89
|
+
const isCheckboxError = error && !checked;
|
|
82
90
|
|
|
83
91
|
return (
|
|
84
|
-
<div className={
|
|
85
|
-
<div className={
|
|
92
|
+
<div className={cx([className, `${rootClassName}__wrapper`])}>
|
|
93
|
+
<div className={cx([className, `${rootClassName}__container`])}>
|
|
86
94
|
<RadixCheckbox.Root
|
|
87
95
|
{...props}
|
|
88
96
|
checked={checked}
|
|
89
|
-
className={
|
|
90
|
-
|
|
91
|
-
|
|
97
|
+
className={cx([
|
|
98
|
+
rootClassName,
|
|
99
|
+
{
|
|
100
|
+
[`${rootClassName}--error`]: isError,
|
|
101
|
+
[`${rootClassName}--error-checkbox`]: isCheckboxError,
|
|
102
|
+
},
|
|
103
|
+
])}
|
|
92
104
|
data-testid={dataTestId}
|
|
93
105
|
onCheckedChange={onChange}
|
|
94
106
|
ref={ref}
|
|
95
107
|
>
|
|
96
|
-
<span className={
|
|
97
|
-
<RadixCheckbox.Indicator className={
|
|
108
|
+
<span className={cx(`${rootClassName}__box`)}>
|
|
109
|
+
<RadixCheckbox.Indicator className={cx(`${rootClassName}__indicator`)}>
|
|
98
110
|
{checked === "indeterminate" ? (
|
|
99
111
|
<Icon
|
|
100
112
|
data-testid={dataTestId && `${dataTestId}-checked-icon`}
|
|
@@ -116,7 +128,7 @@ const CheckboxComponent = (
|
|
|
116
128
|
htmlFor={props.id}
|
|
117
129
|
data-testid={dataTestId && `${dataTestId}-label`}
|
|
118
130
|
disabled={props.disabled}
|
|
119
|
-
className={
|
|
131
|
+
className={cx(`${rootClassName}__label`)}
|
|
120
132
|
>
|
|
121
133
|
<Paragraph variant="paragraph-100" disabled={props.disabled}>
|
|
122
134
|
{`${props.required ? "* " : ""}${label}`}
|