🐛 Bug Report

React warnings for:

1. React does not recognize the focusedKey prop on a DOM element
2. React does not recognize the shouldCloseOnBlur prop on a DOM element.

🤔 Expected Behavior

No warnings.

😯 Current Behavior

Warnings shown.

react-dom.development.js:88 Warning: React does not recognize the `focusedKey` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `focusedkey` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div (created by ForwardRef($db588eb9c9dbc1dd892f18503cee21$var$ScrollView))
    in ForwardRef($db588eb9c9dbc1dd892f18503cee21$var$ScrollView) (created by ForwardRef($d62d682f3da39408e5c59b860cad8094$var$Virtualizer))
    in ForwardRef($d62d682f3da39408e5c59b860cad8094$var$Virtualizer) (created by ForwardRef($db61317aa22e4c1ceb7e68a142b3e28e$var$ListBoxBase))
    in ForwardRef($db61317aa22e4c1ceb7e68a142b3e28e$var$ListBoxBase) (created by ForwardRef($f01f0d1066865f7027d77d32f5de6fe$var$Picker))
    in FocusScope (created by ForwardRef($f01f0d1066865f7027d77d32f5de6fe$var$Picker))
    in div (created by ForwardRef)
    in ForwardRef (created by ForwardRef($af48fe067ffcbddd851563094a05$var$Popover))
    in Transition (created by $c2eed959492fcaa12e5ad56438b32db$export$OpenTransition)
    in $c2eed959492fcaa12e5ad56438b32db$export$OpenTransition (created by ForwardRef($efa130a588abe47e4415ae0ba92319d4$var$Overlay))
    in div (created by ForwardRef(ProviderWrapper))
    in ForwardRef(ProviderWrapper) (created by ForwardRef($bc3300334f45fd1ec62a173e70ad86$var$Provider))
    in ModalProvider (created by ForwardRef($bc3300334f45fd1ec62a173e70ad86$var$Provider))
    in I18nProvider (created by ForwardRef($bc3300334f45fd1ec62a173e70ad86$var$Provider))
    in ForwardRef($bc3300334f45fd1ec62a173e70ad86$var$Provider) (created by ForwardRef($efa130a588abe47e4415ae0ba92319d4$var$Overlay))
    in ForwardRef($efa130a588abe47e4415ae0ba92319d4$var$Overlay) (created by ForwardRef($af48fe067ffcbddd851563094a05$var$Popover))
    in ForwardRef($af48fe067ffcbddd851563094a05$var$Popover) (created by ForwardRef($f01f0d1066865f7027d77d32f5de6fe$var$Picker))
    in div (created by ForwardRef($f01f0d1066865f7027d77d32f5de6fe$var$Picker))
    in ForwardRef($f01f0d1066865f7027d77d32f5de6fe$var$Picker) (created by App)
    in ModalProvider (created by ForwardRef($bc3300334f45fd1ec62a173e70ad86$var$Provider))
    in I18nProvider (created by ForwardRef($bc3300334f45fd1ec62a173e70ad86$var$Provider))
    in ForwardRef($bc3300334f45fd1ec62a173e70ad86$var$Provider) (created by ForwardRef($d618213cd07bac427c632ce5c90d7$var$Form))
    in form (created by ForwardRef($d618213cd07bac427c632ce5c90d7$var$Form))
    in ForwardRef($d618213cd07bac427c632ce5c90d7$var$Form) (created by App)
    in div (created by ForwardRef($f9fee2c1db386bde8f28b36a814d1eb2$var$Flex))
    in ForwardRef($f9fee2c1db386bde8f28b36a814d1eb2$var$Flex) (created by App)
    in div (created by ForwardRef($f9fee2c1db386bde8f28b36a814d1eb2$var$Flex))
    in ForwardRef($f9fee2c1db386bde8f28b36a814d1eb2$var$Flex) (created by App)
    in div (created by ForwardRef(ProviderWrapper))
    in ForwardRef(ProviderWrapper) (created by ForwardRef($bc3300334f45fd1ec62a173e70ad86$var$Provider))
    in ModalProvider (created by ForwardRef($bc3300334f45fd1ec62a173e70ad86$var$Provider))
    in I18nProvider (created by ForwardRef($bc3300334f45fd1ec62a173e70ad86$var$Provider))
    in ForwardRef($bc3300334f45fd1ec62a173e70ad86$var$Provider) (created by App)
    in ErrorBoundary (created by App)
    in App
printWarning @ react-dom.development.js:88
react-dom.development.js:88 Warning: React does not recognize the `shouldCloseOnBlur` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `shouldcloseonblur` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div (created by ForwardRef)
    in ForwardRef (created by ForwardRef($af48fe067ffcbddd851563094a05$var$Popover))
    in Transition (created by $c2eed959492fcaa12e5ad56438b32db$export$OpenTransition)
    in $c2eed959492fcaa12e5ad56438b32db$export$OpenTransition (created by ForwardRef($efa130a588abe47e4415ae0ba92319d4$var$Overlay))
    in div (created by ForwardRef(ProviderWrapper))
    in ForwardRef(ProviderWrapper) (created by ForwardRef($bc3300334f45fd1ec62a173e70ad86$var$Provider))
    in ModalProvider (created by ForwardRef($bc3300334f45fd1ec62a173e70ad86$var$Provider))
    in I18nProvider (created by ForwardRef($bc3300334f45fd1ec62a173e70ad86$var$Provider))
    in ForwardRef($bc3300334f45fd1ec62a173e70ad86$var$Provider) (created by ForwardRef($efa130a588abe47e4415ae0ba92319d4$var$Overlay))
    in ForwardRef($efa130a588abe47e4415ae0ba92319d4$var$Overlay) (created by ForwardRef($af48fe067ffcbddd851563094a05$var$Popover))
    in ForwardRef($af48fe067ffcbddd851563094a05$var$Popover) (created by ForwardRef($f01f0d1066865f7027d77d32f5de6fe$var$Picker))
    in div (created by ForwardRef($f01f0d1066865f7027d77d32f5de6fe$var$Picker))
    in ForwardRef($f01f0d1066865f7027d77d32f5de6fe$var$Picker) (created by App)
    in ModalProvider (created by ForwardRef($bc3300334f45fd1ec62a173e70ad86$var$Provider))
    in I18nProvider (created by ForwardRef($bc3300334f45fd1ec62a173e70ad86$var$Provider))
    in ForwardRef($bc3300334f45fd1ec62a173e70ad86$var$Provider) (created by ForwardRef($d618213cd07bac427c632ce5c90d7$var$Form))
    in form (created by ForwardRef($d618213cd07bac427c632ce5c90d7$var$Form))
    in ForwardRef($d618213cd07bac427c632ce5c90d7$var$Form) (created by App)
    in div (created by ForwardRef($f9fee2c1db386bde8f28b36a814d1eb2$var$Flex))
    in ForwardRef($f9fee2c1db386bde8f28b36a814d1eb2$var$Flex) (created by App)
    in div (created by ForwardRef($f9fee2c1db386bde8f28b36a814d1eb2$var$Flex))
    in ForwardRef($f9fee2c1db386bde8f28b36a814d1eb2$var$Flex) (created by App)
    in div (created by ForwardRef(ProviderWrapper))
    in ForwardRef(ProviderWrapper) (created by ForwardRef($bc3300334f45fd1ec62a173e70ad86$var$Provider))
    in ModalProvider (created by ForwardRef($bc3300334f45fd1ec62a173e70ad86$var$Provider))
    in I18nProvider (created by ForwardRef($bc3300334f45fd1ec62a173e70ad86$var$Provider))
    in ForwardRef($bc3300334f45fd1ec62a173e70ad86$var$Provider) (created by App)
    in ErrorBoundary (created by App)
    in App
printWarning @ react-dom.development.js:88

🔦 Context

We're deploying a Project Firefly app to the Adobe Experience Cloud Shell.

💻 Code Sample

1. Create a Project Firefly app from https://console.adobe.io and attach an Adobe I/O Runtime namespace to your Production workspace.
2. Install Adobe I/O CLI @3.6.0: npm install -g @adobe/aio-cli
3. Run:

mkdir test && cd test
# choose your console project and accept all defaults
aio app init 
aio app deploy

4. Go to the To view your deployed application in the Experience Cloud shell: url in your browser
5. Invoke the generic action.
6. View the warnings in the browser's developer console.

🌍 Your Environment

  System:
    OS: macOS 10.15.5
    CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
    Memory: 135.99 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.16.0 - ~/.nvm/versions/node/v12.16.0/bin/node
    Yarn: Not Found
    npm: 6.13.4 - ~/.nvm/versions/node/v12.16.0/bin/npm
  Virtualization:
    Docker: 19.03.8 - /usr/local/bin/docker
  npmGlobalPackages:
    @adobe/aio-cli: 3.6.0
  CLI plugins:
    @adobe/aio-cli 3.6.0 (core)
    @oclif/plugin-plugins 1.7.10 (core)
    @oclif/plugin-autocomplete 0.2.0 (core)
    @oclif/plugin-help 2.2.3 (core)
    @oclif/plugin-not-found 1.2.4 (core)
    @oclif/plugin-warn-if-update-available 1.7.0 (core)
    @adobe/aio-cli-plugin-config 2.2.1 (core)
    @adobe/aio-cli-plugin-app 3.0.1 (core)
    @adobe/aio-cli-plugin-console 3.1.0 (core)
    @adobe/aio-cli-plugin-certificate 0.2.0 (core)
    @adobe/aio-cli-plugin-auth 2.2.0 (core)
    @adobe/aio-cli-plugin-events 1.0.0 (core)
    @adobe/aio-cli-plugin-runtime 1.8.0 (core)
    @adobe/aio-cli-plugin-info 1.0.0 (core)

    "@react-spectrum/button": "^3.0.0-rc.2",
    "@react-spectrum/form": "^3.0.0-rc.2",
    "@react-spectrum/layout": "^3.0.0-alpha.1",
    "@react-spectrum/link": "^3.0.0-alpha.1",
    "@react-spectrum/picker": "^3.0.0-alpha.1",
    "@react-spectrum/progress": "^3.0.0-rc.2",
    "@react-spectrum/provider": "^3.0.0-rc.2",
    "@react-spectrum/text": "^3.0.0-rc.0",
    "@react-spectrum/textfield": "^3.0.0-rc.2",
    "@react-spectrum/theme-default": "^3.0.0-rc.2",
    "@react-spectrum/typography": "^3.0.0-alpha.1",
    "@adobe/aio-sdk": "^2.3.0",
    "node-fetch": "^2.6.0",
    "cloudevents-sdk": "^1.0.0",
    "uuid": "^8.0.0",
    "core-js": "^3.6.4",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-error-boundary": "^1.2.5",
    "regenerator-runtime": "^0.13.5",
    "@adobe/exc-app": "^0.2.14",

🧢 Your Company/Team

Adobe I/O DevX / CLI team

🙋 Feature Request

Handle long-press on TextField's steppers

🤔 Expected Behavior

1. User clicks and holds one of the steppers (increment, decrement) of TextField
2. Input value changes based on the action (inc. or dec.) once
3. A delay
4. Input value starts to go up or do down continuously

😯 Current Behavior

1. User clicks and holds one of the steppers (increment, decrement) of TextField
2. Input value changes based on the action (inc. or dec.) once
3. nothing happens

💁 Possible Solution

Listen to the press event. change the value based on the kind of action and set a timer at the same time. when the timer ends check if the press event is still active. if so then set an interval that changes the value. stop the interval then the press event is not active anymore

🔦 Context

I am building a design system builder. And I think Spectrum has the most suitable set of tools for my project.
many editors and number fields in real-applications have this feature. and it feels natural to the user. also, i can change the value only without using a keyboard.

💻 Examples

https://developer.microsoft.com/en-us/fluentui#/controls/web/spinbutton
if you check the first example you can see how it works.

P.s. also I have another couple of suggestions such as selecting the value on focus (see the example link) and validating the value on blur ( e.g. min set to 0; user enters -100; value set to the closest valid value (0) when the user moves the focus).

🐛 Bug Report

Go to https://react-spectrum.adobe.com/react-spectrum/DialogTrigger.html
Open the first Dialog
Place finger on overlay or underlay and swipe up or down to scroll the page. The background still scrolls.

🤔 Expected Behavior

The background should not scroll.

😯 Current Behavior

💁 Possible Solution

Latest response in bug linked below in context suggests something that may be a little on the extreme side.

Since iOS Safari prevents attaching the overflow property to the body tag, you can use the position: fixed attribute. Trouble with position: fixed is that when you want to remove the attribute (or make the body scrollable again) the page jumps back up to the top. To fix this, you can use window.scrollTo() to scroll the page back to where the user last scrolled to. Below is the code:

    lockBackground = ({menuOpen}) => {
        if (menuOpen) {
            const offsetY = window.pageYOffset;
            document.body.style.top = `${-offsetY}px`;
            document.body.classList.add('js-lock-position');

        } else {
            const offsetY = Math.abs(parseInt(document.body.style.top || 0, 10));
            document.body.classList.remove('js-lock-position');
            document.body.style.removeProperty('top');
            window.scrollTo(0, offsetY || 0);
        }
    }

   .js-lock-position {
     position: fixed;
     overflow: hidden;
   }

🔦 Context

This is because of https://bugs.webkit.org/show_bug.cgi?id=153852

💻 Code Sample

🌍 Your Environment

🧢 Your Company/Team

🕷 Tracking Issue (optional)

Currently generated IDs have react-spectrum- prefix:
https://github.com/adobe-private/react-spectrum-v3/blob/12ea682ddfbd43dbd2cc5c9c41cae77986d539b5/packages/%40react-aria/utils/src/useId.ts#L23
but when using just @react-aria part this doesn't prefix makes less sense (in my opinion of course) than using react-aria- or similar. I understand that @react-aria is still sort of a member of React Spectrum family, so if you don't agree with me please just close this issue. It's just nitpicking.

🐛 Bug Report

Importing an icon fails in @adobe/react-spectrum v3.0.2

import Airplane from '@spectrum-icons/workflow/Airplane';

🤔 Expected Behavior

Not get an exception at build time.

😯 Current Behavior

When I try to import any icon from '@spectrum-icons/workflow I get an exception:

ERROR in ./node_modules/@spectrum-icons/ui/node_modules/@react-spectrum/icon/dist/module.js
Module not found: Error: Can't resolve '@react-spectrum/provider' in '/Users/smacdona/code/adobeio/devrel/parliament-ui-components/node_modules/@spectrum-icons/ui/node_modules/@react-spectrum/icon/dist'
 @ ./node_modules/@spectrum-icons/ui/node_modules/@react-spectrum/icon/dist/module.js 1:0-55 83:17-28 117:17-28
 @ ./node_modules/@spectrum-icons/ui/FolderBreadcrumb.js
 @ ./node_modules/@react-spectrum/breadcrumbs/dist/module.js
 @ ./node_modules/@adobe/react-spectrum/dist/module.js
 @ ./src/__stories__/layout.stories.js
 @ ./src/__stories__ sync nonrecursive ^\.\/(?:(?!\.)(?=.)[^/]*?\.stories\.(?:\[tj\]|[tj])s)$
 @ ./.storybook/generated-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

💁 Possible Solution

In the react-spectrum/icon component should:

import {useProvider} from '@react-spectrum/provider';

be:

import {useProvider} from '@adobe/react-spectrum';

If I make that change the error goes away but it's replaced by a new one:

ERROR in ./node_modules/@react-spectrum/textfield/dist/module.js
Module not found: Error: Can't resolve '@react-spectrum/provider' in '/Users/smacdona/code/adobeio/devrel/parliament-ui-components/node_modules/@react-spectrum/textfield/dist'
 @ ./node_modules/@react-spectrum/textfield/dist/module.js 2:0-60 57:10-26 166:10-26 215:10-26
 @ ./node_modules/@adobe/react-spectrum/dist/module.js
 @ ./src/__stories__/layout.stories.js
 @ ./src/__stories__ sync nonrecursive ^\.\/(?:(?!\.)(?=.)[^/]*?\.stories\.(?:\[tj\]|[tj])s)$
 @ ./.storybook/generated-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

🔦 Context

Was trying to move away from including components one by one.

💻 Code Sample

git clone https://github.com/adobe/parliament-ui-components
cd parliament-ui-components
git fetch
git checkout rsv3.0.2
npm install
npm run storybook

You'll see the stack trace.

🌍 Your Environment

🧢 Your Company/Team

Adobe I/O

🕷 Tracking Issue (optional)

adobe/parliament-ui-components#10

🙋 Feature Request

We have a Checkbox component already, but it would be nice to support a CheckboxGroup component to more easily create a group of checkboxes, similar to RadioGroup. It should support labeling the entire group of checkboxes, along with controlling the selection state of the checkboxes as a group rather than individually.

💁 Possible Solution

API should be similar to RadioGroup. The value prop could accept an array of values, matching the value prop on each individual Checkbox. Many other props can be applied to the group and propagate to each individual checkbox (e.g. disabled/readonly state, validation state, etc.).

import {ValueBase, InputBase, Validation, LabelableProps} from '@react-types/shared';

interface CheckboxGroupProps extends ValueBase<string[]>, InputBase, Validation, LabelableProps {
  /** Name for the checkboxes when submitting via HTML form. Applies to all checkboxes automatically. */
  name?: string
}

interface CheckboxGroupState {
  /** Current selected values. */
  value: string[],
  /** Sets the selected values. */
  setValue(value: string[]): void,
  /** Adds a value to the set of selected values. */
  addValue(value: string): void,
  /** Removes a value from the set of selected values. */
  removeValue(value: string): void,
  /** Toggles a value in the set of selected values. */
  toggleValue(value: string): void
}

declare function useCheckboxGroupState(props: CheckboxGroupProps): CheckboxGroupState;

interface CheckboxGroupAria {
  /** Props for the checkbox group label element. */
  labelProps: HTMLAttributes<HTMLElement>,
  /** Props for the group element */
  groupProps: HTMLAttributes<HTMLElement>
}

declare function useCheckboxGroup(props: CheckboxGroupProps): CheckboxGroupAria;

We may also want to support additional Spectrum-specific options like layout orientation, emphasized visual state, labeling visual options, etc.

Example:

<CheckboxGroup label="Favorite sports">
  <Checkbox value="running">Running</Checkbox>
  <Checkbox value="swimming">Swimming</Checkbox>
  <Checkbox value="soccer">Soccer</Checkbox>
</CheckboxGroup>

HTML structure:

<div role="group" aria-labelledby="label-id">
  <div id="label-id">Favorite Sports</div>
  <!-- insert checkboxes here -->
</div>

In terms of CSS, we should be able to use the Spectrum FieldGroup CSS for this (same as used in RadioGroup).

🧢 Your Company/Team

RSP

🐛 Bug Report

Noticed that the HiddenSelect component inside a Picker is not disabled when Picker is disabled. This means the <select> and <input> elements are still enabled, and the <input> still accepts focus which messes up tabbing around the page.

💁 Possible Solution

Pass isDisabled prop through to HiddenSelect and make both the <select> and <input> disabled when it is true.

🔦 Context

Noticed when testing in this CodeSandbox. There's an extra tab stop after the enabled picker before the next enabled button that shouldn't be there. Inspecting the DOM shows that the <input> inside the disabled picker has focus.

🌍 Your Environment

🧢 Your Company/Team

RSP

🙋 Feature Request

MenuTrigger currently supports opening a menu when a user presses or presses the enter or space key on a trigger element (e.g. button). It would be useful to also support opening it on long press instead of immediately. For example, in a toolbar UI, you could switch between multiple tools under the same button by opening a menu on long press. Long press to open a menu is also fairly common on mobile.

💁 Possible Solution

A few steps are required to implement this:

• Add a useLongPress hook to the @react-aria/interactions package. This should make use of usePress under the hood, but add a timer to track how long the user has been pressing and only fire the onLongPress event after a threshold has been met. The keyboard events emitted by usePress should be ignored though, as individual components may wish to have different keyboard shortcuts for activating this behavior.
• Call the useLongPress hook inside useMenuTrigger to handle opening the menu on long press. Also add support for the Alt + arrow key behavior to open the menu instead of the normal Enter/Space/Arrow keys. The trigger="longPress" prop should be added to MenuTrigger to enable this behavior.

🔦 Context

Eventually we will support a hold affordance in Spectrum buttons to show that a menu is available on long press. See https://spectrum.adobe.com/page/action-button/#Hold-icon.

🧢 Your Company/Team

RSP

🙋 Feature Request

It would be great to have a way to use autoFocus in combination with non-tabbable (but focusable) element

🤔 Expected Behavior

Allow for autofocusing element with tabIndex={-1}

😯 Current Behavior

Only tabbable elements can be autoFocused now:
https://github.com/adobe-private/react-spectrum-https://github.com/adobe-private/react-spectrum-v3/blob/d126789d5fac8d7196c30ab4e0507efc05e1380f/packages/%40react-aria/focus/src/FocusScope.tsx#L302-L303

💁 Possible Solution

As tabIndex={-1} elements are not included in tab sequence and there might be many arbitrary elements with tabIndex={-1} set on them I don't believe having a way to autoFocus "first" of those would be a good solution.

What I was thinking is to provide a specialized wrapper component - something like <AutoFocus/> that could register the intention of focusing a particular element (or rather - first within that subtree?). A good thing about such a solution would be the ability to autoFocus arbitrary element which also might be sometimes desirable and it would be possible to customize it with tabbables prop - so it could only include tabbables or all focusables within it.

I'm not sure yet about the exact API of such <AutoFocus/> - there are definitely few ways you could go with this:

• rendering sentinels like for the FocusScope itself
• cloneElement
• use a hook instead of a component that would accept a ref within which the search should be performed
• possibly something else

I would happily help you implement this if only we can agree that this would be a nice addition and we figure out the dream API for this.

🔦 Context

Sometimes it is advisable to autofocus such elements, according to https://w3c.github.io/aria-practices/#keyboard-interaction-7 :

• "Unless a condition where doing otherwise is advisable, focus is initially set on the first focusable element." (and this might not be first tabbable)
• "If content is large enough that focusing the first interactive element could cause the beginning of content to scroll out of view, it is advisable to add tabindex=-1 to a static element at the top of the dialog, such as the dialog title or first paragraph, and initially focus that element."

🧢 Your Company/Team

External, non-Adobe 😉

🙋 Feature Request

Modals such as Dialogs pose a problem for Chromatic, we're trying to keep our number of stories down, but only one dialog can usably be open at once, so how do we run multiple themes/scales/locales for them?

🤔 Expected Behavior

😯 Current Behavior

💁 Possible Solution

• Each one gets its own story
• We render dialog plain without its trigger wrapper (is this even possible? would we need to hardcode container sizes?)
• turn off the underlay, we'd also need to override measurements so that they don't render on top of each other

🔦 Context

💻 Examples

🧢 Your Company/Team

🎁 Tracking Ticket (optional)

🐛 Bug Report

Importing 'VisuallyHidden' in Next.js gives the following error: https://github.com/vercel/next.js/blob/master/errors/css-npm.md

🤔 Expected Behavior

Other components work just fine, so I expected VisuallyHidden to work too

😯 Current Behavior

Compilation error with Next.js https://github.com/vercel/next.js/blob/master/errors/css-npm.md

💁 Possible Solution

Not very experienced with frontend 😞

🔦 Context

Creating custom checkboxes and stuff

💻 Code Sample

import {VisuallyHidden} from '@react-aria/visually-hidden'

🌍 Your Environment

🧢 Your Company/Team

https://listenbox.app/

🙋 Feature Request

I would love to see <ScrollFlex> added as a scrollable counterpart of <Flex>. Scrollability could also be achieved by adding necessary props to <Flex>, but having a separate component would be inline with SwiftUI, React Native, and others.

🤔 Expected Behavior

The <ScrollFlex> component should strictly extend <Flex> in functionality, everything available for <Flex> should be available here. It should have props for controlling scroll, for example for scroll-snap. Scroll direction should follow the "direction" prop, vertically scrolling horizontal flexes or the other way around shouldn't be possible.

🙋 Feature Request

Add a tab component as described in the https://www.w3.org/TR/wai-aria-practices/#tabpanel.

🙋 Documentation Request

Fix Typo in ListBox aria-label Aligment --> Alignment

🧢 Your Company/Team

Adobe/Magento

🐛 Bug Report

The animation for opening a tray is choppy in the docs in chrome and safari.

🤔 Expected Behavior

It should be smooooth.

😯 Current Behavior

usePress is adding -webkit-user-select to the document on press down and removing it on press up. This avoids iOS from selecting text on long press. On a large document like the docs pages, this causes a large style recalculation which occurs during the animation.

💁 Possible Solution

Either find a different way of avoiding text selection, or attempt to avoid the style recalc during the transition. Maybe listen for ontransitionstart/ontransitionend?

💻 Code Sample

https://react-spectrum.adobe.com/react-spectrum/DialogTrigger.html#tray

🌍 Your Environment

Chrome/Safari

🧢 Your Company/Team

RSP

🐛 Bug Report

See screen recording. I kept pressing tab while recording

🤔 Expected Behavior

In Chrome it does cycle through focusable items

😯 Current Behavior

After a few tab key presses it focuses the address bar

🌍 Your Environment

macOS Safari 13

📝 Feedback

Been following spectrum since the css library was launched. Love the components

🔦 Context

Just an enthusiast who enjoys getting involved in different projects

💻 Code Sample

--

🌍 Your Environment

🧢 Your Company/Team

Ultimate Software

🙋 Feature Request

It would be very useful to have nightly releases published so consumers of the different libraries can try out merged code prior to official releases.

🤔 Expected Behavior

Every night new code should be published to NPM under the nightly tag (or something similar).

😯 Current Behavior

Today, we wait for the codeowners to publish releases before trying new features.

💁 Possible Solution

Using a cron-like job through the current CI solution

🔦 Context

I would like to try out new features and help test in my applications prior to official release.

💻 Examples

Parcel does this and it is quite useful.

🧢 Your Company/Team

Adobe/Unified Shell

🎁 Tracking Ticket (optional)

n/a

🙋 Documentation Request

😬

https://react-spectrum.adobe.com/react-spectrum/versioning.html#using-individual-packages

Regression from #765?

🙋 Feature Request

In any component that supports collapsing items based on size, we should use ResizeObserver instead of window resize events if possible. This will make it handle cases where part of the UI changes size without the window changing size (e.g. opening/closing a sidebar). We'll need to document that if you want to support older browsers, you'll need to include a polyfill. By default, we could fall back to window resize events, as the polyfill would only be needed for specific use cases.

💁 Possible Solution

Use ResizeObserver to handle resize events in Breadcrumbs and ButtonGroup, and whatever other components we add going forward that need this behavior. Perhaps we could create a reusable hook to handle this.

🧢 Your Company/Team

RSP

🐛 Bug Report

Summary of all failing tests
 FAIL  packages/@react-aria/interactions/test/usePress.test.js
  ● usePress › touch events › should fire press events based on touch events

    expect(received).toEqual(expected) // deep equality

    - Expected
    + Received

    @@ -19,13 +19,6 @@
        },
        Object {
          "pressed": false,
          "type": "presschange",
        },
    -   Object {
    -     "pointerType": "touch",
    -     "target": <div>
    -       test
    -     </div>,
    -     "type": "press",
    -   },
      ]

      352 |       fireEvent.touchEnd(el, {changedTouches: [{identifier: 1, clientX: 0, clientY: 0}]});
      353 | 
    > 354 |       expect(events).toEqual([
          |                      ^
      355 |         {
      356 |           type: 'pressstart',
      357 |           target: el,

      at Object.toEqual (packages/@react-aria/interactions/test/usePress.test.js:354:22)

  ● usePress › touch events › should fire press change events when moving touch outside target

    expect(received).toEqual(expected) // deep equality

    - Expected
    + Received

    @@ -19,35 +19,6 @@
        },
        Object {
          "pressed": false,
          "type": "presschange",
        },
    -   Object {
    -     "pointerType": "touch",
    -     "target": <div>
    -       test
    -     </div>,
    -     "type": "pressstart",
    -   },
    -   Object {
    -     "pressed": true,
    -     "type": "presschange",
    -   },
    -   Object {
    -     "pointerType": "touch",
    -     "target": <div>
    -       test
    -     </div>,
    -     "type": "pressend",
    -   },
    -   Object {
    -     "pressed": false,
    -     "type": "presschange",
    -   },
    -   Object {
    -     "pointerType": "touch",
    -     "target": <div>
    -       test
    -     </div>,
    -     "type": "press",
    -   },
      ]

      422 |       fireEvent.touchEnd(el, {changedTouches: [{identifier: 1, clientX: 0, clientY: 0}]});
      423 | 
    > 424 |       expect(events).toEqual([
          |                      ^
      425 |         {
      426 |           type: 'pressstart',
      427 |           target: el,

      at Object.toEqual (packages/@react-aria/interactions/test/usePress.test.js:424:22)

  ● usePress › touch events › should ignore emulated mouse events

    expect(received).toEqual(expected) // deep equality

    - Expected
    + Received

    @@ -19,35 +19,6 @@
        },
        Object {
          "pressed": false,
          "type": "presschange",
        },
    -   Object {
    -     "pointerType": "touch",
    -     "target": <div>
    -       test
    -     </div>,
    -     "type": "pressstart",
    -   },
    -   Object {
    -     "pressed": true,
    -     "type": "presschange",
    -   },
    -   Object {
    -     "pointerType": "touch",
    -     "target": <div>
    -       test
    -     </div>,
    -     "type": "pressend",
    -   },
    -   Object {
    -     "pressed": false,
    -     "type": "presschange",
    -   },
    -   Object {
    -     "pointerType": "touch",
    -     "target": <div>
    -       test
    -     </div>,
    -     "type": "press",
    -   },
      ]

      489 |       fireEvent.click(el);
      490 | 
    > 491 |       expect(events).toEqual([
          |                      ^
      492 |         {
      493 |           type: 'pressstart',
      494 |           target: el,

      at Object.toEqual (packages/@react-aria/interactions/test/usePress.test.js:491:22)

🤔 Expected Behavior

😯 Current Behavior

💁 Possible Solution

🔦 Context

💻 Code Sample

🌍 Your Environment

🧢 Your Team

🕷 Tracking Issue

🐛 Bug Report

Trays on iPhone X or other iPhones with no home button are partially obscured by the home indicator at the bottom of the screen.

🤔 Expected Behavior

There should be some extra padding at the bottom of the tray to account for the home indicator.

😯 Current Behavior

The home indicator sometimes overlaps or is too close to the contents of the tray, making it hard to access.

💁 Possible Solution

We could possibly add some padding using the safe area insets defined in CSS. Not tried this yet though. https://webkit.org/blog/7929/designing-websites-for-iphone-x/

🌍 Your Environment

🧢 Your Company/Team

RSP

❔ Question

Next.js does not support importing of CSS from node_modules, is there a workaround for getting Spectrum and Next.js to play together?

🔦 Context

I just created an empty Next.js project and tried to import @adobe/react-spectrum but it complains with the following error:

error - ./node_modules/@react-aria/visually-hidden/dist/main.css
Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm
Location: node_modules/@react-aria/visually-hidden/dist/module.js

💻 Code Sample

Empty Next.js project with the example from Spectrum Getting started in pages/index.js

🐛 Bug Report

🤔 Expected Behavior

After installing, the button was displayed according to the document

https://react-spectrum.adobe.com/react-spectrum/getting-started.html

😯 Current Behavior

Here is the code

import React from 'react';
import './App.css';
import {
  Provider,
  defaultTheme,
  Button
} from '@adobe/react-spectrum';

function App() {
  return (
    <div className="App">
      <Provider theme={defaultTheme}>
        <Button
          variant="cta"
          onPress={() => alert('Hey there!')}>
          Hello React Spectrum!
        </Button>
      </Provider>
    </div>
  );
}

export default App;

💁 Possible Solution

I think it's enough to change the code as below
fill-available -> stretch
start -> flex-start

I think the corresponding file is here
react-spectrum/packages/@adobe/spectrum-css-temp/components/modal/index.css

react-spectrum/packages/@adobe/spectrum-css-temp/components/tray/index.css

🔦 Context

I want to get rid of warnings and be aware of warnings and errors that I really want to see

🌍 Your Environment

I submitted my first assignment.
Please let me know if the submission method is incorrect.
Thank you for confirmation.

📝 Feedback

I watched Design system and accessibility - Devon Govett aka @devongovett at @ReactEurope 2020 and found it very interesting.

🔦 Context

I mostly just wanted to try out the aria stuff, but spectrum also looks nice and I just want to toy with it in some small hobby projects. I tried signing up with on the link from #419 but it didn't work anymore.

🌍 Your Environment

🧢 Your Company/Team

No company inc

When try to open an overlay - the error occures

react-dom.production.min.js:120 Uncaught TypeError: Cannot read property 'current' of undefined
    at useDialog.ts:36
    at Gi (VM95 client.f11ff4f5.js:31)
    at uu (VM95 client.f11ff4f5.js:31)
    at r.unstable_runWithPriority (VM95 client.f11ff4f5.js:40)
    at Da (VM95 client.f11ff4f5.js:31)
    at lu (VM95 client.f11ff4f5.js:31)
    at Hl (VM95 client.f11ff4f5.js:31)
    at gr (VM95 client.f11ff4f5.js:31)

🙋 Feature Request

It would be nice to support Preact in addition to React. Preact supports most of the features we need, and is considerably more lightweight, so it would be nice to support it for applications that need to be super slim. Things should mostly already work I think, but there may be places where we rely on React specific features like the synthetic event system. We should try to abstract that.

💁 Possible Solution

• Test things out and see if they work. Maybe create a demo app aliasing react -> preact and see what breaks.
• Add the ability to run the test suite against Preact in addition to React to prevent future breakages.
• Fix the issues. Adjust code as needed to ensure we're compatible with both implementations.
• Figure out how to release this. Do we want to require people to have an alias in their app? Do we want to create a completely separate set of packages that switch react for preact? Should we abstract things so you could inject an implementation for where to get hooks like useState/useEffect/etc. from? That might allow even more implementations that support the hooks API in the future (e.g. Haunted). How do other libraries handle this?

🧢 Your Company/Team

RSP

❔ Question

From what I understand you still support IE11 at Adobe. The distributed files are using ES6 syntax though, so my question is - is the expectation that consumers should transpile them on their own? It's not a popular choice I would say (not necessarily a bad one though) so I thought I'd ask. If this is the expectation then I think it would be good to include a warning about this - ignoring node_modules from transpilation jobs is pretty common.

🐛 Bug Report

@react-stately/collections includes react as a "dependency" making it extra difficult to alias React out of a build when attempting to leverage the stately hooks in other contexts.

🤔 Expected Behavior

All dependencies on React would be the same so that the alias technique could be the same across the board.

😯 Current Behavior

The use of "dependency" vs "peerDependency" prevents from above aliasing from replace React in the application.

🔦 Context

The Spectrum Web Components project is investigating whether it's possible to leverage the stately and aria hooks in their project. adobe/spectrum-web-components#717

🧢 Your Company/Team

Adobe Spectrum

❔ Question

I couldn't find the Color Area component in the stories. Do you guys plan to release the color components?

🙋 Feature Request

• Alert
• Breadcrumbs
• Calendar?
• Datepicker?
• Form
• Icon
• Image
• Label
• Link
• Meter
• Progress
• Table
• Text
• View
• Well

🤔 Expected Behavior

😯 Current Behavior

💁 Possible Solution

Tabs/Breadcrumbs both rely on measurements that involve font, make sure that the font is already loaded
Tabs might need a delay until screenshot even with the font already loaded

🔦 Context

💻 Examples

🧢 Your Company/Team

🎁 Tracking Ticket (optional)

The native browser behavior is that only the selected radio in a group is tabbable, or if none is selected, the first radio in the group.

c.f. the algorithm used here: https://github.com/davidtheclark/tabbable

Incidentally I have been noodling on the idea of submitting a spec for first-class :focusable and :tabbable selectors to CSSWG as this is information the browser already has and it's silly how many times we've all tried to reimplement this question 🙃

https://github.com/adobe-private/react-spectrum-v3/blob/343d3460684dd18c4bdfdaeb2dd185d8c86854b7/packages/%40react-aria/focus/src/FocusScope.tsx#L170

❔ Question

I watched the talk from @devongovett for ReactEurope. He talked a lot about cross-platform'ability. So my question is: how does react-aria support other platforms such as React Native/Electron? if it supports, how can we use it (properly) on other platforms?

🐛 Bug Report

When checking out your Radio Group, I noticed the blue Focus Ring is enabled when I:

1. Select radio item
2. Use mouse to click on another browser tab.
3. Use mouse to click on the Radio Group tab to return to the page
4. The Focus Ring is shown, when it was not shown at initial selection.

💁 Possible Solutions

• Can be helpful to know what 'last selection' was when navigating in the middle of filling out forms for those with attention disorders (like me ;) ).
  • Should be documented.
• Want to be consistent
  • Needs automated tab-switching test, maybe visual-diff?
  • Extra code in RocusRing to ensure a check for tab-swtich is done before enabling.

I'm indifferent, but I lean towards the first option which is an increase of usability IMHO.

🌍 Your Environment

🧢 Your Company/Team

Web users

🙋 Feature Request

Our style props are already a nice way to use Spectrum defined variables for things like layout and spacing props, but it would be useful to support responsive behavior as well. For example, you might wish to switch layouts on smaller screens. This would be especially useful for our layout components.

💁 Possible Solution

I think the API could look something like this:

<TextField width={{S: 'size-1000', M; 'size-2000', L: 'size-3000'}} />

This would set a different width at 3 breakpoints: small (mobile), medium (tablet), and large (desktop). We could have default values for these breakpoints, but also allow applications to define their own values using the Provider component.

<Provider breakpoints={{S: 380, M: 768, L: 1024}}>
  <TextField width={{S: 'size-1000', M; 'size-2000', L: 'size-3000'}} />
</Provider>

This would define each of the breakpoints for the entire app, and all components within the provider could respond to those breakpoints.

🧢 Your Company/Team

RSP

🐛 Bug Report

Modifying HTMLElement.prototype.focus prevents server side rendering.

I'm using Gatsby to build a site which also uses react-spectrum v3. Running the site in development works but once I do a production build an error occurs preventing the site from being built.

🤔 Expected Behavior

I hope to be able to use react-spectrum v3 with a site that is doing server side rendering. 🤞

😯 Current Behavior

Setup the reproduction scenario:

1. Clone the reproduction repo.
2. cd gatsby-rsv3
3. npm i

Run the client side rendering scenario:

1. gatsby develop

You'll be able to open localhost:8000 and see that the site is running with a @react-spectrum/button.

Now run the server side scenario:

1. gatsby clean
2. gatsby build

This should give you an error message:

  963 |
> 964 |   let focus = HTMLElement.prototype.focus;
      | ^
  965 |
  966 |   HTMLElement.prototype.focus = function () {
  967 |     $d01f69bb2ab5f70dfd0005370a2a2cbc$var$hasEventBeforeFocus = true;


  WebpackError: ReferenceError: HTMLElement is not defined

  - module.js:964
    node_modules/@react-aria/interactions/dist/module.js:964:1

  - module.js:1018
    node_modules/@react-aria/interactions/dist/module.js:1018:1

  - module.js:392
    node_modules/@react-aria/focus/dist/module.js:392:22

  - module.js:427
    node_modules/@react-aria/focus/dist/module.js:427:4

💁 Possible Solution

If I find something I'll come back here and update.

🔦 Context

It's keeping us from switching over from react-spectrum v2 on our internal doc site: https://docs.corp.adobe.com/

💻 Code Sample

Sample repo that provides the smallest reproduction scenario I could come up with is at:

https://github.com/macdonst/gatsby-rsv3

🌍 Your Environment

🧢 Your Team

Adobe I/O

🕷 Tracking Issue

n/a

🐛 Bug Report

When a Dialog is opened via an ActionTrigger which is inside a Table Cell (ouch...), the text content of the Dialog cannot be selected anymore.
Check https://react-spectrum.adobe.com/react-spectrum/DialogTrigger.html#fullscreen, open the Dialog, you can select the text. If the button is in a table, you cannot select the text.

🤔 Expected Behavior

Text should be selectable in any cases.

😯 Current Behavior

No error, just impossible to select.

💁 Possible Solution

Each time you click to select content, the <html> DOM element is updated with user-select: none; which kills the selection. There is a conflict somewhere between that selection logic, the Table and the Dialog. I cannot help more.

🔦 Context

I am build a debugging tool with a large table, each row has it own buttons to view more details. Since these are logs, end-user must be able to copy/paste the dialog content.
It was working fine with my app in react-spectrum-v2.

💻 Code Sample

Created a full sample here: https://github.com/kptdobe/react-spectrum-dialog
Lines of interest are: https://github.com/kptdobe/react-spectrum-dialog/blob/master/src/App.js#L21-L52

🌍 Your Environment

🧢 Your Company/Team

Adobe - Helix team

🕷 Tracking Issue

Migrating from react-spectrum v2 to react-spectrum v3: kptdobe/helix-tracedebug#13

🐛 Bug Report

I am working on React/electron application (the React portion of the application was created using create-react-app) and followed the directions from the getting started page to run react-spectrum, but keep getting this error:
TypeError: __WEBPACK_IMPORTED_MODULE_1_react___default.a.createContext is not a function
I installed react-spectrum using npm and wrapped my App.js component with a Provider to test it out but it fails to run. Did I miss a step in the installation process?

🤔 Expected Behavior

The application should run without issue as I did not add any components only wrapped App.js with a provider

😯 Current Behavior

This error appears: TypeError: __WEBPACK_IMPORTED_MODULE_1_react___default.a.createContext is not a function
and application does not run

💁 Possible Solution

🔦 Context

I am trying to use react-spectrum to style my application

💻 Code Sample

import {Provider, defaultTheme} from '@adobe/react-spectrum';

export default class extends Component {
  constructor() {
    super();
  }   
    render() {
        return (
           <Provider theme={defaultTheme}>
                 <Some JSX>
                 </SomeJSX>
            </Provider>
         );
    }
 }

🌍 Your Environment

🧢 Your Company/Team

🕷 Tracking Issue (optional)

❔ Question

Is it advisable to use the button component to render an anchor tag by passing a href prop?

This means I can have 2 elements which look like a button visually but one will fire an in page action and the other will navigate to a new page.

🔦 Context

https://react-spectrum.adobe.com/react-spectrum/Button.html

💻 Code Sample

🌍 Your Environment

🧢 Your Company/Team

🙋 Feature Request

As text inputs & textareas are super similar it would be great to add intuitive support for textareas to useTextField

🤔 Expected Behavior

Being able to spread inputProps onto <textarea/>

😯 Current Behavior

Currently, type prop is always returned and thus it lands on the textarea node when spreading as-is.

💁 Possible Solution

Add inputElementType prop - similar to labelElementType.

🐛 Bug Report

Using useFocusRing in combination with useButton like so

const ref = useRef<HTMLElement>();
const { isFocusVisible, focusProps } = useFocusRing();
const { buttonProps, isPressed } = useButton(focusProps, ref);

results in the following type error

Argument of type 'HTMLAttributes<HTMLElement>' is not assignable to parameter of type 'AriaButtonProps'.
  Types of property 'onFocus' are incompatible.
    Type '((event: FocusEvent<HTMLElement>) => void) | undefined' is not assignable to type '((e: FocusEvent<Element>) => void) | undefined'.
      Type '(event: FocusEvent<HTMLElement>) => void' is not assignable to type '(e: FocusEvent<Element>) => void'.
        Types of parameters 'event' and 'e' are incompatible.
          Type 'FocusEvent<Element>' is not assignable to type 'FocusEvent<HTMLElement>'.
            Type 'Element' is missing the following properties from type 'HTMLElement': accessKey, accessKeyLabel, autocapitalize, dir, and 106 more.ts(2345)

🌍 Your Environment

🙋 Feature Request

We should have tests for all components to sure they work in react StrictMode. This is the default for new apps in create-react-app, so if there's issues, it's likely people will see them. I believe last time I tried I ran into some problems, so it would be good to fix those and have unit tests to ensure it works. This may also require upgrading some libraries (e.g. react-transition-group?).

🧢 Your Company/Team

RSP

🐛 Bug Report

When using component with useFocusRing hook within, application crashes if component is rendered on server side.

🤔 Expected Behavior

useFocusRing hook should work the same on both server and client side.

😯 Current Behavior

On server side there is a RefferenceError: HTMLElement is not defined. I use Next.js as an SSR framework.
Error stack:

 | ReferenceError: HTMLElement is not defined
 |     at $b83372066b2b4e1d9257843b2455c$var$setupGlobalFocusEvents (/home/jakub/Projects/devomnifrontend/node_modules/@react-aria/interactions/dist/main.js:1031:15)
 |     at useFocusVisible (/home/jakub/Projects/devomnifrontend/node_modules/@react-aria/interactions/dist/main.js:1091:3)
 |     at useFocusRing (/home/jakub/Projects/devomnifrontend/node_modules/@react-aria/focus/dist/main.js:430:7)
 |     at Object.Switch [as render] (webpack-internal:///../ui/Switch/index.tsx:78:77)
 |     at ReactDOMServerRenderer.render (/home/jakub/Projects/devomnifrontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:3535:44)
 |     at ReactDOMServerRenderer.read (/home/jakub/Projects/devomnifrontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)
 |     at renderToString (/home/jakub/Projects/devomnifrontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)
 |     at render (/home/jakub/Projects/devomnifrontend/node_modules/next/dist/next-server/server/render.js:3:298)
 |     at Object.renderPage (/home/jakub/Projects/devomnifrontend/node_modules/next/dist/next-server/server/render.js:46:1020)
 |     at Function.getInitialProps (webpack-internal:///../../node_modules/next/dist/pages/_document.js:133:19)
 |     at Function.getInitialProps (webpack-internal:///./pages/_document.tsx:49:85)
 |     at loadGetInitialProps (/home/jakub/Projects/devomnifrontend/node_modules/next/dist/next-server/lib/utils.js:5:101)
 |     at renderToHTML (/home/jakub/Projects/devomnifrontend/node_modules/next/dist/next-server/server/render.js:46:1330)
 |     at async /home/jakub/Projects/devomnifrontend/node_modules/next/dist/next-server/server/next-server.js:68:285
 |     at async /home/jakub/Projects/devomnifrontend/node_modules/next/dist/next-server/server/next-server.js:67:142
 |     at async DevServer.renderToHTMLWithComponents (/home/jakub/Projects/devomnifrontend/node_modules/next/dist/next-server/server/next-server.js:91:254)
 |     at async DevServer.renderToHTML (/home/jakub/Projects/devomnifrontend/node_modules/next/dist/next-server/server/next-server.js:92:254)
 |     at async DevServer.renderToHTML (/home/jakub/Projects/devomnifrontend/node_modules/next/dist/server/next-dev-server.js:22:539)
 |     at async DevServer.render (/home/jakub/Projects/devomnifrontend/node_modules/next/dist/next-server/server/next-server.js:48:236)
 |     at async Object.fn (/home/jakub/Projects/devomnifrontend/node_modules/next/dist/next-server/server/next-server.js:35:852)
 |     at async Router.execute (/home/jakub/Projects/devomnifrontend/node_modules/next/dist/next-server/server/router.js:28:28)
 |     at async DevServer.run (/home/jakub/Projects/devomnifrontend/node_modules/next/dist/next-server/server/next-server.js:44:494)

🌍 Your Environment

🙋 Documentation Request

It seems the "Get Started" link in the document top page is broken.
https://react-spectrum.adobe.com/react-spectrum

Current Link (not existing):
https://react-spectrum.adobe.com/getting-started.html

Correct Link:
https://react-spectrum.adobe.com/react-spectrum/getting-started.html

🧢 Your Company/Team

N/A

🙋 Feature Request

Get all of our commands working on windows. This is probably easiest for someone with a windows machine to do.

🤔 Expected Behavior

😯 Current Behavior

Current behavior has some problems, a few are seen in this issue. There are probably some more, check all the other commands.
#782

💁 Possible Solution

🔦 Context

💻 Examples

🧢 Your Company/Team

🎁 Tracking Ticket (optional)

🐛 Bug Report

TextArea/Textfield/SearchField all support icons that they pass to TextField base. I believe the icon's style should match across all of them.

🤔 Expected Behavior

Hover styles should be applied to the icon in all three cases.

😯 Current Behavior

💁 Possible Solution

We should be able to move the styles in search field css to textfield css, renaming spectrum-Search-icon to spectrum-Textfield-icon

🔦 Context

💻 Code Sample

🌍 Your Environment

🧢 Your Company/Team

🕷 Tracking Issue (optional)

🙋 Feature Request

We need to replace usage of the :hover pseudo class with a JS based solution for styling hover effects (the useHover hook). :hover does not play nice with touch devices. Usually, they show the hover styles on touch, and then remove them when you touch again. We currently have a postcss plugin that wraps these in the @hover media query, which is supposed to detect disable the hover styling if it's unsupported. Unfortunately, it's inconsistent at best, especially on hybrid devices that support both mouse and touch (e.g. Surface or iPad with pointer). This is because the media query only detects whether hover is supported, not whether its currently in use. The only way around this it seems is to use JS pointer events to detect the pointer type and apply the hover effect as a css class.

🤔 Expected Behavior

Hover effects shouldn't show when interacting with touch.

😯 Current Behavior

Hover effects are shown sometimes when interacting with touch, especially on hybrid devices.

💁 Possible Solution

1. Create a postcss plugin that replaces :hover with a .hover class.
2. Add useHover to all components that support hover effects, and apply this class when the component is hovered. We could also make a helper component to do this by wrapping around an element, similar to <FocusRing>.

🧢 Your Company/Team

RSP

🙋 Documentation Request

In this section, @react-spectrum/button shouldn't be replaced with @adobe/react-spectrum:

https://react-spectrum.adobe.com/react-spectrum/versioning.html#using-individual-packages

https://github.com/adobe/react-spectrum/blob/ff6ad2a/packages/dev/docs/pages/react-spectrum/versioning.mdx#L62-L70

I'd like to implement useSlider() for @react-aria and useSliderState() for @react-stately. I believe the first step is to draft an RFC?

Before I get started, though, if folks from the Spectrum team had already thought about what the API would look like, it'd be very helpful to get a brain dump first!