adopted-ember-addons / adopted-ember-addons/ember-sortable
.visually-hidden class conflicts with bootstrap 5
- 主要言語
- TypeScript
- スター
- 299
- フォーク
- 159
- 平均マージ
- 4日 6時間
- マージ済み PR(30日)
- 4
説明
**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?
コントリビューションガイド
評価
この issue はまだ評価されていません。