Merge branch 'main' into main

.github/workflows/bundle-size.yml

@@ -141,12 +141,11 @@ jobs:
 
             const message = `${(pr / 1000).toFixed(1)} KB (${sign}${increasePercent} % / ${sign}${increaseKb} KB in this pull request)`
 
-            const name = "Bundle size";
             await github.rest.repos.createCommitStatus({
               owner: context.repo.owner,
               repo: context.repo.repo,
               sha: context.payload.pull_request.head.sha,
-              context: name,
+              context: "Bundle size",
               state: 'success',
               description: message,
               target_url: `https://github.com/${context.repo.owner}/${context.repo.repo}/actions/runs/${context.runId}`
@@ -163,7 +162,7 @@ jobs:
               owner: context.repo.owner,
               repo: context.repo.repo,
               sha: context.payload.pull_request.head.sha,
-              context: name,
+              context: "Bundle size",
               state: 'error',
               description: "The workflow encountered an error.",
               target_url: `https://github.com/${context.repo.owner}/${context.repo.repo}/actions/runs/${context.runId}`

.github/workflows/bundle-size/package.json

@@ -4,7 +4,8 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "build": "node build.js"
+    "build": "node build.js",
+    "preinstall": "node ./unlock-package-lock.cjs"
   },
   "dependencies": {
     "@cloudscape-design/components": "*",

.github/workflows/bundle-size/unlock-package-lock.cjs

@@ -0,0 +1,29 @@
+#!/usr/bin/env node
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * Remove specific @cloudscape-design/* packages where we should always use the latest minor release.
+ */
+const filename = path.resolve(__dirname, 'package-lock.json');
+const packageLock = JSON.parse(fs.readFileSync(filename));
+
+Object.keys(packageLock.packages).forEach(dependencyName => {
+  removeDependencies(dependencyName, packageLock.packages);
+});
+
+Object.keys(packageLock.dependencies).forEach(dependencyName => {
+  removeDependencies(dependencyName, packageLock.dependencies);
+});
+
+fs.writeFileSync(filename, JSON.stringify(packageLock, null, 2) + '\n');
+console.log('Removed @cloudscape-design/ dependencies from package-lock file');
+
+function removeDependencies(dependencyName, packages) {
+  if (dependencyName.includes('@cloudscape-design/')) {
+    delete packages[dependencyName];
+  }
+}

.stylelintrc

@@ -44,7 +44,8 @@
     "plugin/no-unsupported-browser-features": [
       true,
       {
-        "ignorePartialSupport": true
+        "ignorePartialSupport": true,
+        "ignore": ["css-nesting", "css-when-else", "flexbox-gap"]
       }
     ]
   },

README.md

@@ -25,7 +25,7 @@ Here is a basic example that renders a primary button:
 import Button from '@cloudscape-design/components/button';
 import '@cloudscape-design/global-styles/index.css';
 
-function App {
+function App() {
   return <Button variant="primary">Click me</Button>;
 }
 ```

build-tools/tasks/generate-environment.js

@@ -15,6 +15,7 @@ function writeEnvironmentFile(theme) {
   };
   const basePath = path.join(theme.outputPath, filepath);
 
+  writeFile(`${basePath}.json`, JSON.stringify(values, null, 2));
   writeFile(
     `${basePath}.js`,
     Object.entries(values)

build-tools/tasks/package-json.js

@@ -5,7 +5,7 @@ const path = require('path');
 const fs = require('fs');
 const { writeFile, listPublicItems, listBetaVersions } = require('../utils/files');
 const themes = require('../utils/themes');
-const { task } = require('../utils/gulp-utils');
+const { task, copyTask } = require('../utils/gulp-utils');
 const workspace = require('../utils/workspace');
 const pkg = require('../../package.json');
 
@@ -116,6 +116,7 @@ module.exports = parallel([
   }),
   styleDictionaryPackageJson,
   componentsThemeablePackageJson,
+  copyTask('package-lock', ['package-lock.json'], path.join(workspace.targetPath, 'dev-pages', 'internal')),
   devPagesPackageJson,
 ]);
 module.exports.generatePackageJson = generatePackageJson;

build-tools/tasks/styles.js

@@ -50,6 +50,7 @@ function stylesTask(theme) {
     const exposed = [];
     const themeable = [];
     const variablesMap = {};
+    const descriptions = {};
 
     Object.entries(metadata).forEach(([token, meta]) => {
       if (meta.public) {
@@ -61,6 +62,9 @@ function stylesTask(theme) {
       if (meta.sassName) {
         variablesMap[token] = meta.sassName.substring(1);
       }
+      if (meta.description) {
+        descriptions[token] = meta.description;
+      }
     });
 
     return buildThemedComponentsInternal({
@@ -74,6 +78,8 @@ function stylesTask(theme) {
       skip: designTokensOutputDir ? [] : ['design-tokens'],
       designTokensOutputDir,
       designTokensFileName: theme.designTokensOutput,
+      descriptions,
+      jsonSchema: true,
     });
   });
 }

jest.unit.config.js

@@ -23,6 +23,14 @@ module.exports = merge({}, tsPreset, cloudscapePreset, {
     '/internal\\/vendor/',
     '<rootDir>/pages',
   ],
+  coverageThreshold: {
+    global: {
+      branches: 82,
+      functions: 88,
+      lines: 90,
+      statements: 90,
+    },
+  },
   globals: {
     'ts-jest': {
       tsconfig: 'tsconfig.unit.json',