@atlaskit/primitives 16.3.0 → 16.4.1

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 (6) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/constellation/text/examples.mdx +8 -1
  3. package/dist/types/compiled/components/text.d.ts +1 -1
  4. package/dist/types-ts4.5/compiled/components/text.d.ts +1 -1
  5. package/package.json +2 -4
  6. package/scripts/codegen-styles.tsx +179 -181
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/primitives
2
2
 
3
+ ## 16.4.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`0d73beb2f9401`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0d73beb2f9401) -
8
+ Added `fontVariantNumeric` as an allowed property to Text's `xcss` prop to allow for tabular
9
+ numbers and slashed zeros. This is only available to the Compiled version of the Text component.
10
+
11
+ ## 16.4.0
12
+
13
+ ### Minor Changes
14
+
15
+ - [`e45f66913297e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e45f66913297e) -
16
+ Import emotion box into Forge UI Kit library
17
+
3
18
  ## 16.3.0
4
19
 
5
20
  ### Minor Changes
package/constellation/text/examples.mdx CHANGED
@@ -14,7 +14,7 @@ import TextSpacing from '../../examples/constellation/text/text-spacing';
14
14
  import TextTruncation from '../../examples/constellation/text/text-truncation';
15
15
  import TextCustomization from '../../examples/constellation/text/text-customization';
16
16
 
17
- ## Basic
17
+ ## Size
18
18
 
19
19
  Use a Text component for main content. Text typically appears after headings or subheadings as
20
20
  detailed descriptions and messages, but also as standalone text in components.
@@ -94,4 +94,11 @@ If truncation cannot be avoided, for example when displaying user-generated cont
94
94
  A restricted set of styles can be customized using the `xcss` prop, using
95
95
  [cssMap](/components/css/overview#cssmap).
96
96
 
97
+ The allowed customizations are:
98
+
99
+ - font modifications via `fontVariantNumeric: 'tabular-nums'` and
100
+ `fontVariantNumeric: 'slashed-zero'`
101
+ - strikethrough via `textDecorationLine`
102
+ - line breaks via `overflowWrap`
103
+
97
104
  <Example Component={TextCustomization} packageName="@atlaskit/primitives" />
package/dist/types/compiled/components/text.d.ts CHANGED
@@ -47,7 +47,7 @@ type TextPropsBase<T extends ElementType = 'span'> = {
47
47
  /**
48
48
  * Bounded style overrides.
49
49
  */
50
- xcss?: StrictXCSSProp<'overflowWrap' | 'textDecorationLine', never>;
50
+ xcss?: StrictXCSSProp<'overflowWrap' | 'textDecorationLine' | 'fontVariantNumeric', never>;
51
51
  /**
52
52
  * Forwarded ref.
53
53
  */
package/dist/types-ts4.5/compiled/components/text.d.ts CHANGED
@@ -52,7 +52,7 @@ type TextPropsBase<T extends ElementType = 'span'> = {
52
52
  /**
53
53
  * Bounded style overrides.
54
54
  */
55
- xcss?: StrictXCSSProp<'overflowWrap' | 'textDecorationLine', never>;
55
+ xcss?: StrictXCSSProp<'overflowWrap' | 'textDecorationLine' | 'fontVariantNumeric', never>;
56
56
  /**
57
57
  * Forwarded ref.
58
58
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "16.3.0",
3
+ "version": "16.4.1",
4
4
  "description": "Primitives are token-backed low-level building blocks.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -137,8 +137,7 @@
137
137
  "@atlaskit/css": "^0.17.0",
138
138
  "@atlaskit/ds-lib": "^5.3.0",
139
139
  "@atlaskit/interaction-context": "^3.1.0",
140
- "@atlaskit/platform-feature-flags": "^1.1.0",
141
- "@atlaskit/tokens": "^8.3.0",
140
+ "@atlaskit/tokens": "^8.4.0",
142
141
  "@atlaskit/visually-hidden": "^3.0.0",
143
142
  "@babel/runtime": "^7.0.0",
144
143
  "@compiled/react": "^0.18.6",
@@ -178,7 +177,6 @@
178
177
  "@atlaskit/tooltip": "^20.10.0",
179
178
  "@atlassian/analytics-bridge": "^0.7.0",
180
179
  "@atlassian/codegen": "^0.1.0",
181
- "@atlassian/feature-flags-test-utils": "^1.0.0",
182
180
  "@atlassian/ssr-tests": "workspace:^",
183
181
  "@testing-library/react": "^13.4.0",
184
182
  "@testing-library/react-hooks": "^8.0.1",
package/scripts/codegen-styles.tsx CHANGED
@@ -29,198 +29,196 @@ const templateFiles = readdirSync(join(__dirname, 'codegen-file-templates'), {
29
29
  .filter((item) => !item.isDirectory())
30
30
  .map((item) => join(__dirname, 'codegen-file-templates', item.name));
31
31
 
32
- const targetPath = join(__dirname, '../', 'src', 'xcss', 'style-maps.partial.tsx');
33
- const xcssCodemodPath = join(
34
- process.cwd(),
35
- '../../../',
36
- 'packages/design-system/css/codemods/0.5.2-primitives-emotion-to-compiled/style-maps.partial.tsx',
32
+ // Output paths for partial codegen
33
+ const primitivesOutputs = [
34
+ join(__dirname, '../src/xcss/style-maps.partial.tsx'),
35
+ join(__dirname, '../../css/codemods/0.5.2-primitives-emotion-to-compiled/style-maps.partial.tsx'),
36
+ ];
37
+
38
+ const forgeOutputPath = join(
39
+ __dirname,
40
+ '../../../forge/forge-ui/src/components/UIKit/tokens.partial.tsx',
37
41
  );
38
42
 
39
- const sourceFns = [
43
+ // Generate partial sections for @atlaskit/primitives style-maps
44
+ const primitivesSourceFns = [
40
45
  // width, height, minWidth, maxWidth, minHeight, maxHeight
41
- () =>
42
- createPartialSignedArtifact(
43
- (options) => options.map(createStylesFromFileTemplate).join('\n'),
44
- 'yarn workspace @atlaskit/primitives codegen-styles',
45
- {
46
- id: 'dimensions',
47
- absoluteFilePath: targetPath,
48
- dependencies: templateFiles.filter((v) => v.includes('dimensions')),
49
- },
50
- ),
51
- () =>
52
- createPartialSignedArtifact(
53
- (options) => options.map(createStylesFromFileTemplate).join('\n'),
54
- 'yarn workspace @atlaskit/primitives codegen-styles',
55
- {
56
- id: 'dimensions',
57
- absoluteFilePath: xcssCodemodPath,
58
- dependencies: templateFiles.filter((v) => v.includes('dimensions')),
59
- },
60
- ),
46
+ ...primitivesOutputs.map(
47
+ (outputPath) => () =>
48
+ createPartialSignedArtifact(
49
+ (options) => options.map(createStylesFromFileTemplate).join('\n'),
50
+ 'yarn workspace @atlaskit/primitives codegen-styles',
51
+ {
52
+ id: 'dimensions',
53
+ absoluteFilePath: outputPath,
54
+ dependencies: templateFiles.filter((v) => v.includes('dimensions')),
55
+ },
56
+ ),
57
+ ),
61
58
  // padding*, gap*, inset*
62
- () =>
63
- createPartialSignedArtifact(
64
- createSpacingStylesFromTemplate,
65
- 'yarn workspace @atlaskit/primitives codegen-styles',
66
- {
67
- id: 'spacing',
68
- absoluteFilePath: targetPath,
69
- dependencies: [spacingTokensDependencyPath],
70
- },
71
- ),
72
- () =>
73
- createPartialSignedArtifact(
74
- createSpacingStylesFromTemplate,
75
- 'yarn workspace @atlaskit/primitives codegen-styles',
76
- {
77
- id: 'spacing',
78
- absoluteFilePath: xcssCodemodPath,
79
- dependencies: [spacingTokensDependencyPath],
80
- },
81
- ),
59
+ ...primitivesOutputs.map(
60
+ (outputPath) => () =>
61
+ createPartialSignedArtifact(
62
+ createSpacingStylesFromTemplate,
63
+ 'yarn workspace @atlaskit/primitives codegen-styles',
64
+ {
65
+ id: 'spacing',
66
+ absoluteFilePath: outputPath,
67
+ dependencies: [spacingTokensDependencyPath],
68
+ },
69
+ ),
70
+ ),
82
71
  // text color, background-color, border-color
83
- () =>
84
- createPartialSignedArtifact(
85
- (options) => options.map(createColorStylesFromTemplate).join('\n'),
86
- 'yarn workspace @atlaskit/primitives codegen-styles',
87
- {
88
- id: 'colors',
89
- absoluteFilePath: targetPath,
90
- dependencies: [colorTokensDependencyPath],
91
- },
92
- ),
93
- () =>
94
- createPartialSignedArtifact(
95
- (options) => options.map(createColorStylesFromTemplate).join('\n'),
96
- 'yarn workspace @atlaskit/primitives codegen-styles',
97
- {
98
- id: 'colors',
99
- absoluteFilePath: xcssCodemodPath,
100
- dependencies: [colorTokensDependencyPath],
101
- },
102
- ),
72
+ ...primitivesOutputs.map(
73
+ (outputPath) => () =>
74
+ createPartialSignedArtifact(
75
+ (options) => options.map(createColorStylesFromTemplate).join('\n'),
76
+ 'yarn workspace @atlaskit/primitives codegen-styles',
77
+ {
78
+ id: 'colors',
79
+ absoluteFilePath: outputPath,
80
+ dependencies: [colorTokensDependencyPath],
81
+ },
82
+ ),
83
+ ),
103
84
  // inverse color map
104
- () =>
105
- createPartialSignedArtifact(
106
- createInverseColorMapTemplate,
107
- 'yarn workspace @atlaskit/primitives codegen-styles',
108
- {
109
- id: 'inverse-colors',
110
- absoluteFilePath: targetPath,
111
- dependencies: [colorTokensDependencyPath],
112
- },
113
- ),
85
+ ...primitivesOutputs.map(
86
+ (outputPath) => () =>
87
+ createPartialSignedArtifact(
88
+ createInverseColorMapTemplate,
89
+ 'yarn workspace @atlaskit/primitives codegen-styles',
90
+ {
91
+ id: 'inverse-colors',
92
+ absoluteFilePath: outputPath,
93
+ dependencies: [colorTokensDependencyPath],
94
+ },
95
+ ),
96
+ ),
114
97
  // elevation (opacity, shadow, surface)
115
- () =>
116
- createPartialSignedArtifact(
117
- (options) => options.map(createElevationStylesFromTemplate).join('\n'),
118
- 'yarn workspace @atlaskit/primitives codegen-styles',
119
- {
120
- id: 'elevation',
121
- absoluteFilePath: targetPath,
122
- dependencies: [colorTokensDependencyPath],
123
- },
124
- ),
125
- () =>
126
- createPartialSignedArtifact(
127
- (options) => options.map(createElevationStylesFromTemplate).join('\n'),
128
- 'yarn workspace @atlaskit/primitives codegen-styles',
129
- {
130
- id: 'elevation',
131
- absoluteFilePath: xcssCodemodPath,
132
- dependencies: [colorTokensDependencyPath],
133
- },
134
- ),
98
+ ...primitivesOutputs.map(
99
+ (outputPath) => () =>
100
+ createPartialSignedArtifact(
101
+ (options) => options.map(createElevationStylesFromTemplate).join('\n'),
102
+ 'yarn workspace @atlaskit/primitives codegen-styles',
103
+ {
104
+ id: 'elevation',
105
+ absoluteFilePath: outputPath,
106
+ dependencies: [colorTokensDependencyPath],
107
+ },
108
+ ),
109
+ ),
135
110
  // border-width, border-radius
136
- () =>
137
- createPartialSignedArtifact(
138
- (options) => options.map(createShapeStylesFromTemplate).join('\n'),
139
- 'yarn workspace @atlaskit/primitives codegen-styles',
140
- {
141
- id: 'border',
142
- absoluteFilePath: targetPath,
143
- dependencies: [shapeTokensDependencyPath],
144
- },
145
- ),
146
- () =>
147
- createPartialSignedArtifact(
148
- (options) => options.map(createShapeStylesFromTemplate).join('\n'),
149
- 'yarn workspace @atlaskit/primitives codegen-styles',
150
- {
151
- id: 'border',
152
- absoluteFilePath: xcssCodemodPath,
153
- dependencies: [shapeTokensDependencyPath],
154
- },
155
- ),
156
- // border-color, border-radius, border-width, layer',
157
- () =>
158
- createPartialSignedArtifact(
159
- (options) => options.map(createStylesFromFileTemplate).join('\n'),
160
- 'yarn workspace @atlaskit/primitives codegen-styles',
161
- {
162
- id: 'misc',
163
- absoluteFilePath: targetPath,
164
- dependencies: templateFiles,
165
- },
166
- ),
167
- () =>
168
- createPartialSignedArtifact(
169
- (options) => options.map(createStylesFromFileTemplate).join('\n'),
170
- 'yarn workspace @atlaskit/primitives codegen-styles',
171
- {
172
- id: 'misc',
173
- absoluteFilePath: xcssCodemodPath,
174
- dependencies: templateFiles,
175
- },
176
- ),
111
+ ...primitivesOutputs.map(
112
+ (outputPath) => () =>
113
+ createPartialSignedArtifact(
114
+ (options) => options.map(createShapeStylesFromTemplate).join('\n'),
115
+ 'yarn workspace @atlaskit/primitives codegen-styles',
116
+ {
117
+ id: 'border',
118
+ absoluteFilePath: outputPath,
119
+ dependencies: [shapeTokensDependencyPath],
120
+ },
121
+ ),
122
+ ),
123
+ // border-color, border-radius, border-width, layer
124
+ ...primitivesOutputs.map(
125
+ (outputPath) => () =>
126
+ createPartialSignedArtifact(
127
+ (options) => options.map(createStylesFromFileTemplate).join('\n'),
128
+ 'yarn workspace @atlaskit/primitives codegen-styles',
129
+ {
130
+ id: 'misc',
131
+ absoluteFilePath: outputPath,
132
+ dependencies: templateFiles,
133
+ },
134
+ ),
135
+ ),
177
136
  // font*, lineheight
178
- () =>
179
- createPartialSignedArtifact(
180
- createTypographyStylesFromTemplate,
181
- 'yarn workspace @atlaskit/primitives codegen-styles',
182
- {
183
- id: 'typography',
184
- absoluteFilePath: targetPath,
185
- dependencies: templateFiles,
186
- },
187
- ),
188
- () =>
189
- createPartialSignedArtifact(
190
- createTypographyStylesFromTemplate,
191
- 'yarn workspace @atlaskit/primitives codegen-styles',
192
- {
193
- id: 'typography',
194
- absoluteFilePath: xcssCodemodPath,
195
- dependencies: templateFiles,
196
- },
197
- ),
137
+ ...primitivesOutputs.map(
138
+ (outputPath) => () =>
139
+ createPartialSignedArtifact(
140
+ createTypographyStylesFromTemplate,
141
+ 'yarn workspace @atlaskit/primitives codegen-styles',
142
+ {
143
+ id: 'typography',
144
+ absoluteFilePath: outputPath,
145
+ dependencies: templateFiles,
146
+ },
147
+ ),
148
+ ),
198
149
  // font and weight map for text primitive
199
- () =>
200
- createPartialSignedArtifact(
201
- createTextStylesFromTemplate,
202
- 'yarn workspace @atlaskit/primitives codegen-styles',
203
- {
204
- id: 'text',
205
- absoluteFilePath: targetPath,
206
- dependencies: templateFiles,
207
- },
208
- ),
209
- () =>
210
- createPartialSignedArtifact(
211
- createTextStylesFromTemplate,
212
- 'yarn workspace @atlaskit/primitives codegen-styles',
213
- {
214
- id: 'text',
215
- absoluteFilePath: xcssCodemodPath,
216
- dependencies: templateFiles,
217
- },
218
- ),
150
+ ...primitivesOutputs.map(
151
+ (outputPath) => () =>
152
+ createPartialSignedArtifact(
153
+ createTextStylesFromTemplate,
154
+ 'yarn workspace @atlaskit/primitives codegen-styles',
155
+ {
156
+ id: 'text',
157
+ absoluteFilePath: outputPath,
158
+ dependencies: templateFiles,
159
+ },
160
+ ),
161
+ ),
219
162
  ];
220
163
 
221
- sourceFns.forEach((sourceFn) => {
222
- writeFileSync(targetPath, sourceFn());
223
- writeFileSync(xcssCodemodPath, sourceFn());
164
+ /**
165
+ * Generate Forge UI Kit tokens using partial codegen
166
+ *
167
+ * Note: Forge uses a SINGLE codegen block (@codegen-start:forge-tokens) with all tokens,
168
+ * unlike Primitives which uses separate blocks per category. This allows Forge to mix
169
+ * generated token maps with manual utility functions in one file.
170
+ *
171
+ * @see https://developer.atlassian.com/platform/forge/ui-kit/components/xcss/
172
+ */
173
+ const generateForgeTokensContent = (): string => {
174
+ const sections = [
175
+ '/* eslint @repo/internal/codegen/signed-source-integrity: "warn" */',
176
+ createStylesFromFileTemplate('dimensions'),
177
+ '',
178
+ createSpacingStylesFromTemplate(),
179
+ '',
180
+ ...(['text', 'background', 'border'] as const).map(createColorStylesFromTemplate),
181
+ '',
182
+ createInverseColorMapTemplate(),
183
+ '',
184
+ ...(['opacity', 'shadow', 'surface'] as const).map(createElevationStylesFromTemplate),
185
+ '',
186
+ ...(['width', 'radius'] as const).map(createShapeStylesFromTemplate),
187
+ '',
188
+ createStylesFromFileTemplate('layer'),
189
+ '',
190
+ createTypographyStylesFromTemplate(),
191
+ '',
192
+ createTextStylesFromTemplate(),
193
+ ];
194
+
195
+ return sections.join('\n');
196
+ };
197
+
198
+ const forgeSourceFn = () =>
199
+ createPartialSignedArtifact(
200
+ generateForgeTokensContent,
201
+ 'yarn workspace @atlaskit/primitives codegen-styles',
202
+ {
203
+ id: 'forge-tokens',
204
+ absoluteFilePath: forgeOutputPath,
205
+ dependencies: [
206
+ ...templateFiles,
207
+ colorTokensDependencyPath,
208
+ spacingTokensDependencyPath,
209
+ shapeTokensDependencyPath,
210
+ ],
211
+ },
212
+ );
213
+
214
+ // Write all generated files
215
+ primitivesSourceFns.forEach((sourceFn, index) => {
216
+ const outputPath = primitivesOutputs[Math.floor(index / 9)]; // 9 configs per output
217
+ writeFileSync(outputPath, sourceFn());
224
218
  });
225
219
 
226
- console.log(`${targetPath} written!`);
220
+ writeFileSync(forgeOutputPath, forgeSourceFn());
221
+
222
+ console.log('Generated style maps for:');
223
+ primitivesOutputs.forEach((path) => console.log(` - ${path}`));
224
+ console.log(` - ${forgeOutputPath}`);