Merge remote-tracking branch 'origin/main' into feat/widgetize-app-layout-skeleton-event-base

# Conflicts:
#	src/app-layout/visual-refresh-toolbar/index.tsx
#	src/app-layout/visual-refresh-toolbar/skeleton/index.tsx

Author: georgylobko

.gitignore

@@ -9,9 +9,9 @@ src/index.ts
 src/test-utils/dom/index.ts
 src/test-utils/selectors
 src/icon/generated
-src/internal/generated/custom-css-properties/index.*
+src/internal/generated/custom-css-properties
 vendor/generated-*.txt
 # IDEs
 .vscode
 # System
-.DS_Store
+.DS_Store

CONTRIBUTING.md

@@ -28,12 +28,12 @@ We support
 
 ## Browsers support
 
-We support the latest 3 major versions of these browsers for desktop.
-
+We support the latest 3 *major* versions of these browsers for desktop:
 - Google Chrome
 - Mozilla Firefox
 - Microsoft Edge
-- Apple Safari for macOS
+
+and the latest three *minor* versions of Apple Safari for macOS for desktop.
 
 We do not support Microsoft Internet Explorer or mobile browsers. We support all viewport sizes across desktop browsers.
 

build-tools/tasks/clean.js

@@ -14,6 +14,7 @@ module.exports = task('clean', () => {
       `${workspace.targetPath}/**`,
       `${workspace.staticSitePath}/**`,
       `${workspace.generatedTestUtils}/**`,
+      `${workspace.generatedPath}/custom-css-properties/**`,
       `node_modules/.cache`,
     ],
     { glob: true }

build-tools/tasks/generate-custom-css-properties.js

@@ -1,11 +1,12 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-const customCssPropertiesList = require('../../src/internal/generated/custom-css-properties/list');
 const path = require('path');
-const { writeFile } = require('../utils/files');
 const { getHashDigest } = require('loader-utils');
+const customCssPropertiesList = require('../utils/custom-css-properties');
+const { writeFile } = require('../utils/files');
+const workspace = require('../utils/workspace');
 
-const outputBasePath = path.join(__dirname, '../../src/internal/generated/custom-css-properties');
+const outputBasePath = path.join(workspace.generatedPath, 'custom-css-properties');
 const hash = getHashDigest(Buffer.from(JSON.stringify(customCssPropertiesList)), 'md5', 'base36', 6);
 
 const getHashedProperty = property => {
@@ -32,6 +33,9 @@ function writeSassFile() {
   writeFile(
     filepath,
     `
+    // Build environment
+    $awsui-commit-hash: "${workspace.gitCommitVersion}";
+    // Manually managed CSS-variables
     ${customCssPropertiesList.map(property => `$${property}: ${getHashedProperty(property)};`).join('\n')}
     `
   );

build-tools/tasks/generate-environment.js

@@ -10,6 +10,7 @@ function writeEnvironmentFile(theme) {
   const values = {
     PACKAGE_SOURCE: workspace.packageSource,
     PACKAGE_VERSION: workspace.packageVersion,
+    GIT_SHA: workspace.gitCommitVersion,
     THEME: theme.name,
     ALWAYS_VISUAL_REFRESH: !!theme.alwaysVisualRefresh,
   };

src/internal/generated/custom-css-properties/list.js renamed to build-tools/utils/custom-css-properties.js

@@ -73,5 +73,22 @@ const customCssPropertiesList = [
   // Internal drag handle properties
   'dragHandleAnimationInlineOffset',
   'dragHandleAnimationBlockOffset',
+  // Style API
+  'styleBackgroundActive',
+  'styleBackgroundDefault',
+  'styleBackgroundDisabled',
+  'styleBackgroundHover',
+  'styleBorderColorActive',
+  'styleBorderColorDefault',
+  'styleBorderColorDisabled',
+  'styleBorderColorHover',
+  'styleColorActive',
+  'styleColorDefault',
+  'styleColorDisabled',
+  'styleColorHover',
+  'styleFocusRingBorderColor',
+  'styleFocusRingBorderRadius',
+  'styleFocusRingBorderWidth',
+  'styleFocusRingBoxShadow',
 ];
 module.exports = customCssPropertiesList;

build-tools/utils/pluralize.js

@@ -45,6 +45,7 @@ const pluralizationMap = {
   KeyValuePairs: 'KeyValuePairs',
   LineChart: 'LineCharts',
   Link: 'Links',
+  List: 'Lists',
   LiveRegion: 'LiveRegions',
   MixedLineBarChart: 'MixedLineBarCharts',
   Modal: 'Modals',

build-tools/utils/workspace.js

@@ -11,6 +11,7 @@ module.exports = {
   isProd: process.env.NODE_ENV === 'production',
   packageSource,
   packageVersion,
+  gitCommitVersion,
   sourcePath: 'src',
   generatedPath: 'src/internal/generated',
   generatedTestUtils: 'src/test-utils/selectors',