@khanacademy/wonder-blocks-labeled-field 4.0.11 → 4.0.12
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 +6 -0
- package/dist/es/index.js +1 -1
- package/dist/index.js +1 -1
- package/package.json +3 -3
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @khanacademy/wonder-blocks-labeled-field@4.0.
|
|
2
|
+
> @khanacademy/wonder-blocks-labeled-field@4.0.12 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
package/dist/es/index.js
CHANGED
|
@@ -13,6 +13,6 @@ const theme$1={root:{layout:{paddingBlockEnd:{labelWithDescription:sizing.size_0
|
|
|
13
13
|
|
|
14
14
|
var theme = mapValuesToCssVars(theme$1,"--wb-c-labeled-field-");
|
|
15
15
|
|
|
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
|
|
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
|
@@ -41,6 +41,6 @@ const theme$1={root:{layout:{paddingBlockEnd:{labelWithDescription:wonderBlocksT
|
|
|
41
41
|
|
|
42
42
|
var theme = wonderBlocksTokens.mapValuesToCssVars(theme$1,"--wb-c-labeled-field-");
|
|
43
43
|
|
|
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
|
|
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/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "LabeledField handles accessibility and layout for associating labels with form components.",
|
|
4
4
|
"author": "Khan Academy",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"version": "4.0.
|
|
6
|
+
"version": "4.0.12",
|
|
7
7
|
"publishConfig": {
|
|
8
8
|
"access": "public"
|
|
9
9
|
},
|
|
@@ -29,9 +29,9 @@
|
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@khanacademy/wonder-blocks-core": "12.4.2",
|
|
32
|
-
"@khanacademy/wonder-blocks-
|
|
32
|
+
"@khanacademy/wonder-blocks-typography": "4.2.27",
|
|
33
33
|
"@khanacademy/wonder-blocks-tokens": "14.1.3",
|
|
34
|
-
"@khanacademy/wonder-blocks-
|
|
34
|
+
"@khanacademy/wonder-blocks-layout": "3.1.42"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
37
37
|
"@phosphor-icons/core": "^2.0.2",
|