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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ActionList] Remove focus ring on click #3649 #4034

Merged
merged 3 commits into from
Mar 8, 2021

Conversation

happykoder
Copy link
Contributor

WHY are these changes introduced?

Fixes #3649

WHAT is this pull request doing?

Applied the same approach used on Polaris Button component.

How to 馃帺

馃枼 Local development instructions
馃棐 General tophatting guidelines
馃搫 Changelog guidelines

ActionList.focus-ring.demo.mov

馃帺 checklist

  • Tested on mobile
  • Tested on multiple browsers
  • Tested for accessibility
  • Updated the component's README.md with documentation changes
  • Tophatted documentation changes in the style guide
  • For visual design changes, pinged one of @鈥奌YPD, @鈥妋irualves, @鈥妔arahill, or @鈥妑y5n to update the Polaris UI kit

@ghost
Copy link

ghost commented Mar 4, 2021

馃憢 Thanks for opening your first pull request. A contributor should give feedback soon. If you haven鈥檛 already, please check out the contributing guidelines.

@github-actions
Copy link
Contributor

github-actions bot commented Mar 4, 2021

馃煛 This pull request modifies 4 files and might impact 59 other files. This is an average splash zone for a change, remember to tophat areas that could be affected.

Details:
All files potentially affected (total: 59)
馃搫 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

馃帹 src/components/ActionList/ActionList.scss (total: 58)

Files potentially affected (total: 58)

馃З src/components/ActionList/components/Item/Item.tsx (total: 59)

Files potentially affected (total: 59)

馃З src/components/ActionList/components/Item/tests/Item.test.tsx (total: 0)

Files potentially affected (total: 0)

Copy link
Contributor

@kyledurand kyledurand left a comment

Choose a reason for hiding this comment

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

A couple odd things I think need to be left out of this PR

src/components/Popover/Popover.scss Outdated Show resolved Hide resolved
Copy link
Contributor

@kyledurand kyledurand left a comment

Choose a reason for hiding this comment

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

Getting closer!

Because these elements have changed to inline (thanks for doing this btw) it breaks the layout of action list items with helper text

image

Should look like

image

So we'll need to add some css i.e. display: block to these spans that were changed in order to preserve this layout.

update unrelease.md
happykoder and others added 2 commits March 5, 2021 21:13
Co-authored-by: Kyle Durand <kyledurand@users.noreply.github.com>
Copy link
Contributor

@dleroux dleroux left a comment

Choose a reason for hiding this comment

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

Thanks for doing this and following through @skrabakl-shopify!

Copy link
Contributor

@kyledurand kyledurand left a comment

Choose a reason for hiding this comment

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

馃帀 This looks great, thank you @skrabakl-shopify !

@happykoder
Copy link
Contributor Author

happykoder commented Mar 8, 2021

Awesome!

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.

[ActionList] focus-ring shows on click
3 participants