@atlaskit/ds-explorations 3.0.6 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/ds-explorations
 
+## 3.2.0
+
+### Minor Changes
+
+- [#63526](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63526) [`e8835feffae9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e8835feffae9) - Internal change to improve token sorting logic for typography tokens. Typography tokens are now marked as active though they are still in development and not recommend for use without prior approval from ADS.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 3.1.0
+
+### Minor Changes
+
+- [#59752](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59752) [`df0bbb7c4cc1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/df0bbb7c4cc1) - Removed minor-second typography theme: `typography`. ADG3 and Minor third themes remain as the two typography themes.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.0.6
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -0,0 +1,24 @@
+{
+    "extends": "../../../../tsconfig.entry-points.confluence.json",
+    "compilerOptions": {
+        "target": "es5",
+        "composite": true,
+        "outDir": "../dist",
+        "rootDir": "../",
+        "baseUrl": "../"
+    },
+    "include": [
+        "../src/**/*.tsx"
+    ],
+    "exclude": [
+        "../src/**/__tests__/*",
+        "../src/**/*.test.*",
+        "../src/**/test.*",
+        "../src/**/examples.*"
+    ],
+    "references": [
+        {
+            "path": "../../tokens/afm-cc/tsconfig.json"
+        }
+    ]
+}

package/dist/cjs/components/text.partial.js

@@ -129,11 +129,11 @@ var Text = function Text(_ref) {
 var _default = exports.default = Text;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e0cf19767425d8b20b2d3cf5f3adc035>>
+ * @codegen <<SignedSource::40722ab03efa1705ecfbcccb090c5b40>>
  * @codegenId typography
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::7c95473452cd40813e49496912c844a1>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography-adg3.tsx <<SignedSource::049aa00f1a9c36992ac7a5378bf45032>>
  */
 var fontSizeMap = {
   'size.050': (0, _react2.css)({

package/dist/es2019/components/text.partial.js

@@ -120,11 +120,11 @@ export default Text;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e0cf19767425d8b20b2d3cf5f3adc035>>
+ * @codegen <<SignedSource::40722ab03efa1705ecfbcccb090c5b40>>
  * @codegenId typography
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::7c95473452cd40813e49496912c844a1>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography-adg3.tsx <<SignedSource::049aa00f1a9c36992ac7a5378bf45032>>
  */
 const fontSizeMap = {
   'size.050': css({

package/dist/esm/components/text.partial.js

@@ -123,11 +123,11 @@ export default Text;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e0cf19767425d8b20b2d3cf5f3adc035>>
+ * @codegen <<SignedSource::40722ab03efa1705ecfbcccb090c5b40>>
  * @codegenId typography
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::7c95473452cd40813e49496912c844a1>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography-adg3.tsx <<SignedSource::049aa00f1a9c36992ac7a5378bf45032>>
  */
 var fontSizeMap = {
   'size.050': css({

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

@@ -81,11 +81,11 @@ declare const Text: FC<TextProps>;
 export default Text;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e0cf19767425d8b20b2d3cf5f3adc035>>
+ * @codegen <<SignedSource::40722ab03efa1705ecfbcccb090c5b40>>
  * @codegenId typography
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::7c95473452cd40813e49496912c844a1>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography-adg3.tsx <<SignedSource::049aa00f1a9c36992ac7a5378bf45032>>
  */
 declare const fontSizeMap: {
     'size.050': import("@emotion/react").SerializedStyles;

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

@@ -86,11 +86,11 @@ declare const Text: FC<TextProps>;
 export default Text;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e0cf19767425d8b20b2d3cf5f3adc035>>
+ * @codegen <<SignedSource::40722ab03efa1705ecfbcccb090c5b40>>
  * @codegenId typography
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::7c95473452cd40813e49496912c844a1>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography-adg3.tsx <<SignedSource::049aa00f1a9c36992ac7a5378bf45032>>
  */
 declare const fontSizeMap: {
     'size.050': import("@emotion/react").SerializedStyles;

package/examples/02-text.tsx

@@ -14,12 +14,14 @@ const lineHeightContainerStyles = xcss({
 export default () => {
   return (
     <Stack space="space.300">
-      <Heading level="h400" as="h3">
+      <Heading level="h400" as="h2">
         Text examples
       </Heading>
       <Stack space="space.200">
         <Box>
-          <Heading level="h300">Font size</Heading>
+          <Heading level="h300" as="h3">
+            Font size
+          </Heading>
           <Inline space="space.200" testId="font-sizes">
             {(
               [
@@ -40,7 +42,7 @@ export default () => {
           </Inline>
         </Box>
         <Box>
-          <Heading level="h300" as="h4">
+          <Heading level="h300" as="h3">
             Font weight
           </Heading>
           <Inline space="space.200" testId="font-weights">
@@ -54,7 +56,7 @@ export default () => {
           </Inline>
         </Box>
         <Box>
-          <Heading level="h300" as="h4">
+          <Heading level="h300" as="h3">
             Line height
           </Heading>
           <Inline space="space.200" testId="line-heights" alignBlock="center">
@@ -79,7 +81,7 @@ export default () => {
           </Inline>
         </Box>
         <Box>
-          <Heading level="h300" as="h4">
+          <Heading level="h300" as="h3">
             Testing
           </Heading>
           <Stack space="space.050" testId="testing">

package/examples/99-interactions.tsx

@@ -17,10 +17,6 @@ import {
   UNSAFE_Text as Text,
 } from '../src';
 
-const containerStyles = xcss({
-  width: 'size.500',
-});
-
 const fieldsetStyles = xcss({
   flex: '1 1 100%',
   borderStyle: 'solid',
@@ -49,7 +45,7 @@ const focusRingBoxStyles = xcss({
 
 export default () => {
   return (
-    <Box xcss={containerStyles} padding="space.100" testId="all">
+    <Box padding="space.100" testId="all">
       <Stack space="space.200">
         <Heading level="h400">Current ADS Buttons</Heading>
         <Inline space="space.200">
@@ -161,6 +157,7 @@ export default () => {
                 onClick={() => console.log('hello')}
                 xcss={focusRingBoxStyles}
                 padding="space.050"
+                aria-label="progress indicator"
               >
                 <InteractionSurface>
                   <Fragment />
@@ -170,8 +167,10 @@ export default () => {
           ))}
         </Inline>
         <Heading level="h400">Textfield / input spikes</Heading>
-        <Inline space="space.200">
-          <Textfield />
+        <Stack space="space.200">
+          <label htmlFor="textfield">Textfield</label>
+          <Textfield id="textfield" />
+          <label htmlFor="input">Input</label>
           <Box
             as="fieldset"
             padding="space.100"
@@ -180,7 +179,7 @@ export default () => {
             xcss={fieldsetStyles}
           >
             <input
-              id="textfield"
+              id="input"
               pattern="\d+"
               style={{
                 padding: 0,
@@ -192,7 +191,7 @@ export default () => {
               }}
             />
           </Box>
-        </Inline>
+        </Stack>
       </Stack>
     </Box>
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/ds-explorations",
-  "version": "3.0.6",
+  "version": "3.2.0",
   "description": "An experimental package for exploration and validation of spacing / typography foundations.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -25,7 +25,7 @@
     "prepare": "yarn ak-postbuild"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.29.0",
+    "@atlaskit/tokens": "^1.33.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "tiny-invariant": "^1.2.0"
@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "@atlaskit/ds-lib": "*",
-    "@atlaskit/primitives": "^1.12.0",
+    "@atlaskit/primitives": "^1.16.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/codegen": "^0.1.0",

package/scripts/codegen-styles.tsx

@@ -19,7 +19,7 @@ const colorTokensDependencyPath = require.resolve(
 );
 
 const typographyTokensDependencyPath = require.resolve(
-  '../../tokens/src/artifacts/tokens-raw/atlassian-typography',
+  '../../tokens/src/artifacts/tokens-raw/atlassian-typography-adg3',
 );
 
 writeFile(

package/scripts/typography-codegen-template.tsx

@@ -1,7 +1,7 @@
 import prettier from 'prettier';
 import parserTypeScript from 'prettier/parser-typescript';
 
-import { typography as tokens } from '@atlaskit/tokens/tokens-raw';
+import { typographyAdg3 as tokens } from '@atlaskit/tokens/tokens-raw';
 
 import { capitalize, tokenToStyle } from './utils';
 

package/src/components/text.partial.tsx

@@ -189,11 +189,11 @@ export default Text;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e0cf19767425d8b20b2d3cf5f3adc035>>
+ * @codegen <<SignedSource::40722ab03efa1705ecfbcccb090c5b40>>
  * @codegenId typography
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::7c95473452cd40813e49496912c844a1>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography-adg3.tsx <<SignedSource::049aa00f1a9c36992ac7a5378bf45032>>
  */
 const fontSizeMap = {
   'size.050': css({