adobe / adobe/spectrum-web-components

[Bug]: Un-necessary #label-container in the DOM for label-visibility="none"

Open
#3,836 3 comments 0 reactions 0 assignees View on GitHub
bug Component:Slider SEV missing
Dominant language
TypeScript
Stars
1.5k
Forks
262
Avg merge
3d 10h
Merged PRs (30d)
68

Description

### Code of conduct

- [X] I agree to follow this project's code of conduct.

### Impacted component(s)

Slider

### Expected behavior

When user sets `label-visibility=none` on `sp-slider` the element with id `label-container` should not be in the DOM. This is causing the sp-slider to move up with a custom label outside the shadowroot of slider.

### Actual behavior

If `label-visibility=none` then we should not render `

` . This will fix the position of the slider

### Screenshots

UI issue on slider. Slider track is moving up.
Screenshot 2023-11-30 at 1 05 20 PM

### What browsers are you seeing the problem in?

_No response_

### How can we reproduce this issue?

1. Go to https://opensource.adobe.com/spectrum-web-components/storybook/index.html?path=/story/slider--no-visible-labels
2. Open dev tools
3. See `

` is still there which is causing the slider to move up.

### Sample code that illustrates the problem

```
private renderLabel(): TemplateResult {
const textLabelVisible =
this.labelVisibility === 'none' || this.labelVisibility === 'value';
const valueLabelVisible =
this.labelVisibility === 'none' || this.labelVisibility === 'text';
return html`



${this.slotHasContent ? nothing : this.label}
${this.label}



${this.ariaValueText}



`;
}

```

### Logs taken while reproducing problem

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the Slider component's renderLabel() implementation shown in the issue and reproduce the no-visible-labels Storybook example. Verify that setting label-visibility="none" removes label-container from the DOM and that the slider track no longer moves upward.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.