adopted-ember-addons / adopted-ember-addons/ember-sortable

.visually-hidden class conflicts with bootstrap 5

Offen
#517 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
good first issue
Vorherrschende Sprache
TypeScript
Sterne
299
Forks
159
Ø Merge
4 T. 6 Std.
Gemergte PRs (30 T.)
4

Beschreibung

**Describe the bug**
Both bootstrap 5 and ember-sortable use a `.visually-hidden` class. This results in styles being applied to an `ember-sortable` element that can cause layout issues. Particularly because the bootstrap class makes the element absolutely positioned.

**To Reproduce**
Add `ember-bootstrap` and `ember-sortable` to a project. Configure `ember-bootstrap` to use boostrap 5 and add a `sortable-group`

This span is added by `ember-sortable`

``

Styles for `.visually-hidden` on the span element are (these all come from bootstrap)

```css
.visually-hidden:not(caption), .visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
position: absolute !important;
}

.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) {
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
```

**Expected behavior**
The span does not have additional styles applied from bootstrap

**Proposal**

I've worked around this in my project by applying more specific styles, however it took me quite some time to track down what was causing a weird behavior in my application so I thought it would help others if this style could be updated to avoid the issue.

I propose renaming `.visually-hidden` to `.ember-sortable-visually-hidden`, The class name does not appear to form any part of an external interface so I think it would be a non-breaking change?

Happy to raise a PR for this if the proposal sounds good?

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.