Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/ins-2070-bug-updowntabshifttab-not-working #5615

Merged

Conversation

pavkout
Copy link
Contributor

@pavkout pavkout commented Jan 5, 2023

changelog(Improvements): Overall improvements to dropdowns for better maintainability, keyboard navigation, and accessibility (Note: Search was removed from some dropdowns. If this was critical for you, create a feature request on our Github Issues specifying your use-case).

Redesign and refactor existing dropdown component

Highlights

  • Refactored the existing dropdown components used react-aria components
  • Replaced all usage with new dropdown component
  • Fixed issue INS-943

Supported features

  • Exposed to assistive technology as a button with a menu using ARIA
  • Support for single, multiple, or no selection
  • Support for disabled items
  • Support for sections
  • Complex item labeling support for accessibility
  • Keyboard navigation support including arrow keys, home/end, page up/down
  • Automatic scrolling support during keyboard navigation
  • Keyboard support for opening the menu using the arrow keys, including automatically focusing the first or last item accordingly
  • Typeahead to allow focusing items by typing text
  • Virtualized scrolling support for performance with long lists

Currently supported behavior

  • When user click the item from the dropdown close the dropdown immediately
  • When user click the item from the dropdown should remain open
    1. In case the dropdown item is a prompt button the user have to press the button a second time to confirm

      Screenshot 2023-01-16 at 15 37 55
    2. In case of any async call when user press a dropdown item

    3. In case we have inputs like this ***

      Screenshot 2023-01-16 at 15 45 41

*** In this cases there is another one react aria component (useGridList) that we can use and in this way to simplify the logic and separate these two logics

Improvements

  • Currently we used dropdown-button component which is a wrapper of themed-button component with some extra style, in the future we can replace this dropdown-button with the themed-button and move the styles there.

  • Currently we have tree kind of selected styles, it will be good to choose one of these types and to have the same selected style for the whole app.

    1. Display the selected items with different background color and with bold font weight
    2. Display a checkmark in the right side of the dropdown item
    3. Display a checkmark in the left side of the dropdown item
  • Currently we have two sort dropdown, it will be better to follow the same style (see photos)

    Screenshot 2023-01-16 at 15 31 47 Screenshot 2023-01-16 at 15 32 35

@pavkout pavkout requested review from gatzjames, jackkav and a team January 5, 2023 14:27
@gatzjames gatzjames force-pushed the feature/ins-2070-bug-updowntabshifttab-not-working branch from c099a4d to e703e7f Compare January 9, 2023 10:19
const ref = useRef<HTMLLIElement>(null);

// @ts-expect-error -- TSCONVERSION
const withPrompt = item.rendered?.props?.withPrompt || undefined;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a workaround in order to get some props from the children since the children cannot been interactive

See the link

Also the github issue

@pavkout pavkout force-pushed the feature/ins-2070-bug-updowntabshifttab-not-working branch 2 times, most recently from 6baaca2 to 45ad2fd Compare January 18, 2023 11:41
@@ -7,82 +7,82 @@ test.describe('Debug-Sidebar', async () => {
test.slow(process.platform === 'darwin' || process.platform === 'win32', 'Slow app start on these platforms');
test.beforeEach(async ({ app, page }) => {
await page.click('[data-testid="project"] >> text=Insomnia');
await page.click('text=Create');
await page.getByRole('button', { name: 'Create' }).click();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❤️

@pavkout pavkout requested a review from filfreire January 18, 2023 17:01
@pavkout pavkout self-assigned this Jan 19, 2023
@pavkout pavkout marked this pull request as ready for review January 19, 2023 09:04
Copy link
Member

@filfreire filfreire left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎖️ 🎸

@pavkout pavkout force-pushed the feature/ins-2070-bug-updowntabshifttab-not-working branch from e66d8d2 to c26a15c Compare January 19, 2023 10:55
@pavkout pavkout force-pushed the feature/ins-2070-bug-updowntabshifttab-not-working branch from ea61cac to 0edad8f Compare January 20, 2023 12:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants