@khanacademy/wonder-blocks-labeled-field 2.1.2 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/dist/components/labeled-field.d.ts +8 -2
  3. package/dist/es/index.js +19 -19
  4. package/dist/index.js +18 -18
  5. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,37 @@
1
1
  # @khanacademy/wonder-blocks-labeled-field
2
2
 
3
+ ## 3.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - 415f758: Remove `style` prop in favour of `styles` prop. Styling can be applied to the root instead using the `styles` prop
8
+
9
+ ### Minor Changes
10
+
11
+ - 415f758: LabeledField
12
+
13
+ - Add `styles` prop to support custom stying for the label, description, and error elements
14
+ - Use CSS padding instead of `<Strut>` for spacing
15
+ - Migrated to `sizing` tokens instead of `spacing`
16
+
17
+ ### Patch Changes
18
+
19
+ - 1d7be37: Use pnpm catalog to pin dependency versions across packages
20
+ - Updated dependencies [1d7be37]
21
+ - Updated dependencies [999101f]
22
+ - @khanacademy/wonder-blocks-typography@3.1.3
23
+ - @khanacademy/wonder-blocks-layout@3.1.4
24
+ - @khanacademy/wonder-blocks-core@12.2.1
25
+ - @khanacademy/wonder-blocks-tokens@5.1.1
26
+
27
+ ## 2.1.3
28
+
29
+ ### Patch Changes
30
+
31
+ - Updated dependencies [507cf2f]
32
+ - @khanacademy/wonder-blocks-tokens@5.1.0
33
+ - @khanacademy/wonder-blocks-layout@3.1.3
34
+
3
35
  ## 2.1.2
4
36
 
5
37
  ### Patch Changes
package/dist/components/labeled-field.d.ts CHANGED
@@ -47,9 +47,15 @@ type Props = {
47
47
  */
48
48
  errorMessage?: React.ReactNode;
49
49
  /**
50
- * Custom styles for the labeled field container.
50
+ * Custom styles for the elements of LabeledField. Useful if there are
51
+ * specific cases where spacing between elements needs to be customized.
51
52
  */
52
- style?: StyleType;
53
+ styles?: {
54
+ root?: StyleType;
55
+ label?: StyleType;
56
+ description?: StyleType;
57
+ error?: StyleType;
58
+ };
53
59
  /**
54
60
  * A unique id to use as the base of the ids for the elements within the component.
55
61
  * Here is how the id is used for the different elements in the component:
package/dist/es/index.js CHANGED
@@ -2,8 +2,7 @@ import * as React from 'react';
2
2
  import { StyleSheet } from 'aphrodite';
3
3
  import WarningCircle from '@phosphor-icons/core/bold/warning-circle-bold.svg';
4
4
  import { addStyle, View } from '@khanacademy/wonder-blocks-core';
5
- import { Strut } from '@khanacademy/wonder-blocks-layout';
6
- import { semanticColor, spacing } from '@khanacademy/wonder-blocks-tokens';
5
+ import { semanticColor, sizing } from '@khanacademy/wonder-blocks-tokens';
7
6
  import { LabelMedium, LabelSmall } from '@khanacademy/wonder-blocks-typography';
8
7
  import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
9
8
 
@@ -14,7 +13,7 @@ const StyledSpan = addStyle("span");
14
13
  function LabeledField(props) {
15
14
  const {
16
15
  field,
17
- style,
16
+ styles: stylesProp,
18
17
  label,
19
18
  id,
20
19
  required,
@@ -37,30 +36,26 @@ function LabeledField(props) {
37
36
  "aria-hidden": true
38
37
  }, " ", "*");
39
38
  return React.createElement(React.Fragment, null, React.createElement(LabelMedium, {
40
- style: [styles.textWordBreak, styles.label],
39
+ style: [styles.textWordBreak, styles.label, description ? styles.labelWithDescription : styles.labelWithNoDescription, stylesProp == null ? void 0 : stylesProp.label],
41
40
  tag: "label",
42
41
  htmlFor: fieldId,
43
42
  testId: testId && `${testId}-label`,
44
43
  id: labelId
45
- }, label, isRequired && requiredIcon), React.createElement(Strut, {
46
- size: spacing.xxxSmall_4
47
- }));
44
+ }, label, isRequired && requiredIcon));
48
45
  }
49
46
  function maybeRenderDescription() {
50
47
  if (!description) {
51
48
  return null;
52
49
  }
53
50
  return React.createElement(React.Fragment, null, React.createElement(LabelSmall, {
54
- style: [styles.textWordBreak, styles.description],
51
+ style: [styles.textWordBreak, styles.description, stylesProp == null ? void 0 : stylesProp.description],
55
52
  testId: testId && `${testId}-description`,
56
53
  id: descriptionId
57
- }, description), React.createElement(Strut, {
58
- size: spacing.xxxSmall_4
59
- }));
54
+ }, description));
60
55
  }
61
56
  function maybeRenderError() {
62
57
  return React.createElement(React.Fragment, null, React.createElement(View, {
63
- style: [styles.errorSection, errorMessage ? styles.errorSectionWithContent : undefined],
58
+ style: [styles.errorSection, errorMessage ? styles.errorSectionWithContent : undefined, stylesProp == null ? void 0 : stylesProp.error],
64
59
  id: errorId,
65
60
  testId: testId && `${testId}-error`,
66
61
  "aria-live": "assertive",
@@ -84,24 +79,29 @@ function LabeledField(props) {
84
79
  });
85
80
  }
86
81
  return React.createElement(View, {
87
- style: style
88
- }, renderLabel(), maybeRenderDescription(), React.createElement(Strut, {
89
- size: spacing.xSmall_8
90
- }), renderField(), maybeRenderError());
82
+ style: stylesProp == null ? void 0 : stylesProp.root
83
+ }, renderLabel(), maybeRenderDescription(), renderField(), maybeRenderError());
91
84
  }
92
85
  const styles = StyleSheet.create({
93
86
  label: {
94
87
  color: semanticColor.text.primary
95
88
  },
89
+ labelWithDescription: {
90
+ paddingBlockEnd: sizing.size_050
91
+ },
92
+ labelWithNoDescription: {
93
+ paddingBlockEnd: sizing.size_150
94
+ },
96
95
  description: {
97
- color: semanticColor.text.secondary
96
+ color: semanticColor.text.secondary,
97
+ paddingBlockEnd: sizing.size_150
98
98
  },
99
99
  errorSection: {
100
100
  flexDirection: "row",
101
- gap: spacing.xSmall_8
101
+ gap: sizing.size_100
102
102
  },
103
103
  errorSectionWithContent: {
104
- paddingTop: spacing.small_12
104
+ paddingBlockStart: sizing.size_150
105
105
  },
106
106
  error: {
107
107
  color: semanticColor.status.critical.foreground
package/dist/index.js CHANGED
@@ -6,7 +6,6 @@ var React = require('react');
6
6
  var aphrodite = require('aphrodite');
7
7
  var WarningCircle = require('@phosphor-icons/core/bold/warning-circle-bold.svg');
8
8
  var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
9
- var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
10
9
  var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
11
10
  var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
12
11
  var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
@@ -41,7 +40,7 @@ const StyledSpan = wonderBlocksCore.addStyle("span");
41
40
  function LabeledField(props) {
42
41
  const {
43
42
  field,
44
- style,
43
+ styles: stylesProp,
45
44
  label,
46
45
  id,
47
46
  required,
@@ -64,30 +63,26 @@ function LabeledField(props) {
64
63
  "aria-hidden": true
65
64
  }, " ", "*");
66
65
  return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
67
- style: [styles.textWordBreak, styles.label],
66
+ style: [styles.textWordBreak, styles.label, description ? styles.labelWithDescription : styles.labelWithNoDescription, stylesProp == null ? void 0 : stylesProp.label],
68
67
  tag: "label",
69
68
  htmlFor: fieldId,
70
69
  testId: testId && `${testId}-label`,
71
70
  id: labelId
72
- }, label, isRequired && requiredIcon), React__namespace.createElement(wonderBlocksLayout.Strut, {
73
- size: wonderBlocksTokens.spacing.xxxSmall_4
74
- }));
71
+ }, label, isRequired && requiredIcon));
75
72
  }
76
73
  function maybeRenderDescription() {
77
74
  if (!description) {
78
75
  return null;
79
76
  }
80
77
  return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
81
- style: [styles.textWordBreak, styles.description],
78
+ style: [styles.textWordBreak, styles.description, stylesProp == null ? void 0 : stylesProp.description],
82
79
  testId: testId && `${testId}-description`,
83
80
  id: descriptionId
84
- }, description), React__namespace.createElement(wonderBlocksLayout.Strut, {
85
- size: wonderBlocksTokens.spacing.xxxSmall_4
86
- }));
81
+ }, description));
87
82
  }
88
83
  function maybeRenderError() {
89
84
  return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksCore.View, {
90
- style: [styles.errorSection, errorMessage ? styles.errorSectionWithContent : undefined],
85
+ style: [styles.errorSection, errorMessage ? styles.errorSectionWithContent : undefined, stylesProp == null ? void 0 : stylesProp.error],
91
86
  id: errorId,
92
87
  testId: testId && `${testId}-error`,
93
88
  "aria-live": "assertive",
@@ -111,24 +106,29 @@ function LabeledField(props) {
111
106
  });
112
107
  }
113
108
  return React__namespace.createElement(wonderBlocksCore.View, {
114
- style: style
115
- }, renderLabel(), maybeRenderDescription(), React__namespace.createElement(wonderBlocksLayout.Strut, {
116
- size: wonderBlocksTokens.spacing.xSmall_8
117
- }), renderField(), maybeRenderError());
109
+ style: stylesProp == null ? void 0 : stylesProp.root
110
+ }, renderLabel(), maybeRenderDescription(), renderField(), maybeRenderError());
118
111
  }
119
112
  const styles = aphrodite.StyleSheet.create({
120
113
  label: {
121
114
  color: wonderBlocksTokens.semanticColor.text.primary
122
115
  },
116
+ labelWithDescription: {
117
+ paddingBlockEnd: wonderBlocksTokens.sizing.size_050
118
+ },
119
+ labelWithNoDescription: {
120
+ paddingBlockEnd: wonderBlocksTokens.sizing.size_150
121
+ },
123
122
  description: {
124
- color: wonderBlocksTokens.semanticColor.text.secondary
123
+ color: wonderBlocksTokens.semanticColor.text.secondary,
124
+ paddingBlockEnd: wonderBlocksTokens.sizing.size_150
125
125
  },
126
126
  errorSection: {
127
127
  flexDirection: "row",
128
- gap: wonderBlocksTokens.spacing.xSmall_8
128
+ gap: wonderBlocksTokens.sizing.size_100
129
129
  },
130
130
  errorSectionWithContent: {
131
- paddingTop: wonderBlocksTokens.spacing.small_12
131
+ paddingBlockStart: wonderBlocksTokens.sizing.size_150
132
132
  },
133
133
  error: {
134
134
  color: wonderBlocksTokens.semanticColor.status.critical.foreground
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-labeled-field",
3
- "version": "2.1.2",
3
+ "version": "3.0.0",
4
4
  "design": "v1",
5
5
  "description": "LabeledField handles accessibility and layout for associating labels with form components.",
6
6
  "main": "dist/index.js",
@@ -13,10 +13,10 @@
13
13
  },
14
14
  "dependencies": {
15
15
  "@babel/runtime": "^7.24.5",
16
- "@khanacademy/wonder-blocks-core": "12.2.0",
17
- "@khanacademy/wonder-blocks-layout": "3.1.2",
18
- "@khanacademy/wonder-blocks-tokens": "5.0.0",
19
- "@khanacademy/wonder-blocks-typography": "3.1.2"
16
+ "@khanacademy/wonder-blocks-core": "12.2.1",
17
+ "@khanacademy/wonder-blocks-layout": "3.1.4",
18
+ "@khanacademy/wonder-blocks-tokens": "5.1.1",
19
+ "@khanacademy/wonder-blocks-typography": "3.1.3"
20
20
  },
21
21
  "peerDependencies": {
22
22
  "@phosphor-icons/core": "^2.0.2",