Skip to content
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

fix(accordion): hover colors #2068

Merged
merged 12 commits into from
Dec 9, 2024
Merged

fix(accordion): hover colors #2068

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
1aa630e
fix(accordion): hover colors
bennypowers Nov 26, 2024
90f64cd
fix(accordion): hover states
bennypowers Dec 1, 2024
09cbb3b
fix(accordion): panel border regression
bennypowers Dec 1, 2024
6acdf2d
fix(context): ssr hydration workaround
bennypowers Dec 4, 2024
b85a76f
style(accordion): decruft
bennypowers Dec 4, 2024
c0f23c8
style: whitespace
bennypowers Dec 4, 2024
6e60ec3
fix(context): only workaround when hydrating
bennypowers Dec 4, 2024
add160d
Merge branch 'main' into fix/accordion/heading-hover
bennypowers Dec 4, 2024
c4a9629
Merge branch 'main' into fix/accordion/heading-hover
bennypowers Dec 5, 2024
3d3f330
Merge branch 'main' into fix/accordion/heading-hover
bennypowers Dec 9, 2024
08ccecc
fix(context): late hydration
bennypowers Dec 9, 2024
8ec2cc4
fix(accordion): apply hover styles to focus and active
bennypowers Dec 9, 2024
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 .changeset/lazy-ants-cough.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
---
"@rhds/elements": patch
---
`<rh-accordion>`: restore missing hover colors
131 changes: 64 additions & 67 deletions elements/rh-accordion/rh-accordion-header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
--_padding-inline-end: var(--rh-space-xl, 24px);
--_padding-block-end: var(--rh-space-lg, 16px);
--_padding-inline-start: var(--rh-space-xl, 24px);
--_active-text-color: var(--rh-color-text-primary);
--_font-size: var(--rh-font-size-body-text-lg, 1.125rem);
--_after-background-color: transparent;
--_expanded-background-color: var(--rh-color-accent-brand);
Expand Down Expand Up @@ -48,19 +47,18 @@ a {
border-inline-start-color: var(--rh-color-border-subtle);
}

#button,
#button:before,
#button:after {
background-color: var(--rh-color-surface);
}

#icon {
width: 16px;
height: 16px;
will-change: rotate;
transition: rotate 0.2s ease-in 0s;
}

span {
overflow: hidden;
text-align: start;
}

#button {
width: 100%;
padding:
Expand All @@ -71,36 +69,63 @@ a {
font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif);
font-size: var(--_font-size);
color: var(--rh-color-text-primary);
}

#button #icon {
fill: currentcolor;
}
& #icon {
fill: currentcolor;
}

#button:after {
inset-block-start: -1px;
width: var(--rh-border-width-lg, 3px);
background-color: var(--_after-background-color);
}
&:hover.light { background-color: var(--rh-color-surface-lighter); }
&:hover.dark { background-color: var(--rh-color-surface-dark-alt); }

span {
overflow: hidden;
text-align: start;
}
&:active,
&:focus {
background-color: var(--rh-color-surface);
}

[part='container'] {
display: flex;
gap: var(--rh-space-xl, 24px);
container-type: inline-size;
&:hover,
&:focus,
&:active {
& span {
color: var(--rh-color-text-primary);
}
}

&,
&:before,
&:after {
background-color: var(--rh-color-surface);
}

&:after {
inset-block-start: -1px;
width: var(--rh-border-width-lg, 3px);
background-color: var(--_after-background-color);
}

&.expanded {
--_after-background-color: var(--rh-color-accent-brand);

& #icon {
rotate: calc(var(--_isRTL, -1) * 180deg);
}

&.on.light {
--rh-color-surface: var(--rh-color-surface-lightest, #ffffff);
}

&.on.dark {
--rh-color-surface: var(--rh-color-surface-darkest, #151515);
}
}
}

#header-container {
display: flex;
gap: var(--rh-space-md, 8px);
}

#header-container.bottom {
flex-direction: column;
&.bottom {
flex-direction: column;
}
}

#header-text {
Expand All @@ -113,54 +138,26 @@ span {
gap: var(--rh-space-md, 8px);
}

.expanded #button {
--_after-background-color: var(--rh-color-accent-brand);
}

.expanded #button #icon {
rotate: calc(var(--_isRTL, -1) * 180deg);
}

#button:hover,
#button:active,
#button:focus {
background-color: var(--rh-color-surface);
}

#button:hover span,
#button:focus span,
#button:active span {
color: var(--_active-text-color);
}

.toggle,
.toggle:before,
.toggle:after {
padding: 0;
margin: 0;
}

.toggle {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
border: 0;
}

.toggle:after {
content: '';
position: absolute;
inset-block: 0;
inset-inline-start: 0;
}

.expanded.on.light {
--rh-color-surface: var(--rh-color-surface-lightest, #ffffff);
}
&,
&:before,
&:after {
padding: 0;
margin: 0;
}

.expanded.on.dark {
--rh-color-surface: var(--rh-color-surface-darkest, #151515);
&:after {
content: '';
position: absolute;
inset-block: 0;
inset-inline-start: 0;
}
}

@container (min-width: 576px) {
Expand Down
32 changes: 15 additions & 17 deletions elements/rh-accordion/rh-accordion-header.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,26 +81,24 @@ export class RhAccordionHeader extends LitElement {
}

render() {
const { expanded, on = '' } = this;
const { expanded, on = 'light' } = this;
const { accents, large = false } = this.ctx ?? {};
const rtl = this.#dir.dir === 'rtl';
return html`
<div id="container" class="${classMap({ on: true, [on]: !!on, rtl, large, expanded })}">
<button id="button"
class="toggle"
@click="${this.#onClick}">
<span id="header-container" class="${classMap({ [accents ?? '']: !!accents })}">
<span id="header-text" part="text"><slot></slot></span>
<span part="accents"><slot name="accents"></slot></span>
</span>
<svg id="icon"
role="presentation"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512">
<path d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/>
</svg>
</button>
</div>
<button id="button"
class="${classMap({ on: true, toggle: true, [on]: !!on, rtl, large, expanded })}"
@click="${this.#onClick}">
<span id="header-container" class="${classMap({ [accents ?? '']: !!accents })}">
<span id="header-text" part="text"><slot></slot></span>
<span part="accents"><slot name="accents"></slot></span>
</span>
<svg id="icon"
role="presentation"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512">
<path d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/>
</svg>
</button>
`;
}

Expand Down
8 changes: 6 additions & 2 deletions elements/rh-accordion/rh-accordion.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,11 +153,15 @@ export class RhAccordion extends LitElement {
}

override render(): TemplateResult {
const { on = 'light' } = this;
const { on } = this;
const expanded = this.#expanded;
return html`
<div id="container"
class="${classMap({ on: true, [on]: true, expanded })}"><slot></slot></div>
class="${classMap({
on: true,
[on ?? 'light']: true,
expanded,
})}"><slot></slot></div>
`;
}

Expand Down