Minor docs improvements (#5101)

Author: devongovett

packages/react-aria-components/docs/DatePicker.mdx

@@ -399,7 +399,7 @@ A date picker consists of a label, and group containing a [date field](DateField
 `DatePicker` also supports optional description and error message elements, which can be used to provide more context about the field, and any validation messages. These are linked with the input via the `aria-describedby` attribute.
 
 ```tsx
-import {DatePicker, Label, Group, Popover, Dialog, Calendar, CalendarGrid, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell, Button, Heading, DateInput, DateSegment, Text} from 'react-aria-components';
+import {DatePicker, Label, Group, Popover, Dialog, Calendar, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell, Button, Heading, DateInput, DateSegment, Text} from 'react-aria-components';
 
 <DatePicker>
   <Label />

packages/react-aria-components/docs/DateRangePicker.mdx

@@ -435,7 +435,7 @@ A date range picker consists of a label, and group containing two [date fields](
 `DateRangePicker` also supports optional description and error message elements, which can be used to provide more context about the field, and any validation messages. These are linked with the input via the `aria-describedby` attribute.
 
 ```tsx
-import {DateRangePicker, Label, Group, Popover, Dialog, RangeCalendar, CalendarGrid, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell, Button, Heading, DateInput, DateSegment, Text} from 'react-aria-components';
+import {DateRangePicker, Label, Group, Popover, Dialog, RangeCalendar, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell, Button, Heading, DateInput, DateSegment, Text} from 'react-aria-components';
 
 <DateRangePicker>
   <Label />

packages/react-aria-components/docs/Group.mdx

@@ -44,7 +44,7 @@ import {TextField, Label, Group, Input, Button} from 'react-aria-components';
   <Label>Email</Label>
   <Group>
     <Input />
-    <Button aria-label="Add email">➕</Button>
+    <Button aria-label="Add email">+</Button>
   </Group>
 </TextField>
 ```
@@ -98,6 +98,7 @@ import {TextField, Label, Group, Input, Button} from 'react-aria-components';
     border-width: 0 0 0 1px;
     border-radius: 0 6px 6px 0;
     align-self: stretch;
+    font-size: 1.5rem;
   }
 }
 

packages/react-aria-components/docs/Tabs.mdx

@@ -681,8 +681,8 @@ function TabNavigation() {
   let onNext = nextKey != null ? () => state.setSelectedKey(nextKey) : null;
   return (
     <div className="button-group">
-      <Button aria-label="Previous tab" onPress={onPrev}>⬅</Button>
-      <Button aria-label="Next tab" onPress={onNext}>➡</Button>
+      <Button aria-label="Previous tab" onPress={onPrev}>←</Button>
+      <Button aria-label="Next tab" onPress={onNext}>→</Button>
     </div>
   );
 }
@@ -704,6 +704,14 @@ function TabNavigation() {
 </Tabs>
 ```
 
+```css hidden
+.button-group .react-aria-Button[aria-label] {
+  font-size: 1.2rem;
+  line-height: 1rem;
+  font-weight: bold;
+}
+```
+
 ### Hooks
 
 If you need to customize things even further, such as accessing internal state or customizing DOM structure, you can drop down to the lower level Hook-based API. See [useTabList](useTabList.html) for more details.

packages/react-aria-components/docs/TimeField.mdx

@@ -665,7 +665,7 @@ function TimeZoneName() {
   return null;
 }
 
-<TimeField defaultValue={parseAbsoluteToLocal('2021-04-07T18:45:22Z')}>
+<TimeField value={parseAbsoluteToLocal('2021-04-07T18:45:22Z')}>
   <Label>Time</Label>
   <DateInput>
     {segment => <DateSegment segment={segment} />}

packages/react-aria-components/docs/react-aria-components.mdx

@@ -354,6 +354,13 @@ The documentation for each component includes many examples styled using vanilla
   <ToggleButton />
 </ExampleCard>
 
+<ExampleCard
+  url="FileTrigger.html"
+  title="FileTrigger"
+  description="A file trigger allows a user to access the file system with a Button.">
+  <FileTrigger />
+</ExampleCard>
+
 </section>
 
 ### Pickers
@@ -552,13 +559,6 @@ The documentation for each component includes many examples styled using vanilla
   <Slider />
 </ExampleCard>
 
-<ExampleCard
-  url="FileTrigger.html"
-  title="FileTrigger"
-  description="A file trigger allows a user to access the file system with a Button.">
-  <FileTrigger />
-</ExampleCard>
-
 </section>
 
 ### Navigation