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

.visually-hidden class conflicts with bootstrap 5

オープン
#517 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
good first issue
主要言語
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 はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。