update FAQ, add mobile related pages, link from RAC styling

Author: LFDanLu

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

@@ -252,6 +252,25 @@ With this configured, all states for React Aria Components can be accessed with
 </ListBoxItem>
 ```
 
+## Style macro
+
+If you want to build custom components that follow Spectrum design tokens and styling, you can use the [style macro](../s2/styling.html) from React Spectrum. The `style` macro is a build-time CSS generator that provides type safe access to Spectrum 2 design tokens including colors, spacing, sizing, and typography.
+
+```tsx
+import {Checkbox} from 'react-aria-components';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+<Checkbox
+  className={style({
+    backgroundColor: {
+      default: 'gray-100',
+      isHovered: 'gray-200',
+      isSelected: 'gray-900'
+    }
+  })}
+/>
+```
+
 ## Animation
 
 React Aria Components supports both [CSS transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions) and [keyframe animations](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes), and works with JavaScript animation libraries like [Framer Motion](https://www.framer.com/motion/).

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

@@ -3,6 +3,7 @@ import {InlineAlert, Heading, Content, Link} from '@react-spectrum/s2';
 import {S2Colors} from '../../src/S2Colors';
 import {S2Typography} from '../../src/S2Typography';
 import {S2StyleProperties} from '../../src/S2StyleProperties';
+import {S2FAQ} from '../../src/S2FAQ';
 export default Layout;
 
 export const section = 'Guides';
@@ -241,21 +242,4 @@ we have MCP servers for [React Aria](#TODO) and [React Spectrum](https://www.npm
 
 ## FAQ
 
-> I'm getting a "Could not statically evaluate macro argument" error.
-
-This indicates that your `style` macro has a condition that isn't evaluable at build time. This can happen for a variety of reasons such
-as if you've referenced non-constant variables within your `style` macro or if you've called non-macro functions within your `style` macro.
-If you are using Typescript, it can be as simple as forgetting to add `as const` to your own defined reusable macro.
-
-> I'm seeing a ton of duplicate rules being generated and/or my dev tools are very slow.
-
-Please make sure you've followed the [best practices listed above](#css-optimization).
-
-> I tried to pass my `style` macro to `UNSAFE_className` but it doesn't work.
-
-The `style` macro is not meant to be used with `UNSAFE_className`. Overrides to the Spectrum styles is highly discouraged,
-consider styling an equivalent React Aria Component instead.
-
-> I'm coming from S1, but where are Flex/Grid/etc?
-
-These no longer exist. Please style `<div>`, `<span>`, and other standard HTML elements with the `style` macro instead.
+<S2FAQ />

packages/dev/s2-docs/src/Layout.tsx

@@ -31,23 +31,6 @@ const components = {
   p: ({children, ...props}) => <p {...props} className={style({font: {default: 'body', lg: 'body-lg'}, marginY: 24})}>{children}</p>,
   ul: (props) => <ul {...props} />,
   li: ({children, ...props}) => <li {...props} className={style({font: {default: 'body', lg: 'body-lg'}, marginY: 0})}>{children}</li>,
-  blockquote: ({children, ...props}) => (
-    <blockquote
-      {...props}
-      className={style({
-        borderStartWidth: 4,
-        borderEndWidth: 0,
-        borderTopWidth: 0,
-        borderBottomWidth: 0,
-        borderStyle: 'solid',
-        borderColor: 'gray-400',
-        paddingStart: 12,
-        font: {default: 'body', lg: 'body-lg'},
-        margin: 'unset'
-      })}>
-      {children}
-    </blockquote>
-  ),
   Figure: (props) => <figure {...props} className={style({display: 'flex', flexDirection: 'column', alignItems: 'center', marginY: 32, marginX: 0})} />,
   Caption: (props) => <figcaption {...props} className={style({font: 'body-sm'})} />,
   CodeBlock: CodeBlock,
@@ -243,6 +226,9 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
               <article
                 className={articleStyles({isWithToC: hasToC})}>
                 {React.cloneElement(children, {components})}
+                {currentPage.exports?.relatedPages && (
+                  <MobileRelatedPages pages={currentPage.exports.relatedPages} />
+                )}
               </article>
               <aside
                 className={style({
@@ -306,6 +292,35 @@ function RelatedPages({pages}: {pages: Array<{title: string, url: string}>}) {
   );
 }
 
+function MobileRelatedPages({pages}: {pages: Array<{title: string, url: string}>}) {
+  const P = components.p;
+  const Li = components.li;
+  const Ul = components.ul;
+
+  return (
+    <div
+      className={style({
+        display: {
+          default: 'block',
+          lg: 'none'
+        }
+      })}>
+      <H2>Related pages</H2>
+      <Ul>
+        {pages.map((page, i) => (
+          <Li key={i}>
+            <P>
+              <Link href={page.url}>
+                {page.title}
+              </Link>
+            </P>
+          </Li>
+        ))}
+      </Ul>
+    </div>
+  );
+}
+
 function MobileToc({toc, currentPage}) {
   let relatedPages = currentPage.exports?.relatedPages;
   return (

packages/dev/s2-docs/src/S2FAQ.tsx

@@ -0,0 +1,37 @@
+import {Disclosure, DisclosurePanel, DisclosureTitle} from '@react-spectrum/s2';
+import React from 'react';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+export function S2FAQ() {
+  return (
+    <div className={style({display: 'flex', flexDirection: 'column', gap: 16})}>
+      <Disclosure isQuiet>
+        <DisclosureTitle>I'm getting a "Could not statically evaluate macro argument" error.</DisclosureTitle>
+        <DisclosurePanel>
+          This indicates that your <code>style</code> macro has a condition that isn't evaluable at build time. This can happen for a variety of reasons such
+          as if you've referenced non-constant variables within your <code>style</code> macro or if you've called non-macro functions within your <code>style</code> macro.
+          If you are using Typescript, it can be as simple as forgetting to add <code>as const</code> to your own defined reusable macro.
+        </DisclosurePanel>
+      </Disclosure>
+      <Disclosure isQuiet>
+        <DisclosureTitle>I'm seeing a ton of duplicate rules being generated and/or my dev tools are very slow.</DisclosureTitle>
+        <DisclosurePanel>
+          Please make sure you've followed the best practices listed above.
+        </DisclosurePanel>
+      </Disclosure>
+      <Disclosure isQuiet>
+        <DisclosureTitle>I tried to pass my <code>style</code> macro to <code>UNSAFE_className</code> but it doesn't work.</DisclosureTitle>
+        <DisclosurePanel>
+          The <code>style</code> macro is not meant to be used with <code>UNSAFE_className</code>. Overrides to the Spectrum styles is highly discouraged,
+          consider styling an equivalent React Aria Component instead.
+        </DisclosurePanel>
+      </Disclosure>
+      <Disclosure isQuiet>
+        <DisclosureTitle>I'm coming from S1, but where are Flex/Grid/etc?</DisclosureTitle>
+        <DisclosurePanel>
+          These no longer exist. Please style <code>&lt;div&gt;</code>, <code>&lt;span&gt;</code>, and other standard HTML elements with the <code>style</code> macro instead.
+        </DisclosurePanel>
+      </Disclosure>
+    </div>
+  );
+}

packages/dev/s2-docs/src/styleProperties.ts

@@ -47,10 +47,6 @@ const negativeSpacingProperties = new Set([
 const baseSpacingValues = ['0', '2', '4', '8', '12', '16', '20', '24', '28', '32', '36', '40', '44', '48', '56', '64', '80', '96'];
 const negativeBaseSpacingValues = ['-2', '-4', '-8', '-12', '-16', '-20', '-24', '-28', '-32', '-36', '-40', '-44', '-48', '-56', '-64', '-80', '-96'];
 const relativeSpacingValues = ['text-to-control', 'text-to-visual', 'edge-to-text', 'pill'];
-// const spacingValues = [...baseSpacingValues, ...relativeSpacingValues];
-// const marginValues = [...spacingValues, ...negativeBaseSpacingValues, 'auto'];
-// const insetValues = [...baseSpacingValues, ...negativeBaseSpacingValues, 'auto', 'full'];
-// const translateValues = [...baseSpacingValues, ...negativeBaseSpacingValues, 'full'];
 const heightBaseValues = ['auto', 'full', 'min', 'max', 'fit', 'screen'];
 const fontSize = [
   'ui-xs', 'ui-sm', 'ui', 'ui-lg', 'ui-xl', 'ui-2xl', 'ui-3xl',
@@ -442,10 +438,6 @@ const properties: {[key: string]: {[key: string]: string[]}} = {
   conditions: conditionMapping
 };
 
-// TODO: will we need something specific for short hand?
-// TODO: see if there are any others that we will need to add additional shared types for
-// this is less additional types and more that we want to represent the below as a type link
-// special custom types that should be appended to the property but need special handling (render a type popover)
 export function getAdditionalTypes(propertyName: string): string[] {
   let types: string[] = [];
 

packages/dev/s2-docs/src/types.tsx

@@ -856,5 +856,3 @@ export function StyleMacroProperties({properties}: StyleMacroPropertiesProps) {
     </Table>
   );
 }
-
-// TODO: For the Shorthands, have a column for Name, value (what values it accepts), and mapping where mapping is what properties it maps to