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

fix(code-snippet): use Carbon focus outline and reposition scroll bar #5233

Conversation

emyarod
Copy link
Member

@emyarod emyarod commented Jan 31, 2020

Closes #2304
Closes #5219

This PR adds Carbon focus styles to the single line code snippet instead of using the browser default. The component is also repositioned to account for the scroll bar across different platforms

Testing / Reviewing

Ensure that the focus style is visually correct, and that scroll bars look correct on all platforms (including using various scroll bar preferences in macOS System Preferences > General)

@netlify
Copy link

netlify bot commented Jan 31, 2020

Deploy preview for the-carbon-components ready!

Built with commit 5827f26

https://deploy-preview-5233--the-carbon-components.netlify.com

@netlify
Copy link

netlify bot commented Jan 31, 2020

Deploy preview for carbon-components-react failed.

Built with commit 80f4743

https://app.netlify.com/sites/carbon-components-react/deploys/5e38b83345480100084fe307

@netlify
Copy link

netlify bot commented Jan 31, 2020

Deploy preview for carbon-elements ready!

Built with commit 80f4743

https://deploy-preview-5233--carbon-elements.netlify.com

Copy link
Member

@tw15egan tw15egan left a comment

Choose a reason for hiding this comment

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

Tiny nit, other than that it looks great in Chrome / Firefox / Safari with or without scrollbars always enabled.

@emyarod emyarod force-pushed the 2304-focus-outline-single-line-code-snippet branch from 13fa6bb to 5827f26 Compare January 31, 2020 19:25
Copy link
Member

@laurenmrice laurenmrice left a comment

Choose a reason for hiding this comment

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

looks good to me ! 🙌🏻 thanks for figuring this out

Copy link
Contributor

@asudoh asudoh left a comment

Choose a reason for hiding this comment

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

LGTM 👍 - Thanks @emyarod!

@asudoh
Copy link
Contributor

asudoh commented Feb 4, 2020

Got a green light from @emyarod to mark this as "status: ready to merge".

@asudoh asudoh merged commit ac8bcbd into carbon-design-system:master Feb 4, 2020
@emyarod emyarod deleted the 2304-focus-outline-single-line-code-snippet branch February 4, 2020 17:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

React: Code Snippet single line text shifted upward Focus outline on Code Snippet is unstyled
4 participants