adobe / adobe/spectrum-web-components

[Bug]: sp-button label still appears when visibility is set to hidden

Open
#5,121 2 comments 0 reactions 0 assignees View on GitHub
bug Component:Button 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)

sp-button

### Expected behavior

If I set the css `visibility: hidden` on a component, it should hide. We sometimes use this technique when controls that can be hidden/shown would affect layout if they were removed. We noticed a regression when updating from 0.40.3 to 1.1.1 due to this change.

### Actual behavior

The label still appears on Chrome/Safari (on Firefox it's still hidden). It looks like the label has an explicit `visibility: visible` css directive.

### Screenshots

Image

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

Chrome, Safari

### How can we reproduce this issue?

1. Go to [the sp-button doc page](https://opensource.adobe.com/spectrum-web-components/components/button/)
2. Override the css for a button to add `visibility: hidden;`

### Sample code or abstract reproduction which illustrates the problem

_No response_

### Severity

None

### Logs taken while reproducing problem

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the sp-button component and reproduce the issue on the linked sp-button documentation page by applying visibility: hidden. Compare the Chrome and Safari result with Firefox, then verify that the label is hidden while the button's layout space remains; no specific test or source file is named in the issue.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.