@khanacademy/wonder-blocks-labeled-field 3.0.7 → 3.0.9
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/CHANGELOG.md +23 -0
- package/dist/es/index.js +3 -2
- package/dist/index.js +3 -2
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,28 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-labeled-field
|
|
2
2
|
|
|
3
|
+
## 3.0.9
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [c7d95bf]
|
|
8
|
+
- Updated dependencies [668093b]
|
|
9
|
+
- @khanacademy/wonder-blocks-tokens@10.2.0
|
|
10
|
+
- @khanacademy/wonder-blocks-core@12.3.0
|
|
11
|
+
- @khanacademy/wonder-blocks-layout@3.1.13
|
|
12
|
+
- @khanacademy/wonder-blocks-typography@3.2.3
|
|
13
|
+
|
|
14
|
+
## 3.0.8
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- Updated dependencies [a1be4c5]
|
|
19
|
+
- Updated dependencies [d00a6f1]
|
|
20
|
+
- Updated dependencies [abf5496]
|
|
21
|
+
- Updated dependencies [812c167]
|
|
22
|
+
- @khanacademy/wonder-blocks-tokens@10.1.0
|
|
23
|
+
- @khanacademy/wonder-blocks-layout@3.1.12
|
|
24
|
+
- @khanacademy/wonder-blocks-typography@3.2.2
|
|
25
|
+
|
|
3
26
|
## 3.0.7
|
|
4
27
|
|
|
5
28
|
### Patch Changes
|
package/dist/es/index.js
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
import {
|
|
1
|
+
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
5
|
import { addStyle, View } from '@khanacademy/wonder-blocks-core';
|
|
6
6
|
import { semanticColor, sizing } from '@khanacademy/wonder-blocks-tokens';
|
|
7
7
|
import { LabelMedium, LabelSmall } from '@khanacademy/wonder-blocks-typography';
|
|
8
|
-
|
|
8
|
+
|
|
9
|
+
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$1.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$1[iconStyle]){return styles$1[iconStyle]}const newStyles={icon:{backgroundColor:color,width:size,height:size}};dynamicStyles[iconStyle]=StyleSheet.create(newStyles);return dynamicStyles[iconStyle]};const styles$1=StyleSheet.create({svg:{display:"inline-block",verticalAlign:"text-bottom",flexShrink:0,flexGrow:0,maskSize:"100%",maskRepeat:"no-repeat",maskPosition:"center"}});PhosphorIcon.displayName="PhosphorIcon";
|
|
9
10
|
|
|
10
11
|
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;function renderLabel(){const requiredIcon=jsxs(StyledSpan,{style:[styles.textWordBreak,styles.required],"aria-hidden":true,children:[" ","*"]});return jsx(React.Fragment,{children:jsxs(LabelMedium,{style:[styles.textWordBreak,styles.label,description?styles.labelWithDescription:styles.labelWithNoDescription,stylesProp?.label],tag:"label",htmlFor:fieldId,testId:testId&&`${testId}-label`,id:labelId,children:[label,isRequired&&requiredIcon]})})}function maybeRenderDescription(){if(!description){return null}return jsx(React.Fragment,{children:jsx(LabelSmall,{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.errorSection,errorMessage?styles.errorSectionWithContent: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(LabelSmall,{style:[styles.textWordBreak,styles.errorMessage,styles.error],children:errorMessage})]})})})}function renderField(){return React.cloneElement(field,{id:fieldId,"aria-describedby":[errorMessage&&errorId,description&&descriptionId].filter(Boolean).join(" "),required:required||field.props.required,error:hasError,testId:testId?`${testId}-field`:undefined})}return jsxs(View,{style:stylesProp?.root,children:[renderLabel(),maybeRenderDescription(),renderField(),maybeRenderError()]})}const styles=StyleSheet.create({label:{color:semanticColor.text.primary},labelWithDescription:{paddingBlockEnd:sizing.size_040},labelWithNoDescription:{paddingBlockEnd:sizing.size_120},description:{color:semanticColor.text.secondary,paddingBlockEnd:sizing.size_120},errorSection:{flexDirection:"row",gap:sizing.size_080},errorSectionWithContent:{paddingBlockStart:sizing.size_120},error:{color:semanticColor.status.critical.foreground},errorIcon:{marginTop:"1px"},errorMessage:{minWidth:"0"},required:{color:semanticColor.status.critical.foreground},textWordBreak:{overflowWrap:"break-word"}});
|
|
11
12
|
|
package/dist/index.js
CHANGED
|
@@ -9,7 +9,6 @@ var WarningCircle = require('@phosphor-icons/core/bold/warning-circle-bold.svg')
|
|
|
9
9
|
var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
|
|
10
10
|
var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
|
|
11
11
|
var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
|
|
12
|
-
var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
|
|
13
12
|
|
|
14
13
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
15
14
|
|
|
@@ -34,6 +33,8 @@ function _interopNamespace(e) {
|
|
|
34
33
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
35
34
|
var WarningCircle__default = /*#__PURE__*/_interopDefaultLegacy(WarningCircle);
|
|
36
35
|
|
|
37
|
-
const
|
|
36
|
+
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$1.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$1[iconStyle]){return styles$1[iconStyle]}const newStyles={icon:{backgroundColor:color,width:size,height:size}};dynamicStyles[iconStyle]=aphrodite.StyleSheet.create(newStyles);return dynamicStyles[iconStyle]};const styles$1=aphrodite.StyleSheet.create({svg:{display:"inline-block",verticalAlign:"text-bottom",flexShrink:0,flexGrow:0,maskSize:"100%",maskRepeat:"no-repeat",maskPosition:"center"}});PhosphorIcon.displayName="PhosphorIcon";
|
|
37
|
+
|
|
38
|
+
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;function renderLabel(){const requiredIcon=jsxRuntime.jsxs(StyledSpan,{style:[styles.textWordBreak,styles.required],"aria-hidden":true,children:[" ","*"]});return jsxRuntime.jsx(React__namespace.Fragment,{children:jsxRuntime.jsxs(wonderBlocksTypography.LabelMedium,{style:[styles.textWordBreak,styles.label,description?styles.labelWithDescription:styles.labelWithNoDescription,stylesProp?.label],tag:"label",htmlFor:fieldId,testId:testId&&`${testId}-label`,id:labelId,children:[label,isRequired&&requiredIcon]})})}function maybeRenderDescription(){if(!description){return null}return jsxRuntime.jsx(React__namespace.Fragment,{children:jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{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.errorSection,errorMessage?styles.errorSectionWithContent: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.LabelSmall,{style:[styles.textWordBreak,styles.errorMessage,styles.error],children:errorMessage})]})})})}function renderField(){return React__namespace.cloneElement(field,{id:fieldId,"aria-describedby":[errorMessage&&errorId,description&&descriptionId].filter(Boolean).join(" "),required:required||field.props.required,error:hasError,testId:testId?`${testId}-field`:undefined})}return jsxRuntime.jsxs(wonderBlocksCore.View,{style:stylesProp?.root,children:[renderLabel(),maybeRenderDescription(),renderField(),maybeRenderError()]})}const styles=aphrodite.StyleSheet.create({label:{color:wonderBlocksTokens.semanticColor.text.primary},labelWithDescription:{paddingBlockEnd:wonderBlocksTokens.sizing.size_040},labelWithNoDescription:{paddingBlockEnd:wonderBlocksTokens.sizing.size_120},description:{color:wonderBlocksTokens.semanticColor.text.secondary,paddingBlockEnd:wonderBlocksTokens.sizing.size_120},errorSection:{flexDirection:"row",gap:wonderBlocksTokens.sizing.size_080},errorSectionWithContent:{paddingBlockStart:wonderBlocksTokens.sizing.size_120},error:{color:wonderBlocksTokens.semanticColor.status.critical.foreground},errorIcon:{marginTop:"1px"},errorMessage:{minWidth:"0"},required:{color:wonderBlocksTokens.semanticColor.status.critical.foreground},textWordBreak:{overflowWrap:"break-word"}});
|
|
38
39
|
|
|
39
40
|
exports.LabeledField = LabeledField;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-labeled-field",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.9",
|
|
4
4
|
"design": "v1",
|
|
5
5
|
"description": "LabeledField handles accessibility and layout for associating labels with form components.",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -13,9 +13,9 @@
|
|
|
13
13
|
},
|
|
14
14
|
"dependencies": {
|
|
15
15
|
"@khanacademy/wonder-blocks-core": "12.3.0",
|
|
16
|
-
"@khanacademy/wonder-blocks-layout": "3.1.
|
|
17
|
-
"@khanacademy/wonder-blocks-tokens": "10.
|
|
18
|
-
"@khanacademy/wonder-blocks-typography": "3.2.
|
|
16
|
+
"@khanacademy/wonder-blocks-layout": "3.1.13",
|
|
17
|
+
"@khanacademy/wonder-blocks-tokens": "10.2.0",
|
|
18
|
+
"@khanacademy/wonder-blocks-typography": "3.2.3"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
21
|
"@phosphor-icons/core": "^2.0.2",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"react": "18.2.0"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
26
|
-
"@khanacademy/wb-dev-build-settings": "3.
|
|
26
|
+
"@khanacademy/wb-dev-build-settings": "3.1.0"
|
|
27
27
|
},
|
|
28
28
|
"scripts": {
|
|
29
29
|
"test": "echo \"Error: no test specified\" && exit 1"
|