Merge branch 'main' into datepicker-autocomplete

Author: yihuiliao

.circleci/comment.js

@@ -53,6 +53,7 @@ async function run() {
       [RAC Tailwind Example](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/rac-tailwind/index.html)
       [RAC Spectrum + Tailwind Example](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/rac-spectrum-tailwind/index.html)
       [S2 Parcel Example](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/s2-parcel-example/index.html)
+      [S2 Custom Icons](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/icon-builder-fixture/index.html)
       [S2 Webpack Example](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/s2-webpack-5-example/index.html)
       [CRA Test App Size](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/publish-stats/build-stats.txt)
       [NextJS App Size](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/publish-stats/next-build-stats.txt)
@@ -79,9 +80,6 @@ async function run() {
         body: `Build successful! 🎉
 
   * [View the storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook/index.html)
-  * [View the storybook-19](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-19/index.html)
-  * [View the storybook-17](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-17/index.html)
-  * [View the storybook-16](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-16/index.html)
   * [View the S2 storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-s2/index.html)
   * [View the documentation](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/docs/index.html)`
       });

.circleci/config.yml

@@ -104,7 +104,7 @@ jobs:
             - ~/react-spectrum
           key: react-spectrum17-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
 
-  install-19:
+  install-18:
     executor: rsp-large
     steps:
       - checkout
@@ -119,12 +119,34 @@ jobs:
       - run:
           name: build
           command: |
-            yarn install --immutable && yarn install-19
+            yarn install --immutable && yarn install-18
 
       - save_cache:
           paths:
             - ~/react-spectrum
-          key: react-spectrum-19-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+          key: react-spectrum-18-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+
+  install-canary:
+    executor: rsp-large
+    steps:
+      - checkout
+
+      - run:
+          name: Write npmrc
+          command: |
+            if [ $NPM_PASSWORD ]; then
+              cp .circleci/.npmrc .npmrc
+            fi
+
+      - run:
+          name: build
+          command: |
+            yarn install --immutable && yarn install-canary
+
+      - save_cache:
+          paths:
+            - ~/react-spectrum
+          key: react-spectrum-canary-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
 
   test-ssr:
     executor: rsp-xlarge
@@ -184,11 +206,22 @@ jobs:
           command: |
             yarn test:ssr
 
-  test-ssr-19:
+  test-ssr-18:
+    executor: rsp-xlarge
+    steps:
+      - restore_cache:
+          key: react-spectrum-18-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+
+      - run:
+          name: test ssr
+          command: |
+            yarn test:ssr
+
+  test-ssr-canary:
     executor: rsp-xlarge
     steps:
       - restore_cache:
-          key: react-spectrum-19-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+          key: react-spectrum-canary-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
 
       - run:
           name: test ssr
@@ -243,12 +276,12 @@ jobs:
       - store_artifacts:
           path: ~/junit
 
-  test-19:
+  test-18:
     parallelism: 3
     executor: rsp-xlarge
     steps:
       - restore_cache:
-          key: react-spectrum-19-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+          key: react-spectrum-18-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
 
       - run: mkdir ~/junit
 
@@ -257,10 +290,34 @@ jobs:
           command: |
             shopt -s globstar
             TESTFILES=$(circleci tests glob "packages/**/*.test.[tj]{s,sx}" | circleci tests split --split-by=timings)
-            JEST_JUNIT_OUTPUT_NAME="junit-19.xml" yarn test ${TESTFILES}
+            JEST_JUNIT_OUTPUT_NAME="junit-18.xml" yarn test ${TESTFILES}
 
       - run:
-          command: cp junit-19.xml ~/junit/
+          command: cp junit-18.xml ~/junit/
+          when: always
+      - store_test_results:
+          path: ~/junit
+      - store_artifacts:
+          path: ~/junit
+
+  test-canary:
+    parallelism: 3
+    executor: rsp-xlarge
+    steps:
+      - restore_cache:
+          key: react-spectrum-canary-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+
+      - run: mkdir ~/junit
+
+      - run:
+          name: test
+          command: |
+            shopt -s globstar
+            TESTFILES=$(circleci tests glob "packages/**/*.test.[tj]{s,sx}" | circleci tests split --split-by=timings)
+            JEST_JUNIT_OUTPUT_NAME="junit-canary.xml" yarn test ${TESTFILES}
+
+      - run:
+          command: cp junit-canary.xml ~/junit/
           when: always
       - store_test_results:
           path: ~/junit
@@ -368,51 +425,6 @@ jobs:
           paths:
             - '*/storybook/'
 
-  storybook-16:
-    executor: rsp-large
-    steps:
-      - restore_cache:
-          key: react-spectrum16-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
-
-      - run:
-          name: build storybook-16
-          command: make storybook-16
-
-      - persist_to_workspace:
-          root: dist
-          paths:
-            - '*/storybook-16/'
-
-  storybook-17:
-    executor: rsp-large
-    steps:
-      - restore_cache:
-          key: react-spectrum17-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
-
-      - run:
-          name: build storybook-17
-          command: make storybook-17
-
-      - persist_to_workspace:
-          root: dist
-          paths:
-            - '*/storybook-17/'
-
-  storybook-19:
-    executor: rsp-large
-    steps:
-      - restore_cache:
-          key: react-spectrum-19-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
-
-      - run:
-          name: build storybook-19
-          command: make storybook-19
-
-      - persist_to_workspace:
-          root: dist
-          paths:
-            - '*/storybook-19/'
-
   storybook-s2:
     executor: rsp-large
     steps:
@@ -673,6 +685,11 @@ jobs:
           environment:
             VERDACCIO_STORAGE_PATH: /tmp/verdaccio-workspace/storage
 
+      - persist_to_workspace:
+          root: verdaccio_dist
+          paths:
+            - '*/verdaccio/icon-builder-fixture'
+
   v-publish-stats:
     executor: rsp
     steps:
@@ -788,7 +805,8 @@ workflows:
       - install
       - install-16
       - install-17
-      - install-19
+      - install-18
+      - install-canary
       - test-ssr:
           requires:
             - install
@@ -807,12 +825,18 @@ workflows:
       - test-17:
           requires:
             - install-17
-      - test-19:
+      - test-18:
+          requires:
+            - install-18
+      - test-ssr-18:
+          requires:
+            - install-18
+      - test-canary:
           requires:
-            - install-19
-      - test-ssr-19:
+            - install-canary
+      - test-ssr-canary:
           requires:
-            - install-19
+            - install-canary
       - test-esm:
           requires:
             - install
@@ -844,15 +868,6 @@ workflows:
       - storybook:
           requires:
             - install
-      - storybook-16:
-          requires:
-            - install-16
-      - storybook-17:
-          requires:
-            - install-17
-      - storybook-19:
-          requires:
-            - install-19
       - storybook-s2:
           requires:
             - install
@@ -907,11 +922,10 @@ workflows:
             - test-16
             - test-ssr-17
             - test-17
+            - test-ssr-18
+            - test-18
             - test-esm
             - storybook
-            - storybook-16
-            - storybook-17
-            - storybook-19
             - storybook-s2
             - docs
       - deploy-verdaccio:

.parcelrc-build

@@ -16,7 +16,7 @@
       "@parcel/transformer-react-refresh-wrap"
     ]
   },
-  "namers": ["parcel-namer-s2", "parcel-namer-intl", "..."],
+  "namers": ["@react-spectrum/parcel-namer-s2", "parcel-namer-intl", "..."],
   "optimizers": {
     "**/spectrum-theme.cjs": ["parcel-optimizer-strict-mode"]
   }

.storybook-s2/custom-addons/provider/index.js

@@ -5,7 +5,7 @@ import {getQueryParams} from '@storybook/preview-api';
 // Importing from src so that HMR works.
 // Without this, all HMR updates will bubble through the index.ts and up 
 // to the root instead of stopping at the story files.
-import {Provider} from '@react-spectrum/s2/src/Provider';
+import {Provider} from '../../../packages/@react-spectrum/s2/src/Provider';
 
 document.body.style.margin = '0';
 

.storybook-s2/docs/Icons.jsx

@@ -4,7 +4,7 @@ import {ActionButton, Text} from '@react-spectrum/s2';
 import {H2, H3, P, Code, Pre, Link} from './typography';
 import {highlight} from './highlight' with {type: 'macro'};
 import {IconColors} from './Colors';
-import CheckmarkCircle from '../../packages/@react-spectrum/s2/s2wf-icons/S2_Icon_CheckmarkCircle_20_N.svg';
+import CheckmarkCircle from '@react-spectrum/s2/icons/CheckmarkCircle';
 import {iconStyle} from '../../packages/@react-spectrum/s2/style' with {type: 'macro'};
 
 export function Icons() {

.storybook-s2/docs/Illustrations.jsx

@@ -1,11 +1,10 @@
 import linearIllustrations from '@react-spectrum/s2/spectrum-illustrations/linear/*.tsx';
 import gradientIllustrations from '@react-spectrum/s2/spectrum-illustrations/gradient/*/*.tsx';
-import Paste from '@react-spectrum/s2/s2wf-icons/S2_Icon_Paste_20_N.svg';
+import Paste from '@react-spectrum/s2/icons/Paste';
 import { style } from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'};
-import {ActionButton, Text} from '@react-spectrum/s2';
+import {ActionButton, Radio, RadioGroup} from '@react-spectrum/s2';
 import {H2, H3, P, Code, Pre, Link} from './typography';
 import {highlight} from './highlight' with {type: 'macro'};
-import { Radio, RadioGroup } from '../../packages/@react-spectrum/s2/src';
 import { useState } from 'react';
 
 export function Illustrations() {

.storybook-s2/docs/Intro.jsx

@@ -1,13 +1,13 @@
 import { style } from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'};
-import {Button, LinkButton, ButtonGroup, Checkbox, Content, Dialog, DialogTrigger, Footer, Header, Heading, Image, InlineAlert, Menu, MenuItem, MenuSection, MenuTrigger, SubmenuTrigger, Switch, Text} from '@react-spectrum/s2';
-import NewIcon from '@react-spectrum/s2/s2wf-icons/S2_Icon_New_20_N.svg';
-import ImgIcon from '@react-spectrum/s2/s2wf-icons/S2_Icon_Image_20_N.svg';
-import CopyIcon from '@react-spectrum/s2/s2wf-icons/S2_Icon_Copy_20_N.svg';
-import CommentTextIcon from '@react-spectrum/s2/s2wf-icons/S2_Icon_CommentText_20_N.svg';
-import ClockPendingIcon from '@react-spectrum/s2/s2wf-icons/S2_Icon_ClockPending_20_N.svg';
-import CommunityIcon from '@react-spectrum/s2/s2wf-icons/S2_Icon_Community_20_N.svg';
-import DeviceTabletIcon from '@react-spectrum/s2/s2wf-icons/S2_Icon_DeviceTablet_20_N.svg';
-import DeviceDesktopIcon from '@react-spectrum/s2/s2wf-icons/S2_Icon_DeviceDesktop_20_N.svg';
+import {Button, ButtonGroup, Checkbox, Content, Dialog, DialogTrigger, Footer, Header, Heading, Image, InlineAlert, Menu, MenuItem, MenuSection, MenuTrigger, SubmenuTrigger, Switch, Text} from '@react-spectrum/s2';
+import NewIcon from '@react-spectrum/s2/icons/New';
+import ImgIcon from '@react-spectrum/s2/icons/Image';
+import CopyIcon from '@react-spectrum/s2/icons/Copy';
+import CommentTextIcon from '@react-spectrum/s2/icons/CommentText';
+import ClockPendingIcon from '@react-spectrum/s2/icons/ClockPending';
+import CommunityIcon from '@react-spectrum/s2/icons/Community';
+import DeviceTabletIcon from '@react-spectrum/s2/icons/DeviceTablet';
+import DeviceDesktopIcon from '@react-spectrum/s2/icons/DeviceDesktop';
 import {highlight} from './highlight' with {type: 'macro'};
 import {H2, H3, H4, P, Pre, Code, Strong, Link} from './typography';
 

.storybook-s2/docs/Release Notes.mdx

@@ -4,6 +4,14 @@ export default MDXLayout;
 
 # Release Notes
 
+## v0.9.1
+
+### Updates
+* [Button](?path=/docs/button--docs): Fix focus visible styles from being applied on standard focus
+* [ContextualHelp](?path=/docs/contextualhelp--docs): Update width to match Spectrum designs
+* [Tabs](?path=/docs/tabs--docs): Update selection indicator when tab text changes
+* [TagGroup](?path=/docs/taggroup--docs): Fix focus visible styles from being applied on standard focus
+
 ## v0.9.0
 
 ### Updates
@@ -24,7 +32,7 @@ We strongly discourage using `UNSAFE_className` because it results in inconsiste
 
 ### Style macro updates
 
-We have made significant changes to the way our Style Macro generates class names in an effort to make them stable between version. While we work to stabilize the style macro class names, we have added a postfix based on the version number so that class names don't conflict with any prior or future version. 
+We have made significant changes to the way our Style Macro generates class names in an effort to make them stable between versions. While we work to stabilize the style macro class names, we have added a postfix based on the version number so that class names don't conflict with any prior or future version.
 
 We also made some changes to the available style macro values.
 

.storybook-s2/preview.tsx

@@ -1,4 +1,4 @@
-import '@react-spectrum/s2/src/page';
+import '@react-spectrum/s2/page.css';
 import { themes } from '@storybook/theming';
 import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
 import { store } from 'storybook-dark-mode/dist/esm/Tool';

.yarn/patches/micromark-extension-mdxjs-npm-1.0.0-d2b6b69e4a.patch

@@ -0,0 +1,13 @@
+diff --git a/index.d.ts b/index.d.ts
+index ba9855b0a36d5fbd70f92da611f3e1e96f203ee3..167de6defae46d391a45cc63dd11403722fb1619 100644
+--- a/index.d.ts
++++ b/index.d.ts
+@@ -4,7 +4,7 @@
+  */
+ export function mdxjs(
+   options?:
+-    | import('micromark-extension-mdx-expression/dev/lib/syntax').Options
++    | Options
+     | undefined
+ ): Extension
+ export type Extension = import('micromark-util-types').Extension