@khanacademy/wonder-blocks-labeled-field 3.1.2 → 3.2.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 +13 -0
- package/dist/components/labeled-field.d.ts +19 -2
- package/dist/css/vars.css +15 -11
- package/dist/es/index.js +4 -3
- package/dist/index.js +5 -3
- package/dist/theme/default.d.ts +14 -6
- package/dist/theme/index.d.ts +14 -6
- package/dist/theme/thunderblocks.d.ts +14 -6
- package/package.json +4 -4
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @khanacademy/wonder-blocks-labeled-field@3.
|
|
2
|
+
> @khanacademy/wonder-blocks-labeled-field@3.2.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,18 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-labeled-field
|
|
2
2
|
|
|
3
|
+
## 3.2.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 03415d1: `LabeledField`: Adds `readOnlyMessage` prop for helpful text related to why a field is read only. Also updates disabled styling for the description and the spacing between the error icon and text for TB.
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- Updated dependencies [03415d1]
|
|
12
|
+
- @khanacademy/wonder-blocks-tokens@11.4.1
|
|
13
|
+
- @khanacademy/wonder-blocks-layout@3.1.28
|
|
14
|
+
- @khanacademy/wonder-blocks-typography@4.2.13
|
|
15
|
+
|
|
3
16
|
## 3.1.2
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
|
@@ -44,8 +44,21 @@ type Props = {
|
|
|
44
44
|
* Note: Since the error icon has an aria-label, screen readers will
|
|
45
45
|
* prefix the error message with "Error:" (or the value provided to the
|
|
46
46
|
* errorIconAriaLabel in the `labels` prop)
|
|
47
|
+
*
|
|
48
|
+
* If both `errorMessage` and `readOnlyMessage` are provided, the `readOnlyMessage`
|
|
49
|
+
* is displayed first.
|
|
47
50
|
*/
|
|
48
51
|
errorMessage?: React.ReactNode;
|
|
52
|
+
/**
|
|
53
|
+
* The helpful text message to display when the field is read only.
|
|
54
|
+
*
|
|
55
|
+
* Use the `labels.readOnlyIconAriaLabel` prop to set the `aria-label` for
|
|
56
|
+
* the read only icon.
|
|
57
|
+
*
|
|
58
|
+
* If both `errorMessage` and `readOnlyMessage` are provided, the `readOnlyMessage`
|
|
59
|
+
* is displayed first.
|
|
60
|
+
*/
|
|
61
|
+
readOnlyMessage?: React.ReactNode;
|
|
49
62
|
/**
|
|
50
63
|
* Custom styles for the elements of LabeledField. Useful if there are
|
|
51
64
|
* specific cases where spacing between elements needs to be customized.
|
|
@@ -55,6 +68,7 @@ type Props = {
|
|
|
55
68
|
label?: StyleType;
|
|
56
69
|
description?: StyleType;
|
|
57
70
|
error?: StyleType;
|
|
71
|
+
readOnlyMessage?: StyleType;
|
|
58
72
|
};
|
|
59
73
|
/**
|
|
60
74
|
* A unique id to use as the base of the ids for the elements within the component.
|
|
@@ -63,6 +77,7 @@ type Props = {
|
|
|
63
77
|
* - The description will have an id formatted as `${id}-description`
|
|
64
78
|
* - The field will have an id formatted as `${id}-field`
|
|
65
79
|
* - The error will have an id formatted as `${id}-error`
|
|
80
|
+
* - The read only message will have an id formatted as `${id}-read-only-message`
|
|
66
81
|
*
|
|
67
82
|
* If the `id` prop is not provided, a base unique id will be auto-generated.
|
|
68
83
|
* This is important so that the different elements can be wired up together
|
|
@@ -79,17 +94,19 @@ type Props = {
|
|
|
79
94
|
* - The description will have a testId formatted as `${testId}-description`
|
|
80
95
|
* - The field will have a testId formatted as `${testId}-field`
|
|
81
96
|
* - The error will have a testId formatted as `${testId}-error`
|
|
97
|
+
* - The read only message will have a testId formatted as `${testId}-read-only-message`
|
|
82
98
|
*/
|
|
83
99
|
testId?: string;
|
|
84
100
|
/**
|
|
85
101
|
* The object containing the custom labels used inside this component.
|
|
86
102
|
*
|
|
87
|
-
* This is useful for internationalization.
|
|
103
|
+
* This is useful for internationalization.
|
|
88
104
|
*/
|
|
89
105
|
labels?: LabeledFieldLabels;
|
|
90
106
|
};
|
|
91
107
|
export type LabeledFieldLabels = {
|
|
92
|
-
errorIconAriaLabel
|
|
108
|
+
errorIconAriaLabel?: string;
|
|
109
|
+
readOnlyIconAriaLabel?: string;
|
|
93
110
|
};
|
|
94
111
|
/**
|
|
95
112
|
* A LabeledField is an element that provides a label, required indicator,
|
package/dist/css/vars.css
CHANGED
|
@@ -1,31 +1,35 @@
|
|
|
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
3
|
--wb-c-labeled-field-root-layout-paddingBlockEnd-description: var(--wb-sizing-size_120);
|
|
4
|
-
--wb-c-labeled-field-root-layout-paddingBlockEnd-
|
|
4
|
+
--wb-c-labeled-field-root-layout-paddingBlockEnd-helperTextSectionWithContent: var(--wb-sizing-size_120);
|
|
5
5
|
--wb-c-labeled-field-label-color-error-foreground: var(--wb-semanticColor-core-foreground-neutral-strong);
|
|
6
6
|
--wb-c-labeled-field-label-color-disabled-foreground: var(--wb-semanticColor-core-foreground-neutral-strong);
|
|
7
7
|
--wb-c-labeled-field-description-font-size: var(--wb-font-body-size-small);
|
|
8
8
|
--wb-c-labeled-field-description-font-lineHeight: var(--wb-font-body-lineHeight-small);
|
|
9
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);
|
|
10
11
|
--wb-c-labeled-field-error-color-foreground: var(--wb-semanticColor-core-foreground-critical-subtle);
|
|
11
|
-
--wb-c-labeled-field-error-font-size: var(--wb-font-body-size-small);
|
|
12
12
|
--wb-c-labeled-field-error-font-weight: var(--wb-font-weight-regular);
|
|
13
|
-
--wb-c-labeled-field-
|
|
14
|
-
--wb-c-labeled-field-
|
|
15
|
-
--wb-c-labeled-field-
|
|
13
|
+
--wb-c-labeled-field-requiredIndicator-color-foreground: var(--wb-semanticColor-core-foreground-critical-subtle);
|
|
14
|
+
--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
|
+
--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);}
|
|
16
18
|
|
|
17
19
|
[data-wb-theme='thunderblocks'] {--wb-c-labeled-field-root-layout-paddingBlockEnd-labelWithDescription: var(--wb-sizing-size_100);
|
|
18
20
|
--wb-c-labeled-field-root-layout-paddingBlockEnd-labelWithNoDescription: var(--wb-sizing-size_100);
|
|
19
21
|
--wb-c-labeled-field-root-layout-paddingBlockEnd-description: var(--wb-sizing-size_100);
|
|
20
|
-
--wb-c-labeled-field-root-layout-paddingBlockEnd-
|
|
22
|
+
--wb-c-labeled-field-root-layout-paddingBlockEnd-helperTextSectionWithContent: var(--wb-sizing-size_100);
|
|
21
23
|
--wb-c-labeled-field-label-color-error-foreground: var(--wb-semanticColor-core-foreground-critical-default);
|
|
22
|
-
--wb-c-labeled-field-label-color-disabled-foreground: var(--wb-semanticColor-core-foreground-disabled-
|
|
24
|
+
--wb-c-labeled-field-label-color-disabled-foreground: var(--wb-semanticColor-core-foreground-disabled-strong);
|
|
23
25
|
--wb-c-labeled-field-description-font-size: var(--wb-font-body-size-xsmall);
|
|
24
26
|
--wb-c-labeled-field-description-font-lineHeight: var(--wb-font-body-lineHeight-xsmall);
|
|
25
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);
|
|
26
29
|
--wb-c-labeled-field-error-color-foreground: var(--wb-semanticColor-core-foreground-critical-default);
|
|
27
|
-
--wb-c-labeled-field-error-font-size: var(--wb-font-body-size-xsmall);
|
|
28
30
|
--wb-c-labeled-field-error-font-weight: var(--wb-font-weight-bold);
|
|
29
|
-
--wb-c-labeled-field-
|
|
30
|
-
--wb-c-labeled-field-
|
|
31
|
-
--wb-c-labeled-field-
|
|
31
|
+
--wb-c-labeled-field-requiredIndicator-color-foreground: var(--wb-semanticColor-core-foreground-critical-default);
|
|
32
|
+
--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
|
+
--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);}
|
package/dist/es/index.js
CHANGED
|
@@ -2,16 +2,17 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { StyleSheet } from 'aphrodite';
|
|
4
4
|
import WarningCircle from '@phosphor-icons/core/bold/warning-circle-bold.svg';
|
|
5
|
+
import LockIcon from '@phosphor-icons/core/bold/lock-bold.svg';
|
|
6
|
+
import { BodyText } from '@khanacademy/wonder-blocks-typography';
|
|
5
7
|
import { addStyle, View } from '@khanacademy/wonder-blocks-core';
|
|
6
8
|
import { sizing, semanticColor, font, mapValuesToCssVars } from '@khanacademy/wonder-blocks-tokens';
|
|
7
|
-
import { BodyText } from '@khanacademy/wonder-blocks-typography';
|
|
8
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$1=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$1,{...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})]})});
|
|
10
11
|
|
|
11
|
-
const theme$1={root:{layout:{paddingBlockEnd:{labelWithDescription:sizing.size_040,labelWithNoDescription:sizing.size_120,description:sizing.size_120,
|
|
12
|
+
const theme$1={root:{layout:{paddingBlockEnd:{labelWithDescription:sizing.size_040,labelWithNoDescription:sizing.size_120,description:sizing.size_120,helperTextSectionWithContent:sizing.size_120}}},label:{color:{error:{foreground:semanticColor.core.foreground.neutral.strong},disabled:{foreground:semanticColor.core.foreground.neutral.strong}}},description:{font:{size:font.body.size.small,lineHeight:font.body.lineHeight.small},color:{foreground:semanticColor.core.foreground.neutral.default,disabled:{foreground:semanticColor.core.foreground.neutral.default}}},error:{color:{foreground:semanticColor.core.foreground.critical.subtle},font:{weight:font.weight.regular}},requiredIndicator:{color:{foreground:semanticColor.core.foreground.critical.subtle}},helperText:{layout:{gap:sizing.size_080,marginBlockStart:sizing.size_0},font:{size:font.body.size.small,lineHeight:font.body.lineHeight.small}}};
|
|
12
13
|
|
|
13
14
|
var theme = mapValuesToCssVars(theme$1,"--wb-c-labeled-field-");
|
|
14
15
|
|
|
15
|
-
const defaultLabeledFieldLabels={errorIconAriaLabel:"Error:"};const StyledSpan=addStyle("span");function LabeledField(props){const{field,styles:stylesProp,label,id,required,testId,description,errorMessage,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 isRequired=!!required||!!field.props.required;const hasError=!!errorMessage||!!field.props.error;const isDisabled=!!field.props.disabled;function renderLabel(){const requiredIcon=jsxs(StyledSpan,{style:[styles.textWordBreak,styles.required,isDisabled&&styles.disabledLabel],"aria-hidden":true,children:[" ","*"]});return jsx(React.Fragment,{children:jsxs(BodyText,{style:[styles.textWordBreak,styles.label,description?styles.labelWithDescription:styles.labelWithNoDescription,stylesProp?.label,hasError?styles.labelWithError:undefined,isDisabled&&styles.disabledLabel],tag:"label",htmlFor:fieldId,testId:testId&&`${testId}-label`,id:labelId,weight:"semi",children:[label,isRequired&&requiredIcon]})})}function maybeRenderDescription(){if(!description){return null}return jsx(React.Fragment,{children:jsx(BodyText,{style:[styles.textWordBreak,styles.description,stylesProp?.description],testId:testId&&`${testId}-description`,id:descriptionId,children:description})})}function maybeRenderError(){return jsx(React.Fragment,{children:jsx(View,{style:[styles.
|
|
16
|
+
const defaultLabeledFieldLabels={errorIconAriaLabel:"Error:"};const StyledSpan=addStyle("span");function LabeledField(props){const{field,styles:stylesProp,label,id,required,testId,description,errorMessage,readOnlyMessage,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 isRequired=!!required||!!field.props.required;const hasError=!!errorMessage||!!field.props.error;const isDisabled=!!field.props.disabled;function renderLabel(){const requiredIcon=jsxs(StyledSpan,{style:[styles.textWordBreak,styles.required,isDisabled&&styles.disabledLabel],"aria-hidden":true,children:[" ","*"]});return jsx(React.Fragment,{children:jsxs(BodyText,{style:[styles.textWordBreak,styles.label,description?styles.labelWithDescription:styles.labelWithNoDescription,stylesProp?.label,hasError?styles.labelWithError:undefined,isDisabled&&styles.disabledLabel],tag:"label",htmlFor:fieldId,testId:testId&&`${testId}-label`,id:labelId,weight:"semi",children:[label,isRequired&&requiredIcon]})})}function maybeRenderDescription(){if(!description){return null}return jsx(React.Fragment,{children:jsx(BodyText,{style:[styles.textWordBreak,styles.description,stylesProp?.description,isDisabled&&styles.disabledDescription],testId:testId&&`${testId}-description`,id:descriptionId,children:description})})}function maybeRenderError(){return jsx(React.Fragment,{children:jsx(View,{style:[styles.helperTextSection,errorMessage?styles.helperTextSectionWithContent: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.textWordBreak,styles.helperTextMessage,styles.errorMessage,styles.error],children:errorMessage})]})})})}function renderField(){return React.cloneElement(field,{id:fieldId,"aria-describedby":[description&&descriptionId,readOnlyMessage&&readOnlyMessageId,errorMessage&&errorId].filter(Boolean).join(" "),required:required||field.props.required,error:hasError,testId:testId?`${testId}-field`:undefined,readOnly:readOnlyMessage||field.props.readOnly})}function maybeRenderReadOnlyMessage(){if(!readOnlyMessage){return null}return jsxs(View,{style:[styles.helperTextSection,styles.helperTextSectionWithContent,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.textWordBreak,styles.helperTextMessage],children:readOnlyMessage})]})}return jsxs(View,{style:stylesProp?.root,children:[renderLabel(),maybeRenderDescription(),renderField(),maybeRenderReadOnlyMessage(),maybeRenderError()]})}const styles=StyleSheet.create({label:{color:semanticColor.core.foreground.neutral.strong},labelWithError:{color:theme.label.color.error.foreground},disabledLabel:{color:theme.label.color.disabled.foreground},labelWithDescription:{paddingBlockEnd:theme.root.layout.paddingBlockEnd.labelWithDescription},labelWithNoDescription:{paddingBlockEnd:theme.root.layout.paddingBlockEnd.labelWithNoDescription},description:{color:theme.description.color.foreground,paddingBlockEnd:theme.root.layout.paddingBlockEnd.description,fontSize:theme.description.font.size,lineHeight:theme.description.font.lineHeight},disabledDescription:{color:theme.description.color.disabled.foreground},helperTextSection:{flexDirection:"row",gap:theme.helperText.layout.gap},helperTextSectionWithContent:{paddingBlockStart:theme.root.layout.paddingBlockEnd.helperTextSectionWithContent},helperTextMessage:{fontSize:theme.helperText.font.size,lineHeight:theme.helperText.font.lineHeight,marginBlockStart:theme.helperText.layout.marginBlockStart,minWidth:sizing.size_0},error:{color:theme.error.color.foreground},errorIcon:{marginTop:sizing.size_010},errorMessage:{fontWeight:theme.error.font.weight},required:{color:theme.requiredIndicator.color.foreground},textWordBreak:{overflowWrap:"break-word"}});
|
|
16
17
|
|
|
17
18
|
export { LabeledField };
|
package/dist/index.js
CHANGED
|
@@ -6,9 +6,10 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var aphrodite = require('aphrodite');
|
|
8
8
|
var WarningCircle = require('@phosphor-icons/core/bold/warning-circle-bold.svg');
|
|
9
|
+
var LockIcon = require('@phosphor-icons/core/bold/lock-bold.svg');
|
|
10
|
+
var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
|
|
9
11
|
var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
|
|
10
12
|
var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
|
|
11
|
-
var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
|
|
12
13
|
|
|
13
14
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
14
15
|
|
|
@@ -32,13 +33,14 @@ function _interopNamespace(e) {
|
|
|
32
33
|
|
|
33
34
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
34
35
|
var WarningCircle__default = /*#__PURE__*/_interopDefaultLegacy(WarningCircle);
|
|
36
|
+
var LockIcon__default = /*#__PURE__*/_interopDefaultLegacy(LockIcon);
|
|
35
37
|
|
|
36
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$1=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$1,{...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})]})});
|
|
37
39
|
|
|
38
|
-
const theme$1={root:{layout:{paddingBlockEnd:{labelWithDescription:wonderBlocksTokens.sizing.size_040,labelWithNoDescription:wonderBlocksTokens.sizing.size_120,description:wonderBlocksTokens.sizing.size_120,
|
|
40
|
+
const theme$1={root:{layout:{paddingBlockEnd:{labelWithDescription:wonderBlocksTokens.sizing.size_040,labelWithNoDescription:wonderBlocksTokens.sizing.size_120,description:wonderBlocksTokens.sizing.size_120,helperTextSectionWithContent:wonderBlocksTokens.sizing.size_120}}},label:{color:{error:{foreground:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong},disabled:{foreground:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong}}},description:{font:{size:wonderBlocksTokens.font.body.size.small,lineHeight:wonderBlocksTokens.font.body.lineHeight.small},color:{foreground:wonderBlocksTokens.semanticColor.core.foreground.neutral.default,disabled:{foreground:wonderBlocksTokens.semanticColor.core.foreground.neutral.default}}},error:{color:{foreground:wonderBlocksTokens.semanticColor.core.foreground.critical.subtle},font:{weight:wonderBlocksTokens.font.weight.regular}},requiredIndicator:{color:{foreground:wonderBlocksTokens.semanticColor.core.foreground.critical.subtle}},helperText:{layout:{gap:wonderBlocksTokens.sizing.size_080,marginBlockStart:wonderBlocksTokens.sizing.size_0},font:{size:wonderBlocksTokens.font.body.size.small,lineHeight:wonderBlocksTokens.font.body.lineHeight.small}}};
|
|
39
41
|
|
|
40
42
|
var theme = wonderBlocksTokens.mapValuesToCssVars(theme$1,"--wb-c-labeled-field-");
|
|
41
43
|
|
|
42
|
-
const defaultLabeledFieldLabels={errorIconAriaLabel:"Error:"};const StyledSpan=wonderBlocksCore.addStyle("span");function LabeledField(props){const{field,styles:stylesProp,label,id,required,testId,description,errorMessage,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 isRequired=!!required||!!field.props.required;const hasError=!!errorMessage||!!field.props.error;const isDisabled=!!field.props.disabled;function renderLabel(){const requiredIcon=jsxRuntime.jsxs(StyledSpan,{style:[styles.textWordBreak,styles.required,isDisabled&&styles.disabledLabel],"aria-hidden":true,children:[" ","*"]});return jsxRuntime.jsx(React__namespace.Fragment,{children:jsxRuntime.jsxs(wonderBlocksTypography.BodyText,{style:[styles.textWordBreak,styles.label,description?styles.labelWithDescription:styles.labelWithNoDescription,stylesProp?.label,hasError?styles.labelWithError:undefined,isDisabled&&styles.disabledLabel],tag:"label",htmlFor:fieldId,testId:testId&&`${testId}-label`,id:labelId,weight:"semi",children:[label,isRequired&&requiredIcon]})})}function maybeRenderDescription(){if(!description){return null}return jsxRuntime.jsx(React__namespace.Fragment,{children:jsxRuntime.jsx(wonderBlocksTypography.BodyText,{style:[styles.textWordBreak,styles.description,stylesProp?.description],testId:testId&&`${testId}-description`,id:descriptionId,children:description})})}function maybeRenderError(){return jsxRuntime.jsx(React__namespace.Fragment,{children:jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles.
|
|
44
|
+
const defaultLabeledFieldLabels={errorIconAriaLabel:"Error:"};const StyledSpan=wonderBlocksCore.addStyle("span");function LabeledField(props){const{field,styles:stylesProp,label,id,required,testId,description,errorMessage,readOnlyMessage,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 isRequired=!!required||!!field.props.required;const hasError=!!errorMessage||!!field.props.error;const isDisabled=!!field.props.disabled;function renderLabel(){const requiredIcon=jsxRuntime.jsxs(StyledSpan,{style:[styles.textWordBreak,styles.required,isDisabled&&styles.disabledLabel],"aria-hidden":true,children:[" ","*"]});return jsxRuntime.jsx(React__namespace.Fragment,{children:jsxRuntime.jsxs(wonderBlocksTypography.BodyText,{style:[styles.textWordBreak,styles.label,description?styles.labelWithDescription:styles.labelWithNoDescription,stylesProp?.label,hasError?styles.labelWithError:undefined,isDisabled&&styles.disabledLabel],tag:"label",htmlFor:fieldId,testId:testId&&`${testId}-label`,id:labelId,weight:"semi",children:[label,isRequired&&requiredIcon]})})}function maybeRenderDescription(){if(!description){return null}return jsxRuntime.jsx(React__namespace.Fragment,{children:jsxRuntime.jsx(wonderBlocksTypography.BodyText,{style:[styles.textWordBreak,styles.description,stylesProp?.description,isDisabled&&styles.disabledDescription],testId:testId&&`${testId}-description`,id:descriptionId,children:description})})}function maybeRenderError(){return jsxRuntime.jsx(React__namespace.Fragment,{children:jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles.helperTextSection,errorMessage?styles.helperTextSectionWithContent: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.textWordBreak,styles.helperTextMessage,styles.errorMessage,styles.error],children:errorMessage})]})})})}function renderField(){return React__namespace.cloneElement(field,{id:fieldId,"aria-describedby":[description&&descriptionId,readOnlyMessage&&readOnlyMessageId,errorMessage&&errorId].filter(Boolean).join(" "),required:required||field.props.required,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.helperTextSection,styles.helperTextSectionWithContent,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.textWordBreak,styles.helperTextMessage],children:readOnlyMessage})]})}return jsxRuntime.jsxs(wonderBlocksCore.View,{style:stylesProp?.root,children:[renderLabel(),maybeRenderDescription(),renderField(),maybeRenderReadOnlyMessage(),maybeRenderError()]})}const styles=aphrodite.StyleSheet.create({label:{color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong},labelWithError:{color:theme.label.color.error.foreground},disabledLabel:{color:theme.label.color.disabled.foreground},labelWithDescription:{paddingBlockEnd:theme.root.layout.paddingBlockEnd.labelWithDescription},labelWithNoDescription:{paddingBlockEnd:theme.root.layout.paddingBlockEnd.labelWithNoDescription},description:{color:theme.description.color.foreground,paddingBlockEnd:theme.root.layout.paddingBlockEnd.description,fontSize:theme.description.font.size,lineHeight:theme.description.font.lineHeight},disabledDescription:{color:theme.description.color.disabled.foreground},helperTextSection:{flexDirection:"row",gap:theme.helperText.layout.gap},helperTextSectionWithContent:{paddingBlockStart:theme.root.layout.paddingBlockEnd.helperTextSectionWithContent},helperTextMessage:{fontSize:theme.helperText.font.size,lineHeight:theme.helperText.font.lineHeight,marginBlockStart:theme.helperText.layout.marginBlockStart,minWidth:wonderBlocksTokens.sizing.size_0},error:{color:theme.error.color.foreground},errorIcon:{marginTop:wonderBlocksTokens.sizing.size_010},errorMessage:{fontWeight:theme.error.font.weight},required:{color:theme.requiredIndicator.color.foreground},textWordBreak:{overflowWrap:"break-word"}});
|
|
43
45
|
|
|
44
46
|
exports.LabeledField = LabeledField;
|
package/dist/theme/default.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ declare const theme: {
|
|
|
5
5
|
labelWithDescription: string;
|
|
6
6
|
labelWithNoDescription: string;
|
|
7
7
|
description: string;
|
|
8
|
-
|
|
8
|
+
helperTextSectionWithContent: string;
|
|
9
9
|
};
|
|
10
10
|
};
|
|
11
11
|
};
|
|
@@ -26,6 +26,9 @@ declare const theme: {
|
|
|
26
26
|
};
|
|
27
27
|
color: {
|
|
28
28
|
foreground: string;
|
|
29
|
+
disabled: {
|
|
30
|
+
foreground: string;
|
|
31
|
+
};
|
|
29
32
|
};
|
|
30
33
|
};
|
|
31
34
|
error: {
|
|
@@ -33,12 +36,7 @@ declare const theme: {
|
|
|
33
36
|
foreground: string;
|
|
34
37
|
};
|
|
35
38
|
font: {
|
|
36
|
-
size: string;
|
|
37
39
|
weight: number;
|
|
38
|
-
lineHeight: string;
|
|
39
|
-
};
|
|
40
|
-
layout: {
|
|
41
|
-
marginBlockStart: string;
|
|
42
40
|
};
|
|
43
41
|
};
|
|
44
42
|
requiredIndicator: {
|
|
@@ -46,5 +44,15 @@ declare const theme: {
|
|
|
46
44
|
foreground: string;
|
|
47
45
|
};
|
|
48
46
|
};
|
|
47
|
+
helperText: {
|
|
48
|
+
layout: {
|
|
49
|
+
gap: string;
|
|
50
|
+
marginBlockStart: string;
|
|
51
|
+
};
|
|
52
|
+
font: {
|
|
53
|
+
size: string;
|
|
54
|
+
lineHeight: string;
|
|
55
|
+
};
|
|
56
|
+
};
|
|
49
57
|
};
|
|
50
58
|
export default theme;
|
package/dist/theme/index.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ declare const _default: {
|
|
|
5
5
|
labelWithDescription: string;
|
|
6
6
|
labelWithNoDescription: string;
|
|
7
7
|
description: string;
|
|
8
|
-
|
|
8
|
+
helperTextSectionWithContent: string;
|
|
9
9
|
};
|
|
10
10
|
};
|
|
11
11
|
};
|
|
@@ -26,6 +26,9 @@ declare const _default: {
|
|
|
26
26
|
};
|
|
27
27
|
color: {
|
|
28
28
|
foreground: string;
|
|
29
|
+
disabled: {
|
|
30
|
+
foreground: string;
|
|
31
|
+
};
|
|
29
32
|
};
|
|
30
33
|
};
|
|
31
34
|
error: {
|
|
@@ -33,12 +36,7 @@ declare const _default: {
|
|
|
33
36
|
foreground: string;
|
|
34
37
|
};
|
|
35
38
|
font: {
|
|
36
|
-
size: string;
|
|
37
39
|
weight: number;
|
|
38
|
-
lineHeight: string;
|
|
39
|
-
};
|
|
40
|
-
layout: {
|
|
41
|
-
marginBlockStart: string;
|
|
42
40
|
};
|
|
43
41
|
};
|
|
44
42
|
requiredIndicator: {
|
|
@@ -46,5 +44,15 @@ declare const _default: {
|
|
|
46
44
|
foreground: string;
|
|
47
45
|
};
|
|
48
46
|
};
|
|
47
|
+
helperText: {
|
|
48
|
+
layout: {
|
|
49
|
+
gap: string;
|
|
50
|
+
marginBlockStart: string;
|
|
51
|
+
};
|
|
52
|
+
font: {
|
|
53
|
+
size: string;
|
|
54
|
+
lineHeight: string;
|
|
55
|
+
};
|
|
56
|
+
};
|
|
49
57
|
};
|
|
50
58
|
export default _default;
|
|
@@ -5,7 +5,7 @@ declare const _default: {
|
|
|
5
5
|
labelWithDescription: string;
|
|
6
6
|
labelWithNoDescription: string;
|
|
7
7
|
description: string;
|
|
8
|
-
|
|
8
|
+
helperTextSectionWithContent: string;
|
|
9
9
|
};
|
|
10
10
|
};
|
|
11
11
|
};
|
|
@@ -26,6 +26,9 @@ declare const _default: {
|
|
|
26
26
|
};
|
|
27
27
|
color: {
|
|
28
28
|
foreground: string;
|
|
29
|
+
disabled: {
|
|
30
|
+
foreground: string;
|
|
31
|
+
};
|
|
29
32
|
};
|
|
30
33
|
};
|
|
31
34
|
error: {
|
|
@@ -33,12 +36,7 @@ declare const _default: {
|
|
|
33
36
|
foreground: string;
|
|
34
37
|
};
|
|
35
38
|
font: {
|
|
36
|
-
size: string;
|
|
37
39
|
weight: number;
|
|
38
|
-
lineHeight: string;
|
|
39
|
-
};
|
|
40
|
-
layout: {
|
|
41
|
-
marginBlockStart: string;
|
|
42
40
|
};
|
|
43
41
|
};
|
|
44
42
|
requiredIndicator: {
|
|
@@ -46,5 +44,15 @@ declare const _default: {
|
|
|
46
44
|
foreground: string;
|
|
47
45
|
};
|
|
48
46
|
};
|
|
47
|
+
helperText: {
|
|
48
|
+
layout: {
|
|
49
|
+
gap: string;
|
|
50
|
+
marginBlockStart: string;
|
|
51
|
+
};
|
|
52
|
+
font: {
|
|
53
|
+
size: string;
|
|
54
|
+
lineHeight: string;
|
|
55
|
+
};
|
|
56
|
+
};
|
|
49
57
|
};
|
|
50
58
|
export default _default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-labeled-field",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.2.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": "11.4.
|
|
26
|
-
"@khanacademy/wonder-blocks-typography": "4.2.
|
|
24
|
+
"@khanacademy/wonder-blocks-layout": "3.1.28",
|
|
25
|
+
"@khanacademy/wonder-blocks-tokens": "11.4.1",
|
|
26
|
+
"@khanacademy/wonder-blocks-typography": "4.2.13"
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
29
29
|
"@phosphor-icons/core": "^2.0.2",
|