Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,9 @@ export function ColorEditorExample() {
padding: {
default: 12,
lg: 24
}
},
maxWidth: '--text-width',
marginX: 'auto'
})}>
<ColorPicker defaultValue="#5100FF">
{({color}) => (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,6 @@ export function SubmenuAnimation(): JSX.Element {
className={style({
backgroundColor: 'layer-1',
borderRadius: 'xl',
marginY: 32,
padding: {
default: 12,
lg: 24
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ export default Layout;

import docs from 'docs:@react-spectrum/s2';
import React from 'react';
import {Byline} from '../../../src/BlogList';
import {ColorEditorExample} from './ColorEditorExample';

export const hideNav = true;
Expand All @@ -29,7 +28,6 @@ export const section = 'Blog';
export const isSubpage = true;

# Accessible Color Descriptions for Improved Color Pickers
<Byline author={author} authorLink={authorLink} date={date} />

Recently, we released a suite of color picker components in React Aria and React Spectrum. These components help users choose a color in various ways, including a 2D [ColorArea](../ColorArea.html), channel-based [ColorSlider](../ColorSlider.html), circular [ColorWheel](../ColorWheel.html), preset [ColorSwatchPicker](../ColorSwatchPicker.html), and a hex value [ColorField](../ColorField.html). You can compose these individual pieces together to create a full [ColorPicker](../ColorPicker.html) with whatever custom layout or configuration you need.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ export default Layout;

import docs from 'docs:@react-spectrum/s2';
import React from 'react';
import {Byline} from '../../../src/BlogList';

export const hideNav = true;
export const tags = ['react aria', 'react spectrum', 'react', 'spectrum', 'interactions', 'button', 'touch'];
Expand All @@ -28,7 +27,6 @@ export const section = 'Blog';
export const isSubpage = true;

# Building a Button Part 1: Press Events
<Byline author={author} authorLink={authorLink} date={date} />

UI development is really hard. While building components has become much easier with modern UI frameworks like React, handling interactions across devices and supporting proper accessibility and internationalization is still extraordinarily difficult. Building UIs has a very [long tail](https://en.wikipedia.org/wiki/Long_tail): it's fairly easy to get the basics for a given component working, but there are many details to consider, and these add up to a majority of the work.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ export default Layout;

import docs from 'docs:@react-spectrum/s2';
import React from 'react';
import {Byline} from '../../../src/BlogList';

export const hideNav = true;
export const tags = ['react aria', 'react spectrum', 'react', 'interactions', 'button', 'touch', 'hover', 'web development', 'javascript', 'css'];
Expand All @@ -27,7 +26,6 @@ export const section = 'Blog';
export const isSubpage = true;

# Building a Button Part 2: Hover Interactions
<Byline author={author} authorLink={authorLink} date={date} />

This is the second post in our three part series on building a button component. In the [first post](building-a-button-part-1.html), we covered how React Spectrum and React Aria implement adaptive press events across mouse, touch, keyboard, and screen readers. Today, we'll cover hover interactions.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ export default Layout;

import docs from 'docs:@react-spectrum/s2';
import React from 'react';
import {Byline} from '../../../src/BlogList';

export const hideNav = true;
export const tags = ['react aria', 'react spectrum', 'react', 'interactions', 'button', 'keyboard', 'focus', 'web development', 'javascript', 'css'];
Expand All @@ -27,7 +26,6 @@ export const section = 'Blog';
export const isSubpage = true;

# Building a Button Part 3: Keyboard Focus Behavior
<Byline author={author} authorLink={authorLink} date={date} />

This is the last post in our three part series on building a button component. In the [first post](building-a-button-part-1.html), we covered how React Spectrum and React Aria implement adaptive press events across mouse, touch, keyboard, and screen readers. In the [second post](building-a-button-part-2.html), we covered hover interactions. Today, we'll cover keyboard focus behavior.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ export default Layout;

import docs from 'docs:@react-spectrum/s2';
import React from 'react';
import {Byline} from '../../../src/BlogList';

export const hideNav = true;
export const tags = ['combobox', 'accessibility', 'mobile', 'react spectrum', 'react', 'spectrum', 'interactions', 'touch'];
Expand All @@ -31,7 +30,6 @@ export const section = 'Blog';
export const isSubpage = true;

# Creating an accessible autocomplete experience
<Byline author={author} authorLink={authorLink} date={date} />

After many months of research, development, and extensive testing across browsers, devices, and assistive technology, we're excited to announce that the React Spectrum [ComboBox](../../s2/ComboBox.html) component and React Aria [useComboBox](https://react-spectrum.adobe.com/react-aria/useComboBox.html) hook are now available! We've focused on the following areas to help you build quality autocomplete experiences.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ export default Layout;

import docs from 'docs:@react-spectrum/s2';
import React from 'react';
import {Byline} from '../../../src/BlogList';

export const hideNav = true;
export const tags = ['react aria', 'react spectrum', 'react', 'spectrum', 'interactions', 'submenu', 'pointer'];
Expand All @@ -29,7 +28,6 @@ export const section = 'Blog';
export const isSubpage = true;

# Creating a pointer-friendly submenu experience
<Byline author={author} authorLink={authorLink} date={date} />

We are excited to announce support of submenus in the latest release of [React Spectrum](../../s2/Menu.html#submenus) and [React Aria](../Menu.html#submenus)! In the process of adding this feature, we found ourselves solving some unique challenges while working to make submenus user-friendly and accessible across an array of devices and input types. In doing so, we wanted to share our thought process in solving one of the challenges we faced along the way.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ export default Layout;

import docs from 'docs:@react-spectrum/s2';
import React from 'react';
import {Byline} from '../../../src/BlogList';
import {DateField, RangeCalendar} from '@react-spectrum/s2';
import {today, getLocalTimeZone} from '@internationalized/date';
import RangeCalendarExample from './RangeCalendarExample';
Expand All @@ -34,7 +33,6 @@ export const section = 'Blog';
export const isSubpage = true;

# Date and Time Pickers for All
<Byline author={author} authorLink={authorLink} date={date} />

We are very excited to announce the release of the [React Aria](https://react-spectrum.adobe.com/react-aria/useNumberField.html) and [React Spectrum](../../s2/DatePicker.html) date and time picker components! This includes a full suite of fully featured components and hooks including calendars, date and time fields, and range pickers, all with a focus on internationalization and accessibility. It also includes [@internationalized/date](../../internationalized/date/index.html), a brand new framework-agnostic library for locale-aware date and time manipulation.

Expand Down
2 changes: 0 additions & 2 deletions packages/dev/s2-docs/pages/react-aria/blog/drag-and-drop.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ export default Layout;

import docs from 'docs:@react-spectrum/s2';
import React from 'react';
import {Byline} from '../../../src/BlogList';

export const hideNav = true;
export const tags = ['drag and drop', 'dnd', 'components', 'accessibility', 'keyboard', 'mobile', 'react spectrum', 'react', 'spectrum', 'interactions', 'touch'];
Expand All @@ -34,7 +33,6 @@ export const section = 'Blog';
export const isSubpage = true;

# Taming the dragon: Accessible drag and drop
<Byline author={author} authorLink={authorLink} date={date} />

We are excited to announce the release of drag and drop support in [React Aria](../dnd.html) and [React Spectrum](../../s2/dnd.html)! This includes a suite of hooks for implementing drag and drop interactions, with support for both mouse and touch, as well as full parity for keyboard and screen reader input. We've designed these hooks with the following features in mind:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ export default Layout;

import docs from 'docs:@react-spectrum/s2';
import React from 'react';
import {Byline} from '../../../src/BlogList';
import {NumberField} from '@react-spectrum/s2';

export const hideNav = true;
Expand All @@ -32,7 +31,6 @@ export const section = 'Blog';
export const isSubpage = true;

# How we internationalized our number field
<Byline author={author} authorLink={authorLink} date={date} />

Number fields are commonly used form components, but are frequently not a great user experience. They often lack support for advanced formatting, such as currency and unit values, and do not provide a localized experience for users around the world. In this post, we'll discuss how we approached building our number field component with support for formatting and internationalization in mind.

Expand Down
2 changes: 0 additions & 2 deletions packages/dev/s2-docs/pages/react-aria/blog/rtl-date-time.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ export default Layout;

import docs from 'docs:@react-spectrum/s2';
import React from 'react';
import {Byline} from '../../../src/BlogList';

export const hideNav = true;
export const tags = ['date picker', 'date', 'time', 'calendar', 'components', 'accessibility', 'react spectrum', 'react', 'spectrum'];
Expand All @@ -30,7 +29,6 @@ export const section = 'Blog';
export const isSubpage = true;

# Improving Internationalization Support in Our Date and Time Components
<Byline author={author} authorLink={authorLink} date={date} />

Internationalization is a core feature of our Date and Time components. We support 13 different calendar systems as well as locale-specific formatting, number systems, and 12 and 24 hour time. However, we identified an issue in our support for several right-to-left (RTL) languages where in some, the format of the date and time fields was incorrect. While investigating this bug, we faced several challenges in ensuring accurate date and time representation in RTL languages and implemented various strategies that we'd like to share.

Expand Down
2 changes: 0 additions & 2 deletions packages/dev/s2-docs/pages/react-aria/releases/v1-0-0.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
export default Layout;

import docs from 'docs:@react-spectrum/s2';
import {Time} from '../../../src/ReleasesList';

export const hideNav = true;
export const section = 'Releases';
Expand All @@ -22,7 +21,6 @@ export const description = 'In this release, we\'re promoting React Aria Compone
export const isSubpage = true;

# v1.0.0
<Time date={date} />

Welcome to the last release of the year! After a year of work, we are happy to announce the GA release of React Aria Components 🎉 This component library, built on top of our React Aria hooks, provides a simpler way to craft world-class accessible components with custom styles. See our new React Aria [landing page](https://react-spectrum.adobe.com/react-aria/index.html) for all of the details, including interactive examples. To help get you started even faster, we now also have a downloadable Storybook [starter kit](../getting-started.html#starter-kit) including an example CSS theme.

Expand Down
2 changes: 0 additions & 2 deletions packages/dev/s2-docs/pages/react-aria/releases/v1-1-0.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
export default Layout;

import docs from 'docs:@react-spectrum/s2';
import {Time} from '../../../src/ReleasesList';

export const hideNav = true;
export const section = 'Releases';
Expand All @@ -22,7 +21,6 @@ export const description = 'Welcome to the first release of the new year! We hav
export const isSubpage = true;

# v1.1.0
<Time date={date} />

Welcome to the first release of the new year! We have had a great response to our GA release of React Aria Components. If you haven't tried it out, visit [our docs](https://react-spectrum.adobe.com/react-aria/index.html) to explore the examples. To help get you started, we have also created a few starter kits. These downloadable [starter kits](../getting-started.html#starter-kits) contain beautifully styled implementations of every available component and includes a working storybook. Available in vanilla and Tailwind CSS!

Expand Down
2 changes: 0 additions & 2 deletions packages/dev/s2-docs/pages/react-aria/releases/v1-10-0.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
export default Layout;

import docs from 'docs:@react-spectrum/s2';
import {Time} from '../../../src/ReleasesList';

export const hideNav = true;
export const section = 'Releases';
Expand All @@ -22,7 +21,6 @@ export const description = 'Drop everything! Drag and drop support in React Aria
export const isSubpage = true;

# v1.10.0
<Time date={date} />

Drop everything! Drag and drop support in React Aria Tree has been released! 🫳🎤 This supports moving items within a tree or between collection components, with full keyboard and screen reader accessibility. It's interoperable with our existing drag and drop support in components like Table and GridList, and with third party apps via native HTML APIs. Check out our [previous blog post](../blog/drag-and-drop.html) on drag and drop to learn about the interactions, and our new [Tree drag and drop documentation](../Tree.html#drag-and-drop).

Expand Down
2 changes: 0 additions & 2 deletions packages/dev/s2-docs/pages/react-aria/releases/v1-11-0.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
export default Layout;

import docs from 'docs:@react-spectrum/s2';
import {Time} from '../../../src/ReleasesList';

export const hideNav = true;
export const section = 'Releases';
Expand All @@ -22,7 +21,6 @@ export const description = 'Happy summer! This release adds support for async lo
export const isSubpage = true;

# v1.11.0
<Time date={date} />

Happy summer! This release adds support for async loading and infinite scrolling, improves form integration and drag and drop interactions, and adds support for additional DOM events and attributes.

Expand Down
2 changes: 0 additions & 2 deletions packages/dev/s2-docs/pages/react-aria/releases/v1-12-0.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
export default Layout;

import docs from 'docs:@react-spectrum/s2';
import {Time} from '../../../src/ReleasesList';

export const hideNav = true;
export const section = 'Releases';
Expand All @@ -22,7 +21,6 @@ export const description = 'Summer might be winding down but we\'re definitely n
export const isSubpage = true;

# v1.12.0
<Time date={date} />

Summer might be winding down but we're definitely not! Back with another release, we have added support for origin-aware overlay animations in [Popover](../Popover.html) and [Tooltip](../Tooltip.html), which enable scale transitions to appear as if they are emerging from the trigger. We have also advanced Autocomplete to RC, and added support for filtering GridList, Table, and TagGroup (virtual focus support is still to come). Section support in [GridList](../GridList.html#sections) has also been added as an alpha, laying the groundwork for similar support in Tree and Table.

Expand Down
2 changes: 0 additions & 2 deletions packages/dev/s2-docs/pages/react-aria/releases/v1-13-0.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
export default Layout;

import docs from 'docs:@react-spectrum/s2';
import {Time} from '../../../src/ReleasesList';
import {ReleasedVersions} from '../../../src/ReleasesList';

export const hideNav = true;
Expand All @@ -23,7 +22,6 @@ export const description = 'Happy fall! This release brings some long-awaited fe
export const isSubpage = true;

# v1.13.0
<Time date={date} />

Happy fall! This release brings some long-awaited features, including multi-selection in [React Aria Select](../Select.html#multiple-selection) and enhanced animation support across our components. For example, [Disclosure](../Disclosure.html) now provides CSS variables to easily animate expanding and collapsing. We’ve also added a new `<SelectionIndicator>` component that can be used within components that support single selection such as [Tabs](../Tabs.html) and [ToggleButtonGroup](../ToggleButtonGroup.html#animation) to animate selection changes. In addition, we have significantly improved the behavior of scrolling modals on iOS 26. Lastly, `onAction` can now be used on a [`ComboBoxItem`](../ComboBox.html#item-actions), enabling you to add a “create” option.

Expand Down
2 changes: 0 additions & 2 deletions packages/dev/s2-docs/pages/react-aria/releases/v1-2-0.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
export default Layout;

import docs from 'docs:@react-spectrum/s2';
import {Time} from '../../../src/ReleasesList';

export const hideNav = true;
export const section = 'Releases';
Expand All @@ -22,7 +21,6 @@ export const description = 'We have a huge release! Submenu, unavailable menu it
export const isSubpage = true;

# v1.2.0
<Time date={date} />

We have a huge release today! Its a GA bonanza 🎊 – [Submenu](../Menu.html#submenus), [unavailable menu items](../Menu.html#unavailable-items), [DropZone](../DropZone.html) and [FileTrigger](../FileTrigger.html) components are now in GA. Check our [blog post](/blog/creating-a-pointer-friendly-submenu-experience.html) on the intricacies of the submenu interactions and how we handled them.

Expand Down
2 changes: 0 additions & 2 deletions packages/dev/s2-docs/pages/react-aria/releases/v1-3-0.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
export default Layout;

import docs from 'docs:@react-spectrum/s2';
import {Time} from '../../../src/ReleasesList';

export const hideNav = true;
export const section = 'Releases';
Expand All @@ -22,7 +21,6 @@ export const description = 'For this summer release, we have been busy working o
export const isSubpage = true;

# v1.3.0
<Time date={date} />

For this summer release, we have been busy working on improving virtualization in many of our Spectrum components including TableView, ListView, and ListBox. We have significantly reduced the complexity of our implementation, resulting in smaller bundle size, better performance, and improved stability. In our testing, this resulted in 14x faster per-frame render times on large tables due to better reuse of DOM nodes as you scroll. We are also working on bringing virtualization support to React Aria Components, which is available as an unstable API in this version.

Expand Down
2 changes: 0 additions & 2 deletions packages/dev/s2-docs/pages/react-aria/releases/v1-4-0.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
export default Layout;

import docs from 'docs:@react-spectrum/s2';
import {Time} from '../../../src/ReleasesList';

export const hideNav = true;
export const section = 'Releases';
Expand All @@ -22,7 +21,6 @@ export const description = 'Happy fall! 🍁 We\'re excited to announce that our
export const isSubpage = true;

# v1.4.0
<Time date={date} />

Happy fall! 🍁 We're excited to announce that our color picker components are now generally available! This includes [ColorPicker](../ColorPicker.html), [ColorArea](../ColorArea.html), [ColorField](../ColorField.html), [ColorSlider](../ColorSlider.html), [ColorSwatch](../ColorSwatch.html), [ColorSwatchPicker](../ColorSwatchPicker.html), and [ColorWheel](../ColorWheel.html). These enable you to build fully customizable color pickers, including accessible color descriptions for screen reader support.

Expand Down
2 changes: 0 additions & 2 deletions packages/dev/s2-docs/pages/react-aria/releases/v1-5-0.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
export default Layout;

import docs from 'docs:@react-spectrum/s2';
import {Time} from '../../../src/ReleasesList';

export const hideNav = true;
export const section = 'Releases';
Expand All @@ -22,7 +21,6 @@ export const description = 'We\'re excited to announce that our Disclosure compo
export const isSubpage = true;

# v1.5.0
<Time date={date} />

We're excited to announce that our Disclosure components are now generally available! This includes [Disclosure](../Disclosure.html) and [DisclosureGroup](../DisclosureGroup.html) in React Aria. These components now also use the `hidden="until-found"` API currently supported in Chrome to enable searching collapsed content with ctrl + F.

Expand Down
2 changes: 0 additions & 2 deletions packages/dev/s2-docs/pages/react-aria/releases/v1-6-0.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
export default Layout;

import docs from 'docs:@react-spectrum/s2';
import {Time} from '../../../src/ReleasesList';

export const hideNav = true;
export const section = 'Releases';
Expand All @@ -22,7 +21,6 @@ export const description = 'Happy New Year! Our first release of 2025 includes a
export const isSubpage = true;

# v1.6.0
<Time date={date} />

Happy New Year! Our first release of 2025 includes a new [firstDayOfWeek](../Calendar.html#custom-first-day-of-week) prop for our calendar and date picker components, support for [CSS transitions](../styling.html#animation) in our overlay components, a new [Autocomplete](../Autocomplete.html) component in alpha, and a new [React Aria test utils](../testing.html#react-aria-test-utils) package.
As always, a huge shoutout to everyone in the community for their feedback and contributions!
Expand Down
Loading