@instructure/ui-text 10.9.1-snapshot-4 → 10.9.1-snapshot-5

Sign up to get free protection for your applications and to get access to all the features.
Files changed (22) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/Text/__examples__/Text.examples.js +11 -5
  3. package/es/Text/index.js +20 -4
  4. package/es/Text/props.js +5 -4
  5. package/es/Text/styles.js +82 -9
  6. package/lib/Text/__examples__/Text.examples.js +11 -5
  7. package/lib/Text/index.js +20 -4
  8. package/lib/Text/props.js +5 -4
  9. package/lib/Text/styles.js +82 -9
  10. package/package.json +10 -10
  11. package/src/Text/README.md +59 -15
  12. package/src/Text/__examples__/Text.examples.ts +11 -15
  13. package/src/Text/index.tsx +20 -0
  14. package/src/Text/props.ts +66 -6
  15. package/src/Text/styles.ts +74 -9
  16. package/tsconfig.build.tsbuildinfo +1 -1
  17. package/types/Text/__examples__/Text.examples.d.ts.map +1 -1
  18. package/types/Text/index.d.ts +9 -6
  19. package/types/Text/index.d.ts.map +1 -1
  20. package/types/Text/props.d.ts +9 -3
  21. package/types/Text/props.d.ts.map +1 -1
  22. package/types/Text/styles.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [10.9.1-snapshot-4](https://github.com/instructure/instructure-ui/compare/v10.9.0...v10.9.1-snapshot-4) (2024-12-18)
6
+ ## [10.9.1-snapshot-5](https://github.com/instructure/instructure-ui/compare/v10.9.0...v10.9.1-snapshot-5) (2024-12-18)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-text
8
+
9
+ ### Features
10
+
11
+ * **many:** add new Typography tokens and update text and heading ([a09fa0f](https://github.com/instructure/instructure-ui/commit/a09fa0f9ee3b92e8b20415e1d57f5f465526936c))
9
12
 
10
13
 
11
14
 
package/es/Text/__examples__/Text.examples.js CHANGED
@@ -23,12 +23,12 @@
23
23
  */
24
24
 
25
25
  export default {
26
- sectionProp: 'weight',
26
+ sectionProp: 'variant',
27
27
  maxExamplesPerPage: 50,
28
28
  maxExamples: 1000,
29
- getComponentProps: props => {
29
+ getComponentProps: () => {
30
30
  return {
31
- children: props.size && ['x-small', 'small', 'medium', 'large'].includes(props.size) ? 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ullamco' : 'Lorem ipsum dolor sit amet, consectetur'
31
+ children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ullamco'
32
32
  };
33
33
  },
34
34
  getExampleProps: props => {
@@ -38,12 +38,18 @@ export default {
38
38
  maxWidth: '25rem'
39
39
  };
40
40
  },
41
+ propValues: {
42
+ weight: [void 0],
43
+ lineHeight: [void 0],
44
+ size: [void 0],
45
+ fontStyle: [void 0]
46
+ },
41
47
  filter: props => {
42
48
  return (
43
49
  // Only generate a 1 variation for non-'primary' color
44
- props.color !== 'primary' && (props.fontStyle !== 'normal' || props.letterSpacing !== 'normal' || props.lineHeight !== 'default' || props.size !== 'medium' || props.transform !== 'none' || props.weight !== 'normal' || props.wrap !== 'normal') ||
50
+ props.color !== 'primary' && (props.letterSpacing !== 'normal' || props.transform !== 'none' || props.wrap !== 'normal') ||
45
51
  // Only generate a 1 variation for non-'medium' size
46
- props.size !== 'medium' && (props.fontStyle !== 'normal' || props.letterSpacing !== 'normal' || props.lineHeight !== 'default' || props.transform !== 'none' || props.weight !== 'normal' || props.wrap !== 'normal')
52
+ props.size !== 'medium' && (props.letterSpacing !== 'normal' || props.transform !== 'none' || props.wrap !== 'normal')
47
53
  );
48
54
  }
49
55
  };
package/es/Text/index.js CHANGED
@@ -37,13 +37,29 @@ category: components
37
37
  ---
38
38
  **/
39
39
  let Text = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Text = class Text extends Component {
40
+ checkProps() {
41
+ const _this$props = this.props,
42
+ variant = _this$props.variant,
43
+ size = _this$props.size,
44
+ lineHeight = _this$props.lineHeight,
45
+ weight = _this$props.weight,
46
+ fontStyle = _this$props.fontStyle;
47
+ if (variant) {
48
+ if (size) {}
49
+ if (lineHeight) {}
50
+ if (weight) {}
51
+ if (fontStyle) {}
52
+ }
53
+ }
40
54
  componentDidMount() {
41
- var _this$props$makeStyle, _this$props;
42
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
55
+ var _this$props$makeStyle, _this$props2;
56
+ (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
57
+ this.checkProps();
43
58
  }
44
59
  componentDidUpdate() {
45
- var _this$props$makeStyle2, _this$props2;
46
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
60
+ var _this$props$makeStyle2, _this$props3;
61
+ (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
62
+ this.checkProps();
47
63
  }
48
64
  render() {
49
65
  var _this$props$styles;
package/es/Text/props.js CHANGED
@@ -30,11 +30,12 @@ const propTypes = {
30
30
  elementRef: PropTypes.func,
31
31
  fontStyle: PropTypes.oneOf(['italic', 'normal']),
32
32
  letterSpacing: PropTypes.oneOf(['normal', 'condensed', 'expanded']),
33
- lineHeight: PropTypes.oneOf(['default', 'fit', 'condensed', 'double']),
34
- size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large', 'x-large', 'xx-large']),
33
+ lineHeight: PropTypes.oneOf(['default', 'fit', 'condensed', 'double', 'lineHeight100', 'lineHeight125', 'lineHeight150']),
34
+ size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large', 'x-large', 'xx-large', 'descriptionPage', 'descriptionSection', 'content', 'contentSmall', 'legend']),
35
35
  transform: PropTypes.oneOf(['none', 'capitalize', 'uppercase', 'lowercase']),
36
- weight: PropTypes.oneOf(['normal', 'light', 'bold']),
36
+ variant: PropTypes.oneOf(['descriptionPage', 'descriptionSection', 'content', 'contentImportant', 'contentQuote', 'contentSmall', 'legend']),
37
+ weight: PropTypes.oneOf(['normal', 'light', 'bold', 'weightRegular', 'weightImportant']),
37
38
  wrap: PropTypes.oneOf(['normal', 'break-word'])
38
39
  };
39
- const allowedProps = ['as', 'children', 'color', 'elementRef', 'fontStyle', 'letterSpacing', 'lineHeight', 'size', 'transform', 'weight', 'wrap'];
40
+ const allowedProps = ['as', 'children', 'color', 'elementRef', 'fontStyle', 'letterSpacing', 'lineHeight', 'size', 'transform', 'variant', 'weight', 'wrap'];
40
41
  export { propTypes, allowedProps };
package/es/Text/styles.js CHANGED
@@ -40,7 +40,52 @@ const generateStyle = (componentTheme, props) => {
40
40
  transform = props.transform,
41
41
  lineHeight = props.lineHeight,
42
42
  letterSpacing = props.letterSpacing,
43
- color = props.color;
43
+ color = props.color,
44
+ variant = props.variant;
45
+ const variants = {
46
+ descriptionPage: {
47
+ fontStyle: 'normal',
48
+ fontWeight: componentTheme.weightRegular,
49
+ fontSize: componentTheme.descriptionPage,
50
+ lineHeight: componentTheme.lineHeight150
51
+ },
52
+ descriptionSection: {
53
+ fontStyle: 'normal',
54
+ fontWeight: componentTheme.weightRegular,
55
+ fontSize: componentTheme.descriptionSection,
56
+ lineHeight: componentTheme.lineHeight150
57
+ },
58
+ content: {
59
+ fontStyle: 'normal',
60
+ fontWeight: componentTheme.weightRegular,
61
+ fontSize: componentTheme.content,
62
+ lineHeight: componentTheme.lineHeight150
63
+ },
64
+ contentImportant: {
65
+ fontStyle: 'normal',
66
+ fontWeight: componentTheme.weightImportant,
67
+ fontSize: componentTheme.content,
68
+ lineHeight: componentTheme.lineHeight150
69
+ },
70
+ contentQuote: {
71
+ fontStyle: 'italic',
72
+ fontWeight: componentTheme.weightRegular,
73
+ fontSize: componentTheme.content,
74
+ lineHeight: componentTheme.lineHeight150
75
+ },
76
+ contentSmall: {
77
+ fontStyle: 'normal',
78
+ fontWeight: componentTheme.weightRegular,
79
+ fontSize: componentTheme.contentSmall,
80
+ lineHeight: componentTheme.lineHeight150
81
+ },
82
+ legend: {
83
+ fontStyle: 'normal',
84
+ fontWeight: componentTheme.weightRegular,
85
+ fontSize: componentTheme.legend,
86
+ lineHeight: componentTheme.lineHeight150
87
+ }
88
+ };
44
89
  const colorVariants = {
45
90
  primary: {
46
91
  color: componentTheme.primaryColor
@@ -81,6 +126,12 @@ const generateStyle = (componentTheme, props) => {
81
126
  },
82
127
  bold: {
83
128
  fontWeight: componentTheme.fontWeightBold
129
+ },
130
+ weightRegular: {
131
+ fontWeight: componentTheme.weightRegular
132
+ },
133
+ weightImportant: {
134
+ fontWeight: componentTheme.weightImportant
84
135
  }
85
136
  };
86
137
  const fontSizeVariants = {
@@ -89,7 +140,12 @@ const generateStyle = (componentTheme, props) => {
89
140
  medium: componentTheme.fontSizeMedium,
90
141
  large: componentTheme.fontSizeLarge,
91
142
  'x-large': componentTheme.fontSizeXLarge,
92
- 'xx-large': componentTheme.fontSizeXXLarge
143
+ 'xx-large': componentTheme.fontSizeXXLarge,
144
+ descriptionPage: componentTheme.descriptionPage,
145
+ descriptionSection: componentTheme.descriptionSection,
146
+ content: componentTheme.content,
147
+ contentSmall: componentTheme.contentSmall,
148
+ legend: componentTheme.legend
93
149
  };
94
150
  const lineHeightVariants = {
95
151
  default: {
@@ -103,6 +159,15 @@ const generateStyle = (componentTheme, props) => {
103
159
  },
104
160
  double: {
105
161
  lineHeight: componentTheme.lineHeightDouble
162
+ },
163
+ lineHeight100: {
164
+ lineHeight: componentTheme.lineHeight100
165
+ },
166
+ lineHeight125: {
167
+ lineHeight: componentTheme.lineHeight125
168
+ },
169
+ lineHeight150: {
170
+ lineHeight: componentTheme.lineHeight150
106
171
  }
107
172
  };
108
173
  const letterSpacingVariants = {
@@ -110,22 +175,30 @@ const generateStyle = (componentTheme, props) => {
110
175
  condensed: componentTheme.letterSpacingCondensed,
111
176
  expanded: componentTheme.letterSpacingExpanded
112
177
  };
178
+ const calcTextStyles = () => {
179
+ if (variant) {
180
+ return variants[variant];
181
+ }
182
+ return {
183
+ ...(weight ? weightStyle[weight] : {}),
184
+ ...(fontStyle ? {
185
+ fontStyle: fontStyle
186
+ } : {}),
187
+ fontSize: fontSizeVariants[size],
188
+ ...(lineHeight ? lineHeightVariants[lineHeight] : {})
189
+ };
190
+ };
113
191
  const baseStyles = {
114
192
  '&:focus': {
115
193
  outline: 'none'
116
194
  },
117
195
  ...(color ? colorVariants[color] : {}),
118
196
  ...(wrap === 'break-word' ? wrapStyle : {}),
119
- ...(weight ? weightStyle[weight] : {}),
120
- ...(fontStyle ? {
121
- fontStyle: fontStyle
122
- } : {}),
123
- fontSize: fontSizeVariants[size],
124
- ...(lineHeight ? lineHeightVariants[lineHeight] : {}),
125
197
  letterSpacing: letterSpacingVariants[letterSpacing],
126
198
  ...(transform ? {
127
199
  textTransform: transform
128
- } : {})
200
+ } : {}),
201
+ ...calcTextStyles()
129
202
  };
130
203
  const inputStyles = {
131
204
  ...baseStyles,
package/lib/Text/__examples__/Text.examples.js CHANGED
@@ -28,12 +28,12 @@ exports.default = void 0;
28
28
  * SOFTWARE.
29
29
  */
30
30
  var _default = exports.default = {
31
- sectionProp: 'weight',
31
+ sectionProp: 'variant',
32
32
  maxExamplesPerPage: 50,
33
33
  maxExamples: 1000,
34
- getComponentProps: props => {
34
+ getComponentProps: () => {
35
35
  return {
36
- children: props.size && ['x-small', 'small', 'medium', 'large'].includes(props.size) ? 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ullamco' : 'Lorem ipsum dolor sit amet, consectetur'
36
+ children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ullamco'
37
37
  };
38
38
  },
39
39
  getExampleProps: props => {
@@ -43,12 +43,18 @@ var _default = exports.default = {
43
43
  maxWidth: '25rem'
44
44
  };
45
45
  },
46
+ propValues: {
47
+ weight: [void 0],
48
+ lineHeight: [void 0],
49
+ size: [void 0],
50
+ fontStyle: [void 0]
51
+ },
46
52
  filter: props => {
47
53
  return (
48
54
  // Only generate a 1 variation for non-'primary' color
49
- props.color !== 'primary' && (props.fontStyle !== 'normal' || props.letterSpacing !== 'normal' || props.lineHeight !== 'default' || props.size !== 'medium' || props.transform !== 'none' || props.weight !== 'normal' || props.wrap !== 'normal') ||
55
+ props.color !== 'primary' && (props.letterSpacing !== 'normal' || props.transform !== 'none' || props.wrap !== 'normal') ||
50
56
  // Only generate a 1 variation for non-'medium' size
51
- props.size !== 'medium' && (props.fontStyle !== 'normal' || props.letterSpacing !== 'normal' || props.lineHeight !== 'default' || props.transform !== 'none' || props.weight !== 'normal' || props.wrap !== 'normal')
57
+ props.size !== 'medium' && (props.letterSpacing !== 'normal' || props.transform !== 'none' || props.wrap !== 'normal')
52
58
  );
53
59
  }
54
60
  };
package/lib/Text/index.js CHANGED
@@ -43,13 +43,29 @@ category: components
43
43
  ---
44
44
  **/
45
45
  let Text = exports.Text = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_Text = class Text extends _react.Component {
46
+ checkProps() {
47
+ const _this$props = this.props,
48
+ variant = _this$props.variant,
49
+ size = _this$props.size,
50
+ lineHeight = _this$props.lineHeight,
51
+ weight = _this$props.weight,
52
+ fontStyle = _this$props.fontStyle;
53
+ if (variant) {
54
+ if (size) {}
55
+ if (lineHeight) {}
56
+ if (weight) {}
57
+ if (fontStyle) {}
58
+ }
59
+ }
46
60
  componentDidMount() {
47
- var _this$props$makeStyle, _this$props;
48
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
61
+ var _this$props$makeStyle, _this$props2;
62
+ (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
63
+ this.checkProps();
49
64
  }
50
65
  componentDidUpdate() {
51
- var _this$props$makeStyle2, _this$props2;
52
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
66
+ var _this$props$makeStyle2, _this$props3;
67
+ (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
68
+ this.checkProps();
53
69
  }
54
70
  render() {
55
71
  var _this$props$styles;
package/lib/Text/props.js CHANGED
@@ -37,10 +37,11 @@ const propTypes = exports.propTypes = {
37
37
  elementRef: _propTypes.default.func,
38
38
  fontStyle: _propTypes.default.oneOf(['italic', 'normal']),
39
39
  letterSpacing: _propTypes.default.oneOf(['normal', 'condensed', 'expanded']),
40
- lineHeight: _propTypes.default.oneOf(['default', 'fit', 'condensed', 'double']),
41
- size: _propTypes.default.oneOf(['x-small', 'small', 'medium', 'large', 'x-large', 'xx-large']),
40
+ lineHeight: _propTypes.default.oneOf(['default', 'fit', 'condensed', 'double', 'lineHeight100', 'lineHeight125', 'lineHeight150']),
41
+ size: _propTypes.default.oneOf(['x-small', 'small', 'medium', 'large', 'x-large', 'xx-large', 'descriptionPage', 'descriptionSection', 'content', 'contentSmall', 'legend']),
42
42
  transform: _propTypes.default.oneOf(['none', 'capitalize', 'uppercase', 'lowercase']),
43
- weight: _propTypes.default.oneOf(['normal', 'light', 'bold']),
43
+ variant: _propTypes.default.oneOf(['descriptionPage', 'descriptionSection', 'content', 'contentImportant', 'contentQuote', 'contentSmall', 'legend']),
44
+ weight: _propTypes.default.oneOf(['normal', 'light', 'bold', 'weightRegular', 'weightImportant']),
44
45
  wrap: _propTypes.default.oneOf(['normal', 'break-word'])
45
46
  };
46
- const allowedProps = exports.allowedProps = ['as', 'children', 'color', 'elementRef', 'fontStyle', 'letterSpacing', 'lineHeight', 'size', 'transform', 'weight', 'wrap'];
47
+ const allowedProps = exports.allowedProps = ['as', 'children', 'color', 'elementRef', 'fontStyle', 'letterSpacing', 'lineHeight', 'size', 'transform', 'variant', 'weight', 'wrap'];
package/lib/Text/styles.js CHANGED
@@ -46,7 +46,52 @@ const generateStyle = (componentTheme, props) => {
46
46
  transform = props.transform,
47
47
  lineHeight = props.lineHeight,
48
48
  letterSpacing = props.letterSpacing,
49
- color = props.color;
49
+ color = props.color,
50
+ variant = props.variant;
51
+ const variants = {
52
+ descriptionPage: {
53
+ fontStyle: 'normal',
54
+ fontWeight: componentTheme.weightRegular,
55
+ fontSize: componentTheme.descriptionPage,
56
+ lineHeight: componentTheme.lineHeight150
57
+ },
58
+ descriptionSection: {
59
+ fontStyle: 'normal',
60
+ fontWeight: componentTheme.weightRegular,
61
+ fontSize: componentTheme.descriptionSection,
62
+ lineHeight: componentTheme.lineHeight150
63
+ },
64
+ content: {
65
+ fontStyle: 'normal',
66
+ fontWeight: componentTheme.weightRegular,
67
+ fontSize: componentTheme.content,
68
+ lineHeight: componentTheme.lineHeight150
69
+ },
70
+ contentImportant: {
71
+ fontStyle: 'normal',
72
+ fontWeight: componentTheme.weightImportant,
73
+ fontSize: componentTheme.content,
74
+ lineHeight: componentTheme.lineHeight150
75
+ },
76
+ contentQuote: {
77
+ fontStyle: 'italic',
78
+ fontWeight: componentTheme.weightRegular,
79
+ fontSize: componentTheme.content,
80
+ lineHeight: componentTheme.lineHeight150
81
+ },
82
+ contentSmall: {
83
+ fontStyle: 'normal',
84
+ fontWeight: componentTheme.weightRegular,
85
+ fontSize: componentTheme.contentSmall,
86
+ lineHeight: componentTheme.lineHeight150
87
+ },
88
+ legend: {
89
+ fontStyle: 'normal',
90
+ fontWeight: componentTheme.weightRegular,
91
+ fontSize: componentTheme.legend,
92
+ lineHeight: componentTheme.lineHeight150
93
+ }
94
+ };
50
95
  const colorVariants = {
51
96
  primary: {
52
97
  color: componentTheme.primaryColor
@@ -87,6 +132,12 @@ const generateStyle = (componentTheme, props) => {
87
132
  },
88
133
  bold: {
89
134
  fontWeight: componentTheme.fontWeightBold
135
+ },
136
+ weightRegular: {
137
+ fontWeight: componentTheme.weightRegular
138
+ },
139
+ weightImportant: {
140
+ fontWeight: componentTheme.weightImportant
90
141
  }
91
142
  };
92
143
  const fontSizeVariants = {
@@ -95,7 +146,12 @@ const generateStyle = (componentTheme, props) => {
95
146
  medium: componentTheme.fontSizeMedium,
96
147
  large: componentTheme.fontSizeLarge,
97
148
  'x-large': componentTheme.fontSizeXLarge,
98
- 'xx-large': componentTheme.fontSizeXXLarge
149
+ 'xx-large': componentTheme.fontSizeXXLarge,
150
+ descriptionPage: componentTheme.descriptionPage,
151
+ descriptionSection: componentTheme.descriptionSection,
152
+ content: componentTheme.content,
153
+ contentSmall: componentTheme.contentSmall,
154
+ legend: componentTheme.legend
99
155
  };
100
156
  const lineHeightVariants = {
101
157
  default: {
@@ -109,6 +165,15 @@ const generateStyle = (componentTheme, props) => {
109
165
  },
110
166
  double: {
111
167
  lineHeight: componentTheme.lineHeightDouble
168
+ },
169
+ lineHeight100: {
170
+ lineHeight: componentTheme.lineHeight100
171
+ },
172
+ lineHeight125: {
173
+ lineHeight: componentTheme.lineHeight125
174
+ },
175
+ lineHeight150: {
176
+ lineHeight: componentTheme.lineHeight150
112
177
  }
113
178
  };
114
179
  const letterSpacingVariants = {
@@ -116,22 +181,30 @@ const generateStyle = (componentTheme, props) => {
116
181
  condensed: componentTheme.letterSpacingCondensed,
117
182
  expanded: componentTheme.letterSpacingExpanded
118
183
  };
184
+ const calcTextStyles = () => {
185
+ if (variant) {
186
+ return variants[variant];
187
+ }
188
+ return {
189
+ ...(weight ? weightStyle[weight] : {}),
190
+ ...(fontStyle ? {
191
+ fontStyle: fontStyle
192
+ } : {}),
193
+ fontSize: fontSizeVariants[size],
194
+ ...(lineHeight ? lineHeightVariants[lineHeight] : {})
195
+ };
196
+ };
119
197
  const baseStyles = {
120
198
  '&:focus': {
121
199
  outline: 'none'
122
200
  },
123
201
  ...(color ? colorVariants[color] : {}),
124
202
  ...(wrap === 'break-word' ? wrapStyle : {}),
125
- ...(weight ? weightStyle[weight] : {}),
126
- ...(fontStyle ? {
127
- fontStyle: fontStyle
128
- } : {}),
129
- fontSize: fontSizeVariants[size],
130
- ...(lineHeight ? lineHeightVariants[lineHeight] : {}),
131
203
  letterSpacing: letterSpacingVariants[letterSpacing],
132
204
  ...(transform ? {
133
205
  textTransform: transform
134
- } : {})
206
+ } : {}),
207
+ ...calcTextStyles()
135
208
  };
136
209
  const inputStyles = {
137
210
  ...baseStyles,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-text",
3
- "version": "10.9.1-snapshot-4",
3
+ "version": "10.9.1-snapshot-5",
4
4
  "description": "A component for styling textual content",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,18 +24,18 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.26.0",
27
- "@instructure/console": "10.9.1-snapshot-4",
28
- "@instructure/emotion": "10.9.1-snapshot-4",
29
- "@instructure/shared-types": "10.9.1-snapshot-4",
30
- "@instructure/ui-color-utils": "10.9.1-snapshot-4",
31
- "@instructure/ui-react-utils": "10.9.1-snapshot-4",
27
+ "@instructure/console": "10.9.1-snapshot-5",
28
+ "@instructure/emotion": "10.9.1-snapshot-5",
29
+ "@instructure/shared-types": "10.9.1-snapshot-5",
30
+ "@instructure/ui-color-utils": "10.9.1-snapshot-5",
31
+ "@instructure/ui-react-utils": "10.9.1-snapshot-5",
32
32
  "prop-types": "^15.8.1"
33
33
  },
34
34
  "devDependencies": {
35
- "@instructure/ui-axe-check": "10.9.1-snapshot-4",
36
- "@instructure/ui-babel-preset": "10.9.1-snapshot-4",
37
- "@instructure/ui-test-utils": "10.9.1-snapshot-4",
38
- "@instructure/ui-themes": "10.9.1-snapshot-4",
35
+ "@instructure/ui-axe-check": "10.9.1-snapshot-5",
36
+ "@instructure/ui-babel-preset": "10.9.1-snapshot-5",
37
+ "@instructure/ui-test-utils": "10.9.1-snapshot-5",
38
+ "@instructure/ui-themes": "10.9.1-snapshot-5",
39
39
  "@testing-library/jest-dom": "^6.6.3",
40
40
  "@testing-library/react": "^16.0.1"
41
41
  },
package/src/Text/README.md CHANGED
@@ -4,6 +4,28 @@ describes: Text
4
4
 
5
5
  A component for styling textual content
6
6
 
7
+ ## Variant
8
+
9
+ Variant takes care of - almost - all use-cases when it comes to texts on pages. Their name reflects the places they meant to be used. It sets `size`, `weight`, `fontStyle` and `lineHeight`
10
+ We recommend using `variants` instead of the aforementioned props.
11
+
12
+ NOTE: when `variant` is set, `size`, `weight`, `fontStyle` and `lineHeight` props are ignored
13
+
14
+ ```js
15
+ ---
16
+ type: example
17
+ ---
18
+ <div>
19
+ <Text variant="descriptionPage"> descriptionPage </Text><br/>
20
+ <Text variant="descriptionSection"> descriptionSection </Text><br/>
21
+ <Text variant="content"> content </Text><br/>
22
+ <Text variant="contentImportant"> contentImportant </Text><br/>
23
+ <Text variant="contentQuote"> contentQuote </Text><br/>
24
+ <Text variant="contentSmall"> contentSmall </Text><br/>
25
+ <Text variant="legend"> legend </Text><br/>
26
+ </div>
27
+ ```
28
+
7
29
  ### Font sizes
8
30
 
9
31
  ```js
@@ -11,12 +33,11 @@ A component for styling textual content
11
33
  type: example
12
34
  ---
13
35
  <div>
14
- <Text size="x-small">I&#39;m extra small</Text><br/>
15
- <Text size="small">I&#39;m small</Text><br/>
16
- <Text>I&#39;m medium</Text><br/>
17
- <Text size="large">I&#39;m large</Text><br/>
18
- <Text size="x-large">I&#39;m extra large</Text><br/>
19
- <Text size="xx-large">I&#39;m extra extra large</Text>
36
+ <Text size='descriptionPage'>descriptionPage</Text><br/>
37
+ <Text size='descriptionSection'>descriptionSection</Text><br/>
38
+ <Text size='content'>content</Text><br/>
39
+ <Text size='contentSmall'>contentSmall</Text><br/>
40
+ <Text size='legend'>legend</Text>
20
41
  </div>
21
42
  ```
22
43
 
@@ -27,9 +48,8 @@ type: example
27
48
  type: example
28
49
  ---
29
50
  <div>
30
- <Text weight="light">I&#39;m light text</Text><br/>
31
- <Text>I&#39;m normal text</Text><br/>
32
- <Text weight="bold">I&#39;m bold text</Text>
51
+ <Text weight="weightRegular">weightRegular</Text><br/>
52
+ <Text weight="weightImportant">weightImportant</Text>
33
53
  </div>
34
54
  ```
35
55
 
@@ -52,16 +72,14 @@ type: example
52
72
  type: example
53
73
  ---
54
74
  <div>
55
- <Text lineHeight="fit">
75
+ <br/><br/>
76
+ <Text lineHeight="lineHeight100">
56
77
  <p>{lorem.paragraph()}</p>
57
78
  </Text>
58
- <Text>
79
+ <Text lineHeight="lineHeight125">
59
80
  <p>{lorem.paragraph()}</p>
60
81
  </Text>
61
- <Text lineHeight="condensed">
62
- <p>{lorem.paragraph()}</p>
63
- </Text>
64
- <Text lineHeight="double">
82
+ <Text lineHeight="lineHeight150">
65
83
  <p>{lorem.paragraph()}</p>
66
84
  </Text>
67
85
  </div>
@@ -158,3 +176,29 @@ type: example
158
176
  This<sup>is</sup> some<sub>text</sub>.
159
177
  </Text>
160
178
  ```
179
+
180
+ ### DEPRECATED legacy values
181
+
182
+ Multiple values from `size`, `weight` and `lineHeight` are deprecated, but still supported for backward compatibility reasons. Please only use the above listed, semantic values.
183
+
184
+ Deprecated `size` values:
185
+
186
+ - x-small
187
+ - small
188
+ - medium
189
+ - large
190
+ - x-large
191
+ - xx-large
192
+
193
+ Deprecated `weight` values:
194
+
195
+ - normal
196
+ - light
197
+ - bold
198
+
199
+ Deprecated `lineHeight` values:
200
+
201
+ - default
202
+ - fit
203
+ - condensed
204
+ - double
package/src/Text/__examples__/Text.examples.ts CHANGED
@@ -26,16 +26,13 @@ import type { StoryConfig } from '@instructure/ui-test-utils'
26
26
  import type { TextProps } from '../props'
27
27
 
28
28
  export default {
29
- sectionProp: 'weight',
29
+ sectionProp: 'variant',
30
30
  maxExamplesPerPage: 50,
31
31
  maxExamples: 1000,
32
- getComponentProps: (props) => {
32
+ getComponentProps: () => {
33
33
  return {
34
34
  children:
35
- props.size &&
36
- ['x-small', 'small', 'medium', 'large'].includes(props.size)
37
- ? 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ullamco'
38
- : 'Lorem ipsum dolor sit amet, consectetur'
35
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ullamco'
39
36
  }
40
37
  },
41
38
  getExampleProps: (props) => {
@@ -46,24 +43,23 @@ export default {
46
43
  maxWidth: '25rem'
47
44
  }
48
45
  },
46
+ propValues: {
47
+ weight: [undefined],
48
+ lineHeight: [undefined],
49
+ size: [undefined],
50
+ fontStyle: [undefined]
51
+ },
49
52
  filter: (props) => {
50
53
  return (
51
54
  // Only generate a 1 variation for non-'primary' color
52
55
  (props.color !== 'primary' &&
53
- (props.fontStyle !== 'normal' ||
54
- props.letterSpacing !== 'normal' ||
55
- props.lineHeight !== 'default' ||
56
- props.size !== 'medium' ||
56
+ (props.letterSpacing !== 'normal' ||
57
57
  props.transform !== 'none' ||
58
- props.weight !== 'normal' ||
59
58
  props.wrap !== 'normal')) ||
60
59
  // Only generate a 1 variation for non-'medium' size
61
60
  (props.size !== 'medium' &&
62
- (props.fontStyle !== 'normal' ||
63
- props.letterSpacing !== 'normal' ||
64
- props.lineHeight !== 'default' ||
61
+ (props.letterSpacing !== 'normal' ||
65
62
  props.transform !== 'none' ||
66
- props.weight !== 'normal' ||
67
63
  props.wrap !== 'normal'))
68
64
  )
69
65
  }