Merge remote-tracking branch 'upstream/new-docs' into new-docs/denniss

unovue · Jul 18, 2023 · 9a1c2c4 · 9a1c2c4
2 parents c742395 + a69252b
commit 9a1c2c4
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 30 deletions.
diff --git a/docs/components/demo/GettingStarted/styles.css b/docs/components/demo/GettingStarted/styles.css
@@ -2,10 +2,6 @@
 @import '@radix-ui/colors/mauve.css';
 @import '@radix-ui/colors/violet.css';
 
-button {
-  all: unset;
-}
-
 .PopoverTrigger {
   display: inline-flex;
   align-items: center;

diff --git a/docs/components/tables/KeyboardTable.vue b/docs/components/tables/KeyboardTable.vue
@@ -16,10 +16,10 @@ const props = defineProps<DataAttributesTableProps>();
   <ProseTable>
     <ProseThead>
       <ProseTr>
-        <ProseTh class="w-[45%]">
+        <ProseTh class="">
           <span>Key</span>
         </ProseTh>
-        <ProseTh class="w-[55%]">
+        <ProseTh class="">
           <span>Description</span>
         </ProseTh>
       </ProseTr>

diff --git a/docs/content/components/accordion.md b/docs/content/components/accordion.md
@@ -343,7 +343,7 @@ You can add extra decorative elements, such as chevrons, and rotate it when the
 // index.vue
 <script setup>
 import { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent } from 'radix-vue';
-import { ChevronDownIcon } from '@radix-ui/react-icons';
+import { Icon } from "@iconify/vue";
 import './styles.css';
 </script>
 
@@ -353,7 +353,7 @@ import './styles.css';
       <AccordionHeader>
         <AccordionTrigger class="AccordionTrigger">
           <span>Trigger text</span>
-          <ChevronDownIcon class="AccordionChevron" aria-hidden />
+          <Icon icon="radix-icons:chevron-down" class="AccordionChevron" aria-hidden />
         </AccordionTrigger>
       </AccordionHeader>
       <AccordionContent>…</AccordionContent>
@@ -446,11 +446,11 @@ Adheres to the [Accordion WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/a
 <KeyboardTable :data="[
     {
       keys: ['Space'],
-      description: 'Moves focus to the next',
+      description: 'When focus is on an <code>AccordionTrigger</code> of a collapsed section, expands the section.',
     },
     {
       keys: ['Enter'],
-      description: 'Moves focus to the next',
+      description: 'When focus is on an <code>AccordionTrigger</code> of a collapsed section, expands the section.',
     },
     {
       keys: ['Tab'],
@@ -462,25 +462,25 @@ Adheres to the [Accordion WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/a
     },
     {
       keys: ['ArrowDown'],
-      description: 'Moves focus to the next',
+      description: 'Moves focus to the next <code>AccordionTrigger</code> when <code>orientation</code> is <code>vertical</code>.',
     },
     {
       keys: ['ArrowUp'],
-      description: 'Moves focus to the next',
+      description: 'Moves focus to the previous <code>AccordionTrigger</code> when <code>orientation</code> is <code>vertical</code>.',
     },
     {
       keys: ['ArrowRight'],
-      description: 'Moves focus to the next',
+      description: 'Moves focus to the next <code>AccordionTrigger</code> when <code>orientation</code> is <code>horizontal</code>.',
     },
     {
       keys: ['ArrowLeft'],
-      description: 'Moves focus to the next',
+      description: 'Moves focus to the previous <code>AccordionTrigger</code> when <code>orientation</code> is <code>horizontal</code>.',
     },
     {
       keys: ['Home'],
-      description: 'Moves focus to the next',
+      description: 'When focus is on an <code>AccordionTrigger</code>, moves focus to the start <code>AccordionTrigger</code>.',
     },
     {
       keys: ['End'],
-      description: 'Moves focus to the next',
+      description: 'When focus is on an <code>AccordionTrigger</code>, moves focus to the last <code>AccordionTrigger</code>.',
     }]" />
diff --git a/docs/content/components/alert-dialog.md b/docs/content/components/alert-dialog.md
@@ -269,7 +269,7 @@ description: 'Change the default rendered element for the one passed as a child,
 
 Use the controlled props to programmatically close the Alert Dialog after an async operation has completed.
 
-```vue line=14,15,18,23-29,32
+```vue line=14,15,18,23-30,32
 <script setup>
 import {
   AlertDialogAction,
@@ -346,4 +346,16 @@ Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern](https://www.w
 <KeyboardTable :data="[{
 keys: ['Space'],
 description: 'Opens/closes the dialog.',
+},{
+keys: ['Enter'],
+description: 'Opens/closes the dialog.',
+},{
+keys: ['Tab'],
+description: 'Moves focus to the next focusable element.',
+},{
+keys: ['Shift + Tab'],
+description: 'Moves focus to the previous focusable element.',
+},{
+keys: ['Esc'],
+description: 'Closes the dialog and moves focus to <Code>AlertDialogTrigger</code>.',
 }]" />
diff --git a/docs/content/components/dialog.md b/docs/content/components/dialog.md
@@ -327,7 +327,7 @@ If you want to hide the description, wrap it inside our Visually Hidden utility
 
 Use the controlled props to programmatically close the Dialog after an async operation has completed.
 
-```vue line=10,11,16,21-26,28
+```vue line=10,11,15,20-27,29
 <script setup>
 import {
 	DialogRoot,

diff --git a/docs/content/components/slider.md b/docs/content/components/slider.md
@@ -283,7 +283,7 @@ A draggable thumb. You can render multiple thumbs.
 
 Use the `orientation` prop to create a vertical slider.
 
-```vue line=11
+```vue line=8-12
 // index.vue
 <script setup>
 import { SliderRoot, SliderTrack, SliderRange, SliderThumb } from "radix-vue";
@@ -294,7 +294,8 @@ import "./styles.css";
 	<SliderRoot
     class="SliderRoot"
     :defaultValue="[50]"
-    orientation="vertical">
+    orientation="vertical"
+    >
 		<SliderTrack class="SliderTrack">
 			<SliderRange class="SliderRange" />
 		</SliderTrack>
@@ -353,7 +354,7 @@ import "./styles.css";
 </script>
 
 <template>
-	<SliderRoot :defaultValue="[25,75]">
+	<SliderRoot :defaultValue="[25, 75]">
 		<SliderTrack>
 			<SliderRange />
 		</SliderTrack>
@@ -367,17 +368,15 @@ import "./styles.css";
 
 Use the `step` prop to increase the stepping interval.
 
-```vue line=9
+```vue line=8
 // index.vue
 <script setup>
 import { SliderRoot, SliderTrack, SliderRange, SliderThumb } from "radix-vue";
 import "./styles.css";
 </script>
 
 <template>
-	<SliderRoot
-    :defaultValue="[50]"
-    :step="10">
+	<SliderRoot :defaultValue="[50]" :step="10">
 		<SliderTrack>
 			<SliderRange />
 		</SliderTrack>
@@ -390,7 +389,7 @@ import "./styles.css";
 
 Use `minStepsBetweenThumbs` to avoid thumbs with equal values.
 
-```vue line=9-11
+```vue line=8-12
 // index.vue
 <script setup>
 import { SliderRoot, SliderTrack, SliderRange, SliderThumb } from "radix-vue";
@@ -401,7 +400,8 @@ import "./styles.css";
 	<SliderRoot
     :defaultValue="[25, 75]"
     :step="10"
-    :minStepsBetweenThumbs="1">
+    :minStepsBetweenThumbs="1"
+    >
 		<SliderTrack>
 			<SliderRange />
 		</SliderTrack>
@@ -510,5 +510,3 @@ Because of [a limitation](https://github.com/radix-ui/primitives/blob/83a8c13bf6
 
 We recommend using pointer events instead (eg. `onPointerDown`, `onPointerUp`). Regardless of the above limitation, these events are better suited for cross-platform/device handling as they are fired for all pointer input types (mouse, touch, pen, etc.).
 -->
-
-Ï
diff --git a/docs/content/components/tooltip.md b/docs/content/components/tooltip.md
@@ -424,7 +424,7 @@ Since disabled buttons don't fire events, you need to:
 - Render the `Trigger` as `span`.
 - Ensure the `button` has no `pointerEvents`.
 
-```vue line=12-18
+```vue line=12-16
 <script setup>
 import {
 	TooltipProvider,