Skip to content

Commit faee9bf

Browse files
kensternberg-authentikkensternberg-authentik
committed
Hint has been updated, modernized, fixed and generally improved.
1 parent 62d69fd commit faee9bf

File tree

6 files changed

+289
-259
lines changed

6 files changed

+289
-259
lines changed

‎src/ak-hint/ak-hint.builder.ts‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
import type { ElementRest } from "../types.js";
2-
import { Hint } from "./ak-hint.component.js";
2+
import { Hint, type HintVariant } from "./ak-hint.component.js";
33

44
import { spread } from "@open-wc/lit-helpers";
55

6-
import { html, TemplateResult } from "lit";
6+
import { html, nothing, TemplateResult } from "lit";
7+
import { ifDefined } from "lit/directives/if-defined.js";
78

89
export type HintProps = ElementRest & {
10+
variant?: HintVariant;
11+
// Must be named "hint"; although it's called "title" everywhere else, "title" as a field name
12+
// conflicts with HTMLElement.title by type.
913
hint?: string | TemplateResult;
1014
footer?: string | TemplateResult;
1115
body?: string | TemplateResult;
@@ -20,13 +24,13 @@ export type HintProps = ElementRest & {
2024
*/
2125

2226
export function akHint(options: HintProps = {}) {
23-
const { hint, body, footer, ...rest } = options;
27+
const { hint, body, footer, variant, ...rest } = options;
2428

2529
return html`
26-
<ak-hint ${spread(rest)}>
27-
${hint ? html`<h3 slot="title">${hint}</h3>` : ""}
28-
${body ? html`<span>${body}</span>` : ""}
29-
${footer ? html`<footer slot="footer">${footer}</footer>` : ""}
30+
<ak-hint ${spread(rest)} variant=${ifDefined(variant)}>
31+
${hint ? html`<h3 slot="title">${hint}</h3>` : nothing}
32+
${body ? html`<span>${body}</span>` : nothing}
33+
${footer ? html`<footer slot="footer">${footer}</footer>` : nothing}
3034
</ak-hint>
3135
`;
3236
}

‎src/ak-hint/ak-hint.component.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ import styles from "./ak-hint.css";
33

44
import { html, nothing } from "lit";
55

6+
// Used only by the builder, as these have only visual effects
7+
export const hintVariant = ["info", "success", "warning", "danger"] as const;
8+
export type HintVariant = (typeof hintVariant)[number];
9+
610
/**
711
* @element ak-hint
812
*
@@ -14,6 +18,7 @@ import { html, nothing } from "lit";
1418
* @slot title - Optional title header for the hint
1519
* @slot footer - Optional footer content with additional information or actions
1620
*
21+
* @csspart hint - The hint component as a whole
1722
* @csspart title - The title section container
1823
* @csspart body - The main content body container
1924
* @csspart footer - The footer section container
@@ -32,10 +37,33 @@ import { html, nothing } from "lit";
3237
* @cssprop --pf-v5-c-hint__body--FontSize - Font size of the body text
3338
* @cssprop --pf-v5-c-hint__footer--child--MarginRight - Right margin of footer child elements
3439
* @cssprop --pf-v5-c-hint__actions--MarginLeft - Left margin of action elements
40+
* @cssprop --pf-v5-c-hint__actions--MarginLeft - Left margin of action elements
41+
* @cssprop --pf-v5-c-hint__actions--MarginLeft - Left margin of action elements
42+
* @cssprop --pf-v5-c-hint__actions--MarginLeft - Left margin of action elements
43+
* @cssprop --pf-v5-c-hint__actions--MarginLeft - Left margin of action elements
44+
* @cssprop --pf-v5-c-hint__actions--MarginLeft - Left margin of action elements
45+
* @cssprop --pf-v5-c-hint__actions--MarginLeft - Left margin of action elements
46+
* @cssprop --ak-v1-c-hint--m-success--BackgroundColor - Background color for "success" variant
47+
* @cssprop --ak-v1-c-hint--m-success--BorderColor - Border color for "success" variant
48+
* @cssprop --ak-v1-c-hint--m-success__title--Color - Title color for "success" variant
49+
* @cssprop --ak-v1-c-hint--m-warning--BackgroundColor - Background color for "warning" variant
50+
* @cssprop --ak-v1-c-hint--m-warning--BorderColor - Border color for "warning" variant
51+
* @cssprop --ak-v1-c-hint--m-warning__title--Color - Title color for "warning" variant
52+
* @cssprop --ak-v1-c-hint--m-danger--BackgroundColor - Background color for "danger" variant
53+
* @cssprop --ak-v1-c-hint--m-danger--BorderColor - Border color for "danger" variant
54+
* @cssprop --ak-v1-c-hint--m-danger__title--Color - Title color for "danger" variant
55+
* @cssprop
3556
*/
3657
export class Hint extends AkLitElement {
3758
static override readonly styles = [styles];
3859

60+
public override connectedCallback() {
61+
super.connectedCallback();
62+
if (!this.hasAttribute("role")) {
63+
this.setAttribute("role", "note");
64+
}
65+
}
66+
3967
public override render() {
4068
const [hasTitle, hasBody, hasFooter] = ["title", null, "footer"].map((item) =>
4169
this.hasSlotted(item),

‎src/ak-hint/ak-hint.css‎

Lines changed: 42 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,11 @@
99
--hint--BorderWidth: var(--pf-v5-c-hint--BorderWidth, 1px);
1010
--hint--BoxShadow: var(
1111
--pf-v5-c-hint--BoxShadow,
12-
0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12),
13-
0 0 0.125rem 0 rgba(3, 3, 3, 0.06)
12+
0 0.0625rem 0.125rem 0 rgb(3 3 3 / 12%),
13+
0 0 0.125rem 0 rgb(3 3 3 / 6%)
1414
);
1515
--hint--Color: var(--pf-v5-c-hint--Color, #151515);
16+
--hint__title--Color: var(--pf-v5-c-hint--Color, #151515);
1617
--hint__title--FontSize: var(--pf-v5-c-hint__title--FontSize, 1.125rem);
1718
--hint__body--FontSize: var(--pf-v5-c-hint__body--FontSize, 1rem);
1819
--hint__footer--child--MarginRight: var(--pf-v5-c-hint__footer--child--MarginRight, 1rem);
@@ -21,12 +22,25 @@
2122
--pf-v5-c-hint__actions--c-dropdown--MarginTop,
2223
calc(0.375rem * -1)
2324
);
25+
--hint--m-success--BackgroundColor: var(--ak-v1-c-hint--m-success--BackgroundColor, #f3faf2);
26+
--hint--m-success--BorderColor: var(--ak-v1-c-hint--m-success--BorderColor, #3e8635);
27+
--hint--m-success__title--Color: var(--ak-v1-c-hint--m-success__title--Color, #3e8635);
28+
--hint--m-warning--BackgroundColor: var(--ak-v1-c-hint--m-warning--BackgroundColor, #fdf7e7);
29+
--hint--m-warning--BorderColor: var(--ak-v1-c-hint--m-warning--BorderColor, #f4c145);
30+
--hint--m-warning__title--Color: var(--ak-v1-c-hint--m-warning__title--Color, #795600);
31+
--hint--m-danger--BackgroundColor: var(--ak-v1-c-hint--m-danger--BackgroundColor, #faeae8);
32+
--hint--m-danger--BorderColor: var(--ak-v1-c-hint--m-danger--BorderColor, #c9190b);
33+
--hint--m-danger__title--Color: var(--ak-v1-c-hint--m-danger__title--Color, #470000);
34+
}
35+
36+
:host(:not([hidden])) {
37+
display: block;
2438
}
2539

2640
[part="hint"] {
2741
display: grid;
2842
grid-template-columns: 1fr auto;
29-
grid-row-gap: var(--hint--GridRowGap);
43+
row-gap: var(--hint--GridRowGap);
3044
padding-block-start: var(--hint--PaddingTop);
3145
padding-block-end: var(--hint--PaddingBottom);
3246
padding-inline-start: var(--hint--PaddingLeft);
@@ -37,16 +51,35 @@
3751
box-shadow: var(--hint--BoxShadow);
3852
}
3953

40-
[part="title"] ::slotted(*) {
41-
font-size: var(--pf-v5-c-hint__title--FontSize) !important;
54+
:host([variant="success"]) {
55+
--hint--BackgroundColor: var(--hint--m-success--BackgroundColor);
56+
--hint--BorderColor: var(--hint--m-success--BorderColor);
57+
--hint__title--Color: var(--hint--m-success__title--Color);
58+
}
59+
60+
:host([variant="warning"]) {
61+
--hint--BackgroundColor: var(--hint--m-warning--BackgroundColor);
62+
--hint--BorderColor: var(--hint--m-warning--BorderColor);
63+
--hint__title--Color: var(--hint--m-warning__title--Color);
64+
}
65+
66+
:host([variant="danger"]) {
67+
--hint--BackgroundColor: var(--hint--m-danger--BackgroundColor);
68+
--hint--BorderColor: var(--hint--m-danger--BorderColor);
69+
--hint__title--Color: var(--hint--m-danger__title--Color);
70+
}
71+
72+
[part="hint"] > [part="title"] ::slotted(*) {
73+
font-size: var(--hint__title--FontSize);
74+
color: var(--hint__title--Color);
4275
}
4376

44-
[part="body"] ::slotted(*) {
45-
font-size: var(--pf-v5-c-hint__body--FontSize) !important;
77+
[part="hint"] > [part="body"] ::slotted(*) {
78+
font-size: var(--hint__body--FontSize);
4679
}
4780

48-
[name="footer"] ::slotted(*) {
49-
font-size: var(--pf-v5-c-hint__footer--FontSize) !important;
81+
[part="hint"] > [part="footer"] ::slotted(*) {
82+
font-size: var(--hint__footer--FontSize);
5083
}
5184

5285
[part="title"],

‎src/ak-hint/ak-hint.root.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,16 @@
1818
--pf-v5-c-hint__actions--c-dropdown--MarginTop: calc(
1919
var(--pf-v5-global--spacer--form-element) * -1
2020
);
21+
--ak-v1-c-hint__title--Color: var(--pf-v5-global--Color--100);
22+
--ak-v1-c-hint--m-success--BackgroundColor: var(--pf-v5-global--palette--green-50);
23+
--ak-v1-c-hint--m-success--BorderColor: var(--pf-v5-global--success-color--100);
24+
--ak-v1-c-hint--m-success__title--Color: var(--pf-v5-global--success-color--100);
25+
--ak-v1-c-hint--m-warning--BackgroundColor: var(--pf-v5-global--palette--gold-50);
26+
--ak-v1-c-hint--m-warning--BorderColor: var(--pf-v5-global--warning-color--100);
27+
--ak-v1-c-hint--m-warning__title--Color: var(--pf-v5-global--warning-color--200);
28+
--ak-v1-c-hint--m-danger--BackgroundColor: var(--pf-v5-global--palette--red-50);
29+
--ak-v1-c-hint--m-danger--BorderColor: var(--pf-v5-global--danger-color--100);
30+
--ak-v1-c-hint--m-danger__title--Color: var(--pf-v5-global--danger-color--300);
2131
}
2232

2333
.pf-v5-theme-dark,

‎src/ak-hint/ak-hint.stories.ts‎

Lines changed: 6 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -396,97 +396,31 @@ export const ThemeVariants: Story = {
396396
parameters: {
397397
docs: {
398398
description: {
399-
story: "Practical theme variants using CSS parts that could be part of a design system.",
399+
story: "Theme variants",
400400
},
401401
},
402402
},
403403
render: () => html`
404-
<style>
405-
/* Success theme */
406-
.hint-success::part(hint) {
407-
background: #f0fdf4;
408-
border-color: #22c55e;
409-
border-left: 4px solid #22c55e;
410-
border-radius: 0 6px 6px 0;
411-
}
412-
413-
.hint-success::part(title) {
414-
color: #15803d;
415-
}
416-
417-
.hint-success::part(body) {
418-
color: #166534;
419-
}
420-
421-
/* Warning theme */
422-
.hint-warning::part(hint) {
423-
background: #fefce8;
424-
border-color: #eab308;
425-
border-left: 4px solid #eab308;
426-
border-radius: 0 6px 6px 0;
427-
}
428-
429-
.hint-warning::part(title) {
430-
color: #a16207;
431-
}
432-
433-
.hint-warning::part(body) {
434-
color: #854d0e;
435-
}
436-
437-
/* Info theme */
438-
.hint-info::part(hint) {
439-
background: #f0f9ff;
440-
border-color: #3b82f6;
441-
border-left: 4px solid #3b82f6;
442-
border-radius: 0 6px 6px 0;
443-
}
444-
445-
.hint-info::part(title) {
446-
color: #1d4ed8;
447-
}
448-
449-
.hint-info::part(body) {
450-
color: #1e40af;
451-
}
452-
453-
/* Danger theme */
454-
.hint-danger::part(hint) {
455-
background: #fef2f2;
456-
border-color: #ef4444;
457-
border-left: 4px solid #ef4444;
458-
border-radius: 0 6px 6px 0;
459-
}
460-
461-
.hint-danger::part(title) {
462-
color: #dc2626;
463-
}
464-
465-
.hint-danger::part(body) {
466-
color: #b91c1c;
467-
}
468-
</style>
469-
470404
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
471-
<ak-hint class="hint-success">
405+
<ak-hint variant="success">
472406
<div slot="title">✅ Success</div>
473407
<p>I am fully operational!</p>
474408
<div slot="footer">Everything is going according to plan.</div>
475409
</ak-hint>
476410
477-
<ak-hint class="hint-warning">
411+
<ak-hint variant="warning">
478412
<div slot="title">⚠️ Warning</div>
479413
<p>I'm sorry, Dave</p>
480414
<div slot="footer">I'm afraid I can't do that.</div>
481415
</ak-hint>
482416
483-
<ak-hint class="hint-info">
484-
<div slot="title">ℹ️ Information</div>
417+
<ak-hint>
418+
<div slot="title">ℹ️ Information (default)</div>
485419
<p>Here's some helpful information about this feature.</p>
486420
<div slot="footer">Knowing more won't save you...</div>
487421
</ak-hint>
488422
489-
<ak-hint class="hint-danger">
423+
<ak-hint variant="danger">
490424
<div slot="title">🚨 Important</div>
491425
<p>This action cannot be undone. Please be careful.</p>
492426
<div slot="footer">

0 commit comments

Comments
 (0)