@razorpay/blade 12.16.1 → 12.16.2
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/build/lib/native/components/Form/FormLabel.js +1 -1
- package/build/lib/native/components/Form/FormLabel.js.map +1 -1
- package/build/lib/web/development/components/Form/FormLabel.js +1 -1
- package/build/lib/web/development/components/Form/FormLabel.js.map +1 -1
- package/build/lib/web/production/components/Form/FormLabel.js +1 -1
- package/build/lib/web/production/components/Form/FormLabel.js.map +1 -1
- package/package.json +1 -1
|
@@ -25,7 +25,7 @@ import '../../tokens/global/motion.js';
|
|
|
25
25
|
import { size } from '../../tokens/global/size.js';
|
|
26
26
|
import getIn from '../../utils/lodashButBetter/get.js';
|
|
27
27
|
|
|
28
|
-
var FormLabel=function FormLabel(_ref){var _ref$as=_ref.as,as=_ref$as===void 0?'span':_ref$as,_ref$position=_ref.position,position=_ref$position===void 0?'top':_ref$position,_ref$necessityIndicat=_ref.necessityIndicator,necessityIndicator=_ref$necessityIndicat===void 0?'none':_ref$necessityIndicat,accessibilityText=_ref.accessibilityText,children=_ref.children,id=_ref.id,htmlFor=_ref.htmlFor,_ref$size=_ref.size,size$1=_ref$size===void 0?'medium':_ref$size;var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var isDesktop=matchedDeviceType==='desktop';var isReactNative=getPlatformType()==='react-native';var necessityLabel=null;var isLabelLeftPositioned=position==='left'&&isDesktop;if(necessityIndicator==='optional'){necessityLabel=jsx(Text,{variant:"caption",size:labelOptionalIndicatorTextSize[size$1],color:"surface.text.gray.muted",children:"(optional)"});}if(necessityIndicator==='required'){necessityLabel=jsx(Text,{variant:"body",size:isLabelLeftPositioned?'medium':'small',color:"feedback.text.negative.intense",alignSelf:"flex-start",children:"*"});}var computedAccessibilityNode=jsxs(VisuallyHidden,{children:[necessityIndicator!=='none'&&jsx(Text,{children:necessityIndicator}),jsx(Text,{children:accessibilityText})]});var textNode=jsxs(BaseBox,{gap:necessityIndicator==='optional'?'spacing.2':'spacing.0',display:"flex",flexDirection:"row",alignItems:"center",maxHeight:makeSpace(size[36]),children:[jsx(Text,{variant:"body",size:labelTextSize[isLabelLeftPositioned?'left':'top'][size$1],color:
|
|
28
|
+
var FormLabel=function FormLabel(_ref){var _ref$as=_ref.as,as=_ref$as===void 0?'span':_ref$as,_ref$position=_ref.position,position=_ref$position===void 0?'top':_ref$position,_ref$necessityIndicat=_ref.necessityIndicator,necessityIndicator=_ref$necessityIndicat===void 0?'none':_ref$necessityIndicat,accessibilityText=_ref.accessibilityText,children=_ref.children,id=_ref.id,htmlFor=_ref.htmlFor,_ref$size=_ref.size,size$1=_ref$size===void 0?'medium':_ref$size;var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var isDesktop=matchedDeviceType==='desktop';var isReactNative=getPlatformType()==='react-native';var necessityLabel=null;var isLabelLeftPositioned=position==='left'&&isDesktop;if(necessityIndicator==='optional'){necessityLabel=jsx(Text,{variant:"caption",size:labelOptionalIndicatorTextSize[size$1],color:"surface.text.gray.muted",children:"(optional)"});}if(necessityIndicator==='required'){necessityLabel=jsx(Text,{variant:"body",size:isLabelLeftPositioned?'medium':'small',color:"feedback.text.negative.intense",alignSelf:"flex-start",children:"*"});}var computedAccessibilityNode=jsxs(VisuallyHidden,{children:[necessityIndicator!=='none'&&jsx(Text,{children:necessityIndicator}),jsx(Text,{children:accessibilityText})]});var textNode=jsxs(BaseBox,{gap:necessityIndicator==='optional'?'spacing.2':'spacing.0',display:"flex",flexDirection:"row",alignItems:"center",maxHeight:makeSpace(size[36]),children:[jsx(Text,{variant:"body",size:labelTextSize[isLabelLeftPositioned?'left':'top'][size$1],color:isLabelLeftPositioned?'surface.text.gray.subtle':'surface.text.gray.muted',truncateAfterLines:2,weight:"semibold",wordBreak:isLabelLeftPositioned?'break-word':undefined,children:children}),computedAccessibilityNode,necessityLabel]});if(isReactNative){return jsx(BaseBox,{marginRight:"spacing.5",marginBottom:"spacing.2",children:textNode});}var Component=as;var width=isLabelLeftPositioned&&isDesktop?makeSize(labelWidth[size$1]):'auto';return jsx(Component,Object.assign({htmlFor:htmlFor,style:{width:width,flexShrink:0,marginRight:isLabelLeftPositioned?makeSpace(getIn(theme,labelLeftMarginRight[size$1])):makeSpace(getIn(theme,'spacing.0'))},id:id},metaAttribute({name:MetaConstants.FormLabel}),{children:jsx(BaseBox,{marginBottom:isLabelLeftPositioned?'spacing.0':labelMarginBottom[size$1],children:textNode})}));};
|
|
29
29
|
|
|
30
30
|
export { FormLabel };
|
|
31
31
|
//# sourceMappingURL=FormLabel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormLabel.js","sources":["../../../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["import React from 'react';\nimport {\n labelLeftMarginRight,\n labelMarginBottom,\n labelOptionalIndicatorTextSize,\n labelTextSize,\n labelWidth,\n} from './formTokens';\nimport { VisuallyHidden } from '~components/VisuallyHidden';\nimport { Text } from '~components/Typography';\nimport { getPlatformType, makeSize, useBreakpoint } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeSpace } from '~utils/makeSpace';\nimport { size as sizeToken } from '~tokens/global';\nimport getIn from '~utils/lodashButBetter/get';\n\ntype CommonProps = {\n as: 'span' | 'label';\n position?: 'top' | 'left';\n necessityIndicator?: 'required' | 'optional' | 'none';\n accessibilityText?: string;\n children: string | undefined;\n id?: string;\n /**\n * Sets the size of the label\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n};\n\ntype LabelProps = CommonProps & {\n htmlFor: string;\n as: 'label';\n};\n\ntype SpanProps = CommonProps & {\n as: 'span';\n htmlFor?: undefined;\n};\n\ntype FormLabelProps = LabelProps | SpanProps;\n\nexport type FormInputLabelProps = {\n /**\n * Label to be shown for the input field\n */\n label?: string;\n /**\n * Desktop only prop. Default value on mobile will be `top`\n */\n labelPosition?: 'left' | 'top';\n /**\n * Displays `(optional)` when `optional` is passed or `*` when `required` is passed\n */\n necessityIndicator?: 'required' | 'optional' | 'none';\n};\n\nconst FormLabel = ({\n as = 'span',\n position = 'top',\n necessityIndicator = 'none',\n accessibilityText,\n children,\n id,\n htmlFor,\n size = 'medium',\n}: FormLabelProps): React.ReactElement => {\n const { theme } = useTheme();\n const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n const isDesktop = matchedDeviceType === 'desktop';\n const isReactNative = getPlatformType() === 'react-native';\n\n let necessityLabel: React.ReactNode = null;\n\n const isLabelLeftPositioned = position === 'left' && isDesktop;\n\n if (necessityIndicator === 'optional') {\n necessityLabel = (\n <Text\n variant=\"caption\"\n size={labelOptionalIndicatorTextSize[size]}\n color=\"surface.text.gray.muted\"\n >\n (optional)\n </Text>\n );\n }\n if (necessityIndicator === 'required') {\n necessityLabel = (\n <Text\n variant=\"body\"\n size={isLabelLeftPositioned ? 'medium' : 'small'}\n color=\"feedback.text.negative.intense\"\n alignSelf=\"flex-start\"\n >\n *\n </Text>\n );\n }\n\n const computedAccessibilityNode = (\n <VisuallyHidden>\n {necessityIndicator !== 'none' && <Text>{necessityIndicator}</Text>}\n <Text>{accessibilityText}</Text>\n </VisuallyHidden>\n );\n\n const textNode = (\n <BaseBox\n gap={necessityIndicator === 'optional' ? 'spacing.2' : 'spacing.0'}\n display=\"flex\"\n flexDirection=\"row\"\n alignItems=\"center\"\n // flexWrap=\"wrap\"\n maxHeight={makeSpace(sizeToken[36])}\n >\n <Text\n variant=\"body\"\n size={labelTextSize[isLabelLeftPositioned ? 'left' : 'top'][size]}\n color
|
|
1
|
+
{"version":3,"file":"FormLabel.js","sources":["../../../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["import React from 'react';\nimport {\n labelLeftMarginRight,\n labelMarginBottom,\n labelOptionalIndicatorTextSize,\n labelTextSize,\n labelWidth,\n} from './formTokens';\nimport { VisuallyHidden } from '~components/VisuallyHidden';\nimport { Text } from '~components/Typography';\nimport { getPlatformType, makeSize, useBreakpoint } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeSpace } from '~utils/makeSpace';\nimport { size as sizeToken } from '~tokens/global';\nimport getIn from '~utils/lodashButBetter/get';\n\ntype CommonProps = {\n as: 'span' | 'label';\n position?: 'top' | 'left';\n necessityIndicator?: 'required' | 'optional' | 'none';\n accessibilityText?: string;\n children: string | undefined;\n id?: string;\n /**\n * Sets the size of the label\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n};\n\ntype LabelProps = CommonProps & {\n htmlFor: string;\n as: 'label';\n};\n\ntype SpanProps = CommonProps & {\n as: 'span';\n htmlFor?: undefined;\n};\n\ntype FormLabelProps = LabelProps | SpanProps;\n\nexport type FormInputLabelProps = {\n /**\n * Label to be shown for the input field\n */\n label?: string;\n /**\n * Desktop only prop. Default value on mobile will be `top`\n */\n labelPosition?: 'left' | 'top';\n /**\n * Displays `(optional)` when `optional` is passed or `*` when `required` is passed\n */\n necessityIndicator?: 'required' | 'optional' | 'none';\n};\n\nconst FormLabel = ({\n as = 'span',\n position = 'top',\n necessityIndicator = 'none',\n accessibilityText,\n children,\n id,\n htmlFor,\n size = 'medium',\n}: FormLabelProps): React.ReactElement => {\n const { theme } = useTheme();\n const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n const isDesktop = matchedDeviceType === 'desktop';\n const isReactNative = getPlatformType() === 'react-native';\n\n let necessityLabel: React.ReactNode = null;\n\n const isLabelLeftPositioned = position === 'left' && isDesktop;\n\n if (necessityIndicator === 'optional') {\n necessityLabel = (\n <Text\n variant=\"caption\"\n size={labelOptionalIndicatorTextSize[size]}\n color=\"surface.text.gray.muted\"\n >\n (optional)\n </Text>\n );\n }\n if (necessityIndicator === 'required') {\n necessityLabel = (\n <Text\n variant=\"body\"\n size={isLabelLeftPositioned ? 'medium' : 'small'}\n color=\"feedback.text.negative.intense\"\n alignSelf=\"flex-start\"\n >\n *\n </Text>\n );\n }\n\n const computedAccessibilityNode = (\n <VisuallyHidden>\n {necessityIndicator !== 'none' && <Text>{necessityIndicator}</Text>}\n <Text>{accessibilityText}</Text>\n </VisuallyHidden>\n );\n\n const textNode = (\n <BaseBox\n gap={necessityIndicator === 'optional' ? 'spacing.2' : 'spacing.0'}\n display=\"flex\"\n flexDirection=\"row\"\n alignItems=\"center\"\n // flexWrap=\"wrap\"\n maxHeight={makeSpace(sizeToken[36])}\n >\n <Text\n variant=\"body\"\n size={labelTextSize[isLabelLeftPositioned ? 'left' : 'top'][size]}\n color={isLabelLeftPositioned ? 'surface.text.gray.subtle' : 'surface.text.gray.muted'}\n truncateAfterLines={2}\n weight=\"semibold\"\n wordBreak={isLabelLeftPositioned ? 'break-word' : undefined}\n >\n {children}\n </Text>\n {computedAccessibilityNode}\n {/* TODO: Hide from screen readers to prevent double announcement */}\n {necessityLabel}\n </BaseBox>\n );\n\n // What harm can it do?\n if (isReactNative) {\n return (\n <BaseBox marginRight=\"spacing.5\" marginBottom=\"spacing.2\">\n {textNode}\n </BaseBox>\n );\n }\n\n const Component = as;\n // only set 120px label when device is desktop\n const width = isLabelLeftPositioned && isDesktop ? makeSize(labelWidth[size]) : 'auto';\n\n return (\n <Component\n htmlFor={htmlFor}\n style={{\n width,\n flexShrink: 0,\n marginRight: isLabelLeftPositioned\n ? makeSpace(getIn(theme, labelLeftMarginRight[size]))\n : makeSpace(getIn(theme, 'spacing.0')),\n }}\n id={id}\n {...metaAttribute({ name: MetaConstants.FormLabel })}\n >\n <BaseBox marginBottom={isLabelLeftPositioned ? 'spacing.0' : labelMarginBottom[size]}>\n {textNode}\n </BaseBox>\n </Component>\n );\n};\n\nexport { FormLabel };\n"],"names":["FormLabel","_ref","_ref$as","as","_ref$position","position","_ref$necessityIndicat","necessityIndicator","accessibilityText","children","id","htmlFor","_ref$size","size","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","isDesktop","isReactNative","getPlatformType","necessityLabel","isLabelLeftPositioned","_jsx","Text","variant","labelOptionalIndicatorTextSize","color","alignSelf","computedAccessibilityNode","_jsxs","VisuallyHidden","textNode","BaseBox","gap","display","flexDirection","alignItems","maxHeight","makeSpace","sizeToken","labelTextSize","truncateAfterLines","weight","wordBreak","undefined","marginRight","marginBottom","Component","width","makeSize","labelWidth","Object","assign","style","flexShrink","getIn","labelLeftMarginRight","metaAttribute","name","MetaConstants","labelMarginBottom"],"mappings":"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"}
|
|
@@ -83,7 +83,7 @@ var FormLabel = function FormLabel(_ref) {
|
|
|
83
83
|
children: [/*#__PURE__*/jsx(Text, {
|
|
84
84
|
variant: "body",
|
|
85
85
|
size: labelTextSize[isLabelLeftPositioned ? 'left' : 'top'][size$1],
|
|
86
|
-
color:
|
|
86
|
+
color: isLabelLeftPositioned ? 'surface.text.gray.subtle' : 'surface.text.gray.muted',
|
|
87
87
|
truncateAfterLines: 2,
|
|
88
88
|
weight: "semibold",
|
|
89
89
|
wordBreak: isLabelLeftPositioned ? 'break-word' : undefined,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormLabel.js","sources":["../../../../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["import React from 'react';\nimport {\n labelLeftMarginRight,\n labelMarginBottom,\n labelOptionalIndicatorTextSize,\n labelTextSize,\n labelWidth,\n} from './formTokens';\nimport { VisuallyHidden } from '~components/VisuallyHidden';\nimport { Text } from '~components/Typography';\nimport { getPlatformType, makeSize, useBreakpoint } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeSpace } from '~utils/makeSpace';\nimport { size as sizeToken } from '~tokens/global';\nimport getIn from '~utils/lodashButBetter/get';\n\ntype CommonProps = {\n as: 'span' | 'label';\n position?: 'top' | 'left';\n necessityIndicator?: 'required' | 'optional' | 'none';\n accessibilityText?: string;\n children: string | undefined;\n id?: string;\n /**\n * Sets the size of the label\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n};\n\ntype LabelProps = CommonProps & {\n htmlFor: string;\n as: 'label';\n};\n\ntype SpanProps = CommonProps & {\n as: 'span';\n htmlFor?: undefined;\n};\n\ntype FormLabelProps = LabelProps | SpanProps;\n\nexport type FormInputLabelProps = {\n /**\n * Label to be shown for the input field\n */\n label?: string;\n /**\n * Desktop only prop. Default value on mobile will be `top`\n */\n labelPosition?: 'left' | 'top';\n /**\n * Displays `(optional)` when `optional` is passed or `*` when `required` is passed\n */\n necessityIndicator?: 'required' | 'optional' | 'none';\n};\n\nconst FormLabel = ({\n as = 'span',\n position = 'top',\n necessityIndicator = 'none',\n accessibilityText,\n children,\n id,\n htmlFor,\n size = 'medium',\n}: FormLabelProps): React.ReactElement => {\n const { theme } = useTheme();\n const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n const isDesktop = matchedDeviceType === 'desktop';\n const isReactNative = getPlatformType() === 'react-native';\n\n let necessityLabel: React.ReactNode = null;\n\n const isLabelLeftPositioned = position === 'left' && isDesktop;\n\n if (necessityIndicator === 'optional') {\n necessityLabel = (\n <Text\n variant=\"caption\"\n size={labelOptionalIndicatorTextSize[size]}\n color=\"surface.text.gray.muted\"\n >\n (optional)\n </Text>\n );\n }\n if (necessityIndicator === 'required') {\n necessityLabel = (\n <Text\n variant=\"body\"\n size={isLabelLeftPositioned ? 'medium' : 'small'}\n color=\"feedback.text.negative.intense\"\n alignSelf=\"flex-start\"\n >\n *\n </Text>\n );\n }\n\n const computedAccessibilityNode = (\n <VisuallyHidden>\n {necessityIndicator !== 'none' && <Text>{necessityIndicator}</Text>}\n <Text>{accessibilityText}</Text>\n </VisuallyHidden>\n );\n\n const textNode = (\n <BaseBox\n gap={necessityIndicator === 'optional' ? 'spacing.2' : 'spacing.0'}\n display=\"flex\"\n flexDirection=\"row\"\n alignItems=\"center\"\n // flexWrap=\"wrap\"\n maxHeight={makeSpace(sizeToken[36])}\n >\n <Text\n variant=\"body\"\n size={labelTextSize[isLabelLeftPositioned ? 'left' : 'top'][size]}\n color
|
|
1
|
+
{"version":3,"file":"FormLabel.js","sources":["../../../../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["import React from 'react';\nimport {\n labelLeftMarginRight,\n labelMarginBottom,\n labelOptionalIndicatorTextSize,\n labelTextSize,\n labelWidth,\n} from './formTokens';\nimport { VisuallyHidden } from '~components/VisuallyHidden';\nimport { Text } from '~components/Typography';\nimport { getPlatformType, makeSize, useBreakpoint } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeSpace } from '~utils/makeSpace';\nimport { size as sizeToken } from '~tokens/global';\nimport getIn from '~utils/lodashButBetter/get';\n\ntype CommonProps = {\n as: 'span' | 'label';\n position?: 'top' | 'left';\n necessityIndicator?: 'required' | 'optional' | 'none';\n accessibilityText?: string;\n children: string | undefined;\n id?: string;\n /**\n * Sets the size of the label\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n};\n\ntype LabelProps = CommonProps & {\n htmlFor: string;\n as: 'label';\n};\n\ntype SpanProps = CommonProps & {\n as: 'span';\n htmlFor?: undefined;\n};\n\ntype FormLabelProps = LabelProps | SpanProps;\n\nexport type FormInputLabelProps = {\n /**\n * Label to be shown for the input field\n */\n label?: string;\n /**\n * Desktop only prop. Default value on mobile will be `top`\n */\n labelPosition?: 'left' | 'top';\n /**\n * Displays `(optional)` when `optional` is passed or `*` when `required` is passed\n */\n necessityIndicator?: 'required' | 'optional' | 'none';\n};\n\nconst FormLabel = ({\n as = 'span',\n position = 'top',\n necessityIndicator = 'none',\n accessibilityText,\n children,\n id,\n htmlFor,\n size = 'medium',\n}: FormLabelProps): React.ReactElement => {\n const { theme } = useTheme();\n const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n const isDesktop = matchedDeviceType === 'desktop';\n const isReactNative = getPlatformType() === 'react-native';\n\n let necessityLabel: React.ReactNode = null;\n\n const isLabelLeftPositioned = position === 'left' && isDesktop;\n\n if (necessityIndicator === 'optional') {\n necessityLabel = (\n <Text\n variant=\"caption\"\n size={labelOptionalIndicatorTextSize[size]}\n color=\"surface.text.gray.muted\"\n >\n (optional)\n </Text>\n );\n }\n if (necessityIndicator === 'required') {\n necessityLabel = (\n <Text\n variant=\"body\"\n size={isLabelLeftPositioned ? 'medium' : 'small'}\n color=\"feedback.text.negative.intense\"\n alignSelf=\"flex-start\"\n >\n *\n </Text>\n );\n }\n\n const computedAccessibilityNode = (\n <VisuallyHidden>\n {necessityIndicator !== 'none' && <Text>{necessityIndicator}</Text>}\n <Text>{accessibilityText}</Text>\n </VisuallyHidden>\n );\n\n const textNode = (\n <BaseBox\n gap={necessityIndicator === 'optional' ? 'spacing.2' : 'spacing.0'}\n display=\"flex\"\n flexDirection=\"row\"\n alignItems=\"center\"\n // flexWrap=\"wrap\"\n maxHeight={makeSpace(sizeToken[36])}\n >\n <Text\n variant=\"body\"\n size={labelTextSize[isLabelLeftPositioned ? 'left' : 'top'][size]}\n color={isLabelLeftPositioned ? 'surface.text.gray.subtle' : 'surface.text.gray.muted'}\n truncateAfterLines={2}\n weight=\"semibold\"\n wordBreak={isLabelLeftPositioned ? 'break-word' : undefined}\n >\n {children}\n </Text>\n {computedAccessibilityNode}\n {/* TODO: Hide from screen readers to prevent double announcement */}\n {necessityLabel}\n </BaseBox>\n );\n\n // What harm can it do?\n if (isReactNative) {\n return (\n <BaseBox marginRight=\"spacing.5\" marginBottom=\"spacing.2\">\n {textNode}\n </BaseBox>\n );\n }\n\n const Component = as;\n // only set 120px label when device is desktop\n const width = isLabelLeftPositioned && isDesktop ? makeSize(labelWidth[size]) : 'auto';\n\n return (\n <Component\n htmlFor={htmlFor}\n style={{\n width,\n flexShrink: 0,\n marginRight: isLabelLeftPositioned\n ? makeSpace(getIn(theme, labelLeftMarginRight[size]))\n : makeSpace(getIn(theme, 'spacing.0')),\n }}\n id={id}\n {...metaAttribute({ name: MetaConstants.FormLabel })}\n >\n <BaseBox marginBottom={isLabelLeftPositioned ? 'spacing.0' : labelMarginBottom[size]}>\n {textNode}\n </BaseBox>\n </Component>\n );\n};\n\nexport { FormLabel };\n"],"names":["FormLabel","_ref","_ref$as","as","_ref$position","position","_ref$necessityIndicat","necessityIndicator","accessibilityText","children","id","htmlFor","_ref$size","size","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","isDesktop","isReactNative","getPlatformType","necessityLabel","isLabelLeftPositioned","_jsx","Text","variant","labelOptionalIndicatorTextSize","color","alignSelf","computedAccessibilityNode","_jsxs","VisuallyHidden","textNode","BaseBox","gap","display","flexDirection","alignItems","maxHeight","makeSpace","sizeToken","labelTextSize","truncateAfterLines","weight","wordBreak","undefined","marginRight","marginBottom","Component","width","makeSize","labelWidth","_objectSpread","style","flexShrink","getIn","labelLeftMarginRight","metaAttribute","name","MetaConstants","labelMarginBottom"],"mappings":"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"}
|
|
@@ -83,7 +83,7 @@ var FormLabel = function FormLabel(_ref) {
|
|
|
83
83
|
children: [/*#__PURE__*/jsx(Text, {
|
|
84
84
|
variant: "body",
|
|
85
85
|
size: labelTextSize[isLabelLeftPositioned ? 'left' : 'top'][size$1],
|
|
86
|
-
color:
|
|
86
|
+
color: isLabelLeftPositioned ? 'surface.text.gray.subtle' : 'surface.text.gray.muted',
|
|
87
87
|
truncateAfterLines: 2,
|
|
88
88
|
weight: "semibold",
|
|
89
89
|
wordBreak: isLabelLeftPositioned ? 'break-word' : undefined,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormLabel.js","sources":["../../../../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["import React from 'react';\nimport {\n labelLeftMarginRight,\n labelMarginBottom,\n labelOptionalIndicatorTextSize,\n labelTextSize,\n labelWidth,\n} from './formTokens';\nimport { VisuallyHidden } from '~components/VisuallyHidden';\nimport { Text } from '~components/Typography';\nimport { getPlatformType, makeSize, useBreakpoint } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeSpace } from '~utils/makeSpace';\nimport { size as sizeToken } from '~tokens/global';\nimport getIn from '~utils/lodashButBetter/get';\n\ntype CommonProps = {\n as: 'span' | 'label';\n position?: 'top' | 'left';\n necessityIndicator?: 'required' | 'optional' | 'none';\n accessibilityText?: string;\n children: string | undefined;\n id?: string;\n /**\n * Sets the size of the label\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n};\n\ntype LabelProps = CommonProps & {\n htmlFor: string;\n as: 'label';\n};\n\ntype SpanProps = CommonProps & {\n as: 'span';\n htmlFor?: undefined;\n};\n\ntype FormLabelProps = LabelProps | SpanProps;\n\nexport type FormInputLabelProps = {\n /**\n * Label to be shown for the input field\n */\n label?: string;\n /**\n * Desktop only prop. Default value on mobile will be `top`\n */\n labelPosition?: 'left' | 'top';\n /**\n * Displays `(optional)` when `optional` is passed or `*` when `required` is passed\n */\n necessityIndicator?: 'required' | 'optional' | 'none';\n};\n\nconst FormLabel = ({\n as = 'span',\n position = 'top',\n necessityIndicator = 'none',\n accessibilityText,\n children,\n id,\n htmlFor,\n size = 'medium',\n}: FormLabelProps): React.ReactElement => {\n const { theme } = useTheme();\n const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n const isDesktop = matchedDeviceType === 'desktop';\n const isReactNative = getPlatformType() === 'react-native';\n\n let necessityLabel: React.ReactNode = null;\n\n const isLabelLeftPositioned = position === 'left' && isDesktop;\n\n if (necessityIndicator === 'optional') {\n necessityLabel = (\n <Text\n variant=\"caption\"\n size={labelOptionalIndicatorTextSize[size]}\n color=\"surface.text.gray.muted\"\n >\n (optional)\n </Text>\n );\n }\n if (necessityIndicator === 'required') {\n necessityLabel = (\n <Text\n variant=\"body\"\n size={isLabelLeftPositioned ? 'medium' : 'small'}\n color=\"feedback.text.negative.intense\"\n alignSelf=\"flex-start\"\n >\n *\n </Text>\n );\n }\n\n const computedAccessibilityNode = (\n <VisuallyHidden>\n {necessityIndicator !== 'none' && <Text>{necessityIndicator}</Text>}\n <Text>{accessibilityText}</Text>\n </VisuallyHidden>\n );\n\n const textNode = (\n <BaseBox\n gap={necessityIndicator === 'optional' ? 'spacing.2' : 'spacing.0'}\n display=\"flex\"\n flexDirection=\"row\"\n alignItems=\"center\"\n // flexWrap=\"wrap\"\n maxHeight={makeSpace(sizeToken[36])}\n >\n <Text\n variant=\"body\"\n size={labelTextSize[isLabelLeftPositioned ? 'left' : 'top'][size]}\n color
|
|
1
|
+
{"version":3,"file":"FormLabel.js","sources":["../../../../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["import React from 'react';\nimport {\n labelLeftMarginRight,\n labelMarginBottom,\n labelOptionalIndicatorTextSize,\n labelTextSize,\n labelWidth,\n} from './formTokens';\nimport { VisuallyHidden } from '~components/VisuallyHidden';\nimport { Text } from '~components/Typography';\nimport { getPlatformType, makeSize, useBreakpoint } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeSpace } from '~utils/makeSpace';\nimport { size as sizeToken } from '~tokens/global';\nimport getIn from '~utils/lodashButBetter/get';\n\ntype CommonProps = {\n as: 'span' | 'label';\n position?: 'top' | 'left';\n necessityIndicator?: 'required' | 'optional' | 'none';\n accessibilityText?: string;\n children: string | undefined;\n id?: string;\n /**\n * Sets the size of the label\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n};\n\ntype LabelProps = CommonProps & {\n htmlFor: string;\n as: 'label';\n};\n\ntype SpanProps = CommonProps & {\n as: 'span';\n htmlFor?: undefined;\n};\n\ntype FormLabelProps = LabelProps | SpanProps;\n\nexport type FormInputLabelProps = {\n /**\n * Label to be shown for the input field\n */\n label?: string;\n /**\n * Desktop only prop. Default value on mobile will be `top`\n */\n labelPosition?: 'left' | 'top';\n /**\n * Displays `(optional)` when `optional` is passed or `*` when `required` is passed\n */\n necessityIndicator?: 'required' | 'optional' | 'none';\n};\n\nconst FormLabel = ({\n as = 'span',\n position = 'top',\n necessityIndicator = 'none',\n accessibilityText,\n children,\n id,\n htmlFor,\n size = 'medium',\n}: FormLabelProps): React.ReactElement => {\n const { theme } = useTheme();\n const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n const isDesktop = matchedDeviceType === 'desktop';\n const isReactNative = getPlatformType() === 'react-native';\n\n let necessityLabel: React.ReactNode = null;\n\n const isLabelLeftPositioned = position === 'left' && isDesktop;\n\n if (necessityIndicator === 'optional') {\n necessityLabel = (\n <Text\n variant=\"caption\"\n size={labelOptionalIndicatorTextSize[size]}\n color=\"surface.text.gray.muted\"\n >\n (optional)\n </Text>\n );\n }\n if (necessityIndicator === 'required') {\n necessityLabel = (\n <Text\n variant=\"body\"\n size={isLabelLeftPositioned ? 'medium' : 'small'}\n color=\"feedback.text.negative.intense\"\n alignSelf=\"flex-start\"\n >\n *\n </Text>\n );\n }\n\n const computedAccessibilityNode = (\n <VisuallyHidden>\n {necessityIndicator !== 'none' && <Text>{necessityIndicator}</Text>}\n <Text>{accessibilityText}</Text>\n </VisuallyHidden>\n );\n\n const textNode = (\n <BaseBox\n gap={necessityIndicator === 'optional' ? 'spacing.2' : 'spacing.0'}\n display=\"flex\"\n flexDirection=\"row\"\n alignItems=\"center\"\n // flexWrap=\"wrap\"\n maxHeight={makeSpace(sizeToken[36])}\n >\n <Text\n variant=\"body\"\n size={labelTextSize[isLabelLeftPositioned ? 'left' : 'top'][size]}\n color={isLabelLeftPositioned ? 'surface.text.gray.subtle' : 'surface.text.gray.muted'}\n truncateAfterLines={2}\n weight=\"semibold\"\n wordBreak={isLabelLeftPositioned ? 'break-word' : undefined}\n >\n {children}\n </Text>\n {computedAccessibilityNode}\n {/* TODO: Hide from screen readers to prevent double announcement */}\n {necessityLabel}\n </BaseBox>\n );\n\n // What harm can it do?\n if (isReactNative) {\n return (\n <BaseBox marginRight=\"spacing.5\" marginBottom=\"spacing.2\">\n {textNode}\n </BaseBox>\n );\n }\n\n const Component = as;\n // only set 120px label when device is desktop\n const width = isLabelLeftPositioned && isDesktop ? makeSize(labelWidth[size]) : 'auto';\n\n return (\n <Component\n htmlFor={htmlFor}\n style={{\n width,\n flexShrink: 0,\n marginRight: isLabelLeftPositioned\n ? makeSpace(getIn(theme, labelLeftMarginRight[size]))\n : makeSpace(getIn(theme, 'spacing.0')),\n }}\n id={id}\n {...metaAttribute({ name: MetaConstants.FormLabel })}\n >\n <BaseBox marginBottom={isLabelLeftPositioned ? 'spacing.0' : labelMarginBottom[size]}>\n {textNode}\n </BaseBox>\n </Component>\n );\n};\n\nexport { FormLabel };\n"],"names":["FormLabel","_ref","_ref$as","as","_ref$position","position","_ref$necessityIndicat","necessityIndicator","accessibilityText","children","id","htmlFor","_ref$size","size","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","isDesktop","isReactNative","getPlatformType","necessityLabel","isLabelLeftPositioned","_jsx","Text","variant","labelOptionalIndicatorTextSize","color","alignSelf","computedAccessibilityNode","_jsxs","VisuallyHidden","textNode","BaseBox","gap","display","flexDirection","alignItems","maxHeight","makeSpace","sizeToken","labelTextSize","truncateAfterLines","weight","wordBreak","undefined","marginRight","marginBottom","Component","width","makeSize","labelWidth","_objectSpread","style","flexShrink","getIn","labelLeftMarginRight","metaAttribute","name","MetaConstants","labelMarginBottom"],"mappings":"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"}
|