@fluentui/react-field 9.0.0-alpha.15 → 9.0.0-alpha.16

Sign up to get free protection for your applications and to get access to all the features.
Files changed (21) hide show
  1. package/CHANGELOG.json +34 -1
  2. package/CHANGELOG.md +14 -2
  3. package/lib/components/Field/renderField.js +3 -3
  4. package/lib/components/Field/renderField.js.map +1 -1
  5. package/lib/components/Field/useField.js +2 -1
  6. package/lib/components/Field/useField.js.map +1 -1
  7. package/lib/components/Field/useFieldStyles.js +39 -58
  8. package/lib/components/Field/useFieldStyles.js.map +1 -1
  9. package/lib-amd/components/Field/renderField.js +3 -2
  10. package/lib-amd/components/Field/renderField.js.map +1 -1
  11. package/lib-amd/components/Field/useField.js +1 -0
  12. package/lib-amd/components/Field/useField.js.map +1 -1
  13. package/lib-amd/components/Field/useFieldStyles.js +48 -45
  14. package/lib-amd/components/Field/useFieldStyles.js.map +1 -1
  15. package/lib-commonjs/components/Field/renderField.js +3 -3
  16. package/lib-commonjs/components/Field/renderField.js.map +1 -1
  17. package/lib-commonjs/components/Field/useField.js +2 -1
  18. package/lib-commonjs/components/Field/useField.js.map +1 -1
  19. package/lib-commonjs/components/Field/useFieldStyles.js +38 -57
  20. package/lib-commonjs/components/Field/useFieldStyles.js.map +1 -1
  21. package/package.json +1 -1
package/CHANGELOG.json CHANGED
@@ -2,7 +2,40 @@
2
2
  "name": "@fluentui/react-field",
3
3
  "entries": [
4
4
  {
5
- "date": "Mon, 16 Jan 2023 08:35:37 GMT",
5
+ "date": "Mon, 23 Jan 2023 16:41:42 GMT",
6
+ "tag": "@fluentui/react-field_v9.0.0-alpha.16",
7
+ "version": "9.0.0-alpha.16",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "behowell@microsoft.com",
12
+ "package": "@fluentui/react-field",
13
+ "commit": "1f145044a1ef3707e0724d75f9b70e7d2af69375",
14
+ "comment": "chore: Simplify Field layout styles"
15
+ },
16
+ {
17
+ "author": "behowell@microsoft.com",
18
+ "package": "@fluentui/react-field",
19
+ "commit": "b04b2f0c02f2ccd7960905a886ce27f2321fee72",
20
+ "comment": "fix: Stretch Field components to full width"
21
+ },
22
+ {
23
+ "author": "behowell@microsoft.com",
24
+ "package": "@fluentui/react-field",
25
+ "commit": "48a6fc95e6eb7530c162390fb70db7fac88b15ab",
26
+ "comment": "fix: Update Field label padding to match spec"
27
+ },
28
+ {
29
+ "author": "behowell@microsoft.com",
30
+ "package": "@fluentui/react-field",
31
+ "commit": "014041b7447b02856ae50638de71bdb829b0a759",
32
+ "comment": "fix: Field sets role=\"alert\" on its error message so it is announced by screen readers"
33
+ }
34
+ ]
35
+ }
36
+ },
37
+ {
38
+ "date": "Mon, 16 Jan 2023 08:39:01 GMT",
6
39
  "tag": "@fluentui/react-field_v9.0.0-alpha.15",
7
40
  "version": "9.0.0-alpha.15",
8
41
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,24 @@
1
1
  # Change Log - @fluentui/react-field
2
2
 
3
- This log was last generated on Mon, 16 Jan 2023 08:35:37 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 23 Jan 2023 16:41:42 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-alpha.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.16)
8
+
9
+ Mon, 23 Jan 2023 16:41:42 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.15..@fluentui/react-field_v9.0.0-alpha.16)
11
+
12
+ ### Changes
13
+
14
+ - chore: Simplify Field layout styles ([PR #26352](https://github.com/microsoft/fluentui/pull/26352) by behowell@microsoft.com)
15
+ - fix: Stretch Field components to full width ([PR #26412](https://github.com/microsoft/fluentui/pull/26412) by behowell@microsoft.com)
16
+ - fix: Update Field label padding to match spec ([PR #26413](https://github.com/microsoft/fluentui/pull/26413) by behowell@microsoft.com)
17
+ - fix: Field sets role="alert" on its error message so it is announced by screen readers ([PR #26414](https://github.com/microsoft/fluentui/pull/26414) by behowell@microsoft.com)
18
+
7
19
  ## [9.0.0-alpha.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.15)
8
20
 
9
- Mon, 16 Jan 2023 08:35:37 GMT
21
+ Mon, 16 Jan 2023 08:39:01 GMT
10
22
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.14..@fluentui/react-field_v9.0.0-alpha.15)
11
23
 
12
24
  ### Changes
package/lib/components/Field/renderField.js CHANGED
@@ -14,11 +14,11 @@ export const renderField_unstable = state => {
14
14
  ...slotProps.label
15
15
  }), slots.control && /*#__PURE__*/React.createElement(slots.control, {
16
16
  ...slotProps.control
17
- }), slots.validationMessage && slots.validationMessageIcon && /*#__PURE__*/React.createElement(slots.validationMessageIcon, {
18
- ...slotProps.validationMessageIcon
19
17
  }), slots.validationMessage && /*#__PURE__*/React.createElement(slots.validationMessage, {
20
18
  ...slotProps.validationMessage
21
- }), slots.hint && /*#__PURE__*/React.createElement(slots.hint, {
19
+ }, slots.validationMessageIcon && /*#__PURE__*/React.createElement(slots.validationMessageIcon, {
20
+ ...slotProps.validationMessageIcon
21
+ }), slotProps.validationMessage.children), slots.hint && /*#__PURE__*/React.createElement(slots.hint, {
22
22
  ...slotProps.hint
23
23
  }));
24
24
  };
package/lib/components/Field/renderField.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,oBAAoB,GAA4BC,KAAoB,IAAI;EACnF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAA2BE,KAAiC,CAAC;EAElG,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,GAC3BF,KAAK,CAACG,KAAK,iBAAIP,oBAACI,KAAK,CAACG,KAAK;IAAA,GAAKF,SAAS,CAACE;EAAK,EAAI,EAEnDH,KAAK,CAACI,OAAO,iBAAIR,oBAACI,KAAK,CAACI,OAAO;IAAA,GAAMH,SAAS,CAACG;EAAe,EAAI,EAClEJ,KAAK,CAACK,iBAAiB,IAAIL,KAAK,CAACM,qBAAqB,iBACrDV,oBAACI,KAAK,CAACM,qBAAqB;IAAA,GAAKL,SAAS,CAACK;EAAqB,EACjE,EACAN,KAAK,CAACK,iBAAiB,iBAAIT,oBAACI,KAAK,CAACK,iBAAiB;IAAA,GAAKJ,SAAS,CAACI;EAAiB,EAAI,EACvFL,KAAK,CAACO,IAAI,iBAAIX,oBAACI,KAAK,CAACO,IAAI;IAAA,GAAKN,SAAS,CAACM;EAAI,EAAI,CACtC;AAEjB,CAAC","names":["React","getSlots","renderField_unstable","state","slots","slotProps","root","label","control","validationMessage","validationMessageIcon","hint"],"sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/renderField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FieldControl, FieldSlots, FieldState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = <T extends FieldControl>(state: FieldState<T>) => {\n const { slots, slotProps } = getSlots<FieldSlots<FieldControl>>(state as FieldState<FieldControl>);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.label && <slots.label {...slotProps.label} />}\n {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n {slots.control && <slots.control {...(slotProps.control as any)} />}\n {slots.validationMessage && slots.validationMessageIcon && (\n <slots.validationMessageIcon {...slotProps.validationMessageIcon} />\n )}\n {slots.validationMessage && <slots.validationMessage {...slotProps.validationMessage} />}\n {slots.hint && <slots.hint {...slotProps.hint} />}\n </slots.root>\n );\n};\n"]}
1
+ {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,oBAAoB,GAA4BC,KAAoB,IAAI;EACnF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAA2BE,KAAiC,CAAC;EAElG,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,GAC3BF,KAAK,CAACG,KAAK,iBAAIP,oBAACI,KAAK,CAACG,KAAK;IAAA,GAAKF,SAAS,CAACE;EAAK,EAAI,EAEnDH,KAAK,CAACI,OAAO,iBAAIR,oBAACI,KAAK,CAACI,OAAO;IAAA,GAAMH,SAAS,CAACG;EAAe,EAAI,EAClEJ,KAAK,CAACK,iBAAiB,iBACtBT,oBAACI,KAAK,CAACK,iBAAiB;IAAA,GAAKJ,SAAS,CAACI;EAAiB,GACrDL,KAAK,CAACM,qBAAqB,iBAAIV,oBAACI,KAAK,CAACM,qBAAqB;IAAA,GAAKL,SAAS,CAACK;EAAqB,EAAI,EACnGL,SAAS,CAACI,iBAAiB,CAACE,QAAQ,CAExC,EACAP,KAAK,CAACQ,IAAI,iBAAIZ,oBAACI,KAAK,CAACQ,IAAI;IAAA,GAAKP,SAAS,CAACO;EAAI,EAAI,CACtC;AAEjB,CAAC","names":["React","getSlots","renderField_unstable","state","slots","slotProps","root","label","control","validationMessage","validationMessageIcon","children","hint"],"sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/renderField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FieldControl, FieldSlots, FieldState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = <T extends FieldControl>(state: FieldState<T>) => {\n const { slots, slotProps } = getSlots<FieldSlots<FieldControl>>(state as FieldState<FieldControl>);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.label && <slots.label {...slotProps.label} />}\n {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n {slots.control && <slots.control {...(slotProps.control as any)} />}\n {slots.validationMessage && (\n <slots.validationMessage {...slotProps.validationMessage}>\n {slots.validationMessageIcon && <slots.validationMessageIcon {...slotProps.validationMessageIcon} />}\n {slotProps.validationMessage.children}\n </slots.validationMessage>\n )}\n {slots.hint && <slots.hint {...slotProps.hint} />}\n </slots.root>\n );\n};\n"]}
package/lib/components/Field/useField.js CHANGED
@@ -75,7 +75,8 @@ export const useField_unstable = (props, ref, params) => {
75
75
 
76
76
  const validationMessage = resolveShorthand(fieldProps.validationMessage, {
77
77
  defaultProps: {
78
- id: baseId + '__validationMessage'
78
+ id: baseId + '__validationMessage',
79
+ role: validationState === 'error' ? 'alert' : undefined
79
80
  }
80
81
  });
81
82
  const hint = resolveShorthand(fieldProps.hint, {
package/lib/components/Field/useField.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"mappings":"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","names":["React","CheckmarkCircle12Filled","ErrorCircle12Filled","Warning12Filled","Label","getNativeElementProps","resolveShorthand","useId","validationMessageIcons","error","warning","success","getPartitionedFieldProps","props","className","control","hint","label","orientation","root","style","validationMessage","validationMessageIcon","validationState","restOfProps","fieldProps","useField_unstable","ref","params","controlProps","labelConnection","ariaInvalidOnError","baseId","required","defaultProps","id","size","undefined","children","filter","Boolean","join","htmlFor","state","classNames","components","component"],"sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/useField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { FieldConfig, FieldControl, FieldPropsWithOptionalComponentProps, FieldState } from './Field.types';\n\nconst validationMessageIcons = {\n error: <ErrorCircle12Filled />,\n warning: <Warning12Filled />,\n success: <CheckmarkCircle12Filled />,\n} as const;\n\n/**\n * Partition the props used by the Field itself, from the props that are passed to the underlying field component.\n */\nexport const getPartitionedFieldProps = (props: FieldPropsWithOptionalComponentProps<FieldControl>) => {\n const {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n ...restOfProps\n } = props;\n\n const fieldProps = {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n };\n\n return [fieldProps, restOfProps] as const;\n};\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the control slot (primary slot)\n * @param params - Configuration parameters for this Field\n */\nexport const useField_unstable = <T extends FieldControl>(\n props: FieldPropsWithOptionalComponentProps<T>,\n ref: React.Ref<HTMLElement>,\n params: FieldConfig<T>,\n): FieldState<T> => {\n const [fieldProps, controlProps] = getPartitionedFieldProps(props);\n const { orientation = 'vertical', validationState } = fieldProps;\n const { labelConnection = 'htmlFor', ariaInvalidOnError = true } = params;\n\n const baseId = useId('field-');\n\n const root = resolveShorthand(fieldProps.root, {\n required: true,\n defaultProps: getNativeElementProps('div', fieldProps),\n });\n\n const label = resolveShorthand(fieldProps.label, {\n defaultProps: {\n id: baseId + '__label',\n required: controlProps.required,\n size: typeof controlProps.size === 'string' ? controlProps.size : undefined,\n // htmlFor is handled below\n },\n });\n\n const validationMessage = resolveShorthand(fieldProps.validationMessage, {\n defaultProps: {\n id: baseId + '__validationMessage',\n },\n });\n\n const hint = resolveShorthand(fieldProps.hint, {\n defaultProps: {\n id: baseId + '__hint',\n },\n });\n\n const validationMessageIcon = resolveShorthand(fieldProps.validationMessageIcon, {\n required: !!validationState,\n defaultProps: {\n children: validationState ? validationMessageIcons[validationState] : undefined,\n },\n });\n\n // Hook up aria props on the control\n if (label && labelConnection === 'aria-labelledby') {\n controlProps['aria-labelledby'] ??= label.id;\n }\n\n if (validationMessage || hint) {\n // The control is described by the validation message, or hint, or both\n // We also preserve and append any aria-describedby supplied by the user\n // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933\n controlProps['aria-describedby'] = [validationMessage?.id, hint?.id, controlProps['aria-describedby']]\n .filter(Boolean)\n .join(' ');\n }\n\n if (validationState === 'error' && ariaInvalidOnError) {\n controlProps['aria-invalid'] ??= true;\n }\n\n const control = resolveShorthand(fieldProps.control, {\n required: true,\n defaultProps: {\n ref,\n id: baseId + '__control',\n ...controlProps,\n },\n });\n\n if (label && labelConnection === 'htmlFor') {\n label.htmlFor ??= control.id;\n }\n\n const state: FieldState<FieldControl> = {\n orientation,\n validationState,\n classNames: params.classNames,\n components: {\n root: 'div',\n control: params.component,\n label: Label,\n validationMessage: 'div',\n validationMessageIcon: 'span',\n hint: 'div',\n },\n root,\n control,\n label,\n validationMessageIcon,\n validationMessage,\n hint,\n };\n\n return state as FieldState<T>;\n};\n"]}
1
+ {"version":3,"mappings":"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","names":["React","CheckmarkCircle12Filled","ErrorCircle12Filled","Warning12Filled","Label","getNativeElementProps","resolveShorthand","useId","validationMessageIcons","error","warning","success","getPartitionedFieldProps","props","className","control","hint","label","orientation","root","style","validationMessage","validationMessageIcon","validationState","restOfProps","fieldProps","useField_unstable","ref","params","controlProps","labelConnection","ariaInvalidOnError","baseId","required","defaultProps","id","size","undefined","role","children","filter","Boolean","join","htmlFor","state","classNames","components","component"],"sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/useField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { FieldConfig, FieldControl, FieldPropsWithOptionalComponentProps, FieldState } from './Field.types';\n\nconst validationMessageIcons = {\n error: <ErrorCircle12Filled />,\n warning: <Warning12Filled />,\n success: <CheckmarkCircle12Filled />,\n} as const;\n\n/**\n * Partition the props used by the Field itself, from the props that are passed to the underlying field component.\n */\nexport const getPartitionedFieldProps = (props: FieldPropsWithOptionalComponentProps<FieldControl>) => {\n const {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n ...restOfProps\n } = props;\n\n const fieldProps = {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n };\n\n return [fieldProps, restOfProps] as const;\n};\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the control slot (primary slot)\n * @param params - Configuration parameters for this Field\n */\nexport const useField_unstable = <T extends FieldControl>(\n props: FieldPropsWithOptionalComponentProps<T>,\n ref: React.Ref<HTMLElement>,\n params: FieldConfig<T>,\n): FieldState<T> => {\n const [fieldProps, controlProps] = getPartitionedFieldProps(props);\n const { orientation = 'vertical', validationState } = fieldProps;\n const { labelConnection = 'htmlFor', ariaInvalidOnError = true } = params;\n\n const baseId = useId('field-');\n\n const root = resolveShorthand(fieldProps.root, {\n required: true,\n defaultProps: getNativeElementProps('div', fieldProps),\n });\n\n const label = resolveShorthand(fieldProps.label, {\n defaultProps: {\n id: baseId + '__label',\n required: controlProps.required,\n size: typeof controlProps.size === 'string' ? controlProps.size : undefined,\n // htmlFor is handled below\n },\n });\n\n const validationMessage = resolveShorthand(fieldProps.validationMessage, {\n defaultProps: {\n id: baseId + '__validationMessage',\n role: validationState === 'error' ? 'alert' : undefined,\n },\n });\n\n const hint = resolveShorthand(fieldProps.hint, {\n defaultProps: {\n id: baseId + '__hint',\n },\n });\n\n const validationMessageIcon = resolveShorthand(fieldProps.validationMessageIcon, {\n required: !!validationState,\n defaultProps: {\n children: validationState ? validationMessageIcons[validationState] : undefined,\n },\n });\n\n // Hook up aria props on the control\n if (label && labelConnection === 'aria-labelledby') {\n controlProps['aria-labelledby'] ??= label.id;\n }\n\n if (validationMessage || hint) {\n // The control is described by the validation message, or hint, or both\n // We also preserve and append any aria-describedby supplied by the user\n // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933\n controlProps['aria-describedby'] = [validationMessage?.id, hint?.id, controlProps['aria-describedby']]\n .filter(Boolean)\n .join(' ');\n }\n\n if (validationState === 'error' && ariaInvalidOnError) {\n controlProps['aria-invalid'] ??= true;\n }\n\n const control = resolveShorthand(fieldProps.control, {\n required: true,\n defaultProps: {\n ref,\n id: baseId + '__control',\n ...controlProps,\n },\n });\n\n if (label && labelConnection === 'htmlFor') {\n label.htmlFor ??= control.id;\n }\n\n const state: FieldState<FieldControl> = {\n orientation,\n validationState,\n classNames: params.classNames,\n components: {\n root: 'div',\n control: params.component,\n label: Label,\n validationMessage: 'div',\n validationMessageIcon: 'span',\n hint: 'div',\n },\n root,\n control,\n label,\n validationMessageIcon,\n validationMessage,\n hint,\n };\n\n return state as FieldState<T>;\n};\n"]}
package/lib/components/Field/useFieldStyles.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { tokens, typographyStyles } from '@fluentui/react-theme';
2
- import { __styles, mergeClasses } from '@griffel/react';
2
+ import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
3
3
  export const getFieldClassNames = name => ({
4
4
  root: `fui-${name}`,
5
5
  control: `fui-${name}__control`,
@@ -8,83 +8,62 @@ export const getFieldClassNames = name => ({
8
8
  validationMessageIcon: `fui-${name}__validationMessageIcon`,
9
9
  hint: `fui-${name}__hint`
10
10
  });
11
+ // Size of the icon in the validation message
12
+ const iconSize = '12px';
11
13
  /**
12
14
  * Styles for the root slot
13
15
  */
14
16
  const useRootStyles = /*#__PURE__*/__styles({
15
17
  base: {
16
- mc9l5x: "f13qh94s",
17
- Bxotwcr: "f14np9u9",
18
- Budl1dq: "fjxzuw",
19
- zoa1oz: "f6nraym",
20
- B7hvi0a: "f1m2n5bn"
18
+ mc9l5x: "f13qh94s"
21
19
  },
22
20
  horizontal: {
23
- Budl1dq: "fwibhjm",
24
- zoa1oz: "f7bqb3c"
21
+ Budl1dq: "f2wwaib",
22
+ wkccdc: "f1645dqt"
25
23
  },
26
- label: {
27
- Br312pm: "f150pcdf",
28
- Bw0ie65: "fwm4whi",
29
- Ijaq50: "f1tty21m",
30
- nk6f5a: "f19648ye"
31
- },
32
- control: {
33
- Br312pm: "f1bfa6ju",
34
- Bw0ie65: "fl3lap4"
35
- },
36
- validationIcon: {
37
- Br312pm: "ftfzah7",
38
- Bw0ie65: "f1fih8f9"
39
- },
40
- validationMessage: {
41
- Br312pm: "f1n69xcw",
42
- Bw0ie65: "f1hw1m5m"
43
- },
44
- hint: {
45
- Br312pm: "fbug73u",
46
- Bw0ie65: "fbtgo1w"
24
+ horizontalNoLabel: {
25
+ uwmqm3: ["f15jqgz8", "fggqkej"],
26
+ Budl1dq: "f1c2z91y"
47
27
  }
48
28
  }, {
49
- d: [".f13qh94s{display:grid;}", ".f14np9u9{grid-auto-flow:row;}", ".fjxzuw{grid-template-columns:auto 1fr;}", ".f6nraym{grid-template-areas:\"label label\" \"control control\" \"validationIcon validationMessage\" \"hint hint\";}", ".f1m2n5bn{justify-items:start;}", ".fwibhjm{grid-template-columns:33% auto 1fr;}", ".f7bqb3c{grid-template-areas:\"label control control\" \"label validationIcon validationMessage\" \"label hint hint\" \"label . .\";}", ".f150pcdf{grid-column-start:label;}", ".fwm4whi{grid-column-end:label;}", ".f1tty21m{grid-row-start:label;}", ".f19648ye{grid-row-end:label;}", ".f1bfa6ju{grid-column-start:control;}", ".fl3lap4{grid-column-end:control;}", ".ftfzah7{grid-column-start:validationIcon;}", ".f1fih8f9{grid-column-end:validationIcon;}", ".f1n69xcw{grid-column-start:validationMessage;}", ".f1hw1m5m{grid-column-end:validationMessage;}", ".fbug73u{grid-column-start:hint;}", ".fbtgo1w{grid-column-end:hint;}"]
29
+ d: [".f13qh94s{display:grid;}", ".f2wwaib{grid-template-columns:33% 1fr;}", ".f1645dqt{grid-template-rows:auto auto auto 1fr;}", ".f15jqgz8{padding-left:33%;}", ".fggqkej{padding-right:33%;}", ".f1c2z91y{grid-template-columns:1fr;}"]
50
30
  });
51
31
  const useLabelStyles = /*#__PURE__*/__styles({
52
32
  base: {
53
- B6of3ja: "fg30ohd",
33
+ z8tnut: "fclwglc",
34
+ Byoj8tv: "fywfov9"
35
+ },
36
+ large: {
37
+ z8tnut: "f1sl3k7w",
38
+ Byoj8tv: "f1brlhvm"
39
+ },
40
+ vertical: {
54
41
  jrapky: "fyacil5"
55
42
  },
43
+ verticalLarge: {
44
+ jrapky: "f8l5zjj"
45
+ },
56
46
  horizontal: {
57
47
  t21cq0: ["fkujibs", "f199hnxi"],
58
- qb2dma: "f9h729m",
59
- Bdqf98w: "fhb5wj7"
48
+ Ijaq50: "f16hsg94",
49
+ nk6f5a: "f1nzqi2z"
60
50
  }
61
51
  }, {
62
- d: [".fg30ohd{margin-top:var(--spacingVerticalXXS);}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".fhb5wj7{justify-self:stretch;}"]
52
+ d: [".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}", ".f1sl3k7w{padding-top:1px;}", ".f1brlhvm{padding-bottom:1px;}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".f16hsg94{grid-row-start:1;}", ".f1nzqi2z{grid-row-end:-1;}"]
63
53
  });
54
+ const useSecondaryTextBaseClassName = /*#__PURE__*/__resetStyles("r5c4z9l", null, [".r5c4z9l{margin-top:var(--spacingVerticalXXS);color:var(--colorNeutralForeground3);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"]);
64
55
  const useSecondaryTextStyles = /*#__PURE__*/__styles({
65
- base: {
66
- B6of3ja: "fg30ohd",
67
- sj55zd: "f11d4kpn",
68
- Bahqtrf: "fk6fouc",
69
- Be2twd7: "fy9rknc",
70
- Bhrd7zp: "figsok6",
71
- Bg96gwp: "fwrc4pm"
72
- },
73
56
  error: {
74
57
  sj55zd: "f1hcrxcs"
58
+ },
59
+ withIcon: {
60
+ uwmqm3: ["frawy03", "fg4c52"]
75
61
  }
76
62
  }, {
77
- d: [".fg30ohd{margin-top:var(--spacingVerticalXXS);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}"]
63
+ d: [".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".frawy03{padding-left:calc(12px + var(--spacingHorizontalXS));}", ".fg4c52{padding-right:calc(12px + var(--spacingHorizontalXS));}"]
78
64
  });
65
+ const useValidationMessageIconBaseClassName = /*#__PURE__*/__resetStyles("ra7h1uk", "r1rh6bd7", [".ra7h1uk{display:inline-block;font-size:12px;margin-left:calc(-12px - var(--spacingHorizontalXS));margin-right:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}", ".r1rh6bd7{display:inline-block;font-size:12px;margin-right:calc(-12px - var(--spacingHorizontalXS));margin-left:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}"]);
79
66
  const useValidationMessageIconStyles = /*#__PURE__*/__styles({
80
- base: {
81
- mc9l5x: "ftgm304",
82
- qb2dma: "f9h729m",
83
- Be2twd7: "f1ugzwwg",
84
- Bg96gwp: "fp4gqsa",
85
- t21cq0: ["fm0x6gh", "fbyavb5"],
86
- B6of3ja: "fww94b8"
87
- },
88
67
  error: {
89
68
  sj55zd: "f1hcrxcs"
90
69
  },
@@ -95,7 +74,7 @@ const useValidationMessageIconStyles = /*#__PURE__*/__styles({
95
74
  sj55zd: "ffmvakt"
96
75
  }
97
76
  }, {
98
- d: [".ftgm304{display:block;}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".f1ugzwwg{font-size:12px;}", ".fp4gqsa{line-height:12px;}", ".fm0x6gh{margin-right:var(--spacingHorizontalXS);}", ".fbyavb5{margin-left:var(--spacingHorizontalXS);}", ".fww94b8{margin-top:var(--spacingVerticalXS);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}"]
77
+ d: [".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}"]
99
78
  });
100
79
  /**
101
80
  * Apply styling to the Field slots based on the state
@@ -105,24 +84,26 @@ export const useFieldStyles_unstable = state => {
105
84
  const validationState = state.validationState;
106
85
  const horizontal = state.orientation === 'horizontal';
107
86
  const rootStyles = useRootStyles();
108
- state.root.className = mergeClasses(classNames.root, rootStyles.base, horizontal && rootStyles.horizontal, state.root.className);
87
+ state.root.className = mergeClasses(classNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
109
88
  if (state.control) {
110
- state.control.className = mergeClasses(classNames.control, rootStyles.control, state.control.className);
89
+ state.control.className = mergeClasses(classNames.control, state.control.className);
111
90
  }
112
91
  const labelStyles = useLabelStyles();
113
92
  if (state.label) {
114
- state.label.className = mergeClasses(classNames.label, rootStyles.label, labelStyles.base, state.label.className);
93
+ state.label.className = mergeClasses(classNames.label, labelStyles.base, horizontal && labelStyles.horizontal, !horizontal && labelStyles.vertical, state.label.size === 'large' && labelStyles.large, !horizontal && state.label.size === 'large' && labelStyles.verticalLarge, state.label.className);
115
94
  }
95
+ const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
116
96
  const validationMessageIconStyles = useValidationMessageIconStyles();
117
97
  if (state.validationMessageIcon) {
118
- state.validationMessageIcon.className = mergeClasses(classNames.validationMessageIcon, rootStyles.validationIcon, validationMessageIconStyles.base, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
98
+ state.validationMessageIcon.className = mergeClasses(classNames.validationMessageIcon, validationMessageIconBaseClassName, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
119
99
  }
100
+ const secondaryTextBaseClassName = useSecondaryTextBaseClassName();
120
101
  const secondaryTextStyles = useSecondaryTextStyles();
121
102
  if (state.validationMessage) {
122
- state.validationMessage.className = mergeClasses(classNames.validationMessage, rootStyles.validationMessage, secondaryTextStyles.base, validationState === 'error' && secondaryTextStyles.error, state.validationMessage.className);
103
+ state.validationMessage.className = mergeClasses(classNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);
123
104
  }
124
105
  if (state.hint) {
125
- state.hint.className = mergeClasses(classNames.hint, secondaryTextStyles.base, rootStyles.hint, state.hint.className);
106
+ state.hint.className = mergeClasses(classNames.hint, secondaryTextBaseClassName, state.hint.className);
126
107
  }
127
108
  };
128
109
  //# sourceMappingURL=useFieldStyles.js.map
package/lib/components/Field/useFieldStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"mappings":"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","names":["tokens","typographyStyles","mergeClasses","getFieldClassNames","name","root","control","label","validationMessage","validationMessageIcon","hint","useRootStyles","useLabelStyles","useSecondaryTextStyles","useValidationMessageIconStyles","useFieldStyles_unstable","state","classNames","validationState","horizontal","orientation","rootStyles","className","base","labelStyles","validationMessageIconStyles","validationIcon","secondaryTextStyles","error"],"sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/useFieldStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldControl, FieldProps, FieldSlots, FieldState } from './Field.types';\n\nexport const getFieldClassNames = (name: string): SlotClassNames<FieldSlots<FieldControl>> => ({\n root: `fui-${name}`,\n control: `fui-${name}__control`,\n label: `fui-${name}__label`,\n validationMessage: `fui-${name}__validationMessage`,\n validationMessageIcon: `fui-${name}__validationMessageIcon`,\n hint: `fui-${name}__hint`,\n});\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'grid',\n gridAutoFlow: 'row',\n gridTemplateColumns: 'auto 1fr',\n gridTemplateAreas: `\n \"label label\"\n \"control control\"\n \"validationIcon validationMessage\"\n \"hint hint\"\n `,\n justifyItems: 'start',\n },\n\n horizontal: {\n gridTemplateColumns: '33% auto 1fr',\n gridTemplateAreas: `\n \"label control control\"\n \"label validationIcon validationMessage\"\n \"label hint hint\"\n \"label . .\"\n `,\n },\n\n label: {\n gridColumnStart: 'label',\n gridColumnEnd: 'label',\n gridRowStart: 'label',\n gridRowEnd: 'label',\n },\n\n control: {\n gridColumnStart: 'control',\n gridColumnEnd: 'control',\n },\n\n validationIcon: {\n gridColumnStart: 'validationIcon',\n gridColumnEnd: 'validationIcon',\n },\n\n validationMessage: {\n gridColumnStart: 'validationMessage',\n gridColumnEnd: 'validationMessage',\n },\n\n hint: {\n gridColumnStart: 'hint',\n gridColumnEnd: 'hint',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n marginTop: tokens.spacingVerticalXXS,\n marginBottom: tokens.spacingVerticalXXS,\n },\n\n horizontal: {\n marginRight: tokens.spacingHorizontalM,\n alignSelf: 'start',\n justifySelf: 'stretch',\n },\n});\n\nconst useSecondaryTextStyles = makeStyles({\n base: {\n marginTop: tokens.spacingVerticalXXS,\n color: tokens.colorNeutralForeground3,\n ...typographyStyles.caption1,\n },\n\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\n});\n\nconst useValidationMessageIconStyles = makeStyles({\n base: {\n display: 'block',\n alignSelf: 'start',\n fontSize: '12px',\n lineHeight: '12px',\n marginRight: tokens.spacingHorizontalXS,\n marginTop: tokens.spacingVerticalXS,\n },\n\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\n warning: {\n color: tokens.colorPaletteDarkOrangeForeground1,\n },\n success: {\n color: tokens.colorPaletteGreenForeground1,\n },\n});\n\n/**\n * Apply styling to the Field slots based on the state\n */\nexport const useFieldStyles_unstable = <T extends FieldControl>(state: FieldState<T>) => {\n const classNames = state.classNames;\n const validationState: FieldProps<FieldControl>['validationState'] = state.validationState;\n const horizontal = state.orientation === 'horizontal';\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n classNames.root,\n rootStyles.base,\n horizontal && rootStyles.horizontal,\n state.root.className,\n );\n\n if (state.control) {\n state.control.className = mergeClasses(classNames.control, rootStyles.control, state.control.className);\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(classNames.label, rootStyles.label, labelStyles.base, state.label.className);\n }\n\n const validationMessageIconStyles = useValidationMessageIconStyles();\n if (state.validationMessageIcon) {\n state.validationMessageIcon.className = mergeClasses(\n classNames.validationMessageIcon,\n rootStyles.validationIcon,\n validationMessageIconStyles.base,\n !!validationState && validationMessageIconStyles[validationState],\n state.validationMessageIcon.className,\n );\n }\n\n const secondaryTextStyles = useSecondaryTextStyles();\n if (state.validationMessage) {\n state.validationMessage.className = mergeClasses(\n classNames.validationMessage,\n rootStyles.validationMessage,\n secondaryTextStyles.base,\n validationState === 'error' && secondaryTextStyles.error,\n state.validationMessage.className,\n );\n }\n\n if (state.hint) {\n state.hint.className = mergeClasses(\n classNames.hint,\n secondaryTextStyles.base,\n rootStyles.hint,\n state.hint.className,\n );\n }\n};\n"]}
1
+ {"version":3,"mappings":"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","names":["tokens","typographyStyles","mergeClasses","getFieldClassNames","name","root","control","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","useLabelStyles","useSecondaryTextBaseClassName","useSecondaryTextStyles","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","useFieldStyles_unstable","state","classNames","validationState","horizontal","orientation","rootStyles","className","base","horizontalNoLabel","labelStyles","vertical","size","large","verticalLarge","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles","error","withIcon"],"sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/useFieldStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldControl, FieldProps, FieldSlots, FieldState } from './Field.types';\n\nexport const getFieldClassNames = (name: string): SlotClassNames<FieldSlots<FieldControl>> => ({\n root: `fui-${name}`,\n control: `fui-${name}__control`,\n label: `fui-${name}__label`,\n validationMessage: `fui-${name}__validationMessage`,\n validationMessageIcon: `fui-${name}__validationMessageIcon`,\n hint: `fui-${name}__hint`,\n});\n\n// Size of the icon in the validation message\nconst iconSize = '12px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'grid',\n },\n\n // In horizontal layout, the field is a grid with the label taking up the entire first column.\n // The last row is slack space in case the label is taller than the rest of the content.\n horizontal: {\n gridTemplateColumns: '33% 1fr',\n gridTemplateRows: 'auto auto auto 1fr',\n },\n\n // In horizontal layout without a label, replace the label's column with padding.\n // This lets grid auto-flow properly place the other children, and keeps fields with and without labels aligned.\n horizontalNoLabel: {\n paddingLeft: '33%',\n gridTemplateColumns: '1fr',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n paddingTop: tokens.spacingVerticalXXS,\n paddingBottom: tokens.spacingVerticalXXS,\n },\n\n large: {\n paddingTop: '1px',\n paddingBottom: '1px',\n },\n\n vertical: {\n marginBottom: tokens.spacingVerticalXXS,\n },\n\n verticalLarge: {\n marginBottom: tokens.spacingVerticalXS,\n },\n\n horizontal: {\n marginRight: tokens.spacingHorizontalM,\n gridRowStart: '1',\n gridRowEnd: '-1',\n },\n});\n\nconst useSecondaryTextBaseClassName = makeResetStyles({\n marginTop: tokens.spacingVerticalXXS,\n color: tokens.colorNeutralForeground3,\n ...typographyStyles.caption1,\n});\n\nconst useSecondaryTextStyles = makeStyles({\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\n\n withIcon: {\n // Add a gutter for the icon, to allow multiple lines of text to line up to the right of the icon.\n paddingLeft: `calc(${iconSize} + ${tokens.spacingHorizontalXS})`,\n },\n});\n\nconst useValidationMessageIconBaseClassName = makeResetStyles({\n display: 'inline-block',\n fontSize: iconSize,\n // Negative left margin puts the icon in the gutter of the validation message div's withIcon style.\n marginLeft: `calc(-${iconSize} - ${tokens.spacingHorizontalXS})`,\n marginRight: tokens.spacingHorizontalXS,\n // Line height of 0 prevents the verticalAlign from affecting the line height of the text.\n lineHeight: '0',\n // Negative verticalAlign shifts the inline icon down to align with the text (effectively top padding).\n verticalAlign: '-1px',\n});\n\nconst useValidationMessageIconStyles = makeStyles({\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\n warning: {\n color: tokens.colorPaletteDarkOrangeForeground1,\n },\n success: {\n color: tokens.colorPaletteGreenForeground1,\n },\n});\n\n/**\n * Apply styling to the Field slots based on the state\n */\nexport const useFieldStyles_unstable = <T extends FieldControl>(state: FieldState<T>) => {\n const classNames = state.classNames;\n const validationState: FieldProps<FieldControl>['validationState'] = state.validationState;\n const horizontal = state.orientation === 'horizontal';\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n classNames.root,\n rootStyles.base,\n horizontal && rootStyles.horizontal,\n horizontal && !state.label && rootStyles.horizontalNoLabel,\n state.root.className,\n );\n\n if (state.control) {\n state.control.className = mergeClasses(classNames.control, state.control.className);\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n classNames.label,\n labelStyles.base,\n horizontal && labelStyles.horizontal,\n !horizontal && labelStyles.vertical,\n state.label.size === 'large' && labelStyles.large,\n !horizontal && state.label.size === 'large' && labelStyles.verticalLarge,\n state.label.className,\n );\n }\n\n const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();\n const validationMessageIconStyles = useValidationMessageIconStyles();\n if (state.validationMessageIcon) {\n state.validationMessageIcon.className = mergeClasses(\n classNames.validationMessageIcon,\n validationMessageIconBaseClassName,\n !!validationState && validationMessageIconStyles[validationState],\n state.validationMessageIcon.className,\n );\n }\n\n const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n const secondaryTextStyles = useSecondaryTextStyles();\n if (state.validationMessage) {\n state.validationMessage.className = mergeClasses(\n classNames.validationMessage,\n secondaryTextBaseClassName,\n validationState === 'error' && secondaryTextStyles.error,\n !!state.validationMessageIcon && secondaryTextStyles.withIcon,\n state.validationMessage.className,\n );\n }\n\n if (state.hint) {\n state.hint.className = mergeClasses(classNames.hint, secondaryTextBaseClassName, state.hint.className);\n }\n};\n"]}
package/lib-amd/components/Field/renderField.js CHANGED
@@ -10,8 +10,9 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], fu
10
10
  return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
11
11
  slots.label && React.createElement(slots.label, tslib_1.__assign({}, slotProps.label)),
12
12
  slots.control && React.createElement(slots.control, tslib_1.__assign({}, slotProps.control)),
13
- slots.validationMessage && slots.validationMessageIcon && (React.createElement(slots.validationMessageIcon, tslib_1.__assign({}, slotProps.validationMessageIcon))),
14
- slots.validationMessage && React.createElement(slots.validationMessage, tslib_1.__assign({}, slotProps.validationMessage)),
13
+ slots.validationMessage && (React.createElement(slots.validationMessage, tslib_1.__assign({}, slotProps.validationMessage),
14
+ slots.validationMessageIcon && React.createElement(slots.validationMessageIcon, tslib_1.__assign({}, slotProps.validationMessageIcon)),
15
+ slotProps.validationMessage.children)),
15
16
  slots.hint && React.createElement(slots.hint, tslib_1.__assign({}, slotProps.hint))));
16
17
  };
17
18
  exports.renderField_unstable = renderField_unstable;
package/lib-amd/components/Field/renderField.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"renderField.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/renderField.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,oBAAoB,GAAG,UAAyB,KAAoB;QACzE,IAAA,KAAuB,0BAAQ,CAA2B,KAAiC,CAAC,EAA1F,KAAK,WAAA,EAAE,SAAS,eAA0E,CAAC;QAEnG,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,KAAK,CAAC,KAAK,IAAI,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI;YAEnD,KAAK,CAAC,OAAO,IAAI,oBAAC,KAAK,CAAC,OAAO,uBAAM,SAAS,CAAC,OAAe,EAAI;YAClE,KAAK,CAAC,iBAAiB,IAAI,KAAK,CAAC,qBAAqB,IAAI,CACzD,oBAAC,KAAK,CAAC,qBAAqB,uBAAK,SAAS,CAAC,qBAAqB,EAAI,CACrE;YACA,KAAK,CAAC,iBAAiB,IAAI,oBAAC,KAAK,CAAC,iBAAiB,uBAAK,SAAS,CAAC,iBAAiB,EAAI;YACvF,KAAK,CAAC,IAAI,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CACtC,CACd,CAAC;IACJ,CAAC,CAAC;IAfW,QAAA,oBAAoB,wBAe/B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FieldControl, FieldSlots, FieldState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = <T extends FieldControl>(state: FieldState<T>) => {\n const { slots, slotProps } = getSlots<FieldSlots<FieldControl>>(state as FieldState<FieldControl>);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.label && <slots.label {...slotProps.label} />}\n {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n {slots.control && <slots.control {...(slotProps.control as any)} />}\n {slots.validationMessage && slots.validationMessageIcon && (\n <slots.validationMessageIcon {...slotProps.validationMessageIcon} />\n )}\n {slots.validationMessage && <slots.validationMessage {...slotProps.validationMessage} />}\n {slots.hint && <slots.hint {...slotProps.hint} />}\n </slots.root>\n );\n};\n"]}
1
+ {"version":3,"file":"renderField.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/renderField.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,oBAAoB,GAAG,UAAyB,KAAoB;QACzE,IAAA,KAAuB,0BAAQ,CAA2B,KAAiC,CAAC,EAA1F,KAAK,WAAA,EAAE,SAAS,eAA0E,CAAC;QAEnG,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,KAAK,CAAC,KAAK,IAAI,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI;YAEnD,KAAK,CAAC,OAAO,IAAI,oBAAC,KAAK,CAAC,OAAO,uBAAM,SAAS,CAAC,OAAe,EAAI;YAClE,KAAK,CAAC,iBAAiB,IAAI,CAC1B,oBAAC,KAAK,CAAC,iBAAiB,uBAAK,SAAS,CAAC,iBAAiB;gBACrD,KAAK,CAAC,qBAAqB,IAAI,oBAAC,KAAK,CAAC,qBAAqB,uBAAK,SAAS,CAAC,qBAAqB,EAAI;gBACnG,SAAS,CAAC,iBAAiB,CAAC,QAAQ,CACb,CAC3B;YACA,KAAK,CAAC,IAAI,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CACtC,CACd,CAAC;IACJ,CAAC,CAAC;IAjBW,QAAA,oBAAoB,wBAiB/B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FieldControl, FieldSlots, FieldState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = <T extends FieldControl>(state: FieldState<T>) => {\n const { slots, slotProps } = getSlots<FieldSlots<FieldControl>>(state as FieldState<FieldControl>);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.label && <slots.label {...slotProps.label} />}\n {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n {slots.control && <slots.control {...(slotProps.control as any)} />}\n {slots.validationMessage && (\n <slots.validationMessage {...slotProps.validationMessage}>\n {slots.validationMessageIcon && <slots.validationMessageIcon {...slotProps.validationMessageIcon} />}\n {slotProps.validationMessage.children}\n </slots.validationMessage>\n )}\n {slots.hint && <slots.hint {...slotProps.hint} />}\n </slots.root>\n );\n};\n"]}
package/lib-amd/components/Field/useField.js CHANGED
@@ -58,6 +58,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-icons", "@fluen
58
58
  var validationMessage = react_utilities_1.resolveShorthand(fieldProps.validationMessage, {
59
59
  defaultProps: {
60
60
  id: baseId + '__validationMessage',
61
+ role: validationState === 'error' ? 'alert' : undefined,
61
62
  },
62
63
  });
63
64
  var hint = react_utilities_1.resolveShorthand(fieldProps.hint, {
package/lib-amd/components/Field/useField.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useField.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/useField.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { FieldConfig, FieldControl, FieldPropsWithOptionalComponentProps, FieldState } from './Field.types';\n\nconst validationMessageIcons = {\n error: <ErrorCircle12Filled />,\n warning: <Warning12Filled />,\n success: <CheckmarkCircle12Filled />,\n} as const;\n\n/**\n * Partition the props used by the Field itself, from the props that are passed to the underlying field component.\n */\nexport const getPartitionedFieldProps = (props: FieldPropsWithOptionalComponentProps<FieldControl>) => {\n const {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n ...restOfProps\n } = props;\n\n const fieldProps = {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n };\n\n return [fieldProps, restOfProps] as const;\n};\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the control slot (primary slot)\n * @param params - Configuration parameters for this Field\n */\nexport const useField_unstable = <T extends FieldControl>(\n props: FieldPropsWithOptionalComponentProps<T>,\n ref: React.Ref<HTMLElement>,\n params: FieldConfig<T>,\n): FieldState<T> => {\n const [fieldProps, controlProps] = getPartitionedFieldProps(props);\n const { orientation = 'vertical', validationState } = fieldProps;\n const { labelConnection = 'htmlFor', ariaInvalidOnError = true } = params;\n\n const baseId = useId('field-');\n\n const root = resolveShorthand(fieldProps.root, {\n required: true,\n defaultProps: getNativeElementProps('div', fieldProps),\n });\n\n const label = resolveShorthand(fieldProps.label, {\n defaultProps: {\n id: baseId + '__label',\n required: controlProps.required,\n size: typeof controlProps.size === 'string' ? controlProps.size : undefined,\n // htmlFor is handled below\n },\n });\n\n const validationMessage = resolveShorthand(fieldProps.validationMessage, {\n defaultProps: {\n id: baseId + '__validationMessage',\n },\n });\n\n const hint = resolveShorthand(fieldProps.hint, {\n defaultProps: {\n id: baseId + '__hint',\n },\n });\n\n const validationMessageIcon = resolveShorthand(fieldProps.validationMessageIcon, {\n required: !!validationState,\n defaultProps: {\n children: validationState ? validationMessageIcons[validationState] : undefined,\n },\n });\n\n // Hook up aria props on the control\n if (label && labelConnection === 'aria-labelledby') {\n controlProps['aria-labelledby'] ??= label.id;\n }\n\n if (validationMessage || hint) {\n // The control is described by the validation message, or hint, or both\n // We also preserve and append any aria-describedby supplied by the user\n // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933\n controlProps['aria-describedby'] = [validationMessage?.id, hint?.id, controlProps['aria-describedby']]\n .filter(Boolean)\n .join(' ');\n }\n\n if (validationState === 'error' && ariaInvalidOnError) {\n controlProps['aria-invalid'] ??= true;\n }\n\n const control = resolveShorthand(fieldProps.control, {\n required: true,\n defaultProps: {\n ref,\n id: baseId + '__control',\n ...controlProps,\n },\n });\n\n if (label && labelConnection === 'htmlFor') {\n label.htmlFor ??= control.id;\n }\n\n const state: FieldState<FieldControl> = {\n orientation,\n validationState,\n classNames: params.classNames,\n components: {\n root: 'div',\n control: params.component,\n label: Label,\n validationMessage: 'div',\n validationMessageIcon: 'span',\n hint: 'div',\n },\n root,\n control,\n label,\n validationMessageIcon,\n validationMessage,\n hint,\n };\n\n return state as FieldState<T>;\n};\n"]}
1
+ {"version":3,"file":"useField.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/useField.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { FieldConfig, FieldControl, FieldPropsWithOptionalComponentProps, FieldState } from './Field.types';\n\nconst validationMessageIcons = {\n error: <ErrorCircle12Filled />,\n warning: <Warning12Filled />,\n success: <CheckmarkCircle12Filled />,\n} as const;\n\n/**\n * Partition the props used by the Field itself, from the props that are passed to the underlying field component.\n */\nexport const getPartitionedFieldProps = (props: FieldPropsWithOptionalComponentProps<FieldControl>) => {\n const {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n ...restOfProps\n } = props;\n\n const fieldProps = {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n };\n\n return [fieldProps, restOfProps] as const;\n};\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the control slot (primary slot)\n * @param params - Configuration parameters for this Field\n */\nexport const useField_unstable = <T extends FieldControl>(\n props: FieldPropsWithOptionalComponentProps<T>,\n ref: React.Ref<HTMLElement>,\n params: FieldConfig<T>,\n): FieldState<T> => {\n const [fieldProps, controlProps] = getPartitionedFieldProps(props);\n const { orientation = 'vertical', validationState } = fieldProps;\n const { labelConnection = 'htmlFor', ariaInvalidOnError = true } = params;\n\n const baseId = useId('field-');\n\n const root = resolveShorthand(fieldProps.root, {\n required: true,\n defaultProps: getNativeElementProps('div', fieldProps),\n });\n\n const label = resolveShorthand(fieldProps.label, {\n defaultProps: {\n id: baseId + '__label',\n required: controlProps.required,\n size: typeof controlProps.size === 'string' ? controlProps.size : undefined,\n // htmlFor is handled below\n },\n });\n\n const validationMessage = resolveShorthand(fieldProps.validationMessage, {\n defaultProps: {\n id: baseId + '__validationMessage',\n role: validationState === 'error' ? 'alert' : undefined,\n },\n });\n\n const hint = resolveShorthand(fieldProps.hint, {\n defaultProps: {\n id: baseId + '__hint',\n },\n });\n\n const validationMessageIcon = resolveShorthand(fieldProps.validationMessageIcon, {\n required: !!validationState,\n defaultProps: {\n children: validationState ? validationMessageIcons[validationState] : undefined,\n },\n });\n\n // Hook up aria props on the control\n if (label && labelConnection === 'aria-labelledby') {\n controlProps['aria-labelledby'] ??= label.id;\n }\n\n if (validationMessage || hint) {\n // The control is described by the validation message, or hint, or both\n // We also preserve and append any aria-describedby supplied by the user\n // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933\n controlProps['aria-describedby'] = [validationMessage?.id, hint?.id, controlProps['aria-describedby']]\n .filter(Boolean)\n .join(' ');\n }\n\n if (validationState === 'error' && ariaInvalidOnError) {\n controlProps['aria-invalid'] ??= true;\n }\n\n const control = resolveShorthand(fieldProps.control, {\n required: true,\n defaultProps: {\n ref,\n id: baseId + '__control',\n ...controlProps,\n },\n });\n\n if (label && labelConnection === 'htmlFor') {\n label.htmlFor ??= control.id;\n }\n\n const state: FieldState<FieldControl> = {\n orientation,\n validationState,\n classNames: params.classNames,\n components: {\n root: 'div',\n control: params.component,\n label: Label,\n validationMessage: 'div',\n validationMessageIcon: 'span',\n hint: 'div',\n },\n root,\n control,\n label,\n validationMessageIcon,\n validationMessage,\n hint,\n };\n\n return state as FieldState<T>;\n};\n"]}
package/lib-amd/components/Field/useFieldStyles.js CHANGED
@@ -11,70 +11,71 @@ define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react"
11
11
  hint: "fui-" + name + "__hint",
12
12
  }); };
13
13
  exports.getFieldClassNames = getFieldClassNames;
14
+ // Size of the icon in the validation message
15
+ var iconSize = '12px';
14
16
  /**
15
17
  * Styles for the root slot
16
18
  */
17
19
  var useRootStyles = react_1.makeStyles({
18
20
  base: {
19
21
  display: 'grid',
20
- gridAutoFlow: 'row',
21
- gridTemplateColumns: 'auto 1fr',
22
- gridTemplateAreas: "\n \"label label\"\n \"control control\"\n \"validationIcon validationMessage\"\n \"hint hint\"\n ",
23
- justifyItems: 'start',
24
22
  },
23
+ // In horizontal layout, the field is a grid with the label taking up the entire first column.
24
+ // The last row is slack space in case the label is taller than the rest of the content.
25
25
  horizontal: {
26
- gridTemplateColumns: '33% auto 1fr',
27
- gridTemplateAreas: "\n \"label control control\"\n \"label validationIcon validationMessage\"\n \"label hint hint\"\n \"label . .\"\n ",
26
+ gridTemplateColumns: '33% 1fr',
27
+ gridTemplateRows: 'auto auto auto 1fr',
28
28
  },
29
- label: {
30
- gridColumnStart: 'label',
31
- gridColumnEnd: 'label',
32
- gridRowStart: 'label',
33
- gridRowEnd: 'label',
34
- },
35
- control: {
36
- gridColumnStart: 'control',
37
- gridColumnEnd: 'control',
38
- },
39
- validationIcon: {
40
- gridColumnStart: 'validationIcon',
41
- gridColumnEnd: 'validationIcon',
42
- },
43
- validationMessage: {
44
- gridColumnStart: 'validationMessage',
45
- gridColumnEnd: 'validationMessage',
46
- },
47
- hint: {
48
- gridColumnStart: 'hint',
49
- gridColumnEnd: 'hint',
29
+ // In horizontal layout without a label, replace the label's column with padding.
30
+ // This lets grid auto-flow properly place the other children, and keeps fields with and without labels aligned.
31
+ horizontalNoLabel: {
32
+ paddingLeft: '33%',
33
+ gridTemplateColumns: '1fr',
50
34
  },
51
35
  });
52
36
  var useLabelStyles = react_1.makeStyles({
53
37
  base: {
54
- marginTop: react_theme_1.tokens.spacingVerticalXXS,
38
+ paddingTop: react_theme_1.tokens.spacingVerticalXXS,
39
+ paddingBottom: react_theme_1.tokens.spacingVerticalXXS,
40
+ },
41
+ large: {
42
+ paddingTop: '1px',
43
+ paddingBottom: '1px',
44
+ },
45
+ vertical: {
55
46
  marginBottom: react_theme_1.tokens.spacingVerticalXXS,
56
47
  },
48
+ verticalLarge: {
49
+ marginBottom: react_theme_1.tokens.spacingVerticalXS,
50
+ },
57
51
  horizontal: {
58
52
  marginRight: react_theme_1.tokens.spacingHorizontalM,
59
- alignSelf: 'start',
60
- justifySelf: 'stretch',
53
+ gridRowStart: '1',
54
+ gridRowEnd: '-1',
61
55
  },
62
56
  });
57
+ var useSecondaryTextBaseClassName = react_1.makeResetStyles(tslib_1.__assign({ marginTop: react_theme_1.tokens.spacingVerticalXXS, color: react_theme_1.tokens.colorNeutralForeground3 }, react_theme_1.typographyStyles.caption1));
63
58
  var useSecondaryTextStyles = react_1.makeStyles({
64
- base: tslib_1.__assign({ marginTop: react_theme_1.tokens.spacingVerticalXXS, color: react_theme_1.tokens.colorNeutralForeground3 }, react_theme_1.typographyStyles.caption1),
65
59
  error: {
66
60
  color: react_theme_1.tokens.colorPaletteRedForeground1,
67
61
  },
62
+ withIcon: {
63
+ // Add a gutter for the icon, to allow multiple lines of text to line up to the right of the icon.
64
+ paddingLeft: "calc(" + iconSize + " + " + react_theme_1.tokens.spacingHorizontalXS + ")",
65
+ },
66
+ });
67
+ var useValidationMessageIconBaseClassName = react_1.makeResetStyles({
68
+ display: 'inline-block',
69
+ fontSize: iconSize,
70
+ // Negative left margin puts the icon in the gutter of the validation message div's withIcon style.
71
+ marginLeft: "calc(-" + iconSize + " - " + react_theme_1.tokens.spacingHorizontalXS + ")",
72
+ marginRight: react_theme_1.tokens.spacingHorizontalXS,
73
+ // Line height of 0 prevents the verticalAlign from affecting the line height of the text.
74
+ lineHeight: '0',
75
+ // Negative verticalAlign shifts the inline icon down to align with the text (effectively top padding).
76
+ verticalAlign: '-1px',
68
77
  });
69
78
  var useValidationMessageIconStyles = react_1.makeStyles({
70
- base: {
71
- display: 'block',
72
- alignSelf: 'start',
73
- fontSize: '12px',
74
- lineHeight: '12px',
75
- marginRight: react_theme_1.tokens.spacingHorizontalXS,
76
- marginTop: react_theme_1.tokens.spacingVerticalXS,
77
- },
78
79
  error: {
79
80
  color: react_theme_1.tokens.colorPaletteRedForeground1,
80
81
  },
@@ -93,24 +94,26 @@ define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react"
93
94
  var validationState = state.validationState;
94
95
  var horizontal = state.orientation === 'horizontal';
95
96
  var rootStyles = useRootStyles();
96
- state.root.className = react_1.mergeClasses(classNames.root, rootStyles.base, horizontal && rootStyles.horizontal, state.root.className);
97
+ state.root.className = react_1.mergeClasses(classNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
97
98
  if (state.control) {
98
- state.control.className = react_1.mergeClasses(classNames.control, rootStyles.control, state.control.className);
99
+ state.control.className = react_1.mergeClasses(classNames.control, state.control.className);
99
100
  }
100
101
  var labelStyles = useLabelStyles();
101
102
  if (state.label) {
102
- state.label.className = react_1.mergeClasses(classNames.label, rootStyles.label, labelStyles.base, state.label.className);
103
+ state.label.className = react_1.mergeClasses(classNames.label, labelStyles.base, horizontal && labelStyles.horizontal, !horizontal && labelStyles.vertical, state.label.size === 'large' && labelStyles.large, !horizontal && state.label.size === 'large' && labelStyles.verticalLarge, state.label.className);
103
104
  }
105
+ var validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
104
106
  var validationMessageIconStyles = useValidationMessageIconStyles();
105
107
  if (state.validationMessageIcon) {
106
- state.validationMessageIcon.className = react_1.mergeClasses(classNames.validationMessageIcon, rootStyles.validationIcon, validationMessageIconStyles.base, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
108
+ state.validationMessageIcon.className = react_1.mergeClasses(classNames.validationMessageIcon, validationMessageIconBaseClassName, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
107
109
  }
110
+ var secondaryTextBaseClassName = useSecondaryTextBaseClassName();
108
111
  var secondaryTextStyles = useSecondaryTextStyles();
109
112
  if (state.validationMessage) {
110
- state.validationMessage.className = react_1.mergeClasses(classNames.validationMessage, rootStyles.validationMessage, secondaryTextStyles.base, validationState === 'error' && secondaryTextStyles.error, state.validationMessage.className);
113
+ state.validationMessage.className = react_1.mergeClasses(classNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);
111
114
  }
112
115
  if (state.hint) {
113
- state.hint.className = react_1.mergeClasses(classNames.hint, secondaryTextStyles.base, rootStyles.hint, state.hint.className);
116
+ state.hint.className = react_1.mergeClasses(classNames.hint, secondaryTextBaseClassName, state.hint.className);
114
117
  }
115
118
  };
116
119
  exports.useFieldStyles_unstable = useFieldStyles_unstable;
package/lib-amd/components/Field/useFieldStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useFieldStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/useFieldStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldControl, FieldProps, FieldSlots, FieldState } from './Field.types';\n\nexport const getFieldClassNames = (name: string): SlotClassNames<FieldSlots<FieldControl>> => ({\n root: `fui-${name}`,\n control: `fui-${name}__control`,\n label: `fui-${name}__label`,\n validationMessage: `fui-${name}__validationMessage`,\n validationMessageIcon: `fui-${name}__validationMessageIcon`,\n hint: `fui-${name}__hint`,\n});\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'grid',\n gridAutoFlow: 'row',\n gridTemplateColumns: 'auto 1fr',\n gridTemplateAreas: `\n \"label label\"\n \"control control\"\n \"validationIcon validationMessage\"\n \"hint hint\"\n `,\n justifyItems: 'start',\n },\n\n horizontal: {\n gridTemplateColumns: '33% auto 1fr',\n gridTemplateAreas: `\n \"label control control\"\n \"label validationIcon validationMessage\"\n \"label hint hint\"\n \"label . .\"\n `,\n },\n\n label: {\n gridColumnStart: 'label',\n gridColumnEnd: 'label',\n gridRowStart: 'label',\n gridRowEnd: 'label',\n },\n\n control: {\n gridColumnStart: 'control',\n gridColumnEnd: 'control',\n },\n\n validationIcon: {\n gridColumnStart: 'validationIcon',\n gridColumnEnd: 'validationIcon',\n },\n\n validationMessage: {\n gridColumnStart: 'validationMessage',\n gridColumnEnd: 'validationMessage',\n },\n\n hint: {\n gridColumnStart: 'hint',\n gridColumnEnd: 'hint',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n marginTop: tokens.spacingVerticalXXS,\n marginBottom: tokens.spacingVerticalXXS,\n },\n\n horizontal: {\n marginRight: tokens.spacingHorizontalM,\n alignSelf: 'start',\n justifySelf: 'stretch',\n },\n});\n\nconst useSecondaryTextStyles = makeStyles({\n base: {\n marginTop: tokens.spacingVerticalXXS,\n color: tokens.colorNeutralForeground3,\n ...typographyStyles.caption1,\n },\n\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\n});\n\nconst useValidationMessageIconStyles = makeStyles({\n base: {\n display: 'block',\n alignSelf: 'start',\n fontSize: '12px',\n lineHeight: '12px',\n marginRight: tokens.spacingHorizontalXS,\n marginTop: tokens.spacingVerticalXS,\n },\n\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\n warning: {\n color: tokens.colorPaletteDarkOrangeForeground1,\n },\n success: {\n color: tokens.colorPaletteGreenForeground1,\n },\n});\n\n/**\n * Apply styling to the Field slots based on the state\n */\nexport const useFieldStyles_unstable = <T extends FieldControl>(state: FieldState<T>) => {\n const classNames = state.classNames;\n const validationState: FieldProps<FieldControl>['validationState'] = state.validationState;\n const horizontal = state.orientation === 'horizontal';\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n classNames.root,\n rootStyles.base,\n horizontal && rootStyles.horizontal,\n state.root.className,\n );\n\n if (state.control) {\n state.control.className = mergeClasses(classNames.control, rootStyles.control, state.control.className);\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(classNames.label, rootStyles.label, labelStyles.base, state.label.className);\n }\n\n const validationMessageIconStyles = useValidationMessageIconStyles();\n if (state.validationMessageIcon) {\n state.validationMessageIcon.className = mergeClasses(\n classNames.validationMessageIcon,\n rootStyles.validationIcon,\n validationMessageIconStyles.base,\n !!validationState && validationMessageIconStyles[validationState],\n state.validationMessageIcon.className,\n );\n }\n\n const secondaryTextStyles = useSecondaryTextStyles();\n if (state.validationMessage) {\n state.validationMessage.className = mergeClasses(\n classNames.validationMessage,\n rootStyles.validationMessage,\n secondaryTextStyles.base,\n validationState === 'error' && secondaryTextStyles.error,\n state.validationMessage.className,\n );\n }\n\n if (state.hint) {\n state.hint.className = mergeClasses(\n classNames.hint,\n secondaryTextStyles.base,\n rootStyles.hint,\n state.hint.className,\n );\n }\n};\n"]}
1
+ {"version":3,"file":"useFieldStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/useFieldStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldControl, FieldProps, FieldSlots, FieldState } from './Field.types';\n\nexport const getFieldClassNames = (name: string): SlotClassNames<FieldSlots<FieldControl>> => ({\n root: `fui-${name}`,\n control: `fui-${name}__control`,\n label: `fui-${name}__label`,\n validationMessage: `fui-${name}__validationMessage`,\n validationMessageIcon: `fui-${name}__validationMessageIcon`,\n hint: `fui-${name}__hint`,\n});\n\n// Size of the icon in the validation message\nconst iconSize = '12px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'grid',\n },\n\n // In horizontal layout, the field is a grid with the label taking up the entire first column.\n // The last row is slack space in case the label is taller than the rest of the content.\n horizontal: {\n gridTemplateColumns: '33% 1fr',\n gridTemplateRows: 'auto auto auto 1fr',\n },\n\n // In horizontal layout without a label, replace the label's column with padding.\n // This lets grid auto-flow properly place the other children, and keeps fields with and without labels aligned.\n horizontalNoLabel: {\n paddingLeft: '33%',\n gridTemplateColumns: '1fr',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n paddingTop: tokens.spacingVerticalXXS,\n paddingBottom: tokens.spacingVerticalXXS,\n },\n\n large: {\n paddingTop: '1px',\n paddingBottom: '1px',\n },\n\n vertical: {\n marginBottom: tokens.spacingVerticalXXS,\n },\n\n verticalLarge: {\n marginBottom: tokens.spacingVerticalXS,\n },\n\n horizontal: {\n marginRight: tokens.spacingHorizontalM,\n gridRowStart: '1',\n gridRowEnd: '-1',\n },\n});\n\nconst useSecondaryTextBaseClassName = makeResetStyles({\n marginTop: tokens.spacingVerticalXXS,\n color: tokens.colorNeutralForeground3,\n ...typographyStyles.caption1,\n});\n\nconst useSecondaryTextStyles = makeStyles({\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\n\n withIcon: {\n // Add a gutter for the icon, to allow multiple lines of text to line up to the right of the icon.\n paddingLeft: `calc(${iconSize} + ${tokens.spacingHorizontalXS})`,\n },\n});\n\nconst useValidationMessageIconBaseClassName = makeResetStyles({\n display: 'inline-block',\n fontSize: iconSize,\n // Negative left margin puts the icon in the gutter of the validation message div's withIcon style.\n marginLeft: `calc(-${iconSize} - ${tokens.spacingHorizontalXS})`,\n marginRight: tokens.spacingHorizontalXS,\n // Line height of 0 prevents the verticalAlign from affecting the line height of the text.\n lineHeight: '0',\n // Negative verticalAlign shifts the inline icon down to align with the text (effectively top padding).\n verticalAlign: '-1px',\n});\n\nconst useValidationMessageIconStyles = makeStyles({\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\n warning: {\n color: tokens.colorPaletteDarkOrangeForeground1,\n },\n success: {\n color: tokens.colorPaletteGreenForeground1,\n },\n});\n\n/**\n * Apply styling to the Field slots based on the state\n */\nexport const useFieldStyles_unstable = <T extends FieldControl>(state: FieldState<T>) => {\n const classNames = state.classNames;\n const validationState: FieldProps<FieldControl>['validationState'] = state.validationState;\n const horizontal = state.orientation === 'horizontal';\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n classNames.root,\n rootStyles.base,\n horizontal && rootStyles.horizontal,\n horizontal && !state.label && rootStyles.horizontalNoLabel,\n state.root.className,\n );\n\n if (state.control) {\n state.control.className = mergeClasses(classNames.control, state.control.className);\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n classNames.label,\n labelStyles.base,\n horizontal && labelStyles.horizontal,\n !horizontal && labelStyles.vertical,\n state.label.size === 'large' && labelStyles.large,\n !horizontal && state.label.size === 'large' && labelStyles.verticalLarge,\n state.label.className,\n );\n }\n\n const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();\n const validationMessageIconStyles = useValidationMessageIconStyles();\n if (state.validationMessageIcon) {\n state.validationMessageIcon.className = mergeClasses(\n classNames.validationMessageIcon,\n validationMessageIconBaseClassName,\n !!validationState && validationMessageIconStyles[validationState],\n state.validationMessageIcon.className,\n );\n }\n\n const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n const secondaryTextStyles = useSecondaryTextStyles();\n if (state.validationMessage) {\n state.validationMessage.className = mergeClasses(\n classNames.validationMessage,\n secondaryTextBaseClassName,\n validationState === 'error' && secondaryTextStyles.error,\n !!state.validationMessageIcon && secondaryTextStyles.withIcon,\n state.validationMessage.className,\n );\n }\n\n if (state.hint) {\n state.hint.className = mergeClasses(classNames.hint, secondaryTextBaseClassName, state.hint.className);\n }\n};\n"]}
package/lib-commonjs/components/Field/renderField.js CHANGED
@@ -20,11 +20,11 @@ const renderField_unstable = state => {
20
20
  ...slotProps.label
21
21
  }), slots.control && React.createElement(slots.control, {
22
22
  ...slotProps.control
23
- }), slots.validationMessage && slots.validationMessageIcon && React.createElement(slots.validationMessageIcon, {
24
- ...slotProps.validationMessageIcon
25
23
  }), slots.validationMessage && React.createElement(slots.validationMessage, {
26
24
  ...slotProps.validationMessage
27
- }), slots.hint && React.createElement(slots.hint, {
25
+ }, slots.validationMessageIcon && React.createElement(slots.validationMessageIcon, {
26
+ ...slotProps.validationMessageIcon
27
+ }), slotProps.validationMessage.children), slots.hint && React.createElement(slots.hint, {
28
28
  ...slotProps.hint
29
29
  }));
30
30
  };
package/lib-commonjs/components/Field/renderField.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,oBAAoB,GAA4BC,KAAoB,IAAI;EACnF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAA2BH,KAAiC,CAAC;EAElG,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BJ,KAAK,CAACK,KAAK,IAAIF,oBAACH,KAAK,CAACK,KAAK;IAAA,GAAKJ,SAAS,CAACI;EAAK,EAAI,EAEnDL,KAAK,CAACM,OAAO,IAAIH,oBAACH,KAAK,CAACM,OAAO;IAAA,GAAML,SAAS,CAACK;EAAe,EAAI,EAClEN,KAAK,CAACO,iBAAiB,IAAIP,KAAK,CAACQ,qBAAqB,IACrDL,oBAACH,KAAK,CAACQ,qBAAqB;IAAA,GAAKP,SAAS,CAACO;EAAqB,EACjE,EACAR,KAAK,CAACO,iBAAiB,IAAIJ,oBAACH,KAAK,CAACO,iBAAiB;IAAA,GAAKN,SAAS,CAACM;EAAiB,EAAI,EACvFP,KAAK,CAACS,IAAI,IAAIN,oBAACH,KAAK,CAACS,IAAI;IAAA,GAAKR,SAAS,CAACQ;EAAI,EAAI,CACtC;AAEjB,CAAC;AAfYC,4BAAoB","names":["renderField_unstable","state","slots","slotProps","react_utilities_1","React","root","label","control","validationMessage","validationMessageIcon","hint","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/renderField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FieldControl, FieldSlots, FieldState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = <T extends FieldControl>(state: FieldState<T>) => {\n const { slots, slotProps } = getSlots<FieldSlots<FieldControl>>(state as FieldState<FieldControl>);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.label && <slots.label {...slotProps.label} />}\n {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n {slots.control && <slots.control {...(slotProps.control as any)} />}\n {slots.validationMessage && slots.validationMessageIcon && (\n <slots.validationMessageIcon {...slotProps.validationMessageIcon} />\n )}\n {slots.validationMessage && <slots.validationMessage {...slotProps.validationMessage} />}\n {slots.hint && <slots.hint {...slotProps.hint} />}\n </slots.root>\n );\n};\n"]}
1
+ {"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,oBAAoB,GAA4BC,KAAoB,IAAI;EACnF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAA2BH,KAAiC,CAAC;EAElG,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BJ,KAAK,CAACK,KAAK,IAAIF,oBAACH,KAAK,CAACK,KAAK;IAAA,GAAKJ,SAAS,CAACI;EAAK,EAAI,EAEnDL,KAAK,CAACM,OAAO,IAAIH,oBAACH,KAAK,CAACM,OAAO;IAAA,GAAML,SAAS,CAACK;EAAe,EAAI,EAClEN,KAAK,CAACO,iBAAiB,IACtBJ,oBAACH,KAAK,CAACO,iBAAiB;IAAA,GAAKN,SAAS,CAACM;EAAiB,GACrDP,KAAK,CAACQ,qBAAqB,IAAIL,oBAACH,KAAK,CAACQ,qBAAqB;IAAA,GAAKP,SAAS,CAACO;EAAqB,EAAI,EACnGP,SAAS,CAACM,iBAAiB,CAACE,QAAQ,CAExC,EACAT,KAAK,CAACU,IAAI,IAAIP,oBAACH,KAAK,CAACU,IAAI;IAAA,GAAKT,SAAS,CAACS;EAAI,EAAI,CACtC;AAEjB,CAAC;AAjBYC,4BAAoB","names":["renderField_unstable","state","slots","slotProps","react_utilities_1","React","root","label","control","validationMessage","validationMessageIcon","children","hint","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/renderField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FieldControl, FieldSlots, FieldState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = <T extends FieldControl>(state: FieldState<T>) => {\n const { slots, slotProps } = getSlots<FieldSlots<FieldControl>>(state as FieldState<FieldControl>);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.label && <slots.label {...slotProps.label} />}\n {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n {slots.control && <slots.control {...(slotProps.control as any)} />}\n {slots.validationMessage && (\n <slots.validationMessage {...slotProps.validationMessage}>\n {slots.validationMessageIcon && <slots.validationMessageIcon {...slotProps.validationMessageIcon} />}\n {slotProps.validationMessage.children}\n </slots.validationMessage>\n )}\n {slots.hint && <slots.hint {...slotProps.hint} />}\n </slots.root>\n );\n};\n"]}
package/lib-commonjs/components/Field/useField.js CHANGED
@@ -82,7 +82,8 @@ const useField_unstable = (props, ref, params) => {
82
82
 
83
83
  const validationMessage = react_utilities_1.resolveShorthand(fieldProps.validationMessage, {
84
84
  defaultProps: {
85
- id: baseId + '__validationMessage'
85
+ id: baseId + '__validationMessage',
86
+ role: validationState === 'error' ? 'alert' : undefined
86
87
  }
87
88
  });
88
89
  const hint = react_utilities_1.resolveShorthand(fieldProps.hint, {
package/lib-commonjs/components/Field/useField.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"mappings":"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","names":["validationMessageIcons","error","React","react_icons_1","warning","success","getPartitionedFieldProps","props","className","control","hint","label","orientation","root","style","validationMessage","validationMessageIcon","validationState","restOfProps","fieldProps","exports","useField_unstable","ref","params","controlProps","labelConnection","ariaInvalidOnError","baseId","react_utilities_1","required","defaultProps","id","size","undefined","children","filter","Boolean","join","htmlFor","state","classNames","components","component","react_label_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/useField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { FieldConfig, FieldControl, FieldPropsWithOptionalComponentProps, FieldState } from './Field.types';\n\nconst validationMessageIcons = {\n error: <ErrorCircle12Filled />,\n warning: <Warning12Filled />,\n success: <CheckmarkCircle12Filled />,\n} as const;\n\n/**\n * Partition the props used by the Field itself, from the props that are passed to the underlying field component.\n */\nexport const getPartitionedFieldProps = (props: FieldPropsWithOptionalComponentProps<FieldControl>) => {\n const {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n ...restOfProps\n } = props;\n\n const fieldProps = {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n };\n\n return [fieldProps, restOfProps] as const;\n};\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the control slot (primary slot)\n * @param params - Configuration parameters for this Field\n */\nexport const useField_unstable = <T extends FieldControl>(\n props: FieldPropsWithOptionalComponentProps<T>,\n ref: React.Ref<HTMLElement>,\n params: FieldConfig<T>,\n): FieldState<T> => {\n const [fieldProps, controlProps] = getPartitionedFieldProps(props);\n const { orientation = 'vertical', validationState } = fieldProps;\n const { labelConnection = 'htmlFor', ariaInvalidOnError = true } = params;\n\n const baseId = useId('field-');\n\n const root = resolveShorthand(fieldProps.root, {\n required: true,\n defaultProps: getNativeElementProps('div', fieldProps),\n });\n\n const label = resolveShorthand(fieldProps.label, {\n defaultProps: {\n id: baseId + '__label',\n required: controlProps.required,\n size: typeof controlProps.size === 'string' ? controlProps.size : undefined,\n // htmlFor is handled below\n },\n });\n\n const validationMessage = resolveShorthand(fieldProps.validationMessage, {\n defaultProps: {\n id: baseId + '__validationMessage',\n },\n });\n\n const hint = resolveShorthand(fieldProps.hint, {\n defaultProps: {\n id: baseId + '__hint',\n },\n });\n\n const validationMessageIcon = resolveShorthand(fieldProps.validationMessageIcon, {\n required: !!validationState,\n defaultProps: {\n children: validationState ? validationMessageIcons[validationState] : undefined,\n },\n });\n\n // Hook up aria props on the control\n if (label && labelConnection === 'aria-labelledby') {\n controlProps['aria-labelledby'] ??= label.id;\n }\n\n if (validationMessage || hint) {\n // The control is described by the validation message, or hint, or both\n // We also preserve and append any aria-describedby supplied by the user\n // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933\n controlProps['aria-describedby'] = [validationMessage?.id, hint?.id, controlProps['aria-describedby']]\n .filter(Boolean)\n .join(' ');\n }\n\n if (validationState === 'error' && ariaInvalidOnError) {\n controlProps['aria-invalid'] ??= true;\n }\n\n const control = resolveShorthand(fieldProps.control, {\n required: true,\n defaultProps: {\n ref,\n id: baseId + '__control',\n ...controlProps,\n },\n });\n\n if (label && labelConnection === 'htmlFor') {\n label.htmlFor ??= control.id;\n }\n\n const state: FieldState<FieldControl> = {\n orientation,\n validationState,\n classNames: params.classNames,\n components: {\n root: 'div',\n control: params.component,\n label: Label,\n validationMessage: 'div',\n validationMessageIcon: 'span',\n hint: 'div',\n },\n root,\n control,\n label,\n validationMessageIcon,\n validationMessage,\n hint,\n };\n\n return state as FieldState<T>;\n};\n"]}
1
+ {"version":3,"mappings":"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","names":["validationMessageIcons","error","React","react_icons_1","warning","success","getPartitionedFieldProps","props","className","control","hint","label","orientation","root","style","validationMessage","validationMessageIcon","validationState","restOfProps","fieldProps","exports","useField_unstable","ref","params","controlProps","labelConnection","ariaInvalidOnError","baseId","react_utilities_1","required","defaultProps","id","size","undefined","role","children","filter","Boolean","join","htmlFor","state","classNames","components","component","react_label_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/useField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { FieldConfig, FieldControl, FieldPropsWithOptionalComponentProps, FieldState } from './Field.types';\n\nconst validationMessageIcons = {\n error: <ErrorCircle12Filled />,\n warning: <Warning12Filled />,\n success: <CheckmarkCircle12Filled />,\n} as const;\n\n/**\n * Partition the props used by the Field itself, from the props that are passed to the underlying field component.\n */\nexport const getPartitionedFieldProps = (props: FieldPropsWithOptionalComponentProps<FieldControl>) => {\n const {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n ...restOfProps\n } = props;\n\n const fieldProps = {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n };\n\n return [fieldProps, restOfProps] as const;\n};\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the control slot (primary slot)\n * @param params - Configuration parameters for this Field\n */\nexport const useField_unstable = <T extends FieldControl>(\n props: FieldPropsWithOptionalComponentProps<T>,\n ref: React.Ref<HTMLElement>,\n params: FieldConfig<T>,\n): FieldState<T> => {\n const [fieldProps, controlProps] = getPartitionedFieldProps(props);\n const { orientation = 'vertical', validationState } = fieldProps;\n const { labelConnection = 'htmlFor', ariaInvalidOnError = true } = params;\n\n const baseId = useId('field-');\n\n const root = resolveShorthand(fieldProps.root, {\n required: true,\n defaultProps: getNativeElementProps('div', fieldProps),\n });\n\n const label = resolveShorthand(fieldProps.label, {\n defaultProps: {\n id: baseId + '__label',\n required: controlProps.required,\n size: typeof controlProps.size === 'string' ? controlProps.size : undefined,\n // htmlFor is handled below\n },\n });\n\n const validationMessage = resolveShorthand(fieldProps.validationMessage, {\n defaultProps: {\n id: baseId + '__validationMessage',\n role: validationState === 'error' ? 'alert' : undefined,\n },\n });\n\n const hint = resolveShorthand(fieldProps.hint, {\n defaultProps: {\n id: baseId + '__hint',\n },\n });\n\n const validationMessageIcon = resolveShorthand(fieldProps.validationMessageIcon, {\n required: !!validationState,\n defaultProps: {\n children: validationState ? validationMessageIcons[validationState] : undefined,\n },\n });\n\n // Hook up aria props on the control\n if (label && labelConnection === 'aria-labelledby') {\n controlProps['aria-labelledby'] ??= label.id;\n }\n\n if (validationMessage || hint) {\n // The control is described by the validation message, or hint, or both\n // We also preserve and append any aria-describedby supplied by the user\n // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933\n controlProps['aria-describedby'] = [validationMessage?.id, hint?.id, controlProps['aria-describedby']]\n .filter(Boolean)\n .join(' ');\n }\n\n if (validationState === 'error' && ariaInvalidOnError) {\n controlProps['aria-invalid'] ??= true;\n }\n\n const control = resolveShorthand(fieldProps.control, {\n required: true,\n defaultProps: {\n ref,\n id: baseId + '__control',\n ...controlProps,\n },\n });\n\n if (label && labelConnection === 'htmlFor') {\n label.htmlFor ??= control.id;\n }\n\n const state: FieldState<FieldControl> = {\n orientation,\n validationState,\n classNames: params.classNames,\n components: {\n root: 'div',\n control: params.component,\n label: Label,\n validationMessage: 'div',\n validationMessageIcon: 'span',\n hint: 'div',\n },\n root,\n control,\n label,\n validationMessageIcon,\n validationMessage,\n hint,\n };\n\n return state as FieldState<T>;\n};\n"]}
package/lib-commonjs/components/Field/useFieldStyles.js CHANGED
@@ -15,83 +15,62 @@ const getFieldClassNames = name => ({
15
15
  hint: `fui-${name}__hint`
16
16
  });
17
17
  exports.getFieldClassNames = getFieldClassNames;
18
+ // Size of the icon in the validation message
19
+ const iconSize = '12px';
18
20
  /**
19
21
  * Styles for the root slot
20
22
  */
21
23
  const useRootStyles = /*#__PURE__*/react_1.__styles({
22
24
  base: {
23
- mc9l5x: "f13qh94s",
24
- Bxotwcr: "f14np9u9",
25
- Budl1dq: "fjxzuw",
26
- zoa1oz: "f6nraym",
27
- B7hvi0a: "f1m2n5bn"
25
+ mc9l5x: "f13qh94s"
28
26
  },
29
27
  horizontal: {
30
- Budl1dq: "fwibhjm",
31
- zoa1oz: "f7bqb3c"
28
+ Budl1dq: "f2wwaib",
29
+ wkccdc: "f1645dqt"
32
30
  },
33
- label: {
34
- Br312pm: "f150pcdf",
35
- Bw0ie65: "fwm4whi",
36
- Ijaq50: "f1tty21m",
37
- nk6f5a: "f19648ye"
38
- },
39
- control: {
40
- Br312pm: "f1bfa6ju",
41
- Bw0ie65: "fl3lap4"
42
- },
43
- validationIcon: {
44
- Br312pm: "ftfzah7",
45
- Bw0ie65: "f1fih8f9"
46
- },
47
- validationMessage: {
48
- Br312pm: "f1n69xcw",
49
- Bw0ie65: "f1hw1m5m"
50
- },
51
- hint: {
52
- Br312pm: "fbug73u",
53
- Bw0ie65: "fbtgo1w"
31
+ horizontalNoLabel: {
32
+ uwmqm3: ["f15jqgz8", "fggqkej"],
33
+ Budl1dq: "f1c2z91y"
54
34
  }
55
35
  }, {
56
- d: [".f13qh94s{display:grid;}", ".f14np9u9{grid-auto-flow:row;}", ".fjxzuw{grid-template-columns:auto 1fr;}", ".f6nraym{grid-template-areas:\"label label\" \"control control\" \"validationIcon validationMessage\" \"hint hint\";}", ".f1m2n5bn{justify-items:start;}", ".fwibhjm{grid-template-columns:33% auto 1fr;}", ".f7bqb3c{grid-template-areas:\"label control control\" \"label validationIcon validationMessage\" \"label hint hint\" \"label . .\";}", ".f150pcdf{grid-column-start:label;}", ".fwm4whi{grid-column-end:label;}", ".f1tty21m{grid-row-start:label;}", ".f19648ye{grid-row-end:label;}", ".f1bfa6ju{grid-column-start:control;}", ".fl3lap4{grid-column-end:control;}", ".ftfzah7{grid-column-start:validationIcon;}", ".f1fih8f9{grid-column-end:validationIcon;}", ".f1n69xcw{grid-column-start:validationMessage;}", ".f1hw1m5m{grid-column-end:validationMessage;}", ".fbug73u{grid-column-start:hint;}", ".fbtgo1w{grid-column-end:hint;}"]
36
+ d: [".f13qh94s{display:grid;}", ".f2wwaib{grid-template-columns:33% 1fr;}", ".f1645dqt{grid-template-rows:auto auto auto 1fr;}", ".f15jqgz8{padding-left:33%;}", ".fggqkej{padding-right:33%;}", ".f1c2z91y{grid-template-columns:1fr;}"]
57
37
  });
58
38
  const useLabelStyles = /*#__PURE__*/react_1.__styles({
59
39
  base: {
60
- B6of3ja: "fg30ohd",
40
+ z8tnut: "fclwglc",
41
+ Byoj8tv: "fywfov9"
42
+ },
43
+ large: {
44
+ z8tnut: "f1sl3k7w",
45
+ Byoj8tv: "f1brlhvm"
46
+ },
47
+ vertical: {
61
48
  jrapky: "fyacil5"
62
49
  },
50
+ verticalLarge: {
51
+ jrapky: "f8l5zjj"
52
+ },
63
53
  horizontal: {
64
54
  t21cq0: ["fkujibs", "f199hnxi"],
65
- qb2dma: "f9h729m",
66
- Bdqf98w: "fhb5wj7"
55
+ Ijaq50: "f16hsg94",
56
+ nk6f5a: "f1nzqi2z"
67
57
  }
68
58
  }, {
69
- d: [".fg30ohd{margin-top:var(--spacingVerticalXXS);}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".fhb5wj7{justify-self:stretch;}"]
59
+ d: [".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}", ".f1sl3k7w{padding-top:1px;}", ".f1brlhvm{padding-bottom:1px;}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".f16hsg94{grid-row-start:1;}", ".f1nzqi2z{grid-row-end:-1;}"]
70
60
  });
61
+ const useSecondaryTextBaseClassName = /*#__PURE__*/react_1.__resetStyles("r5c4z9l", null, [".r5c4z9l{margin-top:var(--spacingVerticalXXS);color:var(--colorNeutralForeground3);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"]);
71
62
  const useSecondaryTextStyles = /*#__PURE__*/react_1.__styles({
72
- base: {
73
- B6of3ja: "fg30ohd",
74
- sj55zd: "f11d4kpn",
75
- Bahqtrf: "fk6fouc",
76
- Be2twd7: "fy9rknc",
77
- Bhrd7zp: "figsok6",
78
- Bg96gwp: "fwrc4pm"
79
- },
80
63
  error: {
81
64
  sj55zd: "f1hcrxcs"
65
+ },
66
+ withIcon: {
67
+ uwmqm3: ["frawy03", "fg4c52"]
82
68
  }
83
69
  }, {
84
- d: [".fg30ohd{margin-top:var(--spacingVerticalXXS);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}"]
70
+ d: [".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".frawy03{padding-left:calc(12px + var(--spacingHorizontalXS));}", ".fg4c52{padding-right:calc(12px + var(--spacingHorizontalXS));}"]
85
71
  });
72
+ const useValidationMessageIconBaseClassName = /*#__PURE__*/react_1.__resetStyles("ra7h1uk", "r1rh6bd7", [".ra7h1uk{display:inline-block;font-size:12px;margin-left:calc(-12px - var(--spacingHorizontalXS));margin-right:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}", ".r1rh6bd7{display:inline-block;font-size:12px;margin-right:calc(-12px - var(--spacingHorizontalXS));margin-left:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}"]);
86
73
  const useValidationMessageIconStyles = /*#__PURE__*/react_1.__styles({
87
- base: {
88
- mc9l5x: "ftgm304",
89
- qb2dma: "f9h729m",
90
- Be2twd7: "f1ugzwwg",
91
- Bg96gwp: "fp4gqsa",
92
- t21cq0: ["fm0x6gh", "fbyavb5"],
93
- B6of3ja: "fww94b8"
94
- },
95
74
  error: {
96
75
  sj55zd: "f1hcrxcs"
97
76
  },
@@ -102,7 +81,7 @@ const useValidationMessageIconStyles = /*#__PURE__*/react_1.__styles({
102
81
  sj55zd: "ffmvakt"
103
82
  }
104
83
  }, {
105
- d: [".ftgm304{display:block;}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".f1ugzwwg{font-size:12px;}", ".fp4gqsa{line-height:12px;}", ".fm0x6gh{margin-right:var(--spacingHorizontalXS);}", ".fbyavb5{margin-left:var(--spacingHorizontalXS);}", ".fww94b8{margin-top:var(--spacingVerticalXS);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}"]
84
+ d: [".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}"]
106
85
  });
107
86
  /**
108
87
  * Apply styling to the Field slots based on the state
@@ -112,24 +91,26 @@ const useFieldStyles_unstable = state => {
112
91
  const validationState = state.validationState;
113
92
  const horizontal = state.orientation === 'horizontal';
114
93
  const rootStyles = useRootStyles();
115
- state.root.className = react_1.mergeClasses(classNames.root, rootStyles.base, horizontal && rootStyles.horizontal, state.root.className);
94
+ state.root.className = react_1.mergeClasses(classNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
116
95
  if (state.control) {
117
- state.control.className = react_1.mergeClasses(classNames.control, rootStyles.control, state.control.className);
96
+ state.control.className = react_1.mergeClasses(classNames.control, state.control.className);
118
97
  }
119
98
  const labelStyles = useLabelStyles();
120
99
  if (state.label) {
121
- state.label.className = react_1.mergeClasses(classNames.label, rootStyles.label, labelStyles.base, state.label.className);
100
+ state.label.className = react_1.mergeClasses(classNames.label, labelStyles.base, horizontal && labelStyles.horizontal, !horizontal && labelStyles.vertical, state.label.size === 'large' && labelStyles.large, !horizontal && state.label.size === 'large' && labelStyles.verticalLarge, state.label.className);
122
101
  }
102
+ const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
123
103
  const validationMessageIconStyles = useValidationMessageIconStyles();
124
104
  if (state.validationMessageIcon) {
125
- state.validationMessageIcon.className = react_1.mergeClasses(classNames.validationMessageIcon, rootStyles.validationIcon, validationMessageIconStyles.base, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
105
+ state.validationMessageIcon.className = react_1.mergeClasses(classNames.validationMessageIcon, validationMessageIconBaseClassName, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
126
106
  }
107
+ const secondaryTextBaseClassName = useSecondaryTextBaseClassName();
127
108
  const secondaryTextStyles = useSecondaryTextStyles();
128
109
  if (state.validationMessage) {
129
- state.validationMessage.className = react_1.mergeClasses(classNames.validationMessage, rootStyles.validationMessage, secondaryTextStyles.base, validationState === 'error' && secondaryTextStyles.error, state.validationMessage.className);
110
+ state.validationMessage.className = react_1.mergeClasses(classNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);
130
111
  }
131
112
  if (state.hint) {
132
- state.hint.className = react_1.mergeClasses(classNames.hint, secondaryTextStyles.base, rootStyles.hint, state.hint.className);
113
+ state.hint.className = react_1.mergeClasses(classNames.hint, secondaryTextBaseClassName, state.hint.className);
133
114
  }
134
115
  };
135
116
  exports.useFieldStyles_unstable = useFieldStyles_unstable;
package/lib-commonjs/components/Field/useFieldStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"mappings":"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","names":["getFieldClassNames","name","root","control","label","validationMessage","validationMessageIcon","hint","exports","useRootStyles","react_1","useLabelStyles","useSecondaryTextStyles","useValidationMessageIconStyles","useFieldStyles_unstable","state","classNames","validationState","horizontal","orientation","rootStyles","className","base","labelStyles","validationMessageIconStyles","validationIcon","secondaryTextStyles","error"],"sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/useFieldStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldControl, FieldProps, FieldSlots, FieldState } from './Field.types';\n\nexport const getFieldClassNames = (name: string): SlotClassNames<FieldSlots<FieldControl>> => ({\n root: `fui-${name}`,\n control: `fui-${name}__control`,\n label: `fui-${name}__label`,\n validationMessage: `fui-${name}__validationMessage`,\n validationMessageIcon: `fui-${name}__validationMessageIcon`,\n hint: `fui-${name}__hint`,\n});\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'grid',\n gridAutoFlow: 'row',\n gridTemplateColumns: 'auto 1fr',\n gridTemplateAreas: `\n \"label label\"\n \"control control\"\n \"validationIcon validationMessage\"\n \"hint hint\"\n `,\n justifyItems: 'start',\n },\n\n horizontal: {\n gridTemplateColumns: '33% auto 1fr',\n gridTemplateAreas: `\n \"label control control\"\n \"label validationIcon validationMessage\"\n \"label hint hint\"\n \"label . .\"\n `,\n },\n\n label: {\n gridColumnStart: 'label',\n gridColumnEnd: 'label',\n gridRowStart: 'label',\n gridRowEnd: 'label',\n },\n\n control: {\n gridColumnStart: 'control',\n gridColumnEnd: 'control',\n },\n\n validationIcon: {\n gridColumnStart: 'validationIcon',\n gridColumnEnd: 'validationIcon',\n },\n\n validationMessage: {\n gridColumnStart: 'validationMessage',\n gridColumnEnd: 'validationMessage',\n },\n\n hint: {\n gridColumnStart: 'hint',\n gridColumnEnd: 'hint',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n marginTop: tokens.spacingVerticalXXS,\n marginBottom: tokens.spacingVerticalXXS,\n },\n\n horizontal: {\n marginRight: tokens.spacingHorizontalM,\n alignSelf: 'start',\n justifySelf: 'stretch',\n },\n});\n\nconst useSecondaryTextStyles = makeStyles({\n base: {\n marginTop: tokens.spacingVerticalXXS,\n color: tokens.colorNeutralForeground3,\n ...typographyStyles.caption1,\n },\n\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\n});\n\nconst useValidationMessageIconStyles = makeStyles({\n base: {\n display: 'block',\n alignSelf: 'start',\n fontSize: '12px',\n lineHeight: '12px',\n marginRight: tokens.spacingHorizontalXS,\n marginTop: tokens.spacingVerticalXS,\n },\n\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\n warning: {\n color: tokens.colorPaletteDarkOrangeForeground1,\n },\n success: {\n color: tokens.colorPaletteGreenForeground1,\n },\n});\n\n/**\n * Apply styling to the Field slots based on the state\n */\nexport const useFieldStyles_unstable = <T extends FieldControl>(state: FieldState<T>) => {\n const classNames = state.classNames;\n const validationState: FieldProps<FieldControl>['validationState'] = state.validationState;\n const horizontal = state.orientation === 'horizontal';\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n classNames.root,\n rootStyles.base,\n horizontal && rootStyles.horizontal,\n state.root.className,\n );\n\n if (state.control) {\n state.control.className = mergeClasses(classNames.control, rootStyles.control, state.control.className);\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(classNames.label, rootStyles.label, labelStyles.base, state.label.className);\n }\n\n const validationMessageIconStyles = useValidationMessageIconStyles();\n if (state.validationMessageIcon) {\n state.validationMessageIcon.className = mergeClasses(\n classNames.validationMessageIcon,\n rootStyles.validationIcon,\n validationMessageIconStyles.base,\n !!validationState && validationMessageIconStyles[validationState],\n state.validationMessageIcon.className,\n );\n }\n\n const secondaryTextStyles = useSecondaryTextStyles();\n if (state.validationMessage) {\n state.validationMessage.className = mergeClasses(\n classNames.validationMessage,\n rootStyles.validationMessage,\n secondaryTextStyles.base,\n validationState === 'error' && secondaryTextStyles.error,\n state.validationMessage.className,\n );\n }\n\n if (state.hint) {\n state.hint.className = mergeClasses(\n classNames.hint,\n secondaryTextStyles.base,\n rootStyles.hint,\n state.hint.className,\n );\n }\n};\n"]}
1
+ {"version":3,"mappings":";;;;;;AAAA;AAEA;AAGO,MAAMA,kBAAkB,GAAIC,IAAY,KAAgD;EAC7FC,IAAI,EAAE,OAAOD,IAAI,EAAE;EACnBE,OAAO,EAAE,OAAOF,IAAI,WAAW;EAC/BG,KAAK,EAAE,OAAOH,IAAI,SAAS;EAC3BI,iBAAiB,EAAE,OAAOJ,IAAI,qBAAqB;EACnDK,qBAAqB,EAAE,OAAOL,IAAI,yBAAyB;EAC3DM,IAAI,EAAE,OAAON,IAAI;CAClB,CAAC;AAPWO,0BAAkB;AAS/B;AACA,MAAMC,QAAQ,GAAG,MAAM;AAEvB;;;AAGA,MAAMC,aAAa,gBAAGC,gBAAU;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAkB9B;AAEF,MAAMC,cAAc,gBAAGD,gBAAU;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAwB/B;AAEF,MAAME,6BAA6B,gBAAGF,qBAAe,wPAInD;AAEF,MAAMG,sBAAsB,gBAAGH,gBAAU;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EASvC;AAEF,MAAMI,qCAAqC,gBAAGJ,qBAAe,4XAU3D;AAEF,MAAMK,8BAA8B,gBAAGL,gBAAU;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAU/C;AAEF;;;AAGO,MAAMM,uBAAuB,GAA4BC,KAAoB,IAAI;EACtF,MAAMC,UAAU,GAAGD,KAAK,CAACC,UAAU;EACnC,MAAMC,eAAe,GAAgDF,KAAK,CAACE,eAAe;EAC1F,MAAMC,UAAU,GAAGH,KAAK,CAACI,WAAW,KAAK,YAAY;EAErD,MAAMC,UAAU,GAAGb,aAAa,EAAE;EAClCQ,KAAK,CAAChB,IAAI,CAACsB,SAAS,GAAGb,oBAAY,CACjCQ,UAAU,CAACjB,IAAI,EACfqB,UAAU,CAACE,IAAI,EACfJ,UAAU,IAAIE,UAAU,CAACF,UAAU,EACnCA,UAAU,IAAI,CAACH,KAAK,CAACd,KAAK,IAAImB,UAAU,CAACG,iBAAiB,EAC1DR,KAAK,CAAChB,IAAI,CAACsB,SAAS,CACrB;EAED,IAAIN,KAAK,CAACf,OAAO,EAAE;IACjBe,KAAK,CAACf,OAAO,CAACqB,SAAS,GAAGb,oBAAY,CAACQ,UAAU,CAAChB,OAAO,EAAEe,KAAK,CAACf,OAAO,CAACqB,SAAS,CAAC;;EAGrF,MAAMG,WAAW,GAAGf,cAAc,EAAE;EACpC,IAAIM,KAAK,CAACd,KAAK,EAAE;IACfc,KAAK,CAACd,KAAK,CAACoB,SAAS,GAAGb,oBAAY,CAClCQ,UAAU,CAACf,KAAK,EAChBuB,WAAW,CAACF,IAAI,EAChBJ,UAAU,IAAIM,WAAW,CAACN,UAAU,EACpC,CAACA,UAAU,IAAIM,WAAW,CAACC,QAAQ,EACnCV,KAAK,CAACd,KAAK,CAACyB,IAAI,KAAK,OAAO,IAAIF,WAAW,CAACG,KAAK,EACjD,CAACT,UAAU,IAAIH,KAAK,CAACd,KAAK,CAACyB,IAAI,KAAK,OAAO,IAAIF,WAAW,CAACI,aAAa,EACxEb,KAAK,CAACd,KAAK,CAACoB,SAAS,CACtB;;EAGH,MAAMQ,kCAAkC,GAAGjB,qCAAqC,EAAE;EAClF,MAAMkB,2BAA2B,GAAGjB,8BAA8B,EAAE;EACpE,IAAIE,KAAK,CAACZ,qBAAqB,EAAE;IAC/BY,KAAK,CAACZ,qBAAqB,CAACkB,SAAS,GAAGb,oBAAY,CAClDQ,UAAU,CAACb,qBAAqB,EAChC0B,kCAAkC,EAClC,CAAC,CAACZ,eAAe,IAAIa,2BAA2B,CAACb,eAAe,CAAC,EACjEF,KAAK,CAACZ,qBAAqB,CAACkB,SAAS,CACtC;;EAGH,MAAMU,0BAA0B,GAAGrB,6BAA6B,EAAE;EAClE,MAAMsB,mBAAmB,GAAGrB,sBAAsB,EAAE;EACpD,IAAII,KAAK,CAACb,iBAAiB,EAAE;IAC3Ba,KAAK,CAACb,iBAAiB,CAACmB,SAAS,GAAGb,oBAAY,CAC9CQ,UAAU,CAACd,iBAAiB,EAC5B6B,0BAA0B,EAC1Bd,eAAe,KAAK,OAAO,IAAIe,mBAAmB,CAACC,KAAK,EACxD,CAAC,CAAClB,KAAK,CAACZ,qBAAqB,IAAI6B,mBAAmB,CAACE,QAAQ,EAC7DnB,KAAK,CAACb,iBAAiB,CAACmB,SAAS,CAClC;;EAGH,IAAIN,KAAK,CAACX,IAAI,EAAE;IACdW,KAAK,CAACX,IAAI,CAACiB,SAAS,GAAGb,oBAAY,CAACQ,UAAU,CAACZ,IAAI,EAAE2B,0BAA0B,EAAEhB,KAAK,CAACX,IAAI,CAACiB,SAAS,CAAC;;AAE1G,CAAC;AAzDYhB,+BAAuB","names":["getFieldClassNames","name","root","control","label","validationMessage","validationMessageIcon","hint","exports","iconSize","useRootStyles","react_1","useLabelStyles","useSecondaryTextBaseClassName","useSecondaryTextStyles","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","useFieldStyles_unstable","state","classNames","validationState","horizontal","orientation","rootStyles","className","base","horizontalNoLabel","labelStyles","vertical","size","large","verticalLarge","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles","error","withIcon"],"sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/useFieldStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldControl, FieldProps, FieldSlots, FieldState } from './Field.types';\n\nexport const getFieldClassNames = (name: string): SlotClassNames<FieldSlots<FieldControl>> => ({\n root: `fui-${name}`,\n control: `fui-${name}__control`,\n label: `fui-${name}__label`,\n validationMessage: `fui-${name}__validationMessage`,\n validationMessageIcon: `fui-${name}__validationMessageIcon`,\n hint: `fui-${name}__hint`,\n});\n\n// Size of the icon in the validation message\nconst iconSize = '12px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'grid',\n },\n\n // In horizontal layout, the field is a grid with the label taking up the entire first column.\n // The last row is slack space in case the label is taller than the rest of the content.\n horizontal: {\n gridTemplateColumns: '33% 1fr',\n gridTemplateRows: 'auto auto auto 1fr',\n },\n\n // In horizontal layout without a label, replace the label's column with padding.\n // This lets grid auto-flow properly place the other children, and keeps fields with and without labels aligned.\n horizontalNoLabel: {\n paddingLeft: '33%',\n gridTemplateColumns: '1fr',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n paddingTop: tokens.spacingVerticalXXS,\n paddingBottom: tokens.spacingVerticalXXS,\n },\n\n large: {\n paddingTop: '1px',\n paddingBottom: '1px',\n },\n\n vertical: {\n marginBottom: tokens.spacingVerticalXXS,\n },\n\n verticalLarge: {\n marginBottom: tokens.spacingVerticalXS,\n },\n\n horizontal: {\n marginRight: tokens.spacingHorizontalM,\n gridRowStart: '1',\n gridRowEnd: '-1',\n },\n});\n\nconst useSecondaryTextBaseClassName = makeResetStyles({\n marginTop: tokens.spacingVerticalXXS,\n color: tokens.colorNeutralForeground3,\n ...typographyStyles.caption1,\n});\n\nconst useSecondaryTextStyles = makeStyles({\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\n\n withIcon: {\n // Add a gutter for the icon, to allow multiple lines of text to line up to the right of the icon.\n paddingLeft: `calc(${iconSize} + ${tokens.spacingHorizontalXS})`,\n },\n});\n\nconst useValidationMessageIconBaseClassName = makeResetStyles({\n display: 'inline-block',\n fontSize: iconSize,\n // Negative left margin puts the icon in the gutter of the validation message div's withIcon style.\n marginLeft: `calc(-${iconSize} - ${tokens.spacingHorizontalXS})`,\n marginRight: tokens.spacingHorizontalXS,\n // Line height of 0 prevents the verticalAlign from affecting the line height of the text.\n lineHeight: '0',\n // Negative verticalAlign shifts the inline icon down to align with the text (effectively top padding).\n verticalAlign: '-1px',\n});\n\nconst useValidationMessageIconStyles = makeStyles({\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\n warning: {\n color: tokens.colorPaletteDarkOrangeForeground1,\n },\n success: {\n color: tokens.colorPaletteGreenForeground1,\n },\n});\n\n/**\n * Apply styling to the Field slots based on the state\n */\nexport const useFieldStyles_unstable = <T extends FieldControl>(state: FieldState<T>) => {\n const classNames = state.classNames;\n const validationState: FieldProps<FieldControl>['validationState'] = state.validationState;\n const horizontal = state.orientation === 'horizontal';\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n classNames.root,\n rootStyles.base,\n horizontal && rootStyles.horizontal,\n horizontal && !state.label && rootStyles.horizontalNoLabel,\n state.root.className,\n );\n\n if (state.control) {\n state.control.className = mergeClasses(classNames.control, state.control.className);\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n classNames.label,\n labelStyles.base,\n horizontal && labelStyles.horizontal,\n !horizontal && labelStyles.vertical,\n state.label.size === 'large' && labelStyles.large,\n !horizontal && state.label.size === 'large' && labelStyles.verticalLarge,\n state.label.className,\n );\n }\n\n const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();\n const validationMessageIconStyles = useValidationMessageIconStyles();\n if (state.validationMessageIcon) {\n state.validationMessageIcon.className = mergeClasses(\n classNames.validationMessageIcon,\n validationMessageIconBaseClassName,\n !!validationState && validationMessageIconStyles[validationState],\n state.validationMessageIcon.className,\n );\n }\n\n const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n const secondaryTextStyles = useSecondaryTextStyles();\n if (state.validationMessage) {\n state.validationMessage.className = mergeClasses(\n classNames.validationMessage,\n secondaryTextBaseClassName,\n validationState === 'error' && secondaryTextStyles.error,\n !!state.validationMessageIcon && secondaryTextStyles.withIcon,\n state.validationMessage.className,\n );\n }\n\n if (state.hint) {\n state.hint.className = mergeClasses(classNames.hint, secondaryTextBaseClassName, state.hint.className);\n }\n};\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-field",
3
- "version": "9.0.0-alpha.15",
3
+ "version": "9.0.0-alpha.16",
4
4
  "description": "Fluent UI Field components",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",