[pull] main from adobe:main

.circleci/config.yml

@@ -478,6 +478,21 @@ jobs:
           paths:
             - '*/docs/'
 
+  docs-beta:
+    executor: rsp-xlarge
+    steps:
+      - restore_cache:
+          key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+
+      - run:
+          name: build docs
+          command: make s2-docs-production
+
+      - persist_to_workspace:
+          root: dist
+          paths:
+            - '*/docs/'
+
   s2-docs:
     executor: rsp-xlarge
     steps:
@@ -1018,6 +1033,26 @@ workflows:
           requires:
             - docs-production
 
+
+  beta-docs:
+    when:
+      and:
+        - equal: [ "beta-docs", << pipeline.parameters.GHA_Action >> ]
+    jobs:
+      - install
+      - docs-beta:
+          filters:
+            branches:
+              only: beta-docs
+          requires:
+            - install
+      - deploy-production:
+          filters:
+            branches:
+              only: beta-docs
+          requires:
+            - docs-beta
+
   nightly:
     triggers:
       - schedule:

.github/workflows/beta-docs.yaml

@@ -0,0 +1,15 @@
+name: Beta docs deploy
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+
+jobs:
+  trigger-circleci:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Run CircleCI
+        id: beta-docs
+        uses: CircleCI-Public/trigger-circleci-pipeline-action@v1.0.5
+        env:
+          CCI_TOKEN: ${{ secrets.CCI_TOKEN }}

Makefile

@@ -109,6 +109,8 @@ website:
 website-production:
 	node scripts/buildWebsite.js $$PUBLIC_URL
 	cp packages/dev/docs/pages/robots.txt dist/production/docs/robots.txt
+	# Uncomment this when we are ready to release.
+	# $(MAKE) s2-docs-production
 	$(MAKE) starter-zip
 	$(MAKE) tailwind-starter
 	$(MAKE) s2-storybook-docs
@@ -144,12 +146,18 @@ s2-api-diff:
 	node scripts/api-diff.js --skip-same --skip-style-props
 
 s2-docs:
+	BASE_URL=https://reactspectrum.blob.core.windows.net PUBLIC_URL=/reactspectrum/$$(git rev-parse HEAD)/s2-docs DIST_DIR=dist/$$(git rev-parse HEAD)/s2-docs $(MAKE) build-s2-docs
+
+s2-docs-production:
+	BASE_URL=https://react-spectrum.adobe.com PUBLIC_URL=/beta DIST_DIR=dist/production/docs/beta $(MAKE) build-s2-docs
+
+build-s2-docs:
 	yarn workspace @react-spectrum/s2-docs generate:md
 	yarn workspace @react-spectrum/s2-docs generate:og
-	REGISTRY_URL=https://reactspectrum.blob.core.windows.net/reactspectrum/$$(git rev-parse HEAD)/s2-docs/registry node scripts/buildRegistry.mjs
-	REGISTRY_URL=https://reactspectrum.blob.core.windows.net/reactspectrum/$$(git rev-parse HEAD)/s2-docs/registry yarn build:s2-docs --public-url /reactspectrum/$$(git rev-parse HEAD)/s2-docs/
-	mkdir -p dist/$$(git rev-parse HEAD)
-	mv packages/dev/s2-docs/dist dist/$$(git rev-parse HEAD)/s2-docs
-	mkdir -p dist/$$(git rev-parse HEAD)/s2-docs/registry
-	mv starters/docs/registry dist/$$(git rev-parse HEAD)/s2-docs/registry/vanilla
-	mv starters/tailwind/registry dist/$$(git rev-parse HEAD)/s2-docs/registry/tailwind
+	REGISTRY_URL=$(BASE_URL)$(PUBLIC_URL)/registry node scripts/buildRegistry.mjs
+	REGISTRY_URL=$(BASE_URL)$(PUBLIC_URL)/registry yarn build:s2-docs --public-url $(PUBLIC_URL)
+	mkdir -p $(DIST_DIR)
+	mv packages/dev/s2-docs/dist/* $(DIST_DIR)
+	mkdir -p $(DIST_DIR)/registry
+	mv starters/docs/registry $(DIST_DIR)/registry/vanilla
+	mv starters/tailwind/registry $(DIST_DIR)/registry/tailwind

packages/@react-spectrum/s2/src/Modal.tsx

@@ -12,13 +12,13 @@
 
 import {colorScheme} from './style-utils' with {type: 'macro'};
 import {ColorSchemeContext} from './Provider';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, GlobalDOMAttributes} from '@react-types/shared';
 import {forwardRef, MutableRefObject, useCallback, useContext} from 'react';
 import {ModalOverlay, ModalOverlayProps, Modal as RACModal, useLocale} from 'react-aria-components';
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 
-interface ModalProps extends ModalOverlayProps {
+interface ModalProps extends Omit<ModalOverlayProps, 'className' | 'style' | keyof GlobalDOMAttributes> {
   /**
    * The size of the Modal.
    *
@@ -29,7 +29,7 @@ interface ModalProps extends ModalOverlayProps {
 
 const modalOverlayStyles = style({
   ...colorScheme(),
-  position: 'fixed',
+  position: 'absolute',
   top: 0,
   left: 0,
   width: 'full',

packages/dev/s2-docs/pages/WelcomeHeader.tsx

@@ -0,0 +1,71 @@
+import {ProductCard, Content, Footer, Text, LinkButton} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+import {TAB_DEFS} from '../src/constants';
+// @ts-ignore
+import url from 'url:../assets/wallpaper_collaborative_S2_desktop.webp';
+
+export function WelcomeHeader() {
+  return (
+    <header
+      style={{
+        backgroundImage: `url(${url})`,
+        backgroundSize: 'cover'
+      }}
+      className={style({
+        paddingX: 48,
+        paddingY: 96,
+        marginTop: {
+          default: -12,
+          lg: -40
+        },
+        marginX: {
+          default: -12,
+          lg: -40
+        },
+        marginBottom: 48
+      })}>
+      <h1 className={style({font: 'heading-2xl', color: 'white'})}>
+        React Spectrum Libraries
+      </h1>
+    </header>
+  );
+}
+
+export function LibraryCards() {
+  return (
+    <div className={style({display: 'flex', gap: 20, flexWrap: 'wrap', justifyContent: {default: 'center', lg: 'start'}})}>
+      <ProductCard size="L">
+        {TAB_DEFS['react-spectrum'].icon}
+        <Content>
+          <Text slot="title">{TAB_DEFS['react-spectrum'].label}</Text>
+          <Text slot="description">{TAB_DEFS['react-spectrum'].description}</Text>
+        </Content>
+        <Footer>
+          <LinkButton href="s2/index.html" variant="accent">Get started</LinkButton>
+        </Footer>
+      </ProductCard>
+
+      <ProductCard size="L">
+        {TAB_DEFS['react-aria'].icon}
+        <Content>
+          <Text slot="title">{TAB_DEFS['react-aria'].label}</Text>
+          <Text slot="description">{TAB_DEFS['react-aria'].description}</Text>
+        </Content>
+        <Footer>
+          <LinkButton href="react-aria/Autocomplete.html" variant="accent">Explore</LinkButton>
+        </Footer>
+      </ProductCard>
+
+      <ProductCard size="L">
+        {TAB_DEFS['internationalized'].icon}
+        <Content>
+          <Text slot="title">{TAB_DEFS['internationalized'].label}</Text>
+          <Text slot="description">{TAB_DEFS['internationalized'].description}</Text>
+        </Content>
+        <Footer>
+          <LinkButton href="internationalized/date/index.html" variant="accent">Show Packages</LinkButton>
+        </Footer>
+      </ProductCard>
+    </div>
+  );
+}

packages/dev/s2-docs/pages/error.mdx

@@ -5,5 +5,6 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 
 export const hideFromSearch = true;
+export const description = 'Page not found';
 
 <Error />

packages/dev/s2-docs/pages/index.mdx

@@ -1,14 +1,15 @@
 import {Layout} from '../src/Layout';
-import {LinkButton} from '@react-spectrum/s2';
+import {WelcomeHeader, LibraryCards} from './WelcomeHeader';
 export default Layout;
 
 export const section = 'Getting started';
+export const hideNav = true;
 
-# Welcome!
+<WelcomeHeader />
 
 The React Spectrum docs have a new look! This is a **beta preview** so keep in mind that we will be continuing to make improvements before the full release.
 
-<LinkButton href="s2/getting-started.html" variant="accent" size="L">Get Started with Spectrum 2</LinkButton>
+<LibraryCards />
 
 ## What's new?
 
@@ -22,4 +23,4 @@ The React Spectrum docs have a new look! This is a **beta preview** so keep in m
 
 ## Roadmap
 
-The existing docs are still available [here](https://react-spectrum.adobe.com/react-spectrum/index.html). We plan to do a full release of the new docs site by early 2026, so we welcome any and all feedback!
+The existing docs are still available [here](https://react-spectrum.adobe.com/index.html). We plan to do a full release of the new docs site by early 2026, so we welcome any and all feedback!

packages/dev/s2-docs/pages/internationalized/date/index.mdx

@@ -13,6 +13,8 @@ export default Layout;
 import {InstallCommand} from '../../../src/InstallCommand';
 
 export const section = 'Date and Time';
+export const pageTitle = 'Internationalized | Date and Time';
+export const description = 'Introduction to @internationalized/date';
 
 # Introduction
 

packages/dev/s2-docs/pages/internationalized/number/index.mdx

@@ -13,6 +13,8 @@ export default Layout;
 import {InstallCommand} from '../../../src/InstallCommand';
 
 export const section = 'Numbers';
+export const pageTitle = 'Internationalized | Numbers';
+export const description = 'Introduction to @internationalized/number';
 
 # Introduction
 

packages/dev/s2-docs/pages/react-aria/collections.mdx

@@ -5,6 +5,7 @@ import docs from 'docs:react-aria-components';
 import {InlineAlert, Heading, Content} from '@react-spectrum/s2'
 
 export const section = 'Guides';
+export const description = 'Implementing collections in React Aria';
 
 # Collections
 

packages/dev/s2-docs/pages/react-aria/dnd.mdx

@@ -13,6 +13,7 @@ import {PokemonListBox} from './PokemonListBox';
 import {PokemonGridList} from './PokemonGridList';
 
 export const section = 'Guides';
+export const description = 'Implementing drag and drop in React Aria';
 
 # Drag and Drop
 

packages/dev/s2-docs/pages/react-aria/selection.mdx

@@ -4,6 +4,7 @@ export default Layout;
 import docs from 'docs:react-aria-components';
 
 export const section = 'Guides';
+export const description = 'Implementing selection in React Aria';
 
 # Selection
 

packages/dev/s2-docs/pages/react-aria/styling.mdx

@@ -5,6 +5,7 @@ export default Layout;
 import {Disclosure, DisclosureTitle, DisclosurePanel} from '@react-spectrum/s2';
 
 export const section = 'Guides';
+export const description = 'Styling in React Aria';
 
 # Styling
 

packages/dev/s2-docs/pages/s2/Skeleton.mdx

@@ -22,7 +22,7 @@ import Select from '@react-spectrum/s2/icons/Select';
       src={preview}
       width={1600}
       height={1200}
-      styles={style({height: 160, borderRadius: 'default', flexShrink: 0})} />
+      styles={style({height: 160, borderRadius: 'default', flexShrink: 0, aspectRatio: '4 / 3'})} />
     <div className={style({display: 'flex', flexDirection: 'column', gap: 16})}>
       <Text styles={style({font: 'heading-lg'})}>Placeholder title</Text>
       <Text styles={style({font: 'body'})}>This is placeholder content approximating the length of the real content to avoid layout shifting when the real content appears.</Text>

packages/dev/s2-docs/pages/s2/collections.mdx

@@ -3,8 +3,8 @@ import {InlineAlert, Heading, Content} from '@react-spectrum/s2';
 export default Layout;
 
 export const section = 'Guides';
-
 export const tags = ['lists'];
+export const description = 'Implementing collections in React Spectrum';
 
 # Collections
 

packages/dev/s2-docs/pages/s2/dnd.mdx

@@ -3,8 +3,8 @@ import {InlineAlert, Heading, Content} from '@react-spectrum/s2';
 export default Layout;
 
 export const section = 'Guides';
-
 export const tags = ['drag', 'drop'];
+export const description = 'Implementing drag and drop in React Spectrum';
 
 # Drag and Drop
 

packages/dev/s2-docs/pages/s2/getting-started.mdx

@@ -6,6 +6,7 @@ import {SegmentedControl, SegmentedControlItem} from '@react-spectrum/s2';
 
 export const section = 'Getting started';
 export const tags = ['introduction', 'installation'];
+export const description = 'Getting started with React Spectrum';
 
 # Getting started
 

packages/dev/s2-docs/pages/s2/migrating.mdx

@@ -6,6 +6,7 @@ export default Layout;
 
 export const section = 'Guides';
 export const tags = ['codemod', 'upgrade', 'update'];
+export const description = 'Migrating to Spectrum 2 in React Spectrum';
 
 # Migrating to Spectrum 2
 

packages/dev/s2-docs/pages/s2/release-notes.mdx

@@ -3,6 +3,7 @@ export default Layout;
 
 export const section = 'Releases';
 export const tags = ['changelog', 'versions', 'updates'];
+export const description = 'Release notes for React Spectrum';
 
 # Release Notes
 

packages/dev/s2-docs/pages/s2/selection.mdx

@@ -4,6 +4,7 @@ export default Layout;
 
 export const section = 'Guides';
 export const tags = ['collections'];
+export const description = 'Implementing selection in React Spectrum';
 
 # Selection
 

packages/dev/s2-docs/pages/s2/styling.mdx

@@ -7,6 +7,7 @@ export default Layout;
 
 export const section = 'Guides';
 export const tags = ['style', 'macro', 'spectrum', 'custom'];
+export const description = 'Styling in React Spectrum';
 
 # Styling