Skip to content

Commit d84b89b

Browse files
codewithkylecodewithkyle
committed
♻ Reworking Alerts, Split Button, and Chips
1 parent c3c53bd commit d84b89b

File tree

21 files changed

+822
-499
lines changed

21 files changed

+822
-499
lines changed

‎src/framework/components/alert/alert.scss‎

Lines changed: 1 addition & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ alert-component {
33
flex-flow: row nowrap;
44
width: 100%;
55
position: relative;
6-
border-radius: 0.5rem;
6+
border-radius: 1rem;
77
padding: 1rem;
88

99
&[flex="items-center"] {
@@ -27,26 +27,6 @@ alert-component {
2727
h3 {
2828
color: var(--warning-800);
2929
}
30-
31-
.close {
32-
color: var(--warning-500);
33-
34-
&:hover {
35-
color: var(--warning-600);
36-
37-
&::before {
38-
background-color: var(--warning-100);
39-
}
40-
}
41-
42-
&:active {
43-
color: var(--warning-700);
44-
45-
&::before {
46-
background-color: var(--warning-200);
47-
}
48-
}
49-
}
5030
}
5131

5232
&[kind="info"] {
@@ -56,26 +36,6 @@ alert-component {
5636
h3 {
5737
color: var(--info-800);
5838
}
59-
60-
.close {
61-
color: var(--info-500);
62-
63-
&:hover {
64-
color: var(--info-600);
65-
66-
&::before {
67-
background-color: var(--info-100);
68-
}
69-
}
70-
71-
&:active {
72-
color: var(--info-700);
73-
74-
&::before {
75-
background-color: var(--info-200);
76-
}
77-
}
78-
}
7939
}
8040

8141
&[kind="danger"] {
@@ -85,26 +45,6 @@ alert-component {
8545
h3 {
8646
color: var(--danger-800);
8747
}
88-
89-
.close {
90-
color: var(--danger-500);
91-
92-
&:hover {
93-
color: var(--danger-600);
94-
95-
&::before {
96-
background-color: var(--danger-100);
97-
}
98-
}
99-
100-
&:active {
101-
color: var(--danger-700);
102-
103-
&::before {
104-
background-color: var(--danger-200);
105-
}
106-
}
107-
}
10848
}
10949

11050
&[kind="success"] {
@@ -114,26 +54,6 @@ alert-component {
11454
h3 {
11555
color: var(--success-800);
11656
}
117-
118-
.close {
119-
color: var(--success-500);
120-
121-
&:hover {
122-
color: var(--success-600);
123-
124-
&::before {
125-
background-color: var(--success-100);
126-
}
127-
}
128-
129-
&:active {
130-
color: var(--success-700);
131-
132-
&::before {
133-
background-color: var(--success-200);
134-
}
135-
}
136-
}
13757
}
13858

13959
h3 {
@@ -205,35 +125,6 @@ alert-component {
205125
position: absolute;
206126
top: 0.25rem;
207127
right: 0.25rem;
208-
width: 36px;
209-
height: 36px;
210-
display: inline-flex;
211-
justify-content: center;
212-
align-items: center;
213-
transition: all 80ms var(--ease-in-out);
214128
z-index: 10;
215-
outline-offset: 0;
216-
217-
&:focus-visible {
218-
outline: var(--focus-ring);
219-
outline-offset: var(--focus-ring-offset);
220-
transition: outline-offset 80ms var(--ease-in-out);
221-
}
222-
223-
&::before {
224-
content: "";
225-
display: inline-block;
226-
position: absolute;
227-
top: 0;
228-
left: 0;
229-
width: 100%;
230-
height: 100%;
231-
border-radius: 50%;
232-
}
233-
234-
svg {
235-
width: 18px;
236-
height: 18px;
237-
}
238129
}
239130
}

‎src/framework/components/alert/alert.ts‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { html, render } from "lit-html";
1+
import { html, render, TemplateResult } from "lit-html";
22
import SuperComponent from "@codewithkyle/supercomponent";
33
import env from "~brixi/controllers/env";
44
import Button from "~brixi/components/buttons/button/button";
@@ -95,29 +95,32 @@ export default class Alert extends SuperComponent<IAlert> {
9595
}
9696
}
9797

98-
private handleClose: EventListener = (e) => {
98+
private handleClose: EventListener = () => {
9999
this.model.closeCallback();
100100
this.remove();
101101
};
102102

103-
private renderCloseButton() {
104-
let out;
103+
private renderCloseButton(): string | HTMLElement {
104+
let out: string | HTMLElement;
105105
if (this.model.closeable) {
106-
out = html`
107-
<button sfx="button" @click=${this.handleClose} class="close">
108-
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
109-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
110-
</svg>
111-
</button>
112-
`;
106+
out = new Button({
107+
type: "button",
108+
class: "close",
109+
kind: "text",
110+
color: this.model.type,
111+
icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>`,
112+
iconPosition: "center",
113+
callback: this.handleClose.bind(this),
114+
shape: "round",
115+
});
113116
} else {
114117
out = "";
115118
}
116119
return out;
117120
}
118121

119-
private renderList() {
120-
let out;
122+
private renderList(): string | TemplateResult {
123+
let out: string | TemplateResult;
121124
if (this.model.list.length) {
122125
out = html`
123126
<ul>
@@ -132,19 +135,18 @@ export default class Alert extends SuperComponent<IAlert> {
132135
return out;
133136
}
134137

135-
private renderActions() {
136-
let out;
138+
private renderActions(): string | TemplateResult {
139+
let out: string | TemplateResult;
137140
if (this.model.actions.length) {
138-
let buttonType: string = this.model.type;
139141
out = html`
140142
<div class="actions">
141-
${this.model.actions.map((bttn, index) => {
143+
${this.model.actions.map((bttn) => {
142144
return html`
143145
${new Button({
144146
label: bttn.label,
145147
kind: "text",
146148
// @ts-ignore
147-
color: buttonType,
149+
color: this.model.type,
148150
callback: bttn.callback,
149151
})}
150152
`;

‎src/framework/components/buttons/button/button.scss‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,39 @@
185185
}
186186
}
187187

188+
&[color="warning"] {
189+
border-color: var(--warning-200);
190+
background-color: var(--white);
191+
color: var(--warning-700);
192+
box-shadow: var(--button-shadow);
193+
194+
&:hover {
195+
box-shadow: var(--button-shadow), 0 0 0 8px var(--warning-50);
196+
}
197+
}
198+
199+
&[color="success"] {
200+
border-color: var(--success-200);
201+
background-color: var(--white);
202+
color: var(--success-700);
203+
box-shadow: var(--button-shadow);
204+
205+
&:hover {
206+
box-shadow: var(--button-shadow), 0 0 0 8px var(--success-50);
207+
}
208+
}
209+
210+
&[color="info"] {
211+
border-color: var(--info-200);
212+
background-color: var(--white);
213+
color: var(--info-700);
214+
box-shadow: var(--button-shadow);
215+
216+
&:hover {
217+
box-shadow: var(--button-shadow), 0 0 0 8px var(--info-50);
218+
}
219+
}
220+
188221
&:active,
189222
&.is-active {
190223
box-shadow: none !important;
@@ -256,6 +289,63 @@
256289
}
257290
}
258291

292+
&[color="success"] {
293+
color: var(--success-700);
294+
295+
&::before {
296+
background-color: var(--success-500);
297+
}
298+
299+
&[icon="center"] {
300+
color: var(--success-400);
301+
302+
&:hover,
303+
&:focus-visible,
304+
&:active,
305+
&.is-active {
306+
color: var(--success-700);
307+
}
308+
}
309+
}
310+
311+
&[color="warning"] {
312+
color: var(--warning-700);
313+
314+
&::before {
315+
background-color: var(--warning-500);
316+
}
317+
318+
&[icon="center"] {
319+
color: var(--warning-400);
320+
321+
&:hover,
322+
&:focus-visible,
323+
&:active,
324+
&.is-active {
325+
color: var(--warning-700);
326+
}
327+
}
328+
}
329+
330+
&[color="info"] {
331+
color: var(--info-700);
332+
333+
&::before {
334+
background-color: var(--info-500);
335+
}
336+
337+
&[icon="center"] {
338+
color: var(--info-400);
339+
340+
&:hover,
341+
&:focus-visible,
342+
&:active,
343+
&.is-active {
344+
color: var(--info-700);
345+
}
346+
}
347+
}
348+
259349
&:hover,
260350
&:focus-visible {
261351
&::before {
@@ -308,6 +398,33 @@
308398
}
309399
}
310400

401+
&[color="success"] {
402+
color: var(--success-700);
403+
border-color: var(--success-200);
404+
405+
&::before {
406+
background-color: var(--success-500);
407+
}
408+
}
409+
410+
&[color="warning"] {
411+
color: var(--warning-700);
412+
border-color: var(--warning-200);
413+
414+
&::before {
415+
background-color: var(--warning-500);
416+
}
417+
}
418+
419+
&[color="info"] {
420+
color: var(--info-700);
421+
border-color: var(--info-200);
422+
423+
&::before {
424+
background-color: var(--info-500);
425+
}
426+
}
427+
311428
&:hover,
312429
&:focus-visible {
313430
&::before {

‎src/framework/components/buttons/button/button.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import env from "~brixi/controllers/env";
55
import { noop, parseDataset } from "~brixi/utils/general";
66

77
type ButtonKind = "solid" | "outline" | "text";
8-
type ButtonColor = "primary" | "danger" | "grey";
8+
type ButtonColor = "primary" | "danger" | "grey" | "success" | "warning" | "info";
99
type ButtonShape = "pill" | "round" | "sharp" | "default";
1010
type ButtonSize = "default" | "slim" | "large";
1111
type ButtonType = "submit" | "button" | "reset";

0 commit comments

Comments
 (0)