Skip to content

Commit 2383104

Browse files
snowystingersnowystinger
authored
Merge branch 'main' into tree-data-move-before-and-after
2 parents 0e3554a + e00dc83 commit 2383104

File tree

540 files changed

+6923
-4969
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

540 files changed

+6923
-4969
lines changed

‎.circleci/comment.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ async function run() {
4848
repo: 'react-spectrum',
4949
commit_sha: process.env.CIRCLE_SHA1,
5050
body: `Verdaccio builds:
51-
[CRA Test App](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/build/index.html)
51+
[CRA Test App](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/rsp-cra-18/index.html)
5252
[NextJS Test App](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/next/index.html)
5353
[RAC Tailwind Example](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/rac-tailwind/index.html)
5454
[RAC Spectrum + Tailwind Example](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/rac-spectrum-tailwind/index.html)

‎.circleci/config.yml

Lines changed: 265 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -461,22 +461,239 @@ jobs:
461461
paths:
462462
- '*/docs/'
463463

464-
docs-verdaccio:
464+
verdaccio:
465465
executor: rsp-xlarge
466466
steps:
467467
- restore_cache:
468468
key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
469469

470470
- run:
471-
name: run verdaccio
472-
command: ./scripts/verdaccio.sh ci
471+
name: run verdaccio and publish built packages
472+
command: |
473+
mkdir -p verdaccio-workspace
474+
./scripts/verdaccio-ci.sh
475+
./scripts/verdaccio-deploy.sh
476+
environment:
477+
VERDACCIO_STORAGE_PATH: /tmp/verdaccio-workspace/storage
473478

474479
# Store the prod docs website w/ verdaccio packages in a separate dist folder so it doesn't get deployed by "deploy" workflow
475480
# This is because we have a separate deploy flow for the test prod docs website so it doesn't hold up the normal "deploy" workflow
481+
- persist_to_workspace:
482+
root: /tmp/verdaccio-workspace
483+
paths:
484+
- storage
485+
486+
v-docs:
487+
executor: rsp-xlarge
488+
steps:
489+
- restore_cache:
490+
key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
491+
492+
- attach_workspace:
493+
at: /tmp/verdaccio-workspace
494+
495+
- run:
496+
name: build docs off verdaccio
497+
command: |
498+
./scripts/verdaccio-ci.sh
499+
./scripts/verdaccio-build.sh
500+
environment:
501+
VERDACCIO_STORAGE_PATH: /tmp/verdaccio-workspace/storage
502+
503+
- persist_to_workspace:
504+
root: verdaccio_dist
505+
paths:
506+
- '*/verdaccio/docs'
507+
508+
v-rsp-cra-18:
509+
executor: rsp-xlarge
510+
steps:
511+
- restore_cache:
512+
key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
513+
514+
- attach_workspace:
515+
at: /tmp/verdaccio-workspace
516+
517+
- run:
518+
name: build react-spectrum-cra-18 off verdaccio
519+
command: |
520+
./scripts/verdaccio-ci.sh
521+
./scripts/verdaccio-build-rsp-cra-18.sh
522+
environment:
523+
VERDACCIO_STORAGE_PATH: /tmp/verdaccio-workspace/storage
524+
525+
- persist_to_workspace:
526+
root: verdaccio_dist
527+
paths:
528+
- '*/verdaccio/rsp-cra-18'
529+
530+
v-webpack-4:
531+
executor: rsp-xlarge
532+
steps:
533+
- restore_cache:
534+
key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
535+
536+
- attach_workspace:
537+
at: /tmp/verdaccio-workspace
538+
539+
- run:
540+
name: build webpack-4 off verdaccio
541+
command: |
542+
./scripts/verdaccio-ci.sh
543+
./scripts/verdaccio-build-webpack-4.sh
544+
environment:
545+
VERDACCIO_STORAGE_PATH: /tmp/verdaccio-workspace/storage
546+
547+
- persist_to_workspace:
548+
root: verdaccio_dist
549+
paths:
550+
- '*/verdaccio/webpack-4'
551+
552+
v-nextjs:
553+
executor: rsp-xlarge
554+
steps:
555+
- restore_cache:
556+
key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
557+
558+
- attach_workspace:
559+
at: /tmp/verdaccio-workspace
560+
561+
- run:
562+
name: build nextjs off verdaccio
563+
command: |
564+
./scripts/verdaccio-ci.sh
565+
./scripts/verdaccio-build-nextjs.sh
566+
environment:
567+
VERDACCIO_STORAGE_PATH: /tmp/verdaccio-workspace/storage
568+
476569
- persist_to_workspace:
477570
root: verdaccio_dist
478571
paths:
479-
- '*/verdaccio/'
572+
- '*/verdaccio/next'
573+
574+
v-rac-tailwind:
575+
executor: rsp-xlarge
576+
steps:
577+
- restore_cache:
578+
key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
579+
580+
- attach_workspace:
581+
at: /tmp/verdaccio-workspace
582+
583+
- run:
584+
name: build rac-tailwind off verdaccio
585+
command: |
586+
./scripts/verdaccio-ci.sh
587+
./scripts/verdaccio-build-rac-tailwind.sh
588+
environment:
589+
VERDACCIO_STORAGE_PATH: /tmp/verdaccio-workspace/storage
590+
591+
- persist_to_workspace:
592+
root: verdaccio_dist
593+
paths:
594+
- '*/verdaccio/rac-tailwind'
595+
596+
v-rac-rsp-tailwind:
597+
executor: rsp-xlarge
598+
steps:
599+
- restore_cache:
600+
key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
601+
602+
- attach_workspace:
603+
at: /tmp/verdaccio-workspace
604+
605+
- run:
606+
name: build rac-rsp-tailwind off verdaccio
607+
command: |
608+
./scripts/verdaccio-ci.sh
609+
./scripts/verdaccio-build-rac-rsp-tailwind.sh
610+
environment:
611+
VERDACCIO_STORAGE_PATH: /tmp/verdaccio-workspace/storage
612+
613+
- persist_to_workspace:
614+
root: verdaccio_dist
615+
paths:
616+
- '*/verdaccio/rac-spectrum-tailwind'
617+
618+
v-s2-parcel:
619+
executor: rsp-xlarge
620+
steps:
621+
- restore_cache:
622+
key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
623+
624+
- attach_workspace:
625+
at: /tmp/verdaccio-workspace
626+
627+
- run:
628+
name: build s2-parcel off verdaccio
629+
command: |
630+
./scripts/verdaccio-ci.sh
631+
./scripts/verdaccio-build-s2-parcel.sh
632+
environment:
633+
VERDACCIO_STORAGE_PATH: /tmp/verdaccio-workspace/storage
634+
635+
- persist_to_workspace:
636+
root: verdaccio_dist
637+
paths:
638+
- '*/verdaccio/s2-parcel-example'
639+
640+
v-s2-webpack:
641+
executor: rsp-xlarge
642+
steps:
643+
- restore_cache:
644+
key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
645+
646+
- attach_workspace:
647+
at: /tmp/verdaccio-workspace
648+
649+
- run:
650+
name: build s2-webpack off verdaccio
651+
command: |
652+
./scripts/verdaccio-ci.sh
653+
./scripts/verdaccio-build-s2-webpack.sh
654+
environment:
655+
VERDACCIO_STORAGE_PATH: /tmp/verdaccio-workspace/storage
656+
657+
- persist_to_workspace:
658+
root: verdaccio_dist
659+
paths:
660+
- '*/verdaccio/s2-webpack-5-example'
661+
662+
v-icon-builder:
663+
executor: rsp-xlarge
664+
steps:
665+
- restore_cache:
666+
key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
667+
668+
- attach_workspace:
669+
at: /tmp/verdaccio-workspace
670+
671+
- run:
672+
name: build icon-builder off verdaccio
673+
command: |
674+
./scripts/verdaccio-ci.sh
675+
./scripts/verdaccio-build-icon-builder.sh
676+
environment:
677+
VERDACCIO_STORAGE_PATH: /tmp/verdaccio-workspace/storage
678+
679+
v-publish-stats:
680+
executor: rsp
681+
steps:
682+
- restore_cache:
683+
key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
684+
685+
- attach_workspace:
686+
at: /tmp/verdaccio_dist
687+
688+
- run:
689+
name: build size diffs off verdaccio
690+
command: |
691+
./scripts/verdaccio-build-pre-azure.sh
692+
693+
- persist_to_workspace:
694+
root: verdaccio_dist
695+
paths:
696+
- '*/verdaccio/publish-stats'
480697

481698
deploy:
482699
docker:
@@ -646,12 +863,45 @@ workflows:
646863
- docs:
647864
requires:
648865
- install
649-
- docs-verdaccio:
866+
- verdaccio:
650867
filters:
651868
branches:
652869
only: main
653870
requires:
654871
- install
872+
- v-docs:
873+
requires:
874+
- verdaccio
875+
- v-rsp-cra-18:
876+
requires:
877+
- verdaccio
878+
- v-webpack-4:
879+
requires:
880+
- verdaccio
881+
- v-nextjs:
882+
requires:
883+
- verdaccio
884+
- v-rac-tailwind:
885+
requires:
886+
- verdaccio
887+
- v-rac-rsp-tailwind:
888+
requires:
889+
- verdaccio
890+
- v-s2-parcel:
891+
requires:
892+
- verdaccio
893+
- v-s2-webpack:
894+
requires:
895+
- verdaccio
896+
- v-icon-builder:
897+
requires:
898+
- verdaccio
899+
- v-publish-stats:
900+
requires:
901+
- verdaccio
902+
- v-webpack-4
903+
- v-nextjs
904+
- v-rsp-cra-18
655905
- deploy:
656906
requires:
657907
- lint
@@ -670,7 +920,16 @@ workflows:
670920
- docs
671921
- deploy-verdaccio:
672922
requires:
673-
- docs-verdaccio
923+
- v-docs
924+
- v-rsp-cra-18
925+
- v-webpack-4
926+
- v-nextjs
927+
- v-rac-tailwind
928+
- v-rac-rsp-tailwind
929+
- v-s2-parcel
930+
- v-s2-webpack
931+
- v-icon-builder
932+
- v-publish-stats
674933
- comment:
675934
name: comment-pr
676935
filters:

‎.storybook-s2/docs/Intro.jsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,8 @@ function App() {
176176
<Provider background="base">
177177
{/* your app */}
178178
</Provider>`)}</Pre>
179+
<H3>Usage with older React Spectrum versions</H3>
180+
<P>See Adobe internal documentation.</P>
179181
<H2>Styling</H2>
180182
<P>React Spectrum v3 supported a limited set of <Link href="https://react-spectrum.adobe.com/react-spectrum/styling.html" target="_blank">style props</Link> for layout and positioning using Spectrum-defined values. In Spectrum 2, we’re improving on this by offering a much more flexible style macro. This offers additional Spectrum tokens, improves performance by generating CSS at build time rather than runtime, and works with any DOM element for use in custom components.</P>
181183
<P><Link href="https://parceljs.org/features/macros/" target="_blank">Macros</Link> are a new bundler feature that enable functions to run at build time. The React Spectrum <Code>style</Code> macro uses this to generate CSS that can be applied to any DOM element or component. Import the <Code>style</Code> macro using the with <Code>{`{type: 'macro'}`}</Code> <Link href="https://github.com/tc39/proposal-import-attributes" target="_blank">import attribute</Link>, and pass the result to the <Code>styles</Code> prop of any React Spectrum component to provide it with styles.</P>
@@ -238,8 +240,12 @@ function YourComponent() {
238240
<Pre>{highlight(`/* YourComponent.css */
239241
.your-unsafe-class {
240242
background: red;
241-
}
242-
`, 'CSS')}</Pre>
243+
}`, 'CSS')}</Pre>
244+
<H3>CSS Resets</H3>
245+
<P>CSS resets are strongly discouraged. Global CSS selectors can unintentionally affect elements that were not intended, leading to style clashes. Since Spectrum 2 uses <Link href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers" target="_blank">CSS cascade layers</Link>, global CSS outside a <Code>@layer</Code> will override S2's CSS. Therefore, if you cannot remove your CSS reset, it must be placed in a lower layer. This can be done by declaring your reset layer before the <Code>_</Code> layer used by S2.</P>
246+
<Pre>{highlight(`/* App.css */
247+
@layer reset, _;
248+
@import "reset.css" layer(reset);`)}</Pre>
243249
</main>
244250
</div>
245251
)

‎.storybook-s2/docs/Migrating.jsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -411,6 +411,12 @@ export function Migrating() {
411411
<li className={style({font: 'body', marginY: 8})}>Update placement prop to be have one value (i.e. Update <Code>placement="bottom left"</Code> to be <Code>placement="bottom"</Code>)</li>
412412
</ul>
413413

414+
<H3>TreeView</H3>
415+
<P>If migrating from TreeView version 3.0.0-beta.3 or before, please do the following. Otherwise, no updates needed.</P>
416+
<ul className="sb-unstyled">
417+
<li className={style({font: 'body', marginY: 8})}> Update content within <Code>TreeViewItem</Code> to be wrapped in <Code>TreeViewContentItem</Code></li>
418+
</ul>
419+
414420
<H3>View</H3>
415421
<ul className="sb-unstyled">
416422
<li className={style({font: 'body', marginY: 8})}>Update <Code>View</Code> to be a <Code>div</Code> and apply styles using the style macro</li>

‎.storybook-s2/docs/Release Notes.mdx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,35 @@ export default MDXLayout;
44

55
# Release Notes
66

7+
## v0.7.0
8+
9+
### New Components
10+
11+
* [TreeView](?path=/docs/treeview--docs)
12+
13+
### Updates
14+
15+
* [Badge](?path=/docs/badge--docs): Add `overflowMode` prop, fix icon alignment, update typo from `variant="charteuse"` to `variant="chartreuse"`
16+
* [CardView](?path=/docs/cardview--docs): Fix styling when using `renderActionBar`
17+
* Image: Add `fetchPriority` prop
18+
* [Menu](?path=/docs/menu--docs): Fix menu item's focus rings from exceeding popover boundaries
19+
* [Tabs](?path=/docs/tabs--docs): Add collapse behavior
20+
* Remove `all: revert-layer` from style macro generated CSS to fix Safari issues
21+
* Remove references to CSS `flex` shorthand. Please use `flexGrow`, `flexBasis`, and `flexShrink` instead.
22+
23+
### Codemods
24+
25+
* Update S2 icon migration map
26+
* Handle margin/padding shorthands in style props codemod
27+
28+
### Important CSS update
29+
30+
In this release, we have made significant changes to the way our Style Macro generates CSS in order to fix issues with Safari. The Style Macro uses [CSS Cascade Layers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers) to avoid CSS specificity and ordering issues. However, this means global CSS declared outside a `@layer`, such as CSS resets, will take precedence over S2's CSS. To avoid this, we previously used [all: revert-layer](https://developer.mozilla.org/en-US/docs/Web/CSS/revert-layer). Unfortunately, due to numerous bugs in Safari 18, this caused rendering issues in our components.
31+
32+
To fix these Safari issues, we have removed `all: revert-layer` in this release. This means that global CSS will now take precedence over S2's styles. **If you are using a CSS reset on the same page as S2 components, you will need to remove it** or put it in a `@layer` of its own. See [the docs](?path=/docs/intro--docs#css-resets) for more information.
33+
34+
**If you are using a version older than React Spectrum v3 on the same page, you must update to the latest version.** See the Adobe internal documentation for more details.
35+
736
## v0.6.0
837

938
### New Components

‎.yarnrc.yml

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,8 @@ yarnPath: .yarn/releases/yarn-4.2.2.cjs
1212

1313
plugins:
1414
- .yarn/plugins/plugin-nightly-prep.js
15+
16+
changesetIgnorePatterns:
17+
- "**/*.test.*"
18+
- "**/*.md"
19+
- "**/test/**"

0 commit comments

Comments
 (0)