@khanacademy/wonder-blocks-labeled-field 3.2.2 → 4.0.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/.turbo/turbo-build$colon$css.log +1 -1
- package/CHANGELOG.md +23 -0
- package/dist/components/labeled-field.d.ts +19 -27
- package/dist/css/vars.css +14 -20
- package/dist/es/index.js +3 -3
- package/dist/index.js +3 -3
- package/dist/theme/default.d.ts +13 -14
- package/dist/theme/index.d.ts +13 -14
- package/dist/theme/thunderblocks.d.ts +13 -14
- package/package.json +4 -4
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @khanacademy/wonder-blocks-labeled-field@
|
|
2
|
+
> @khanacademy/wonder-blocks-labeled-field@4.0.0 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-labeled-field
|
|
3
3
|
> pnpm exec wonder-blocks-tokens .
|
|
4
4
|
|
|
5
5
|
CSS variables generated successfully in: /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-labeled-field/dist/css
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,28 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-labeled-field
|
|
2
2
|
|
|
3
|
+
## 4.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- 3c3d8fb: LabeledField: Remove `required` prop. The upcoming `contextLabel` prop should be used instead for visual labels indicating if a field is required or optional. Field components will need to have their `required` prop set explicitly
|
|
8
|
+
|
|
9
|
+
### Minor Changes
|
|
10
|
+
|
|
11
|
+
- 98f4272: LabeledField: Add `contextLabel` prop
|
|
12
|
+
- b3dd28f: LabeledField: Adds `additionalHelperMessage` prop
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- 311220d: LabeledField: Minor styling updates to handle text wrapping scenarios
|
|
17
|
+
- e559ab0: LabeledField: Update spacing
|
|
18
|
+
- Updated dependencies [e559ab0]
|
|
19
|
+
- Updated dependencies [98f4272]
|
|
20
|
+
- Updated dependencies [b3dd28f]
|
|
21
|
+
- Updated dependencies [3c3d8fb]
|
|
22
|
+
- @khanacademy/wonder-blocks-tokens@12.0.2
|
|
23
|
+
- @khanacademy/wonder-blocks-layout@3.1.31
|
|
24
|
+
- @khanacademy/wonder-blocks-typography@4.2.16
|
|
25
|
+
|
|
3
26
|
## 3.2.2
|
|
4
27
|
|
|
5
28
|
### Patch Changes
|
|
@@ -10,33 +10,14 @@ type Props = {
|
|
|
10
10
|
*/
|
|
11
11
|
label: React.ReactNode;
|
|
12
12
|
/**
|
|
13
|
-
* The
|
|
13
|
+
* The context for the field. Useful for showing if the field is required
|
|
14
|
+
* or optional.
|
|
14
15
|
*/
|
|
15
|
-
|
|
16
|
+
contextLabel?: React.ReactNode;
|
|
16
17
|
/**
|
|
17
|
-
*
|
|
18
|
-
* render if this field is left blank. This is passed into the field
|
|
19
|
-
* component.
|
|
20
|
-
*
|
|
21
|
-
* This can be a boolean or a string.
|
|
22
|
-
*
|
|
23
|
-
* String:
|
|
24
|
-
* Please pass in a translated string to use as the error message that will
|
|
25
|
-
* render if the user leaves this field blank. If this field is required,
|
|
26
|
-
* and a string is not passed in, a default untranslated string will render
|
|
27
|
-
* upon error.
|
|
28
|
-
* Note: The string will not be used if a `validate` prop is passed in.
|
|
29
|
-
*
|
|
30
|
-
* Example message: i18n._("A password is required to log in.")
|
|
31
|
-
*
|
|
32
|
-
* Boolean:
|
|
33
|
-
* True/false indicating whether this field is required. Please do not pass
|
|
34
|
-
* in `true` if possible - pass in the error string instead.
|
|
35
|
-
* If `true` is passed, and a `validate` prop is not passed, that means
|
|
36
|
-
* there is no corresponding message and the default untranlsated message
|
|
37
|
-
* will be used.
|
|
18
|
+
* The text for the description element.
|
|
38
19
|
*/
|
|
39
|
-
|
|
20
|
+
description?: React.ReactNode;
|
|
40
21
|
/**
|
|
41
22
|
* The message for the error element. If there is a message, it will also
|
|
42
23
|
* set the `error` prop on the `field` component.
|
|
@@ -59,6 +40,10 @@ type Props = {
|
|
|
59
40
|
* is displayed first.
|
|
60
41
|
*/
|
|
61
42
|
readOnlyMessage?: React.ReactNode;
|
|
43
|
+
/**
|
|
44
|
+
* Additional helper text placed under the field.
|
|
45
|
+
*/
|
|
46
|
+
additionalHelperMessage?: React.ReactNode;
|
|
62
47
|
/**
|
|
63
48
|
* Custom styles for the elements of LabeledField. Useful if there are
|
|
64
49
|
* specific cases where spacing between elements needs to be customized.
|
|
@@ -66,18 +51,22 @@ type Props = {
|
|
|
66
51
|
styles?: {
|
|
67
52
|
root?: StyleType;
|
|
68
53
|
label?: StyleType;
|
|
54
|
+
contextLabel?: StyleType;
|
|
69
55
|
description?: StyleType;
|
|
70
56
|
error?: StyleType;
|
|
71
57
|
readOnlyMessage?: StyleType;
|
|
58
|
+
additionalHelperMessage?: StyleType;
|
|
72
59
|
};
|
|
73
60
|
/**
|
|
74
61
|
* A unique id to use as the base of the ids for the elements within the component.
|
|
75
62
|
* Here is how the id is used for the different elements in the component:
|
|
76
63
|
* - The label will have an id formatted as `${id}-label`
|
|
64
|
+
* - The context label will have an id formatted as `${id}-context-label`
|
|
77
65
|
* - The description will have an id formatted as `${id}-description`
|
|
78
66
|
* - The field will have an id formatted as `${id}-field`
|
|
79
67
|
* - The error will have an id formatted as `${id}-error`
|
|
80
68
|
* - The read only message will have an id formatted as `${id}-read-only-message`
|
|
69
|
+
* - The additional helper message will have an id formatted as `${id}-additional-helper-message`
|
|
81
70
|
*
|
|
82
71
|
* If the `id` prop is not provided, a base unique id will be auto-generated.
|
|
83
72
|
* This is important so that the different elements can be wired up together
|
|
@@ -91,10 +80,12 @@ type Props = {
|
|
|
91
80
|
* Optional test id for e2e testing. Here is how the test id is used for the
|
|
92
81
|
* different elements in the component:
|
|
93
82
|
* - The label will have a testId formatted as `${testId}-label`
|
|
83
|
+
* - The context label will have a testId formatted as `${testId}-context-label`
|
|
94
84
|
* - The description will have a testId formatted as `${testId}-description`
|
|
95
85
|
* - The field will have a testId formatted as `${testId}-field`
|
|
96
86
|
* - The error will have a testId formatted as `${testId}-error`
|
|
97
87
|
* - The read only message will have a testId formatted as `${testId}-read-only-message`
|
|
88
|
+
* - The additional helper message will have a testId formatted as `${testId}-additional-helper-message`
|
|
98
89
|
*/
|
|
99
90
|
testId?: string;
|
|
100
91
|
/**
|
|
@@ -109,9 +100,10 @@ export type LabeledFieldLabels = {
|
|
|
109
100
|
readOnlyIconAriaLabel?: string;
|
|
110
101
|
};
|
|
111
102
|
/**
|
|
112
|
-
* A LabeledField is an element that provides a label,
|
|
113
|
-
*
|
|
114
|
-
*
|
|
103
|
+
* A LabeledField is an element that provides a label, context label, and
|
|
104
|
+
* helper text to present more information about any type of form field
|
|
105
|
+
* component. Helper text includes a description, error message, read only
|
|
106
|
+
* message, and any additional helper message.
|
|
115
107
|
*/
|
|
116
108
|
export default function LabeledField(props: Props): React.JSX.Element;
|
|
117
109
|
export {};
|
package/dist/css/vars.css
CHANGED
|
@@ -1,35 +1,29 @@
|
|
|
1
1
|
:root {--wb-c-labeled-field-root-layout-paddingBlockEnd-labelWithDescription: var(--wb-sizing-size_040);
|
|
2
2
|
--wb-c-labeled-field-root-layout-paddingBlockEnd-labelWithNoDescription: var(--wb-sizing-size_120);
|
|
3
|
-
--wb-c-labeled-field-root-layout-
|
|
4
|
-
--wb-c-labeled-field-root-layout-paddingBlockEnd-helperTextSectionWithContent: var(--wb-sizing-size_120);
|
|
3
|
+
--wb-c-labeled-field-root-layout-spacingBetweenHelperText: var(--wb-sizing-size_120);
|
|
5
4
|
--wb-c-labeled-field-label-color-error-foreground: var(--wb-semanticColor-core-foreground-neutral-strong);
|
|
6
5
|
--wb-c-labeled-field-label-color-disabled-foreground: var(--wb-semanticColor-core-foreground-neutral-strong);
|
|
7
|
-
--wb-c-labeled-field-
|
|
8
|
-
--wb-c-labeled-field-description-font-lineHeight: var(--wb-font-body-lineHeight-small);
|
|
9
|
-
--wb-c-labeled-field-description-color-foreground: var(--wb-semanticColor-core-foreground-neutral-default);
|
|
10
|
-
--wb-c-labeled-field-description-color-disabled-foreground: var(--wb-semanticColor-core-foreground-neutral-default);
|
|
6
|
+
--wb-c-labeled-field-contextLabel-color-error-foreground: var(--wb-semanticColor-core-foreground-neutral-default);
|
|
11
7
|
--wb-c-labeled-field-error-color-foreground: var(--wb-semanticColor-core-foreground-critical-subtle);
|
|
12
8
|
--wb-c-labeled-field-error-font-weight: var(--wb-font-weight-regular);
|
|
13
|
-
--wb-c-labeled-field-
|
|
9
|
+
--wb-c-labeled-field-error-layout-marginBlockStart: var(--wb-sizing-size_0);
|
|
14
10
|
--wb-c-labeled-field-helperText-layout-gap: var(--wb-sizing-size_080);
|
|
15
|
-
--wb-c-labeled-field-helperText-layout-marginBlockStart: var(--wb-sizing-size_0);
|
|
16
11
|
--wb-c-labeled-field-helperText-font-size: var(--wb-font-body-size-small);
|
|
17
|
-
--wb-c-labeled-field-helperText-font-lineHeight: var(--wb-font-body-lineHeight-small);
|
|
12
|
+
--wb-c-labeled-field-helperText-font-lineHeight: var(--wb-font-body-lineHeight-small);
|
|
13
|
+
--wb-c-labeled-field-helperText-color-default-foreground: var(--wb-semanticColor-core-foreground-neutral-default);
|
|
14
|
+
--wb-c-labeled-field-helperText-color-disabled-foreground: var(--wb-semanticColor-core-foreground-neutral-default);}
|
|
18
15
|
|
|
19
|
-
[data-wb-theme='thunderblocks'] {--wb-c-labeled-field-root-layout-paddingBlockEnd-labelWithDescription: var(--wb-sizing-
|
|
20
|
-
--wb-c-labeled-field-root-layout-paddingBlockEnd-labelWithNoDescription: var(--wb-sizing-
|
|
21
|
-
--wb-c-labeled-field-root-layout-
|
|
22
|
-
--wb-c-labeled-field-root-layout-paddingBlockEnd-helperTextSectionWithContent: var(--wb-sizing-size_100);
|
|
16
|
+
[data-wb-theme='thunderblocks'] {--wb-c-labeled-field-root-layout-paddingBlockEnd-labelWithDescription: var(--wb-sizing-size_040);
|
|
17
|
+
--wb-c-labeled-field-root-layout-paddingBlockEnd-labelWithNoDescription: var(--wb-sizing-size_080);
|
|
18
|
+
--wb-c-labeled-field-root-layout-spacingBetweenHelperText: var(--wb-sizing-size_080);
|
|
23
19
|
--wb-c-labeled-field-label-color-error-foreground: var(--wb-semanticColor-core-foreground-critical-default);
|
|
24
20
|
--wb-c-labeled-field-label-color-disabled-foreground: var(--wb-semanticColor-core-foreground-disabled-strong);
|
|
25
|
-
--wb-c-labeled-field-
|
|
26
|
-
--wb-c-labeled-field-description-font-lineHeight: var(--wb-font-body-lineHeight-xsmall);
|
|
27
|
-
--wb-c-labeled-field-description-color-foreground: var(--wb-semanticColor-core-foreground-neutral-strong);
|
|
28
|
-
--wb-c-labeled-field-description-color-disabled-foreground: var(--wb-semanticColor-core-foreground-disabled-strong);
|
|
21
|
+
--wb-c-labeled-field-contextLabel-color-error-foreground: var(--wb-semanticColor-core-foreground-critical-default);
|
|
29
22
|
--wb-c-labeled-field-error-color-foreground: var(--wb-semanticColor-core-foreground-critical-default);
|
|
30
23
|
--wb-c-labeled-field-error-font-weight: var(--wb-font-weight-bold);
|
|
31
|
-
--wb-c-labeled-field-
|
|
24
|
+
--wb-c-labeled-field-error-layout-marginBlockStart: var(--wb-sizing-size_010);
|
|
32
25
|
--wb-c-labeled-field-helperText-layout-gap: var(--wb-sizing-size_040);
|
|
33
|
-
--wb-c-labeled-field-helperText-layout-marginBlockStart: var(--wb-sizing-size_010);
|
|
34
26
|
--wb-c-labeled-field-helperText-font-size: var(--wb-font-body-size-xsmall);
|
|
35
|
-
--wb-c-labeled-field-helperText-font-lineHeight: var(--wb-font-body-lineHeight-xsmall);
|
|
27
|
+
--wb-c-labeled-field-helperText-font-lineHeight: var(--wb-font-body-lineHeight-xsmall);
|
|
28
|
+
--wb-c-labeled-field-helperText-color-default-foreground: var(--wb-semanticColor-core-foreground-neutral-strong);
|
|
29
|
+
--wb-c-labeled-field-helperText-color-disabled-foreground: var(--wb-semanticColor-core-foreground-disabled-strong);}
|
package/dist/es/index.js
CHANGED
|
@@ -7,12 +7,12 @@ import { BodyText } from '@khanacademy/wonder-blocks-typography';
|
|
|
7
7
|
import { addStyle, View } from '@khanacademy/wonder-blocks-core';
|
|
8
8
|
import { sizing, semanticColor, font, mapValuesToCssVars } from '@khanacademy/wonder-blocks-tokens';
|
|
9
9
|
|
|
10
|
-
function getSize(size){switch(size){case"small":default:{return styles$1.small}case"medium":{return styles$1.medium}case"large":{return styles$1.large}case"xlarge":{return styles$1.xlarge}}}const StyledDiv=addStyle("div");React.forwardRef((props,ref)=>{const{size="small",id,testId,style,children,...otherProps}=props;const childrenElement=React.cloneElement(children,{style:{width:"100%",height:"100%"}});return jsx(StyledDiv,{style:[getSize(size),style],id:id,"data-testid":testId,ref:ref,...otherProps,children:childrenElement})});const styles$1=StyleSheet.create({small:{width:sizing.size_160,height:sizing.size_160},medium:{width:sizing.size_240,height:sizing.size_240},large:{width:sizing.size_480,height:sizing.size_480},xlarge:{width:sizing.size_960,height:sizing.size_960}});const viewportPixelsForSize=size=>({small:16,medium:24,large:48,xlarge:96})[size];const StyledSpan
|
|
10
|
+
function getSize(size){switch(size){case"small":default:{return styles$1.small}case"medium":{return styles$1.medium}case"large":{return styles$1.large}case"xlarge":{return styles$1.xlarge}}}const StyledDiv=addStyle("div");React.forwardRef((props,ref)=>{const{size="small",id,testId,style,children,...otherProps}=props;const childrenElement=React.cloneElement(children,{style:{width:"100%",height:"100%"}});return jsx(StyledDiv,{style:[getSize(size),style],id:id,"data-testid":testId,ref:ref,...otherProps,children:childrenElement})});const styles$1=StyleSheet.create({small:{width:sizing.size_160,height:sizing.size_160},medium:{width:sizing.size_240,height:sizing.size_240},large:{width:sizing.size_480,height:sizing.size_480},xlarge:{width:sizing.size_960,height:sizing.size_960}});const viewportPixelsForSize=size=>({small:16,medium:24,large:48,xlarge:96})[size];const StyledSpan=addStyle("span");const PhosphorIcon=React.forwardRef(function PhosphorIcon(props,ref){const{color="currentColor",icon,size="small",style,testId,className,role,...sharedProps}=props;const pixelSize=viewportPixelsForSize(size);const classNames=`${className??""}`;const iconStyles=_generateStyles(color,pixelSize);return jsx(StyledSpan,{...sharedProps,className:classNames,style:[styles$2.svg,iconStyles.icon,{maskImage:`url(${icon})`},style],"data-testid":testId,ref:ref,role:role??sharedProps["aria-label"]?"img":undefined})});const dynamicStyles={};const _generateStyles=(color,size)=>{const iconStyle=`${color}-${size}`;if(styles$2[iconStyle]){return styles$2[iconStyle]}const newStyles={icon:{backgroundColor:color,width:size,height:size}};dynamicStyles[iconStyle]=StyleSheet.create(newStyles);return dynamicStyles[iconStyle]};const styles$2=StyleSheet.create({svg:{display:"inline-block",verticalAlign:"text-bottom",flexShrink:0,flexGrow:0,maskSize:"100%",maskRepeat:"no-repeat",maskPosition:"center"}});PhosphorIcon.displayName="PhosphorIcon";function useImageRoleAttributes(props){const{"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy}=props;const presentationOnlyAttributes={"aria-hidden":true};const iconMeaningAttributes={"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,role:"img"};const attributes=ariaLabel||ariaLabelledBy?iconMeaningAttributes:presentationOnlyAttributes;return attributes}const StyledSvg$1=addStyle("svg");React.forwardRef((props,ref)=>{const{"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,id,testId,style,...otherProps}=props;const attributes=useImageRoleAttributes({"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy});return jsxs(StyledSvg$1,{id:id,"data-testid":testId,style:style,ref:ref,viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",...attributes,...otherProps,children:[jsx("path",{d:"M1.246 5.38105L2.36444 3.66654C2.63609 3.25012 3.0934 3 3.58311 3H12.4169C12.9066 3 13.3639 3.25012 13.6356 3.66654L14.754 5.38105C15.1278 5.95411 15.0708 6.71389 14.6158 7.22195L9.08044 13.4027C8.49982 14.051 7.50018 14.051 6.91956 13.4027L1.38423 7.22195C0.929229 6.71389 0.872177 5.95411 1.246 5.38105Z",fill:semanticColor.learning.foreground.gems.default}),jsx("path",{d:"M9.45654 7.01492L8.34027 10.0102C8.07911 10.711 8.97464 11.2595 9.48018 10.7084L12.6345 7.26989C13.0351 6.83317 12.7253 6.12858 12.1327 6.12858H10.7327C10.164 6.12858 9.65515 6.48199 9.45654 7.01492Z",fill:semanticColor.learning.foreground.gems.subtle})]})});const StyledSvg=addStyle("svg");React.forwardRef((props,ref)=>{const{"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,id,testId,style,...otherProps}=props;const attributes=useImageRoleAttributes({"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy});return jsxs(StyledSvg,{id:id,"data-testid":testId,style:style,ref:ref,viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",...attributes,...otherProps,children:[jsx("path",{d:"M9.14653 0.628361C9.07012 0.571421 8.97956 0.531782 8.88248 0.512785C8.78539 0.493787 8.68464 0.49599 8.5887 0.519205C8.49277 0.542421 8.40447 0.585969 8.33125 0.64618C8.25802 0.70639 8.20202 0.781496 8.16797 0.865168L5.47556 5.06034L4.59152 3.43463C4.52866 3.37998 4.45359 3.33789 4.37125 3.31114C4.28892 3.28438 4.2012 3.27357 4.11387 3.27941C4.02653 3.28525 3.94157 3.30761 3.86458 3.34502C3.78759 3.38243 3.72032 3.43403 3.66719 3.49644C1.98899 5.46729 1.13672 7.44994 1.13672 9.38884C1.13672 11.0096 1.85506 12.564 3.13372 13.7101C4.41238 14.8561 6.14661 15.5 7.9549 15.5C9.7632 15.5 11.4974 14.8561 12.7761 13.7101C14.0547 12.564 14.7731 11.0096 14.7731 9.38884C14.7731 5.26034 10.8379 1.88879 9.14653 0.628361Z",fill:semanticColor.learning.foreground.streaks.default}),jsx("path",{d:"M10.8067 10.5315C10.8067 12.0965 9.53809 13.3651 7.97318 13.3651C6.40826 13.3651 5.13965 12.0965 5.13965 10.5315C5.13965 8.96663 7.2648 6.28125 7.97318 6.28125C8.68156 6.28125 10.8067 8.96663 10.8067 10.5315Z",fill:semanticColor.learning.foreground.streaks.subtle})]})});
|
|
11
11
|
|
|
12
|
-
const theme$1={root:{layout:{paddingBlockEnd:{labelWithDescription:sizing.size_040,labelWithNoDescription:sizing.size_120,
|
|
12
|
+
const theme$1={root:{layout:{paddingBlockEnd:{labelWithDescription:sizing.size_040,labelWithNoDescription:sizing.size_120},spacingBetweenHelperText:sizing.size_120}},label:{color:{error:{foreground:semanticColor.core.foreground.neutral.strong},disabled:{foreground:semanticColor.core.foreground.neutral.strong}}},contextLabel:{color:{error:{foreground:semanticColor.core.foreground.neutral.default}}},error:{color:{foreground:semanticColor.core.foreground.critical.subtle},font:{weight:font.weight.regular},layout:{marginBlockStart:sizing.size_0}},helperText:{layout:{gap:sizing.size_080},font:{size:font.body.size.small,lineHeight:font.body.lineHeight.small},color:{default:{foreground:semanticColor.core.foreground.neutral.default},disabled:{foreground:semanticColor.core.foreground.neutral.default}}}};
|
|
13
13
|
|
|
14
14
|
var theme = mapValuesToCssVars(theme$1,"--wb-c-labeled-field-");
|
|
15
15
|
|
|
16
|
-
const defaultLabeledFieldLabels={errorIconAriaLabel:"Error:"};
|
|
16
|
+
const defaultLabeledFieldLabels={errorIconAriaLabel:"Error:"};function LabeledField(props){const{field,styles:stylesProp,label,id,testId,contextLabel,description,errorMessage,readOnlyMessage,additionalHelperMessage,labels=defaultLabeledFieldLabels}=props;const generatedUniqueId=React.useId();const uniqueId=id??`${generatedUniqueId}-labeled-field`;const labelId=`${uniqueId}-label`;const descriptionId=`${uniqueId}-description`;const fieldId=`${uniqueId}-field`;const errorId=`${uniqueId}-error`;const readOnlyMessageId=`${uniqueId}-read-only-message`;const additionalHelperMessageId=`${uniqueId}-additional-helper-message`;const contextLabelId=`${uniqueId}-context-label`;const hasError=!!errorMessage||!!field.props.error;const isDisabled=!!field.props.disabled;function renderLabelAndContextLabel(){return jsxs(View,{style:styles.labelContainer,children:[jsx(BodyText,{style:[styles.label,hasError?styles.labelWithError:undefined,description?styles.labelWithDescription:styles.labelWithNoDescription,isDisabled&&styles.disabledLabel,stylesProp?.label],tag:"label",htmlFor:fieldId,testId:testId&&`${testId}-label`,id:labelId,weight:"semi",children:label}),contextLabel&&jsx(BodyText,{tag:"div",id:contextLabelId,testId:testId&&`${testId}-context-label`,style:[styles.helperText,styles.contextLabel,isDisabled&&styles.disabledHelperText,hasError?styles.contextLabelWithError:undefined,stylesProp?.contextLabel],children:contextLabel})]})}function maybeRenderDescription(){if(!description){return null}return jsx(BodyText,{style:[styles.helperText,styles.spacingBelowHelperText,isDisabled&&styles.disabledHelperText,stylesProp?.description],testId:testId&&`${testId}-description`,id:descriptionId,children:description})}function maybeRenderError(){return jsx(View,{style:[styles.helperTextWithIcon,errorMessage?styles.spacingAboveHelperText:undefined,stylesProp?.error],id:errorId,testId:testId&&`${testId}-error`,"aria-live":"assertive","aria-atomic":"true",children:errorMessage&&jsxs(Fragment,{children:[jsx(PhosphorIcon,{icon:WarningCircle,style:[styles.errorIcon,styles.error],role:"img","aria-label":labels.errorIconAriaLabel}),jsx(BodyText,{style:[styles.helperText,styles.errorMessage,styles.error],children:errorMessage})]})})}function renderField(){return React.cloneElement(field,{id:fieldId,"aria-describedby":[contextLabel&&contextLabelId,description&&descriptionId,additionalHelperMessage&&additionalHelperMessageId,readOnlyMessage&&readOnlyMessageId,errorMessage&&errorId].filter(Boolean).join(" "),error:hasError,testId:testId?`${testId}-field`:undefined,readOnly:readOnlyMessage||field.props.readOnly})}function maybeRenderReadOnlyMessage(){if(!readOnlyMessage){return null}return jsxs(View,{style:[styles.helperTextWithIcon,styles.spacingAboveHelperText,stylesProp?.readOnlyMessage],id:readOnlyMessageId,testId:testId&&`${testId}-read-only-message`,children:[jsx(PhosphorIcon,{icon:LockIcon,"aria-label":labels.readOnlyIconAriaLabel,color:semanticColor.core.foreground.neutral.subtle}),jsx(BodyText,{style:styles.helperText,children:readOnlyMessage})]})}function maybeRenderAdditionalHelperMessage(){if(!additionalHelperMessage){return null}return jsx(BodyText,{id:additionalHelperMessageId,testId:testId&&`${testId}-additional-helper-message`,style:[styles.helperText,styles.spacingAboveHelperText,isDisabled&&styles.disabledHelperText,stylesProp?.additionalHelperMessage],tag:"div",children:additionalHelperMessage})}return jsxs(View,{style:stylesProp?.root,children:[renderLabelAndContextLabel(),maybeRenderDescription(),renderField(),maybeRenderAdditionalHelperMessage(),maybeRenderReadOnlyMessage(),maybeRenderError()]})}const styles=StyleSheet.create({labelContainer:{display:"flex",flexDirection:"row",justifyContent:"space-between",gap:theme.root.layout.spacingBetweenHelperText},label:{color:semanticColor.core.foreground.neutral.strong,overflowWrap:"break-word",minWidth:sizing.size_0},contextLabel:{lineHeight:font.body.lineHeight.medium,maxWidth:"30%",flexShrink:0},labelWithError:{color:theme.label.color.error.foreground,fontWeight:theme.error.font.weight},contextLabelWithError:{color:theme.contextLabel.color.error.foreground,fontWeight:theme.error.font.weight},disabledLabel:{color:theme.label.color.disabled.foreground},labelWithDescription:{paddingBlockEnd:theme.root.layout.paddingBlockEnd.labelWithDescription},labelWithNoDescription:{paddingBlockEnd:theme.root.layout.paddingBlockEnd.labelWithNoDescription},helperTextWithIcon:{flexDirection:"row",gap:theme.helperText.layout.gap},spacingAboveHelperText:{paddingBlockStart:theme.root.layout.spacingBetweenHelperText},spacingBelowHelperText:{paddingBlockEnd:theme.root.layout.spacingBetweenHelperText},helperText:{color:theme.helperText.color.default.foreground,fontSize:theme.helperText.font.size,lineHeight:theme.helperText.font.lineHeight,minWidth:sizing.size_0,overflowWrap:"break-word"},disabledHelperText:{color:theme.helperText.color.disabled.foreground},error:{color:theme.error.color.foreground},errorIcon:{marginTop:sizing.size_010},errorMessage:{fontWeight:theme.error.font.weight,marginBlockStart:theme.error.layout.marginBlockStart}});
|
|
17
17
|
|
|
18
18
|
export { LabeledField };
|
package/dist/index.js
CHANGED
|
@@ -35,12 +35,12 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
|
35
35
|
var WarningCircle__default = /*#__PURE__*/_interopDefaultLegacy(WarningCircle);
|
|
36
36
|
var LockIcon__default = /*#__PURE__*/_interopDefaultLegacy(LockIcon);
|
|
37
37
|
|
|
38
|
-
function getSize(size){switch(size){case"small":default:{return styles$1.small}case"medium":{return styles$1.medium}case"large":{return styles$1.large}case"xlarge":{return styles$1.xlarge}}}const StyledDiv=wonderBlocksCore.addStyle("div");React__namespace.forwardRef((props,ref)=>{const{size="small",id,testId,style,children,...otherProps}=props;const childrenElement=React__namespace.cloneElement(children,{style:{width:"100%",height:"100%"}});return jsxRuntime.jsx(StyledDiv,{style:[getSize(size),style],id:id,"data-testid":testId,ref:ref,...otherProps,children:childrenElement})});const styles$1=aphrodite.StyleSheet.create({small:{width:wonderBlocksTokens.sizing.size_160,height:wonderBlocksTokens.sizing.size_160},medium:{width:wonderBlocksTokens.sizing.size_240,height:wonderBlocksTokens.sizing.size_240},large:{width:wonderBlocksTokens.sizing.size_480,height:wonderBlocksTokens.sizing.size_480},xlarge:{width:wonderBlocksTokens.sizing.size_960,height:wonderBlocksTokens.sizing.size_960}});const viewportPixelsForSize=size=>({small:16,medium:24,large:48,xlarge:96})[size];const StyledSpan
|
|
38
|
+
function getSize(size){switch(size){case"small":default:{return styles$1.small}case"medium":{return styles$1.medium}case"large":{return styles$1.large}case"xlarge":{return styles$1.xlarge}}}const StyledDiv=wonderBlocksCore.addStyle("div");React__namespace.forwardRef((props,ref)=>{const{size="small",id,testId,style,children,...otherProps}=props;const childrenElement=React__namespace.cloneElement(children,{style:{width:"100%",height:"100%"}});return jsxRuntime.jsx(StyledDiv,{style:[getSize(size),style],id:id,"data-testid":testId,ref:ref,...otherProps,children:childrenElement})});const styles$1=aphrodite.StyleSheet.create({small:{width:wonderBlocksTokens.sizing.size_160,height:wonderBlocksTokens.sizing.size_160},medium:{width:wonderBlocksTokens.sizing.size_240,height:wonderBlocksTokens.sizing.size_240},large:{width:wonderBlocksTokens.sizing.size_480,height:wonderBlocksTokens.sizing.size_480},xlarge:{width:wonderBlocksTokens.sizing.size_960,height:wonderBlocksTokens.sizing.size_960}});const viewportPixelsForSize=size=>({small:16,medium:24,large:48,xlarge:96})[size];const StyledSpan=wonderBlocksCore.addStyle("span");const PhosphorIcon=React__namespace.forwardRef(function PhosphorIcon(props,ref){const{color="currentColor",icon,size="small",style,testId,className,role,...sharedProps}=props;const pixelSize=viewportPixelsForSize(size);const classNames=`${className??""}`;const iconStyles=_generateStyles(color,pixelSize);return jsxRuntime.jsx(StyledSpan,{...sharedProps,className:classNames,style:[styles$2.svg,iconStyles.icon,{maskImage:`url(${icon})`},style],"data-testid":testId,ref:ref,role:role??sharedProps["aria-label"]?"img":undefined})});const dynamicStyles={};const _generateStyles=(color,size)=>{const iconStyle=`${color}-${size}`;if(styles$2[iconStyle]){return styles$2[iconStyle]}const newStyles={icon:{backgroundColor:color,width:size,height:size}};dynamicStyles[iconStyle]=aphrodite.StyleSheet.create(newStyles);return dynamicStyles[iconStyle]};const styles$2=aphrodite.StyleSheet.create({svg:{display:"inline-block",verticalAlign:"text-bottom",flexShrink:0,flexGrow:0,maskSize:"100%",maskRepeat:"no-repeat",maskPosition:"center"}});PhosphorIcon.displayName="PhosphorIcon";function useImageRoleAttributes(props){const{"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy}=props;const presentationOnlyAttributes={"aria-hidden":true};const iconMeaningAttributes={"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,role:"img"};const attributes=ariaLabel||ariaLabelledBy?iconMeaningAttributes:presentationOnlyAttributes;return attributes}const StyledSvg$1=wonderBlocksCore.addStyle("svg");React__namespace.forwardRef((props,ref)=>{const{"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,id,testId,style,...otherProps}=props;const attributes=useImageRoleAttributes({"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy});return jsxRuntime.jsxs(StyledSvg$1,{id:id,"data-testid":testId,style:style,ref:ref,viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",...attributes,...otherProps,children:[jsxRuntime.jsx("path",{d:"M1.246 5.38105L2.36444 3.66654C2.63609 3.25012 3.0934 3 3.58311 3H12.4169C12.9066 3 13.3639 3.25012 13.6356 3.66654L14.754 5.38105C15.1278 5.95411 15.0708 6.71389 14.6158 7.22195L9.08044 13.4027C8.49982 14.051 7.50018 14.051 6.91956 13.4027L1.38423 7.22195C0.929229 6.71389 0.872177 5.95411 1.246 5.38105Z",fill:wonderBlocksTokens.semanticColor.learning.foreground.gems.default}),jsxRuntime.jsx("path",{d:"M9.45654 7.01492L8.34027 10.0102C8.07911 10.711 8.97464 11.2595 9.48018 10.7084L12.6345 7.26989C13.0351 6.83317 12.7253 6.12858 12.1327 6.12858H10.7327C10.164 6.12858 9.65515 6.48199 9.45654 7.01492Z",fill:wonderBlocksTokens.semanticColor.learning.foreground.gems.subtle})]})});const StyledSvg=wonderBlocksCore.addStyle("svg");React__namespace.forwardRef((props,ref)=>{const{"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,id,testId,style,...otherProps}=props;const attributes=useImageRoleAttributes({"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy});return jsxRuntime.jsxs(StyledSvg,{id:id,"data-testid":testId,style:style,ref:ref,viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",...attributes,...otherProps,children:[jsxRuntime.jsx("path",{d:"M9.14653 0.628361C9.07012 0.571421 8.97956 0.531782 8.88248 0.512785C8.78539 0.493787 8.68464 0.49599 8.5887 0.519205C8.49277 0.542421 8.40447 0.585969 8.33125 0.64618C8.25802 0.70639 8.20202 0.781496 8.16797 0.865168L5.47556 5.06034L4.59152 3.43463C4.52866 3.37998 4.45359 3.33789 4.37125 3.31114C4.28892 3.28438 4.2012 3.27357 4.11387 3.27941C4.02653 3.28525 3.94157 3.30761 3.86458 3.34502C3.78759 3.38243 3.72032 3.43403 3.66719 3.49644C1.98899 5.46729 1.13672 7.44994 1.13672 9.38884C1.13672 11.0096 1.85506 12.564 3.13372 13.7101C4.41238 14.8561 6.14661 15.5 7.9549 15.5C9.7632 15.5 11.4974 14.8561 12.7761 13.7101C14.0547 12.564 14.7731 11.0096 14.7731 9.38884C14.7731 5.26034 10.8379 1.88879 9.14653 0.628361Z",fill:wonderBlocksTokens.semanticColor.learning.foreground.streaks.default}),jsxRuntime.jsx("path",{d:"M10.8067 10.5315C10.8067 12.0965 9.53809 13.3651 7.97318 13.3651C6.40826 13.3651 5.13965 12.0965 5.13965 10.5315C5.13965 8.96663 7.2648 6.28125 7.97318 6.28125C8.68156 6.28125 10.8067 8.96663 10.8067 10.5315Z",fill:wonderBlocksTokens.semanticColor.learning.foreground.streaks.subtle})]})});
|
|
39
39
|
|
|
40
|
-
const theme$1={root:{layout:{paddingBlockEnd:{labelWithDescription:wonderBlocksTokens.sizing.size_040,labelWithNoDescription:wonderBlocksTokens.sizing.size_120,
|
|
40
|
+
const theme$1={root:{layout:{paddingBlockEnd:{labelWithDescription:wonderBlocksTokens.sizing.size_040,labelWithNoDescription:wonderBlocksTokens.sizing.size_120},spacingBetweenHelperText:wonderBlocksTokens.sizing.size_120}},label:{color:{error:{foreground:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong},disabled:{foreground:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong}}},contextLabel:{color:{error:{foreground:wonderBlocksTokens.semanticColor.core.foreground.neutral.default}}},error:{color:{foreground:wonderBlocksTokens.semanticColor.core.foreground.critical.subtle},font:{weight:wonderBlocksTokens.font.weight.regular},layout:{marginBlockStart:wonderBlocksTokens.sizing.size_0}},helperText:{layout:{gap:wonderBlocksTokens.sizing.size_080},font:{size:wonderBlocksTokens.font.body.size.small,lineHeight:wonderBlocksTokens.font.body.lineHeight.small},color:{default:{foreground:wonderBlocksTokens.semanticColor.core.foreground.neutral.default},disabled:{foreground:wonderBlocksTokens.semanticColor.core.foreground.neutral.default}}}};
|
|
41
41
|
|
|
42
42
|
var theme = wonderBlocksTokens.mapValuesToCssVars(theme$1,"--wb-c-labeled-field-");
|
|
43
43
|
|
|
44
|
-
const defaultLabeledFieldLabels={errorIconAriaLabel:"Error:"};
|
|
44
|
+
const defaultLabeledFieldLabels={errorIconAriaLabel:"Error:"};function LabeledField(props){const{field,styles:stylesProp,label,id,testId,contextLabel,description,errorMessage,readOnlyMessage,additionalHelperMessage,labels=defaultLabeledFieldLabels}=props;const generatedUniqueId=React__namespace.useId();const uniqueId=id??`${generatedUniqueId}-labeled-field`;const labelId=`${uniqueId}-label`;const descriptionId=`${uniqueId}-description`;const fieldId=`${uniqueId}-field`;const errorId=`${uniqueId}-error`;const readOnlyMessageId=`${uniqueId}-read-only-message`;const additionalHelperMessageId=`${uniqueId}-additional-helper-message`;const contextLabelId=`${uniqueId}-context-label`;const hasError=!!errorMessage||!!field.props.error;const isDisabled=!!field.props.disabled;function renderLabelAndContextLabel(){return jsxRuntime.jsxs(wonderBlocksCore.View,{style:styles.labelContainer,children:[jsxRuntime.jsx(wonderBlocksTypography.BodyText,{style:[styles.label,hasError?styles.labelWithError:undefined,description?styles.labelWithDescription:styles.labelWithNoDescription,isDisabled&&styles.disabledLabel,stylesProp?.label],tag:"label",htmlFor:fieldId,testId:testId&&`${testId}-label`,id:labelId,weight:"semi",children:label}),contextLabel&&jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"div",id:contextLabelId,testId:testId&&`${testId}-context-label`,style:[styles.helperText,styles.contextLabel,isDisabled&&styles.disabledHelperText,hasError?styles.contextLabelWithError:undefined,stylesProp?.contextLabel],children:contextLabel})]})}function maybeRenderDescription(){if(!description){return null}return jsxRuntime.jsx(wonderBlocksTypography.BodyText,{style:[styles.helperText,styles.spacingBelowHelperText,isDisabled&&styles.disabledHelperText,stylesProp?.description],testId:testId&&`${testId}-description`,id:descriptionId,children:description})}function maybeRenderError(){return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles.helperTextWithIcon,errorMessage?styles.spacingAboveHelperText:undefined,stylesProp?.error],id:errorId,testId:testId&&`${testId}-error`,"aria-live":"assertive","aria-atomic":"true",children:errorMessage&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(PhosphorIcon,{icon:WarningCircle__default["default"],style:[styles.errorIcon,styles.error],role:"img","aria-label":labels.errorIconAriaLabel}),jsxRuntime.jsx(wonderBlocksTypography.BodyText,{style:[styles.helperText,styles.errorMessage,styles.error],children:errorMessage})]})})}function renderField(){return React__namespace.cloneElement(field,{id:fieldId,"aria-describedby":[contextLabel&&contextLabelId,description&&descriptionId,additionalHelperMessage&&additionalHelperMessageId,readOnlyMessage&&readOnlyMessageId,errorMessage&&errorId].filter(Boolean).join(" "),error:hasError,testId:testId?`${testId}-field`:undefined,readOnly:readOnlyMessage||field.props.readOnly})}function maybeRenderReadOnlyMessage(){if(!readOnlyMessage){return null}return jsxRuntime.jsxs(wonderBlocksCore.View,{style:[styles.helperTextWithIcon,styles.spacingAboveHelperText,stylesProp?.readOnlyMessage],id:readOnlyMessageId,testId:testId&&`${testId}-read-only-message`,children:[jsxRuntime.jsx(PhosphorIcon,{icon:LockIcon__default["default"],"aria-label":labels.readOnlyIconAriaLabel,color:wonderBlocksTokens.semanticColor.core.foreground.neutral.subtle}),jsxRuntime.jsx(wonderBlocksTypography.BodyText,{style:styles.helperText,children:readOnlyMessage})]})}function maybeRenderAdditionalHelperMessage(){if(!additionalHelperMessage){return null}return jsxRuntime.jsx(wonderBlocksTypography.BodyText,{id:additionalHelperMessageId,testId:testId&&`${testId}-additional-helper-message`,style:[styles.helperText,styles.spacingAboveHelperText,isDisabled&&styles.disabledHelperText,stylesProp?.additionalHelperMessage],tag:"div",children:additionalHelperMessage})}return jsxRuntime.jsxs(wonderBlocksCore.View,{style:stylesProp?.root,children:[renderLabelAndContextLabel(),maybeRenderDescription(),renderField(),maybeRenderAdditionalHelperMessage(),maybeRenderReadOnlyMessage(),maybeRenderError()]})}const styles=aphrodite.StyleSheet.create({labelContainer:{display:"flex",flexDirection:"row",justifyContent:"space-between",gap:theme.root.layout.spacingBetweenHelperText},label:{color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong,overflowWrap:"break-word",minWidth:wonderBlocksTokens.sizing.size_0},contextLabel:{lineHeight:wonderBlocksTokens.font.body.lineHeight.medium,maxWidth:"30%",flexShrink:0},labelWithError:{color:theme.label.color.error.foreground,fontWeight:theme.error.font.weight},contextLabelWithError:{color:theme.contextLabel.color.error.foreground,fontWeight:theme.error.font.weight},disabledLabel:{color:theme.label.color.disabled.foreground},labelWithDescription:{paddingBlockEnd:theme.root.layout.paddingBlockEnd.labelWithDescription},labelWithNoDescription:{paddingBlockEnd:theme.root.layout.paddingBlockEnd.labelWithNoDescription},helperTextWithIcon:{flexDirection:"row",gap:theme.helperText.layout.gap},spacingAboveHelperText:{paddingBlockStart:theme.root.layout.spacingBetweenHelperText},spacingBelowHelperText:{paddingBlockEnd:theme.root.layout.spacingBetweenHelperText},helperText:{color:theme.helperText.color.default.foreground,fontSize:theme.helperText.font.size,lineHeight:theme.helperText.font.lineHeight,minWidth:wonderBlocksTokens.sizing.size_0,overflowWrap:"break-word"},disabledHelperText:{color:theme.helperText.color.disabled.foreground},error:{color:theme.error.color.foreground},errorIcon:{marginTop:wonderBlocksTokens.sizing.size_010},errorMessage:{fontWeight:theme.error.font.weight,marginBlockStart:theme.error.layout.marginBlockStart}});
|
|
45
45
|
|
|
46
46
|
exports.LabeledField = LabeledField;
|
package/dist/theme/default.d.ts
CHANGED
|
@@ -4,9 +4,8 @@ declare const theme: {
|
|
|
4
4
|
paddingBlockEnd: {
|
|
5
5
|
labelWithDescription: string;
|
|
6
6
|
labelWithNoDescription: string;
|
|
7
|
-
description: string;
|
|
8
|
-
helperTextSectionWithContent: string;
|
|
9
7
|
};
|
|
8
|
+
spacingBetweenHelperText: string;
|
|
10
9
|
};
|
|
11
10
|
};
|
|
12
11
|
label: {
|
|
@@ -19,14 +18,9 @@ declare const theme: {
|
|
|
19
18
|
};
|
|
20
19
|
};
|
|
21
20
|
};
|
|
22
|
-
|
|
23
|
-
font: {
|
|
24
|
-
size: string;
|
|
25
|
-
lineHeight: string;
|
|
26
|
-
};
|
|
21
|
+
contextLabel: {
|
|
27
22
|
color: {
|
|
28
|
-
|
|
29
|
-
disabled: {
|
|
23
|
+
error: {
|
|
30
24
|
foreground: string;
|
|
31
25
|
};
|
|
32
26
|
};
|
|
@@ -38,21 +32,26 @@ declare const theme: {
|
|
|
38
32
|
font: {
|
|
39
33
|
weight: number;
|
|
40
34
|
};
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
color: {
|
|
44
|
-
foreground: string;
|
|
35
|
+
layout: {
|
|
36
|
+
marginBlockStart: string;
|
|
45
37
|
};
|
|
46
38
|
};
|
|
47
39
|
helperText: {
|
|
48
40
|
layout: {
|
|
49
41
|
gap: string;
|
|
50
|
-
marginBlockStart: string;
|
|
51
42
|
};
|
|
52
43
|
font: {
|
|
53
44
|
size: string;
|
|
54
45
|
lineHeight: string;
|
|
55
46
|
};
|
|
47
|
+
color: {
|
|
48
|
+
default: {
|
|
49
|
+
foreground: string;
|
|
50
|
+
};
|
|
51
|
+
disabled: {
|
|
52
|
+
foreground: string;
|
|
53
|
+
};
|
|
54
|
+
};
|
|
56
55
|
};
|
|
57
56
|
};
|
|
58
57
|
export default theme;
|
package/dist/theme/index.d.ts
CHANGED
|
@@ -4,9 +4,8 @@ declare const _default: {
|
|
|
4
4
|
paddingBlockEnd: {
|
|
5
5
|
labelWithDescription: string;
|
|
6
6
|
labelWithNoDescription: string;
|
|
7
|
-
description: string;
|
|
8
|
-
helperTextSectionWithContent: string;
|
|
9
7
|
};
|
|
8
|
+
spacingBetweenHelperText: string;
|
|
10
9
|
};
|
|
11
10
|
};
|
|
12
11
|
label: {
|
|
@@ -19,14 +18,9 @@ declare const _default: {
|
|
|
19
18
|
};
|
|
20
19
|
};
|
|
21
20
|
};
|
|
22
|
-
|
|
23
|
-
font: {
|
|
24
|
-
size: string;
|
|
25
|
-
lineHeight: string;
|
|
26
|
-
};
|
|
21
|
+
contextLabel: {
|
|
27
22
|
color: {
|
|
28
|
-
|
|
29
|
-
disabled: {
|
|
23
|
+
error: {
|
|
30
24
|
foreground: string;
|
|
31
25
|
};
|
|
32
26
|
};
|
|
@@ -38,21 +32,26 @@ declare const _default: {
|
|
|
38
32
|
font: {
|
|
39
33
|
weight: number;
|
|
40
34
|
};
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
color: {
|
|
44
|
-
foreground: string;
|
|
35
|
+
layout: {
|
|
36
|
+
marginBlockStart: string;
|
|
45
37
|
};
|
|
46
38
|
};
|
|
47
39
|
helperText: {
|
|
48
40
|
layout: {
|
|
49
41
|
gap: string;
|
|
50
|
-
marginBlockStart: string;
|
|
51
42
|
};
|
|
52
43
|
font: {
|
|
53
44
|
size: string;
|
|
54
45
|
lineHeight: string;
|
|
55
46
|
};
|
|
47
|
+
color: {
|
|
48
|
+
default: {
|
|
49
|
+
foreground: string;
|
|
50
|
+
};
|
|
51
|
+
disabled: {
|
|
52
|
+
foreground: string;
|
|
53
|
+
};
|
|
54
|
+
};
|
|
56
55
|
};
|
|
57
56
|
};
|
|
58
57
|
export default _default;
|
|
@@ -4,9 +4,8 @@ declare const _default: {
|
|
|
4
4
|
paddingBlockEnd: {
|
|
5
5
|
labelWithDescription: string;
|
|
6
6
|
labelWithNoDescription: string;
|
|
7
|
-
description: string;
|
|
8
|
-
helperTextSectionWithContent: string;
|
|
9
7
|
};
|
|
8
|
+
spacingBetweenHelperText: string;
|
|
10
9
|
};
|
|
11
10
|
};
|
|
12
11
|
label: {
|
|
@@ -19,14 +18,9 @@ declare const _default: {
|
|
|
19
18
|
};
|
|
20
19
|
};
|
|
21
20
|
};
|
|
22
|
-
|
|
23
|
-
font: {
|
|
24
|
-
size: string;
|
|
25
|
-
lineHeight: string;
|
|
26
|
-
};
|
|
21
|
+
contextLabel: {
|
|
27
22
|
color: {
|
|
28
|
-
|
|
29
|
-
disabled: {
|
|
23
|
+
error: {
|
|
30
24
|
foreground: string;
|
|
31
25
|
};
|
|
32
26
|
};
|
|
@@ -38,21 +32,26 @@ declare const _default: {
|
|
|
38
32
|
font: {
|
|
39
33
|
weight: number;
|
|
40
34
|
};
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
color: {
|
|
44
|
-
foreground: string;
|
|
35
|
+
layout: {
|
|
36
|
+
marginBlockStart: string;
|
|
45
37
|
};
|
|
46
38
|
};
|
|
47
39
|
helperText: {
|
|
48
40
|
layout: {
|
|
49
41
|
gap: string;
|
|
50
|
-
marginBlockStart: string;
|
|
51
42
|
};
|
|
52
43
|
font: {
|
|
53
44
|
size: string;
|
|
54
45
|
lineHeight: string;
|
|
55
46
|
};
|
|
47
|
+
color: {
|
|
48
|
+
default: {
|
|
49
|
+
foreground: string;
|
|
50
|
+
};
|
|
51
|
+
disabled: {
|
|
52
|
+
foreground: string;
|
|
53
|
+
};
|
|
54
|
+
};
|
|
56
55
|
};
|
|
57
56
|
};
|
|
58
57
|
export default _default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-labeled-field",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0",
|
|
4
4
|
"design": "v1",
|
|
5
5
|
"description": "LabeledField handles accessibility and layout for associating labels with form components.",
|
|
6
6
|
"exports": {
|
|
@@ -21,9 +21,9 @@
|
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@khanacademy/wonder-blocks-core": "12.3.0",
|
|
24
|
-
"@khanacademy/wonder-blocks-layout": "3.1.
|
|
25
|
-
"@khanacademy/wonder-blocks-tokens": "12.0.
|
|
26
|
-
"@khanacademy/wonder-blocks-typography": "4.2.
|
|
24
|
+
"@khanacademy/wonder-blocks-layout": "3.1.31",
|
|
25
|
+
"@khanacademy/wonder-blocks-tokens": "12.0.2",
|
|
26
|
+
"@khanacademy/wonder-blocks-typography": "4.2.16"
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
29
29
|
"@phosphor-icons/core": "^2.0.2",
|