Skip to content

Commit 54d3b9d

Browse files
chubara62372chubara62372
committed
pf-alert element functionality
1 parent 1ec4b3c commit 54d3b9d

File tree

7 files changed

+382
-131
lines changed

7 files changed

+382
-131
lines changed

‎elements/pf-alert/demo/alternate.html‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,7 @@ <h3 slot="header">Caution</h3>
4747
<pf-button slot="actions" variant="link" data-action="dismiss">Cancel</pf-button>
4848
</pf-alert>
4949
</section>
50-
<button id="prev-btn">Prev</button>
51-
<button id="next-btn">Next</button>
50+
5251

5352
<style>
5453
#alert-variant-alternate {
@@ -62,16 +61,4 @@ <h3 slot="header">Caution</h3>
6261
<script type="module">
6362
import '@patternfly/elements/pf-alert/pf-alert.js';
6463
import '@patternfly/elements/pf-button/pf-button.js';
65-
66-
// customElements.whenDefined('pf-alert').then(() => {
67-
// const alerts = document.querySelectorAll('pf-alert');
68-
// alerts.forEach(alert => {
69-
// // trigger internal styling properly
70-
// alert.variant = alert.variant;
71-
// if (alert.state) {
72-
// alert.state = alert.state;
73-
// }
74-
// });
75-
// });
76-
7764
</script>

‎elements/pf-alert/demo/color-context.html‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
1-
<pf-alert dismissable>
1+
<pf-alert>
22
<h3 slot="header">Default</h3>
33
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
44
egestas, a sollicitudin mauris tincidunt.</p>
55
<pf-button slot="actions" variant="secondary" data-action="confirm">Confirm</pf-button>
66
<pf-button slot="actions" variant="link" data-action="dismiss">Cancel</pf-button>
77
</pf-alert>
88
<script type="module">
9-
import { AlertCloseEvent } from '@patternfly/elements/pf-alert/pf-alert.js';
9+
import '@patternfly/elements/pf-alert/pf-alert.js';
1010
import '@patternfly/elements/pf-button/pf-button.js';
1111

12-
document.body.addEventListener('close', event => {
13-
if (event instanceof AlertCloseEvent) {
14-
console.log('Alert closed:', event.target);
15-
}
16-
});
12+
1713

1814
</script>

‎elements/pf-alert/demo/dismissable.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ <h3 slot="header">Dismissable With Prevent Default</h3>
3636
/* eslint-disable no-console */
3737
import { AlertCloseEvent } from '@patternfly/elements/pf-alert/pf-alert.js';
3838
import '@patternfly/elements/pf-button/pf-button.js';
39-
39+
4040
document.body.addEventListener('close', event => {
4141
if (event instanceof AlertCloseEvent) {
4242
if (event.target.dataset.onClose === 'prevent-default') {

‎elements/pf-alert/pf-alert.css‎

Lines changed: 98 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1+
12
:host {
23
display: block;
3-
max-width: var(--_max-width, initial);
4+
max-width: var(--pf-c-alert--MaxWidth, initial);
45
}
6+
57
[hidden] {
68
display: none !important;
79
}
10+
811
header {
912
display: flex;
1013
align-items: center;
@@ -18,35 +21,32 @@ header {
1821
footer.hasActions {
1922
margin-block-start: var(--pf-global--spacer--lg, 16px);
2023
}
21-
footer ::slotted([slot='actions']:not(pf-button[variant='link' i])) {
24+
25+
/* footer ::slotted([slot='actions']:not(pf-button[variant='link' i])) {
2226
margin-inline-end: var(--pf-global--spacer--xl, 24px) !important;
2327
padding: 0 !important;
2428
border: none !important;
2529
background-color: transparent !important;
26-
color: var(--pf-global--link--Color, #0066cc) !important;
30+
color: var(--pf-global--link--Color, hsl(278, 75%, 81%)) !important;
2731
font-size: var(--pf-global--FontSize--sm, 0.875rem) !important;
2832
font-family: var(--pf-global--FontFamily--text, "RedHatText", Helvetica, Arial, sans-serif) !important;
29-
}
30-
footer ::slotted([slot='actions']:focus) {
31-
text-decoration: underline !important;
32-
color: var(--pf-global--link--Color--hover, #004080) !important;
33-
}
33+
} */
3434

35-
footer ::slotted([slot='actions']:hover) {
35+
/* footer ::slotted([slot='actions']:hover) {
3636
cursor: pointer !important;
3737
text-decoration: underline !important;
38-
color: var(--pf-global--link--Color--hover, #004080) !important;
39-
}
38+
color: var(--pf-global--link--Color--hover, #030608) !important;
39+
} */
4040

41-
footer ::slotted(pf-button[variant='link' i]) {
41+
/* footer ::slotted(pf-button[variant='link' i]) {
4242
display: inline-block;
4343
translate: calc(-1 * var(--pf-global--spacer--lg, 16px));
44-
}
45-
/* ====== Container ====== */
44+
} */
45+
4646
#container {
47-
--_background-color: var(--pf-global--BackgroundColor--100, #f0f0f0);
48-
--_border-color: var(--pf-global--BorderColor--100, #d2d2d2);
49-
--_icon-color: var(--pf-global--icon--Color--light, #6a6e73);
47+
/* --_background-color: var(--pf-global--BackgroundColor--100, #daf2f2);
48+
--_border-color: var(--pf-global--BorderColor--100, #37a3a3);
49+
--_icon-color: var(--pf-global--icon--Color--light, #37a3a3); */
5050

5151
border-width: var(--pf-global--BorderWidth--md, 2px);
5252
border-style: solid;
@@ -60,77 +60,119 @@ footer ::slotted(pf-button[variant='link' i]) {
6060
display: grid;
6161
grid-template-columns: min-content 1fr;
6262
gap: var(--pf-global--spacer--xs, 4px);
63-
font-family: var(--pf-global--FontFamily--text, "RedHatText", Helvetica, Arial, sans-serif);
64-
font-weight: var(--pf-global--FontWeight--normal, 400);
63+
font-family: var(--pf-global--FontFamily--text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif);
64+
font-weight: var(--pf-global--FontWeight--regular, 400);
6565
font-size: var(--pf-global--FontSize--sm, 0.875rem);
66-
line-height: var(--pf-global--LineHeight--sm, 1.5);
66+
line-height: var(--pf-global--lineHeight--md, 1.5);
67+
68+
& header ::slotted(*) {
69+
font-family: var(--pf-global--FontFamily--text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif) !important;
70+
font-weight: var(--pf-global--FontWeight--semiBold, 500) !important;
71+
font-size: var(--pf-global--FontSize--sm, 0.875rem) !important;
72+
line-height: var(--pf-global--lineHeight--md, 1.5) !important;
73+
margin: 0 !important;
74+
}
75+
76+
& header ::slotted(:is(h1,h2,h3,h4,h5,h6)) {
77+
padding-block: 2px var(--pf-global--spacer--xs, 4px) !important; /* 2px is a non standard value */
78+
}
79+
80+
& #description {
81+
& > ::slotted(*) {
82+
font-size: var(--pf-global--FontSize--sm, 0.875rem) !important;
83+
margin-block: 0 !important;
84+
padding: 0 !important;
85+
}
86+
}
6787
}
88+
6889
#container.neutral {
69-
--_border-color: var(--pf-global--palette--black-400, #8a8d90);
70-
--_icon-color: var(--pf-global--palette--black-700, #3c3f42);
71-
--_background-color: var(--pf-global--BackgroundColor--100, #f0f0f0);
90+
--_border-color: var(--pf-c-alert__BorderColor--neutral, #4b4d50);
91+
--_icon-color: var(--pf-c-alert__IconColor--neutral, #3c3f42);
92+
--_background-color: var(--pf-c-alert__BackgroundColor--neutral, #f0f0f0);
7293
}
7394

7495
#container.info {
75-
--_border-color: var(--pf-global--info-color--100, #06c);
76-
--_icon-color: var(--pf-global--info-color--100, #06c);
77-
--_background-color: var(--pf-global--palette--blue-50, #e7f1fa);
96+
--_border-color: var(--pf-c-alert__BorderColor--info, #5e40be);
97+
--_icon-color: var(--pf-c-alert__IconColor--info,#5e40be);
98+
--_background-color: var(--pf-c-alert__BackgroundColor--info, #e1dbf3);
7899
}
79100

80101
#container.success {
81-
--_border-color: var(--pf-global--success-color--100, #3e8635);
82-
--_icon-color: var(--pf-global--success-color--100, #3e8635);
83-
--_background-color: var(--pf-global--palette--green-50, #f3faf2);
102+
103+
--_border-color: var(--pf-c-alert__BorderColor--success, #3b7317);
104+
--_icon-color: var(--pf-c-alert__IconColor--success, #3b7317);
105+
--_background-color: var(--pf-c-alert__BackgroundColor--success, #e7f9e4);
84106
}
85107

86-
#container.caution,
87-
#container.warning {
88-
--_border-color: var(--pf-global--warning-color--100, #f0ab00);
89-
--_icon-color: var(--pf-global--warning-color--100, #f0ab00);
90-
--_background-color: var(--pf-global--palette--gold-50, #fdf7e7);
108+
#container.warning{
109+
--_border-color: var(--pf-c-alert__BorderColor--warning, #f0ab00);
110+
--_icon-color: var(--pf-c-alert__IconColor--warning, #f0ab00);
111+
--_background-color: var(--pf-c-alert__BackgroundColor--warning, #fef3d6);
112+
}
113+
#container.caution {
114+
--_border-color: var(--pf-c-alert__BorderColor--warning, #d75324);
115+
--_icon-color: var(--pf-c-alert__IconColor--warning, #d75324);
116+
--_background-color: var(--pf-c-alert__BackgroundColor--warning, #fadbb5);
91117
}
92118

93119
#container.danger {
94-
--_border-color: var(--pf-global--danger-color--100, #c9190b);
95-
--_icon-color: var(--pf-global--danger-color--100, #c9190b);
96-
--_background-color: var(--pf-global--palette--red-50, #faeae8);
120+
--_border-color: var(--pf-c-alert__BorderColor--danger, #c9190b);
121+
--_icon-color: var(--pf-c-alert__IconColor--danger, #c9190b);
122+
--_background-color: var(--pf-c-alert__BackgroundColor--danger, #fddad6);
97123
}
98-
/* ===== Variants ===== */
124+
125+
99126
#container.toast {
100-
--_background-color: var(--pf-global--BackgroundColor--light-100, #ffffff);
101-
--_max-width: 550px;
102-
--_box-shadow: var(--pf-global--BoxShadow--xl, 0 8px 24px 3px rgba(21, 21, 21, 0.35));
127+
--_background-color: var(--pf-c-alert__BackgroundColor--toast, #ffffff);
128+
--_max-width: var(--pf-c-alert--MaxWidth--toast, 550px);
129+
--_box-shadow: var(--pf-c-alert__BoxShadow--toast, 0 8px 24px 3px rgba(21,21,21,0.35));
103130
}
104131

105132
#container.alternate {
106-
border-inline-start-color: var(--_border-color);
107-
border-block-end-color: var(--_border-color);
108-
border-inline-end-color: var(--_border-color);
133+
border-inline-start-color: var(--pf-c-alert__BorderColor--alternate, var(--_border-color));
134+
border-block-end-color: var(--pf-c-alert__BorderColor--alternate, var(--_border-color));
135+
border-inline-end-color: var(--pf-c-alert__BorderColor--alternate, var(--_border-color));
109136
}
110137

138+
111139
#header {
112-
color: var(--pf-global--Color--100, #151515);
140+
color: var(--pf-c-alert__TitleColor, #151515);
113141
flex: 1 1 auto;
114142
}
115143

116144
#icon {
117-
display: flex;
145+
/* display: flex;
118146
align-items: center;
119147
justify-content: center;
120-
width: var(--pf-global--icon--FontSize--md, 24px);
121-
height: var(--pf-global--icon--FontSize--md, 24px);
148+
width: 240px;
149+
height: 240px; */
122150
color: var(--_icon-color);
123151
}
124152

125-
#close-button {
126-
color: var(--pf-global--Color--200, #6a6e73);
127-
background-color: transparent;
128-
border: none;
129-
height: var(--pf-global--spacer--xl, 24px);
130-
width: var(--pf-global--spacer--xl, 24px);
153+
#close-button::part(button) {
154+
color: var(--pf-c-alert__CloseColor, #9602e0); /* צבע האיקס */
155+
background-color: transparent; /* רקע שקוף */
156+
border: none; /* ללא גבול */
157+
height: var(--pf-c-alert__Close--FontSize, 24px);
158+
width: var(--pf-c-alert__Close--FontSize, 24px);
131159
cursor: pointer;
160+
display: flex;
161+
align-items: center;
162+
justify-content: center;
132163
}
133164

165+
/* hover */
134166
#close-button:hover {
135-
color: var(--pf-global--Color--100, #151515);
136-
}
167+
color: var(--pf-c-alert__CloseHoverColor, #151515); /* צבע האיקס בעת ריחוף */
168+
background-color: transparent; /* רקע נשאר שקוף */
169+
}
170+
171+
/* .pf-alert-toast-group {
172+
position: fixed;
173+
top: 1rem;
174+
right: 1rem;
175+
display: grid;
176+
gap: 0.5rem;
177+
z-index: 1000;
178+
} */

0 commit comments

Comments
 (0)