feat(alert): add pf-alert #2593

brianferry · 2023-09-19T17:37:17Z

#2539

What I did

Testing Instructions

Notes to Reviewers

changeset-bot · 2023-09-19T17:37:20Z

🦋 Changeset detected

Latest commit: 472fa59

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@patternfly/pfe-core	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

netlify · 2023-09-19T17:38:14Z

✅ Deploy Preview for patternfly-elements ready!

Name	Link
🔨 Latest commit	`91a5b64`
😎 Deploy Preview	https://deploy-preview-2593--patternfly-elements.netlify.app/

To edit notification comments on pull requests, go to your Netlify site settings.

… feat/add-pf-alert

….Add function to SlotController

bennypowers

some preliminary comments. i didn't get to the lifecycle or template or styles yet

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

core/pfe-core/controllers/slot-controller.ts

elements/pf-alert/README.md

elements/pf-alert/pf-alert.css

elements/pf-alert/pf-alert.ts

bennypowers

some more notes

elements/pf-alert/pf-alert.ts

bennypowers · 2023-10-08T13:47:10Z

elements/pf-alert/pf-alert.ts

+    const hasContent = this.#slots.hasAnonymousSlot();
+
+    return html`
+       <div id="container" role="alert" aria-hidden="false"  class="${classMap({ truncateTitle })}">


can a role=alert have interactive children @nikkimk?

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Alert_Role

…nfly-elements into feat/add-pf-alert

Co-authored-by: Benny Powers <[email protected]>

…nfly-elements into feat/add-pf-alert

bennypowers · 2023-10-15T05:35:20Z

elements/pf-alert/demo/custom-icons.html

+<link rel="stylesheet" href="demo.css">
+<script type="module" src="pf-alert.js"></script>


let's prefer to inline this stuff, to make the demos easier to grok

bennypowers · 2023-10-15T05:35:32Z

elements/pf-alert/demo/inline.html

+<link rel="stylesheet" href="demo.css">
+<script type="module" src="pf-alert.js"></script>


see above, re: inline

bennypowers · 2023-10-15T05:35:46Z

elements/pf-alert/demo/inline.html

+<h1>
+    Inline
+</h1>
+


Suggested change

<h1>

Inline

</h1>

bennypowers · 2023-10-15T05:36:07Z

elements/pf-alert/demo/inline.html

+<h1>
+    Inline Plain
+</h1>
+


Suggested change

<h1>

Inline Plain

</h1>

<h2>Plain</h2>

bennypowers · 2023-10-15T05:36:23Z

elements/pf-alert/demo/kitchen-sink.html

+<link rel="stylesheet" href="demo.css">
+<script type="module" src="pf-alert.js"></script>


bennypowers · 2023-10-15T05:37:43Z

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

+<pf-alert variant="info" header="Info alert title"></pf-alert>
+<pf-alert variant="success" header="Success alert title"></pf-alert>
+<pf-alert variant="warning" header="Warning alert title"></pf-alert>
+<pf-alert variant="danger" header="Danger alert title"></pf-alert>


Suggested change

<pf-alert variant="info" header="Info alert title"></pf-alert>

<pf-alert variant="success" header="Success alert title"></pf-alert>

<pf-alert variant="warning" header="Warning alert title"></pf-alert>

<pf-alert variant="danger" header="Danger alert title"></pf-alert>

we can leave these for variants.html

bennypowers · 2023-10-15T05:37:53Z

elements/pf-alert/demo/plain.html

+<link rel="stylesheet" href="demo.css">
+<script type="module" src="pf-alert.js"></script>


bennypowers · 2023-10-15T05:38:51Z

elements/pf-alert/pf-alert.css

-  --pf-alert-title-color: var(--pf-alert-title-color, var(--pf-global--default-color--300, #003737));
-  --pf-alert-icon-color: var(--pf-alert-icon-color, var(--pf-global--default-color--200, #009596));
-  --pf-alert-inline-background-color: var(--pf-global--palette--cyan-50, #f2f9f9);
+  --alert-title-color: var(--alert-title-color, var(--pf-global--default-color--300, #003737));


Suggested change

--alert-title-color: var(--alert-title-color, var(--pf-global--default-color--300, #003737));

--_alert-title-color: var(--pf-global--default-color--300, #003737);

etc, and at call sites

bennypowers · 2023-10-15T05:40:13Z

elements/pf-alert/pf-alert.ts

+  danger: { set: 'fas', icon: 'exclamation-circle' },
+  info: { set: 'fas', icon: 'info-circle' },
+  close: { set: 'patternfly', icon: 'close' },
+  get(name: 'default' | 'success' | 'warning' | 'danger' | 'info' | 'close') {


remove get() and reference the data here in render

bennypowers · 2023-10-15T05:41:09Z

elements/pf-alert/pf-alert.ts

    const hasActions = this.#slots.hasSlotted('actions');
    const hasDescriptionContent = this.#slots.hasSlotted();

    return html`
       <div id="container" role="alert" aria-hidden="false"  class="${classMap({ truncateTitle })}">
        <div id="left-column" part="left-column">
-          <slot name="icon" id="icon">${icon}</slot>
+          <slot name="icon" id="icon">${this.#icon}</slot>


inline the pf-icon, reference data in ICONS directly here. remove #icon

… private var

bennypowers · 2023-10-16T20:02:06Z

elements/pf-alert/demo/custom-icons.html

@@ -1,5 +1,4 @@
-<link rel="stylesheet" href="demo.css">
-<script type="module" src="pf-alert.js"></script>
+<link rel="stylesheet" href="demo.css"><script type="module" src="pf-alert.js"></script>


For the sake of clarity, What I mean by inline is to replace <link href with <style and <script src with <script

In other words, each demo file would be self contained except for the files we ship in our package

martinpitt · 2024-11-08T16:39:37Z

Thanks @brianferry ! If you don't mind, I'd like to continue with this. I started with your work in my branch https://github.com/martinpitt/patternfly-elements/tree/pf-alert and now I am adding some commits on top. The demo at least works again, but this still needs a lot of effort, so no new PR yet.

brianferry added 3 commits August 28, 2023 14:00

feat: init commit with pf-alert

33afe49

feat: truncated title and timeout

df55c1d

feat(alert): adding plain, custom icons

6185d07

github-actions bot added work in progress POC / Not ready for review demo Updating demo pages functionality Functionality, typically pertaining to the JavaScript. styles An issue or PR pertaining only to CSS/Sass tests Related to testing doc labels Sep 19, 2023

brianferry linked an issue Sep 19, 2023 that may be closed by this pull request

[1:1]: pf-alert #2539

Open

github-actions bot added the AT passed Automated testing has passed label Sep 19, 2023

Merge branch 'main' of github.com:patternfly/patternfly-elements into…

20eaf92

… feat/add-pf-alert

bennypowers changed the title ~~feat: add pf-alert~~ feat(alert): add pf-alert Sep 27, 2023

feat(alert): cleaning up css, fallback variables for important styles…

544a0c6

….Add function to SlotController

bennypowers requested changes Oct 8, 2023

View reviewed changes

brianferry and others added 8 commits October 10, 2023 13:16

feat(core): adding isEmpty, hasSlotted w/ default slot

c68683a

chore: adding changeset

da3c824

Merge branch 'feat/core-default-slot' of github.com:patternfly/patter…

4a1dacf

…nfly-elements into feat/add-pf-alert

Update core/pfe-core/controllers/slot-controller.ts

9a03851

Co-authored-by: Benny Powers <[email protected]>

chore: merging with feat/default-slot

147b672

fix(core): adding anonymous slot back to SlotController

e1cfe19

Merge branch 'feat/core-default-slot' of github.com:patternfly/patter…

88e079d

…nfly-elements into feat/add-pf-alert

feat(alert): multiple demos, jsdocs, adding pf-icon

8e2cd9e

bennypowers requested changes Oct 15, 2023

View reviewed changes

fix(alert): private css variables, moving ICONS call inline, removing…

d97a4f7

… private var

docs(alert): inline scripts, heading tags fixing

472fa59

bennypowers reviewed Oct 16, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(alert): add pf-alert #2593

feat(alert): add pf-alert #2593

brianferry commented Sep 19, 2023

changeset-bot bot commented Sep 19, 2023 •

edited

Loading

netlify bot commented Sep 19, 2023 •

edited by github-actions bot

Loading

bennypowers left a comment

bennypowers left a comment

bennypowers Oct 8, 2023

bennypowers Oct 15, 2023

bennypowers Oct 15, 2023

bennypowers Oct 15, 2023

bennypowers Oct 15, 2023

bennypowers Oct 15, 2023

bennypowers Oct 15, 2023

bennypowers Oct 15, 2023

bennypowers Oct 15, 2023

bennypowers Oct 15, 2023

bennypowers Oct 15, 2023

bennypowers Oct 16, 2023

martinpitt commented Nov 8, 2024

		<link rel="stylesheet" href="demo.css">
		<script type="module" src="pf-alert.js"></script>

	--alert-title-color: var(--alert-title-color, var(--pf-global--default-color--300, #003737));
	--_alert-title-color: var(--pf-global--default-color--300, #003737);

feat(alert): add pf-alert #2593

Are you sure you want to change the base?

feat(alert): add pf-alert #2593

Conversation

brianferry commented Sep 19, 2023

What I did

Testing Instructions

Notes to Reviewers

changeset-bot bot commented Sep 19, 2023 • edited Loading

🦋 Changeset detected

netlify bot commented Sep 19, 2023 • edited by github-actions bot Loading

✅ Deploy Preview for patternfly-elements ready!

bennypowers left a comment

Choose a reason for hiding this comment

bennypowers left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

martinpitt commented Nov 8, 2024

changeset-bot bot commented Sep 19, 2023 •

edited

Loading

netlify bot commented Sep 19, 2023 •

edited by github-actions bot

Loading