Release: Agile Halo (#368)

* Setup base PR * Initial documentation updates (#369) Catching up with merged features/fixes * Update release note for React 18 (#371) * Update release note for React 18 * Update data/primitives/overview/releases.mdx Co-authored-by: Benoît Grélard <benoit.grelard@gmail.com> Co-authored-by: Benoît Grélard <benoit.grelard@gmail.com> * Primitives 1344 documentation (#376) * Add new version pages * Remove references to `forwards` in new versions * Document NavigationMenu close on click 1347 (#380) * Document Select fix (#381) * Update `NavigationMenu` docs (#385) * Document Slot fix (#386) * Document Slot fix * PR feedback * Document latest menu/select updates (#387) * Document latest menu/select updates * Update 0.1.2.mdx * Update 0.1.2.mdx * Update 0.1.2.mdx * Add context menu note to release (#388) * Fix release note (#389) * Document ScrollArea animatable Thumb change (#390) * Remove enter key as per #393 * Document DismissableLayer fixes (#394) * Catchup on demo updates (#396) * Catchup on demo updates * Update data/primitives/components/select/0.1.2.mdx Co-authored-by: Andy Hook <hello@andyhook.dev> * PR feedback Co-authored-by: Andy Hook <hello@andyhook.dev> * Document tabs animation (#397) * Update file version/s * Update doc * Document submenu api change, `allowPinchZoom` prop move (#395) * Document submenu changes * Document `allowPinchZoom` prop change * Feedback * Document latest select fix (#398) * Document latest select fix * Update data/primitives/overview/releases.mdx Co-authored-by: Andy Hook <hello@andyhook.dev> Co-authored-by: Andy Hook <hello@andyhook.dev> * Document latest RadioGroup change (#399) * Document latest DismissableLayer change radix-ui/primitives#1423 * Sync files with recent changes (#412) * Document new Portal parts (#413) * Document new Portal parts * Document changes * Update demos * Update DeveloperExperienceSection.tsx * Document latest ContextMenu changes (#414) * Document latest Select changes (#415) * Document latest Select changes radix-ui/primitives#1459 * Add missing prop * Document latest Portal changes (#416) radix-ui/primitives#1463 * Parity in release branch from #417 (#419) #417 * Document `data-*` attributes (#407) * Setup base PR * Initial documentation updates (#369) Catching up with merged features/fixes * Document `data-*` attributes * Document `data-*` * Fix spaces and render * Fix data * Document `data-*` attributes * Document `data-*` attributes * Add missing data attributes * Fix minor tweaks * Fix minor tweaks * Fix minor tweaks Co-authored-by: Benoît Grélard <benoit.grelard@gmail.com> * Parity with #421 (#422) * Document toast animation improvements (#423) * Update release note * Label required, update package version * Document CSS variables (#426) * Document CSS variables * Change `Tooltip` CSS variable description * remove from slider * Fix `Accordion` CSS variable * Remove `ScrollArea` CSS variables * Update `transform-origin` description * Add `Toast` CSS variables better description * Fix `PropsTable` width * Fix minor tweaks * Fix minor tweaks * Apply copy suggestions * Fix minor tweaks * Fix minor tweaks * Fix minor tweaks * Update data/primitives/components/tooltip/0.1.8.mdx Co-authored-by: Andy Hook <hello@andyhook.dev> Co-authored-by: Benoît Grélard <benoit.grelard@gmail.com> Co-authored-by: Andy Hook <hello@andyhook.dev> * Document tooltip hover changes (#431) * Parity with #430 (#432) * Document `allowPinchZoom` changes (#433) * Document `allowPinchZoom` changes * Feedback * Release docs adjustments * Updating versions in log to v1 (for all hands purpose) * Copy change * Fix typo in `onSelect` desc and release note * Document popper changes (#437) * Update changelog * Document prop changes * Update demos with props * Update live demos * Add missing portals * Update deps * Revert "Update live demos" This reverts commit 981d20a. * Update deps * Update codesandbox css * Remove portal in marketing hero demos * Document new boundary prop * Missing changelog + add portal back on subs * PR feedback * PR feedback * Update stats (#438) * Update release to use 1.0.0 filenames (#439) * Shift breaking to first in change log * Move files to 1.0.0 * Upgrade DS version (#440) * Release refinement (#441) * Revert announce filename and deprecate * Update data-highlighted description * Release date consistency * Revert "Update data-highlighted description" This reverts commit 30b3ae1. * Tweak realease note order * Update release tags to major * Upgrade DS and primitives (#442) Co-authored-by: Andy Hook <hello@andyhook.dev> Co-authored-by: Bu Kinoshita <bukinoshita@gmail.com>
radix-ui · Jul 20, 2022 · 80c2962 · 80c2962 · vercel · Jul 20, 2022
1 parent 5fbe3fb
commit 80c2962
Show file tree

Hide file tree

Showing 81 changed files with 12,103 additions and 1,546 deletions.
diff --git a/components/CssVariablesTable.tsx b/components/CssVariablesTable.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { Box, Text, Kbd, Code } from '@modulz/design-system';
+import { RegionTable } from './RegionTable';
+
+type KeyboardDef = {
+  cssVariable: string;
+  description: React.ReactNode;
+};
+
+export function CssVariablesTable({
+  data,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+}: {
+  data: KeyboardDef[];
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+}) {
+  const hasAriaLabel = !!(ariaLabel || ariaLabelledBy);
+  return (
+    <RegionTable
+      css={{ width: '100%', textAlign: 'left', borderCollapse: 'collapse' }}
+      aria-label={hasAriaLabel ? ariaLabel : 'Keyboard Interactions'}
+      aria-labelledby={ariaLabelledBy}
+    >
+      <thead>
+        <tr>
+          <Box as="th" css={{ borderBottom: '1px solid $gray6', py: '$3', pr: '$4', width: '45%' }}>
+            <Text size="2" css={{ color: '$gray11' }}>
+              CSS Variable
+            </Text>
+          </Box>
+          <Box as="th" css={{ borderBottom: '1px solid $gray6', py: '$3', pr: '$4', width: '55%' }}>
+            <Text size="2" css={{ color: '$gray11' }}>
+              Description
+            </Text>
+          </Box>
+        </tr>
+      </thead>
+      <tbody>
+        {data.map(({ cssVariable, description }, i) => (
+          <tr key={i}>
+            <Box
+              as="td"
+              css={{
+                borderBottom: '1px solid $gray6',
+                py: '$3',
+                pr: '$4',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              <Code
+                css={{
+                  whiteSpace: 'normal',
+                }}
+              >
+                {cssVariable}
+              </Code>
+            </Box>
+
+            <Box as="td" css={{ borderBottom: '1px solid $gray6', py: '$3' }}>
+              <Text size="3" css={{ lineHeight: '25px' }}>
+                {description}
+              </Text>
+            </Box>
+          </tr>
+        ))}
+      </tbody>
+    </RegionTable>
+  );
+}
diff --git a/components/DataAttributesTable.tsx b/components/DataAttributesTable.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { Box, Text, Kbd, Code } from '@modulz/design-system';
+import { RegionTable } from './RegionTable';
+
+type KeyboardDef = {
+  attribute: string;
+  values: string;
+};
+
+export function DataAttributesTable({
+  data,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+}: {
+  data: KeyboardDef[];
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+}) {
+  const hasAriaLabel = !!(ariaLabel || ariaLabelledBy);
+  return (
+    <RegionTable
+      css={{ width: '100%', textAlign: 'left', borderCollapse: 'collapse' }}
+      aria-label={hasAriaLabel ? ariaLabel : 'Keyboard Interactions'}
+      aria-labelledby={ariaLabelledBy}
+    >
+      <thead>
+        <tr>
+          <Box as="th" css={{ borderBottom: '1px solid $gray6', py: '$3', pr: '$4', width: '45%' }}>
+            <Text size="2" css={{ color: '$gray11' }}>
+              Data Attribute
+            </Text>
+          </Box>
+          <Box as="th" css={{ borderBottom: '1px solid $gray6', py: '$3', pr: '$4', width: '55%' }}>
+            <Text size="2" css={{ color: '$gray11' }}>
+              Values
+            </Text>
+          </Box>
+        </tr>
+      </thead>
+      <tbody>
+        {data.map(({ attribute, values }, i) => (
+          <tr key={i}>
+            <Box
+              as="td"
+              css={{
+                borderBottom: '1px solid $gray6',
+                py: '$3',
+                pr: '$4',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              <Code>{attribute}</Code>
+            </Box>
+
+            <Box as="td" css={{ borderBottom: '1px solid $gray6', py: '$3' }}>
+              {Array.isArray(values) ? (
+                <Code css={{ bc: '$gray4', color: '$gray11' }}>
+                  {values.map(
+                    (value, index) => `"${value}" ${values.length !== index + 1 ? ' | ' : ''}`
+                  )}
+                </Code>
+              ) : (
+                <Text size="3" css={{ lineHeight: '25px' }}>
+                  {values}
+                </Text>
+              )}
+            </Box>
+          </tr>
+        ))}
+      </tbody>
+    </RegionTable>
+  );
+}
diff --git a/components/DocCodeBlock.tsx b/components/DocCodeBlock.tsx
@@ -158,8 +158,32 @@ export function DocCodeBlock({
 }
 
 const makeCodeSandboxParams = (name, code) => {
-  const css =
-    '*{box-sizing:border-box;margin:0;padding:0;}body{font-family:system-ui;width:100vw;height:100vh;background-image:linear-gradient(330deg, hsl(272,53%,50%) 0%, hsl(226,68%,56%) 100%);display:flex;align-items:flex-start;justify-content:center;}body>div{padding-top:120px}svg{display:block;}';
+  const css = `
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: system-ui;
+  width: 100vw;
+  height: 100vh;
+  background-image: linear-gradient(
+    330deg,
+    hsl(272, 53%, 50%) 0%,
+    hsl(226, 68%, 56%) 100%
+  );
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  margin-top: 120px;
+}
+
+svg {
+  display: block;
+}
+`;
 
   const parameters = getParameters({
     files: {

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -94,7 +94,7 @@ export const Header = () => {
                   </Text>
                 </Link>
               </PopoverTrigger>
-              <PopoverContent hideArrow sideOffset={15} alignOffset={-15}>
+              <PopoverContent hideArrow sideOffset={15} align="end" alignOffset={-15}>
                 <Box css={{ p: '$1' }}>
                   {isColors && (
                     <NextLink href="/" passHref>

diff --git a/components/MDXComponents.tsx b/components/MDXComponents.tsx
@@ -14,6 +14,8 @@ import { HeroQuote } from './HeroQuote';
 import { Frontmatter } from 'types/frontmatter';
 import { ColorScale, ColorScaleGroup } from './Scale';
 import * as Demos from './demos';
+import { CssVariablesTable } from './CssVariablesTable';
+import { DataAttributesTable } from './DataAttributesTable';
 
 export const components = {
   ColorScale,
@@ -184,8 +186,14 @@ export const components = {
   Highlights,
   Kbd: DS.Kbd,
   Code: DS.Code,
+  CssVariablesTable: (props) => (
+    <DS.Box css={{ mt: '$2' }}>
+      <CssVariablesTable {...props} />
+    </DS.Box>
+  ),
+  DataAttributesTable: (props) => <DataAttributesTable {...props} />,
   PropsTable: (props) => (
-    <DS.Box css={{ mb: '$5' }}>
+    <DS.Box css={{ mb: '$2' }}>
       <PropsTable {...props} />
     </DS.Box>
   ),

diff --git a/components/Primitives.tsx b/components/Primitives.tsx
diff --git a/components/PropsTable.tsx b/components/PropsTable.tsx
@@ -39,17 +39,23 @@ export function PropsTable({
     >
       <thead>
         <tr>
-          <Box as="th" css={{ borderBottom: '1px solid $gray6', py: '$3', pr: '$4' }}>
+          <Box as="th" css={{ borderBottom: '1px solid $gray6', py: '$3', pr: '$4', width: '45%' }}>
             <Text size="2" css={{ color: '$gray11' }}>
               Prop
             </Text>
           </Box>
-          <Box as="th" css={{ borderBottom: '1px solid $gray6', py: '$3', pr: '$4' }}>
+          <Box
+            as="th"
+            css={{ borderBottom: '1px solid $gray6', py: '$3', pr: '$4', width: '27.5%' }}
+          >
             <Text size="2" css={{ color: '$gray11' }}>
               Type
             </Text>
           </Box>
-          <Box as="th" css={{ borderBottom: '1px solid $gray6', py: '$3', pr: '$4' }}>
+          <Box
+            as="th"
+            css={{ borderBottom: '1px solid $gray6', py: '$3', pr: '$4', width: '27.5%' }}
+          >
             <Text size="2" css={{ color: '$gray11' }}>
               Default
             </Text>

diff --git a/components/blog/Tooltip.tsx b/components/blog/Tooltip.tsx
@@ -38,6 +38,7 @@ const StyledContent = styled(Tooltip.Content, {
   backgroundColor: theme.colors.violet9.value,
   boxShadow:
     '0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)',
+  userSelect: 'none',
 
   '&.with-animation': {
     transformOrigin: 'var(--radix-tooltip-content-transform-origin)',
@@ -93,15 +94,19 @@ export const TooltipDemo = (props) => {
         </Flex>
       </Box>
 
-      <Tooltip.Root>
-        <StyledButton>
-          <PlusIcon />
-        </StyledButton>
-        <StyledContent sideOffset={5} className={withAnimation ? 'with-animation' : ''}>
-          Add to library.
-          <StyledArrow />
-        </StyledContent>
-      </Tooltip.Root>
+      <Tooltip.Provider>
+        <Tooltip.Root>
+          <StyledButton>
+            <PlusIcon />
+          </StyledButton>
+          <Tooltip.Portal>
+            <StyledContent sideOffset={5} className={withAnimation ? 'with-animation' : ''}>
+              Add to library.
+              <StyledArrow />
+            </StyledContent>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+      </Tooltip.Provider>
     </Box>
   );
 };
diff --git a/components/demos/Accordion.jsx b/components/demos/Accordion.jsx
@@ -74,10 +74,10 @@ const StyledContent = styled(AccordionPrimitive.Content, {
   backgroundColor: mauve.mauve2,
 
   '&[data-state="open"]': {
-    animation: `${slideDown} 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards`,
+    animation: `${slideDown} 300ms cubic-bezier(0.87, 0, 0.13, 1)`,
   },
   '&[data-state="closed"]': {
-    animation: `${slideUp} 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards`,
+    animation: `${slideUp} 300ms cubic-bezier(0.87, 0, 0.13, 1)`,
   },
 });
 

diff --git a/components/demos/AlertDialog.jsx b/components/demos/AlertDialog.jsx
@@ -18,7 +18,7 @@ const StyledOverlay = styled(AlertDialogPrimitive.Overlay, {
   position: 'fixed',
   inset: 0,
   '@media (prefers-reduced-motion: no-preference)': {
-    animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards`,
+    animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
   },
 });
 
@@ -35,7 +35,7 @@ const StyledContent = styled(AlertDialogPrimitive.Content, {
   maxHeight: '85vh',
   padding: 25,
   '@media (prefers-reduced-motion: no-preference)': {
-    animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards`,
+    animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
   },
   '&:focus': { outline: 'none' },
 });