feat(announcement): add <rh-announcement>
#1722
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: 0d98377 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
✅ Deploy Preview for red-hat-design-system ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
bennypowers
changed the title
<rh-announcement>
|
Size Change: +2.36 kB (+1.29%) Total Size: 186 kB
ℹ️ View Unchanged
|
|
@alypilkons I cannot find a demo to review. |
|
@alypilkons I thought we increased the size of the text to 18px on large viewports? |
@coreyvickery I did add CSS to set a default of 18px for the body text, but it's being overwritten by a CSS rule on the deploy page that sets p (paragraph) tags to 16px. Because the body slot of the component is anonymous/customizable (can be p, span, header, etc) I don't have as much control from the component side. But it would be easy to set CSS there when using the component (and I think on pages that have p font size set to 18px, that 18px font size will apply to the p in the component too) To have more control here, we could build the p tag into the component, but that gives us less flexibility to use other elements in the banner. @zeroedin @adamjohnson let me know if you have any thoughts or if I'm getting anything wrong here. |
adamjohnson
requested changes
Aug 12, 2024
zeroedin
requested changes
Aug 12, 2024
RE: page styles overriding component styles. You can do this: #body ::slotted(p) {
font-size: var(--rh-font-size-body-text-lg, 1.125rem) !important;
}We generally add More about styling web components. |
zeroedin
reviewed
Aug 13, 2024
zeroedin
reviewed
Aug 13, 2024
markcaron
modified the milestones:
2024/Q3 — Clefairy release,
2024/Q2 — Charmander release
|
FYI I am picking this up with the goal of getting into Charmander. |
adamjohnson
added a commit
that referenced
this pull request
Aug 16, 2024
See #1773 and this comment: #1722 (comment)
|
@adamjohnson can we hold on this and release with Clefairy (or Cubone)? Since there are no docs ready and some concerns about the API, I don't want to hold up Charmander or rush this feature out. |
|
@markcaron Good call, docs for Announcement will be done by the end of |
markcaron
modified the milestones:
2024/Q2 — Charmander release,
2024/Q3 — Clefairy release
|
@adamjohnson we'll need to rebase with |
* docs: icon design update * docs: move icons to foundations * docs(icon): feedback footer * docs(icon): list styles * docs(icon): fix a whoopsie * docs(icon): layouts * docs: copy assets * docs(icons): fix permalink * docs(icon): copy * docs: icons feedback * docs: change title of page and update section heading case * docs: iconography order * docs: align buttons --------- Co-authored-by: marionnegp <[email protected]>
* docs: simplify installation tabs * docs: fix import map on installation page * docs: jspm import maps * docs: no pfe version * docs: install tabs * chore: patch prism-esm see if that lets build complete see KonnorRogers/prism-esm#3 * docs: fail more gracefully when JSPM can't cope * chore: lint nonsense * docs: link to install info * docs: installation tabs styles
1 task
adamjohnson
added a commit
that referenced
this pull request
Feb 26, 2025
* feat(announcement): add `<rh-announcement>` Continuation on PR #1722. * fix(announcement): fix lint error from font stack * fix(announcement): remove unused variable * fix(announcement): dismissible button location * fix(announcement): fix dismissible demo spelling * refactor(announcement): alphabetize `#container` properties * fix(announcement): use appropriate token values for bkg color * feat(announcement): enable theming of the background of the `#container` * fix(announcement): remove content, body and cta parts * fix(announcement): rename attr `imgleft` to `image-position` * docs(announcement): add explainer text to image position demo * refactor(announcement): nest CSS selectors * fix(announcement): center align image on tablet+ viewports * feat(announcement): add lightdom CSS / improve FOUC * fix(announcement): proper rh-button a11y label attribute * docs(announcement): remove outdated docs files * fix(announcement): remove unneeded demo styles for `<main>` * fix(announcement): center image + content on mobile viewports * feat(announcement): add `block-start` to `image-position` property * docs(announcement): remove docs related to outdated CSS parts * docs(announcement): add docs for the close event * docs(announcement): add `image-position` examples to Dismissible demo * fix(announcement): increase close / dismiss button size * fix(announcement): spacing tweaks * fix(announcement): reference surface var for `.dark` bkg color * chore(announcement): normalize spacing in `calc` * refactor(announcement): nest css * fix(announcement): remove left padding from CTA * fix(announcement): restore padding to `inline-start` CTA on mobile viewports * chore(announcement): add announcement to repo status file * docs(announcement): add content to overview page * docs(announcement): add content to style page * docs(announcement): add content to guidelines page * docs(announcement): add content to accessibility page * docs(announcement): alt first * docs(announcement): move href to CTA host, no lightdom HTML * docs(announcement): remove fallbacks from vars in demo SVGs * docs(announcement): spelling fix, update attributes in announcement README * fix(announcement): rename lightdom.css to lightdom-shim.css * fix(announcement): remove lightdom shim dark color palette slotted content color definitions * test(announcement): add tests for close / dismiss functionality * fix(announcement): remove `--rh-color-surface-dark-alt` * docs(announcement): add note about personalization to Overview * test(announcement): nest actions in describe blocks * refactor(announcement): spelling for dismissible 👉 dismissABLE --------- Co-authored-by: Benny Powers <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What I did
This will be used mainly as a banner that appears at the very top of the page for personalizations run through Adobe Target.
Testing Instructions
Visit the deploy preview.
Notes to Reviewers
max-widthcontainer query?slot="cta"orslot="footer"?display: none;.I'm new to Lit and typescript so happy for any/all feedback! :)
To Do's:
rh-buttonclose color<button>until [bug]color-palettenot respected for components inside the shadow root when the host is a provider #1773 is resolved.Closes #1576