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(NcRichContenteditable): unify styles and add contrast border on keyboard navigation #5214

Conversation

ShGKme
Copy link
Contributor

@ShGKme ShGKme commented Feb 5, 2024

☑️ Resolves

Adds a contrast outline border for keyboard navigation only.

Also, unifies styles in different autocompletes with NcActions and NcSelect components.

Previously, there were no "general" styles for the tribute container and items. Different autocompletes had a bit different styles on always individual classes. Now:

  • There are common classes and structure is always:
    div.tribute-container (+ additional custom .tribute-container-NAME)
      ul
        li.tribute-container__item (+ .highlight + .tribute-container-NAME__item)
          div.tribute-item
            <custom content>
    
  • An autocomplete item now:
    • Always has padding
    • Always has border radius
    • Always has hover background color same as NcSelect or NcActions

🖼️ Screenshots

🏚️ Before 🏡 After
image image
image image
before-outline-autocomplete after-outline-autocomplete
before-outline-emoji after-outline-emoji

image

🏁 Checklist

  • ⛑️ Tests are included or are not applicable
  • 📘 Component documentation has been extended, updated or is not applicable

@ShGKme ShGKme self-assigned this Feb 5, 2024
@ShGKme ShGKme added bug Something isn't working 3. to review Waiting for reviews accessibility Making sure we design for the widest range of people possible, including those who have disabilities feature: rich-contenteditable Related to the rich-contenteditable components labels Feb 5, 2024
@ShGKme ShGKme added this to the 8.6.2 milestone Feb 5, 2024
@ShGKme ShGKme force-pushed the fix/nc-richcontenteditable--autocomplete-contrast branch 3 times, most recently from d5e9506 to 78c98a8 Compare February 5, 2024 17:42
@ShGKme ShGKme force-pushed the fix/nc-richcontenteditable--autocomplete-contrast branch from 78c98a8 to 28187f0 Compare February 5, 2024 19:39
@ShGKme ShGKme requested a review from a team February 5, 2024 19:53
@ShGKme ShGKme force-pushed the fix/nc-richcontenteditable--autocomplete-contrast branch from 28187f0 to 8229e88 Compare February 5, 2024 19:53
…eyboard

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
@ShGKme ShGKme force-pushed the fix/nc-richcontenteditable--autocomplete-contrast branch from 8229e88 to f6555e2 Compare February 5, 2024 19:55
@ShGKme ShGKme marked this pull request as ready for review February 5, 2024 19:56
@JuliaKirschenheuter JuliaKirschenheuter merged commit 1c6aaf0 into master Feb 5, 2024
19 checks passed
@JuliaKirschenheuter JuliaKirschenheuter deleted the fix/nc-richcontenteditable--autocomplete-contrast branch February 5, 2024 20:21
@ShGKme ShGKme changed the title fix(NcRichContenteditable): unify styles and add contrast border on keyboard navigation fix(NcRichContenteditable): unify styles and add contrast border on keyboard navigation Feb 7, 2024
@ShGKme ShGKme mentioned this pull request Feb 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
3. to review Waiting for reviews accessibility Making sure we design for the widest range of people possible, including those who have disabilities bug Something isn't working feature: rich-contenteditable Related to the rich-contenteditable components
Projects
None yet
3 participants