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 blurry breadcrumb text #959

Merged
merged 3 commits into from
Aug 14, 2023

Conversation

BSFishy
Copy link
Contributor

@BSFishy BSFishy commented Aug 10, 2023

Description

Fix blurry text in breadcrumbs by using :before pseudoelement. Also took this opportunity to make breadcrumb colors come from theme. All accessibility checks pass.

Current light
Screenshot (115)

Current dark
Screenshot (116)

Next light
Screenshot (117)

Next dark
Screenshot (118)

Issues Resolved

Mostly/completely fixes #902

Check List

  • New functionality includes testing.
  • New functionality has been documented.
  • All tests pass
    • yarn lint
    • yarn test-unit
  • Update CHANGELOG.md
  • Commits are signed per the DCO using --signoff

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

For more information on following Developer Certificate of Origin and signing off your commits, please check here.

Signed-off-by: Matt Provost <provomat@amazon.com>
Signed-off-by: Matt Provost <provomat@amazon.com>
src/components/breadcrumbs/_breadcrumbs.scss Show resolved Hide resolved
font-weight: $ouiFontWeightMedium;
}

.ouiBreadcrumb--collapsed {
flex-shrink: 0;
color: $ouiBreadcrumbCollapsedLink;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

More link finagling (#624)

@KrooshalUX
Copy link
Contributor

KrooshalUX commented Aug 10, 2023

This looks much better, and thanks for taking a pass at using 'primary' color for the breadcrumb treatment!

I am wondering if #938 will help improve the presentation even further?

One note I have is that the keyboard highlight is very tight around the text in the collapsed state - however I don't consider this a blocker to the PR for these reasons:

  • the application is flat enough currently that we don't encounter the use of the collapsed state (noting the exception of small screens)
  • This is how it presents in Current
  • we need to revisit the keyboard highlight approach overall

@BSFishy
Copy link
Contributor Author

BSFishy commented Aug 10, 2023

I am wondering if #938 will help improve the presentation even further?

I don't think so. The only place where $ouiTextColorSubdued is used, it is modified to be accessible:

$ouiBreadcrumbTextColor: makeHighContrastColor($ouiTextSubduedColor, $ouiBreadcrumbGrayBackground) !default;

Copy link
Member

@joshuarrrr joshuarrrr left a comment

Choose a reason for hiding this comment

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

Awesome @BSFishy , looks like a great fix! I just have some minor suggestions about variable names.

src/components/breadcrumbs/_breadcrumbs.scss Show resolved Hide resolved
CHANGELOG.md Outdated
@@ -15,6 +15,8 @@

### 🐛 Bug Fixes

- Fix blurry text in breadcrumbs ([#959](https://github.com/opensearch-project/oui/pull/959))
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
- Fix blurry text in breadcrumbs ([#959](https://github.com/opensearch-project/oui/pull/959))
- Fix blurry text in breadcrumbs by avoiding skewing text ([#959](https://github.com/opensearch-project/oui/pull/959))

src/components/breadcrumbs/_variables.scss Outdated Show resolved Hide resolved
src/components/breadcrumbs/_variables.scss Outdated Show resolved Hide resolved
src/components/breadcrumbs/_breadcrumbs.scss Show resolved Hide resolved
Signed-off-by: Matt Provost <provomat@amazon.com>
@joshuarrrr joshuarrrr merged commit fe979c3 into opensearch-project:main Aug 14, 2023
opensearch-trigger-bot bot pushed a commit that referenced this pull request Aug 14, 2023
* Fix blurry breadcrumb text

Signed-off-by: Matt Provost <provomat@amazon.com>

* Update changelog

Signed-off-by: Matt Provost <provomat@amazon.com>

* Address reviews

Signed-off-by: Matt Provost <provomat@amazon.com>

---------

Signed-off-by: Matt Provost <provomat@amazon.com>
(cherry picked from commit fe979c3)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

# Conflicts:
#	CHANGELOG.md
@BSFishy BSFishy deleted the breadcrumb/fix_blur branch August 14, 2023 17:44
joshuarrrr pushed a commit that referenced this pull request Aug 14, 2023
* Fix blurry breadcrumb text

Signed-off-by: Matt Provost <provomat@amazon.com>

* Update changelog

Signed-off-by: Matt Provost <provomat@amazon.com>

* Address reviews

Signed-off-by: Matt Provost <provomat@amazon.com>

---------

Signed-off-by: Matt Provost <provomat@amazon.com>
(cherry picked from commit fe979c3)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

# Conflicts:
#	CHANGELOG.md

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
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.

Update OuiBreadcrumb
4 participants