feat(alert): add pf-alert by brianferry · Pull Request #2593 · patternfly/patternfly-elements

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 <bennypowers@users.noreply.github.com>

…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

       <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

Closed

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 <bennypowers@users.noreply.github.com>

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

brianferry added 2 commits October 16, 2023 14:36

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

		<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);

Conversation

brianferry commented Sep 19, 2023

What I did

Testing Instructions

Notes to Reviewers

Uh oh!

changeset-bot bot commented Sep 19, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

netlify bot commented Sep 19, 2023 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for patternfly-elements ready!

Uh oh!

bennypowers left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bennypowers left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

martinpitt commented Nov 8, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot bot commented Sep 19, 2023 •

edited

Loading

netlify bot commented Sep 19, 2023 •

edited by github-actions bot

Loading