@atlaskit/primitives 16.4.0 → 16.4.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/primitives
 
+## 16.4.1
+
+### Patch Changes
+
+- [`0d73beb2f9401`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0d73beb2f9401) -
+  Added `fontVariantNumeric` as an allowed property to Text's `xcss` prop to allow for tabular
+  numbers and slashed zeros. This is only available to the Compiled version of the Text component.
+
 ## 16.4.0
 
 ### Minor Changes

package/constellation/text/examples.mdx

@@ -14,7 +14,7 @@ import TextSpacing from '../../examples/constellation/text/text-spacing';
 import TextTruncation from '../../examples/constellation/text/text-truncation';
 import TextCustomization from '../../examples/constellation/text/text-customization';
 
-## Basic
+## Size
 
 Use a Text component for main content. Text typically appears after headings or subheadings as
 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
 A restricted set of styles can be customized using the `xcss` prop, using
 [cssMap](/components/css/overview#cssmap).
 
+The allowed customizations are:
+
+- font modifications via `fontVariantNumeric: 'tabular-nums'` and
+  `fontVariantNumeric: 'slashed-zero'`
+- strikethrough via `textDecorationLine`
+- line breaks via `overflowWrap`
+
 <Example Component={TextCustomization} packageName="@atlaskit/primitives" />

package/dist/types/compiled/components/text.d.ts

@@ -47,7 +47,7 @@ type TextPropsBase<T extends ElementType = 'span'> = {
     /**
      * Bounded style overrides.
      */
-    xcss?: StrictXCSSProp<'overflowWrap' | 'textDecorationLine', never>;
+    xcss?: StrictXCSSProp<'overflowWrap' | 'textDecorationLine' | 'fontVariantNumeric', never>;
     /**
      * Forwarded ref.
      */

package/dist/types-ts4.5/compiled/components/text.d.ts

@@ -52,7 +52,7 @@ type TextPropsBase<T extends ElementType = 'span'> = {
     /**
      * Bounded style overrides.
      */
-    xcss?: StrictXCSSProp<'overflowWrap' | 'textDecorationLine', never>;
+    xcss?: StrictXCSSProp<'overflowWrap' | 'textDecorationLine' | 'fontVariantNumeric', never>;
     /**
      * Forwarded ref.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "16.4.0",
+	"version": "16.4.1",
 	"description": "Primitives are token-backed low-level building blocks.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -137,8 +137,7 @@
 		"@atlaskit/css": "^0.17.0",
 		"@atlaskit/ds-lib": "^5.3.0",
 		"@atlaskit/interaction-context": "^3.1.0",
-		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tokens": "^8.3.0",
+		"@atlaskit/tokens": "^8.4.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6",
@@ -178,7 +177,6 @@
 		"@atlaskit/tooltip": "^20.10.0",
 		"@atlassian/analytics-bridge": "^0.7.0",
 		"@atlassian/codegen": "^0.1.0",
-		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/react-hooks": "^8.0.1",

package/scripts/codegen-styles.tsx

@@ -32,19 +32,19 @@ const templateFiles = readdirSync(join(__dirname, 'codegen-file-templates'), {
 // Output paths for partial codegen
 const primitivesOutputs = [
 	join(__dirname, '../src/xcss/style-maps.partial.tsx'),
-	join(
-		__dirname,
-		'../../css/codemods/0.5.2-primitives-emotion-to-compiled/style-maps.partial.tsx',
-	),
+	join(__dirname, '../../css/codemods/0.5.2-primitives-emotion-to-compiled/style-maps.partial.tsx'),
 ];
 
-const forgeOutputPath = join(__dirname, '../../../forge/forge-ui/src/components/UIKit/tokens.partial.tsx');
+const forgeOutputPath = join(
+	__dirname,
+	'../../../forge/forge-ui/src/components/UIKit/tokens.partial.tsx',
+);
 
 // Generate partial sections for @atlaskit/primitives style-maps
 const primitivesSourceFns = [
 	// width, height, minWidth, maxWidth, minHeight, maxHeight
-	...primitivesOutputs.map((outputPath) =>
-		() =>
+	...primitivesOutputs.map(
+		(outputPath) => () =>
 			createPartialSignedArtifact(
 				(options) => options.map(createStylesFromFileTemplate).join('\n'),
 				'yarn workspace @atlaskit/primitives codegen-styles',
@@ -56,8 +56,8 @@ const primitivesSourceFns = [
 			),
 	),
 	// padding*, gap*, inset*
-	...primitivesOutputs.map((outputPath) =>
-		() =>
+	...primitivesOutputs.map(
+		(outputPath) => () =>
 			createPartialSignedArtifact(
 				createSpacingStylesFromTemplate,
 				'yarn workspace @atlaskit/primitives codegen-styles',
@@ -69,8 +69,8 @@ const primitivesSourceFns = [
 			),
 	),
 	// text color, background-color, border-color
-	...primitivesOutputs.map((outputPath) =>
-		() =>
+	...primitivesOutputs.map(
+		(outputPath) => () =>
 			createPartialSignedArtifact(
 				(options) => options.map(createColorStylesFromTemplate).join('\n'),
 				'yarn workspace @atlaskit/primitives codegen-styles',
@@ -82,8 +82,8 @@ const primitivesSourceFns = [
 			),
 	),
 	// inverse color map
-	...primitivesOutputs.map((outputPath) =>
-		() =>
+	...primitivesOutputs.map(
+		(outputPath) => () =>
 			createPartialSignedArtifact(
 				createInverseColorMapTemplate,
 				'yarn workspace @atlaskit/primitives codegen-styles',
@@ -95,8 +95,8 @@ const primitivesSourceFns = [
 			),
 	),
 	// elevation (opacity, shadow, surface)
-	...primitivesOutputs.map((outputPath) =>
-		() =>
+	...primitivesOutputs.map(
+		(outputPath) => () =>
 			createPartialSignedArtifact(
 				(options) => options.map(createElevationStylesFromTemplate).join('\n'),
 				'yarn workspace @atlaskit/primitives codegen-styles',
@@ -108,8 +108,8 @@ const primitivesSourceFns = [
 			),
 	),
 	// border-width, border-radius
-	...primitivesOutputs.map((outputPath) =>
-		() =>
+	...primitivesOutputs.map(
+		(outputPath) => () =>
 			createPartialSignedArtifact(
 				(options) => options.map(createShapeStylesFromTemplate).join('\n'),
 				'yarn workspace @atlaskit/primitives codegen-styles',
@@ -121,8 +121,8 @@ const primitivesSourceFns = [
 			),
 	),
 	// border-color, border-radius, border-width, layer
-	...primitivesOutputs.map((outputPath) =>
-		() =>
+	...primitivesOutputs.map(
+		(outputPath) => () =>
 			createPartialSignedArtifact(
 				(options) => options.map(createStylesFromFileTemplate).join('\n'),
 				'yarn workspace @atlaskit/primitives codegen-styles',
@@ -134,8 +134,8 @@ const primitivesSourceFns = [
 			),
 	),
 	// font*, lineheight
-	...primitivesOutputs.map((outputPath) =>
-		() =>
+	...primitivesOutputs.map(
+		(outputPath) => () =>
 			createPartialSignedArtifact(
 				createTypographyStylesFromTemplate,
 				'yarn workspace @atlaskit/primitives codegen-styles',
@@ -147,8 +147,8 @@ const primitivesSourceFns = [
 			),
 	),
 	// font and weight map for text primitive
-	...primitivesOutputs.map((outputPath) =>
-		() =>
+	...primitivesOutputs.map(
+		(outputPath) => () =>
 			createPartialSignedArtifact(
 				createTextStylesFromTemplate,
 				'yarn workspace @atlaskit/primitives codegen-styles',
@@ -163,11 +163,11 @@ const primitivesSourceFns = [
 
 /**
  * Generate Forge UI Kit tokens using partial codegen
- * 
+ *
  * Note: Forge uses a SINGLE codegen block (@codegen-start:forge-tokens) with all tokens,
  * unlike Primitives which uses separate blocks per category. This allows Forge to mix
  * generated token maps with manual utility functions in one file.
- * 
+ *
  * @see https://developer.atlassian.com/platform/forge/ui-kit/components/xcss/
  */
 const generateForgeTokensContent = (): string => {