Fix missing active state for outline buttons

[theodorejb]

Description

Previously there was no visual feedback when clicking an outline button, which made them feel somewhat buggy/broken. This pull request adds an active state to outline buttons so they respond similarly to other buttons when selected.

It also updates the hover state for outline buttons to match that of regular buttons. Previously if an outline button was next to a regular button, when hovered it looked the same as the non-hovered regular button which could cause confusion.

Type of changes

• Bug fix (non-breaking change which fixes an issue)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have added tests to cover my changes
• All existing tests passed

Live previews

• https://deploy-preview-39099--twbs-bootstrap.netlify.app/docs/5.3/components/buttons/#outline-buttons

Related issues

Resolves #39085

[xeron]

Please test with the following:

<button type="button" class="btn btn-outline-light active" data-bs-toggle="button" aria-pressed="true">Light</button>

I tried your fix and it doesn't look correct – active button state is shaded which doesn't match normal button where hover is shaded. I think hover supposed to be shaded like in usual button, not active-background?

[xeron]

NVM I just realized normal button active state is shaded too 🤦

[xeron]

Another issue to think about is mobile devices behavior – this fix makes inactive hovered button brighter then active which helps a bit, but it's still confusing to the end user as they're not sure if state actually changed or not because button doesn't look like inactive one (because it's stays hovered until user taps something else).

[theodorejb]

@xeron I'm not sure what you you're referring to as confusing; I tested on mobile and it seems to work as expected. This patch doesn't affect hover state - it only adds the missing active state (matching the active state of regular buttons).

Edit: it's true that the hover state doesn't have the shade that it does on regular buttons, but my understanding is that this has always been the case and is the intended design for outline buttons. I think a change to the hover color would require a separate discussion and merge request.

[xeron]

What's confusing on mobile is after clicking the button it stays highlighted because of the sticky hover effect:

https://codepen.io/iXeron/pen/xxmGazY

https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/

I posted possible solution in my bug report comments:

@media (hover: none) {
  .btn-outline-light:hover {
    color: $gray-100;
    background-color: transparent;
  }
  .btn-outline-light.active:hover {
    color: #000;
    background-color: $gray-100;
  }
}

I agree it probably needs a separate design discussion but it also was part of my bug report as toggle buttons are barely usable on mobile because of that.

[theodorejb]

What's confusing on mobile is after clicking the button it stays highlighted because of the sticky hover effect

I see. Note that regular buttons have this sticky-hover behavior on mobile too, so it's not something specific to outline buttons (nor is it affected by this pull request).

My goal with this patch is to specifically address the missing active state on outline buttons, and not change anything else. As you said the sticky-hover effect may warrant a separate design discussion.

[theodorejb]

@mdo Is there any chance this fix could be included in 5.3.2?

CC @julien-deramond

[julien-deramond]

@theodorejb The content of the v5.3.2 is now fixed in order to release the patch regarding Dart Sass really soon. The next version will prolly be v5.3.3. I'll integrate the review of this PR for this v5.3.3.

We haven't checked yet if the issue is something we'd like to provide in Bootstrap, so we'll try to check the suggestion in the issue and your corresponding PR.

[theodorejb]

I added a second commit which updates the outline button hover color to match that of regular buttons. Previously the hover state was the same as the non-hover state of regular buttons, which could cause confusion when hovering an outline button placed next to a non-outline button. This also improves the active state appearance since it no longer looks too dark in comparison to the hover color.