Skip to content

Extending danger button styling #1280

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
loiswells97 merged 4 commits into from
Dec 5, 2025
Merged

Extending danger button styling #1280

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2733140
extending danger button styling
loiswells97 Dec 5, 2025
cf74db0
tweaking light mode hover state and adding actice states
loiswells97 Dec 5, 2025
4eaf593
remove btn--underline styles since not used
loiswells97 Dec 5, 2025
e473d10
updating changelog
loiswells97 Dec 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),

## Unreleased

### Added

- Tertiary danger button styles (#1280)

### Fixed

- Plugin sidebar panel rerendering (#1279)
Expand Down
17 changes: 17 additions & 0 deletions src/assets/stylesheets/Button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,6 +227,23 @@
border: 2px solid transparent;
outline: 3px solid $rpf-brand-raspberry;
}

&.btn--tertiary {
background-color: inherit;
color: var(--rpf-button-tertiary-danger-text-color);

svg {
fill: var(--rpf-button-tertiary-danger-text-color);
}

&:hover {
background-color: var(--rpf-button-tertiary-danger-background-color-hover);
}

&:active {
background-color: var(--rpf-button-tertiary-danger-background-color-active);
}
Comment on lines +239 to +245
Copy link

Copilot AI Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The tertiary danger button implementation is missing several important interactive states that are present in other button variants:

  1. Missing :focus-visible state: Other button variants (primary, secondary, tertiary, and danger) all have :focus-visible styles. The tertiary danger button should also handle focus visibility for accessibility.

  2. Missing :disabled state: The base tertiary button (lines 156-168) includes a :disabled state with specific styling. The tertiary danger button should also handle the disabled state.

  3. Missing .btn-outer wrapper selectors: Other button states use both direct pseudo-classes (e.g., &:hover) and wrapper-based selectors (e.g., .btn-outer:hover &) for hover, active, and focus-visible states. The tertiary danger button should follow this same pattern for consistency.

Consider adding these missing states to ensure consistent behavior with other button variants.

Suggested change
&:hover {
background-color: var(--rpf-button-tertiary-danger-background-color-hover);
}
&:active {
background-color: var(--rpf-button-tertiary-danger-background-color-active);
}
// Hover states
&:hover,
.btn-outer:hover & {
background-color: var(--rpf-button-tertiary-danger-background-color-hover);
}
// Active states
&:active,
.btn-outer:active & {
background-color: var(--rpf-button-tertiary-danger-background-color-active);
}
// Focus-visible states
&:focus-visible,
.btn-outer:focus-visible & {
background-clip: padding-box;
border: 2px solid transparent;
outline: 3px solid $rpf-brand-raspberry;
}
// Disabled states
&:disabled {
background-color: inherit;
color: var(--rpf-button-tertiary-danger-text-color);
cursor: default;
svg {
fill: var(--rpf-button-tertiary-danger-text-color);
}
&:hover,
.btn-outer:hover & {
background-color: inherit;
}
}

Copilot uses AI. Check for mistakes.
Copy link
Contributor Author

@loiswells97 loiswells97 Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're using the default focus state for this. We have no use case currently for disabling this and we're not using btn-outer here, so there's no need to add these, and they can be included at a future date if the need arises.

}
}

&--small {
Expand Down
8 changes: 8 additions & 0 deletions src/assets/stylesheets/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,10 @@ code {
--rpf-button-secondary-text-color: var(--rpf-white);

--rpf-button-tertiary-text-color-hover: var(--rpf-grey-200);

--rpf-button-tertiary-danger-text-color: var(--rpf-red-600);
--rpf-button-tertiary-danger-background-color-hover: rgba(255, 255, 255, 0.1);
--rpf-button-tertiary-danger-background-color-active: rgba(255, 255, 255, 0.15);
}

.rpf-button--secondary {
Expand Down Expand Up @@ -123,6 +127,10 @@ code {

--rpf-button-tertiary-text-color-hover: var(--rpf-grey-600);

--rpf-button-tertiary-danger-text-color: var(--rpf-alert-error);
--rpf-button-tertiary-danger-background-color-hover: rgba(0, 0, 0, 0.03);
--rpf-button-tertiary-danger-background-color-active: rgba(0, 0, 0, 0.05);

.rpf-button--secondary {
border-color: var(--rpf-teal-800);
}
Expand Down
Loading