Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✨ feat(cookie-consent-banner): introduce ::part pseudo selector #24

Merged
merged 5 commits into from
Sep 25, 2023

Conversation

switchnollie
Copy link
Contributor

@switchnollie switchnollie commented Sep 13, 2023

This PR adds the possibility to style parts of the web component using the CSS ::part selector. Thereby we can provide nice looking defaults and for customization either via the easy-to-use CSS variable solution or via the fully flexible ::part() API.

Pull Request Checklist

@switchnollie switchnollie linked an issue Sep 13, 2023 that may be closed by this pull request
<slot />
</p>
{Boolean(this.isShownSettings) && (
<div class="cc_settings">
<p class="cc_settings_description">
<p part="description" class="cc_settings_description">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it intentional that the part "description" is there twice?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess you're right, let's use description-settings and description-main separately.

@@ -280,6 +285,7 @@ export class CookieConsentBanner {
{!this.isShownSettings &&
!!this.btnLabelOnlyEssentialAndContinue && (
<button
part="secondary-button"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would split the naming of both buttons.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Switched to these parts: button-accept-all, button-persist-selection and button-essential-only

Copy link
Member

@pboeder pboeder left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's an awesome idea!

@switchnollie switchnollie merged commit 1142146 into main Sep 25, 2023
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

More style flexibility
2 participants