v4: Miscellaneous states, flexbox, and docs cleanup #21459
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- No need to set hover and focus on disabled or active elements. Disabled has no interactivity and active will inherit the focus. - Also removes two now unused vars.
- Removes the plain-hover-focus mixin from active and disabled states; no need for them. - Adds :active and :disabled since we can use button elements here, too. - Wrap the disabled background-image override in an -gradients condition.
- Overhauls the states, including the link/button variants, for list groups to better match how we handle .btn states. - Moved the .list-group-item-action styles before the .list-group-item so that we don't have to do as much overriding. - Removed the plain-hover-focus mixins from the disabled and active states since they're unnecessary. - Added support for :active states on the .list-group-item-action variant (for the current click state). - Removed the heading and text classes and variables since we can accomplish the same thing with utilities. - Added support for :disabled on the .list-group-item-action as well since we can use those with button elements. - Rearranged docs to reflect all the above changes. - Reformatted some Sass variables.
this, coupled with the move to flex, fixes #20029
frees us up to not have to encourage so much markup throughout these pagination examples
- remove screen reader stuff in favor of explicit labels - remove 4 and 5 items to keep examples simpler
Closed
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This started out as a general cleanup of our pseudo-classes (to simplify our CSS output), but quickly turned into a smorgasbord of commits. At a high level, this affects navs, navbars, pagination, and list groups, but here's a small rundown of the highlights:
Removes
plain-hover-focusmixins from navs, navbar navs, pagination, and list groups. As noted in v4: Simplify button states #21439, these things often don't need to be reset for the active/disabled states. This really helps to reduce the compiled CSS selectors.Overhauls the list group a bit to provide better docs, improve Sass variable indentation, cleans up some styles for lighter output.
Updates pagination to use flexbox instead of floats and what not. Fixes Pagination .page-item doesn't visually contain the .page-link links #20029 in the process.
Revamps pagination docs to include simpler examples, incorporate accessibility notes into the core of the docs instead of as callouts, and provide examples of using flex alignment.
Fixes some instances of
.openwhich was recently changed to.showfor toggling dropdowns.My biggest question in this is, do still need these hover mixins for this stuff? @cvrebertc, hoping we can perhaps delete the
plain-hover-focusone since that should be shied away from anyway.