Skip to content

Commit

Permalink
Merge branch 'main' into docs/feedback-shortcode
Browse files Browse the repository at this point in the history
  • Loading branch information
@bennypowers
bennypowers authored Sep 5, 2023
2 parents 785bd6d + 716b52d commit 8d16162
Show file tree
Hide file tree
Showing 15 changed files with 245 additions and 83 deletions.
5 changes: 5 additions & 0 deletions .changeset/many-apes-relax.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@rhds/elements": patch
---

`<rh-cta>` and other elements: color context support
4 changes: 4 additions & 0 deletions .changeset/rh-cta-brick-icon.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
---
"@rhds/elements": patch
---
`<rh-cta>`: corrected layout of icon brick variant
4 changes: 4 additions & 0 deletions .changeset/rh-cta-clickable.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
---
"@rhds/elements": patch
---
`<rh-cta>`: ensured entire CTA is clickable
4 changes: 4 additions & 0 deletions .changeset/rh-cta-flex.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
---
"@rhds/elements": patch
---
`<rh-cta>`: fix a style bug which affects CTA links at narrow widths
20 changes: 20 additions & 0 deletions elements/rh-cta/demo/color-context.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<rh-context-picker target="dark"></rh-context-picker>
<rh-context-provider id="dark" color-palette="darkest">
<h2>Dark Colour Context</h2>
<rh-cta><a href="#default">Default</a></rh-cta>
<rh-cta icon="circle-play"><a href="#default-video">Default Video</a></rh-cta>
<rh-cta variant="primary"><a href="#primary">Primary</a></rh-cta>
<rh-cta variant="primary" icon="circle-play"><a href="#primary-video">Video</a></rh-cta>
<rh-cta variant="secondary"><a href="#secondary">Secondary</a></rh-cta>
<rh-cta variant="brick"><a href="#brick">Brick</a></rh-cta>
<rh-cta variant="brick" icon="circle-play"><a href="#brick-video">Brick Video</a></rh-cta>
</rh-context-provider>

<link rel="stylesheet" href="https://static.redhat.com/libs/redhat/redhat-font/4/webfonts/red-hat-font.min.css">
<link rel="stylesheet" href="https://static.redhat.com/libs/redhat/redhat-theme/6/advanced-theme.css">
<link rel="stylesheet" href="demo.css">
<script type="module" src="rh-cta.js"></script>
<script type="module">
import '@rhds/elements/lib/elements/rh-context-picker/rh-context-picker.js';
</script>

93 changes: 87 additions & 6 deletions elements/rh-cta/demo/rh-cta.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ <h2>Variants</h2>
<rh-cta variant="primary" icon="circle-play"><a href="#primary-video">Video</a></rh-cta>
<rh-cta variant="secondary"><a href="#secondary">Secondary</a></rh-cta>
<rh-cta variant="brick"><a href="#brick">Brick</a></rh-cta>
<rh-cta variant="brick" icon="circle-play"><a href="#brick-video">Brick Video</a></rh-cta>
<rh-cta variant="brick" icon="user"><a href="#brick-icon">Brick Icon</a></rh-cta>
</section>

<rh-context-provider id="dark" color-palette="darkest">
Expand All @@ -22,7 +22,7 @@ <h2>Dark Colour Context</h2>
<rh-cta variant="primary" icon="circle-play"><a href="#primary-video">Video</a></rh-cta>
<rh-cta variant="secondary"><a href="#secondary">Secondary</a></rh-cta>
<rh-cta variant="brick"><a href="#brick">Brick</a></rh-cta>
<rh-cta variant="brick" icon="circle-play"><a href="#brick-video">Brick Video</a></rh-cta>
<rh-cta variant="brick" icon="user"><a href="#brick-icon">Brick Icon</a></rh-cta>
</rh-context-provider>

<section dir="rtl">
Expand All @@ -33,26 +33,108 @@ <h2>Right-to-Left Languages</h2>
<rh-cta variant="primary" icon="circle-play"><a href="#primary-video">ראשי - וידאו</a></rh-cta>
<rh-cta variant="secondary"><a href="#secondary">משני</a></rh-cta>
<rh-cta variant="brick"><a href="#brick">לבנה</a></rh-cta>
<rh-cta variant="brick" icon="circle-play"><a href="#brick-video">לבנה - וידאו</a></rh-cta>
<rh-cta variant="brick" icon="user"><a href="#brick-icon">לבנה עם אייקון</a></rh-cta>
</section>

<section dir="rtl">
<h2>Deep Shadow RTL</h2>
<p dir="ltr">When the CTA is found within the shadow root of an element which is itself within a RTL context.</p>
<shadow-root>
<template shadowroot="open">
<style>:host{display: flex; flex-flow: row wrap; gap: 16px;}</style>
<style>
:host {
display: flex;
flex-flow: row wrap;
gap: 16px;
}
</style>
<rh-cta id="deep"><a href="#default">ברירת מחדל</a></rh-cta>
<rh-cta icon="circle-play"><a href="#default-video">ברירת מחדל - וידאו</a></rh-cta>
<rh-cta variant="primary"><a href="#primary">ראשי</a></rh-cta>
<rh-cta variant="primary" icon="circle-play"><a href="#primary-video">ראשי - וידאו</a></rh-cta>
<rh-cta variant="secondary"><a href="#secondary">משני</a></rh-cta>
<rh-cta variant="brick"><a href="#brick">לבנה</a></rh-cta>
<rh-cta variant="brick" icon="circle-play"><a href="#brick-video">לבנה - וידאו</a></rh-cta>
<rh-cta variant="brick" icon="user"><a href="#brick-icon">לבנה עם אייקון</a></rh-cta>
</template>
</shadow-root>
</section>

<section id="resizing">
<h2>Resizing</h2>
<div class="resize">
<rh-cta><a href="#default">Get product details</a></rh-cta>
</div>
<br>
<div class="resize">
<rh-cta icon="circle-play"><a href="#default-video">Get product details</a></rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="primary"><a href="#primary">Get product details</a></rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="primary" icon="circle-play"><a href="#primary-video">Get product details</a></rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="secondary"><a href="#secondary">Get product details</a></rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="brick"><a href="#brick">Get product details</a></rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="brick" icon="user"><a href="#brick-icon">Get product details</a></rh-cta>
</div>
</section>

<section id="resizing">
<h2>Extra-long words</h2>
<div class="resize">
<rh-cta>
<a href="#default">Supercalifragilisticexpialidocious</a>
</rh-cta>
</div>
<br>
<div class="resize">
<rh-cta icon="circle-play">
<a href="#default-video">Supercalifragilisticexpialidocious</a>
</rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="primary">
<a href="#primary">Supercalifragilisticexpialidocious</a>
</rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="primary" icon="circle-play">
<a href="#primary-video">Supercalifragilisticexpialidocious</a>
</rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="secondary">
<a href="#secondary">Supercalifragilisticexpialidocious</a>
</rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="brick">
<a href="#brick">Supercalifragilisticexpialidocious</a>
</rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="brick" icon="user">
<a href="#brick-icon">Supercalifragilisticexpialidocious</a>
</rh-cta>
</div>
</section>

<section id="wrap">
<h2>Force wrap to test arrow line-wrap</h2>
<p>No matter the container size, the arrow trailing the CTA message should never appear on a line by itself.</p>
Expand All @@ -76,4 +158,3 @@ <h2>Link and button styles (displayed inline)</h2>
<rh-cta variant="secondary"><button>Button</button></rh-cta>

</section>

68 changes: 34 additions & 34 deletions elements/rh-cta/rh-cta.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,25 @@
}

::slotted(*) {
vertical-align: middle;
white-space: break-spaces;
vertical-align: middle !important;
white-space: break-spaces !important;
word-break: break-word !important;
display: inline !important;
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: var(--rh-cta-text-decoration);
position: relative;
z-index: 2;
text-decoration: var(--rh-cta-text-decoration) !important;
z-index: 2 !important;
}

::slotted(a):after {
display: block;
content: "";
position: absolute;
inset: 0;
z-index: 3;
}

::slotted(button),
Expand All @@ -29,15 +37,8 @@
text-align: left;
}

#container.icon ::slotted(*) {
padding-inline-end: calc(5px + var(--pf-icon--size)) !important;
}

#container.svg ::slotted(*) {
padding-inline-end: calc(var(--rh-space-md, 8px) + var(--_arrow-size)) !important;
}

#container {
position: relative;
white-space: nowrap;
color: var(--rh-cta-color);
font-family: var(--rh-font-family-heading, RedHatDisplay, "Red Hat Display", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif);
Expand All @@ -52,16 +53,14 @@
--_context-background-color: var(--rh-cta-background-color) !important;
--_arrow-size: 13px;
--_arrow-plus-padding: calc(var(--rh-space-md, 8px) + var(--_arrow-size));
--pf-icon--size: var(--rh-font-size-text-xl, 1.125rem);
--_pf-icon-plus-padding: calc(5px + var(--pf-icon--size));
--pf-icon--size: var(--rh-font-size-text-xl, 1.125rem);
}

.rtl {
text-align: right;
}



/** Inner border */
#container:after {
--_offset: 2px;
Expand All @@ -83,12 +82,12 @@
/** Default variant arrow icon */
pf-icon {
vertical-align: middle;
margin-inline-start: calc(0px - var(--pf-icon--size));
margin-inline-start: var(--rh-space-md, 8px);
}

svg {
vertical-align: middle;
margin-inline-start: calc(0px - var(--_arrow-size));
margin-inline-start: var(--rh-space-md, 8px);
display: inline;
fill: currentcolor;
width: var(--_arrow-size);
Expand Down Expand Up @@ -180,37 +179,29 @@ svg {
font-size: var(--rh-font-size-body-text-md, 1rem);
border-radius: var(--rh-border-radius-default, 3px);
border-width: var(--rh-border-width-sm, 1px);
padding: var(--rh-space-lg, 16px) 0 !important;
padding-inline: var(--rh-space-2xl, 32px);
padding-block: var(--rh-space-lg, 16px);
}

:host([variant]) #container ::slotted(*) {
padding: var(--rh-space-lg, 16px) var(--rh-space-xl, 24px) !important;
display: inline-flex !important;
text-align: center !important;
}

:host([variant$="ary"]) #container ::slotted(*) {
font-size: var(--rh-cta-font-size-priority, var(--rh-font-size-text-lg, 1rem));
text-align: center;
}

:host([variant]) #container.icon ::slotted(*) {
padding-inline-end: calc(var(--_pf-icon-plus-padding) + var(--rh-space-xl, 24px)) !important;
display: inline !important;
}

:host([variant]) #container.svg ::slotted(*) {
:host([variant]) #container.svg ::slotted(*) {
padding-inline-end: calc(var(--_arrow-plus-padding) + var(--rh-space-xl, 24px)) !important;
}

:host([variant]) #container pf-icon {
margin-inline-start: calc(-24px - var(--_arrow-size));
margin-inline-end: var(--rh-space-xl, 24px);
}

/* prefer to group state-bound styles */
/* stylelint-disable-next-line no-descending-specificity */
:host([variant]) #container svg {
margin-inline-start: calc(-24px - var(--pf-icon--size));
margin-inline-end: var(--rh-space-xl, 24px);
display: none;
:host([variant]) #container.icon pf-icon {
margin-inline-start: var(--rh-space-md, 8px);
}

/*****************************************************************************
Expand Down Expand Up @@ -327,6 +318,11 @@ svg {
border-style: solid;
font-family: var(--rh-font-family-body-text, RedHatText, "Red Hat Text", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif);
font-weight: var(--rh-font-weight-body-text-regular, 400);
display: flex;
flex-flow: row wrap;
gap: var(--rh-space-md, 8px);
justify-content: center;
align-items: center;

--rh-cta-background-color: transparent;
--rh-cta-border-color: var(--rh-color-border-subtle-on-light, #c7c7c7);
Expand Down Expand Up @@ -360,6 +356,10 @@ svg {
--rh-cta-active-text-decoration: underline;
}

:host([variant="brick"]) #container.icon pf-icon {
margin-inline: 0;
}

/* chrome <= 103 */
@supports not (translate: 0 0) {
svg {
Expand Down
20 changes: 6 additions & 14 deletions elements/rh-cta/rh-cta.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
import { DirController } from '../../lib/DirController.js';

import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
import { colorContextProvider, type ColorPalette } from '../../lib/context/color/provider.js';

import style from './rh-cta.css';

Expand Down Expand Up @@ -123,15 +122,6 @@ export class RhCta extends LitElement {

@property({ reflect: true }) icon?: string;

/**
* Sets color palette, which affects the element's styles as well as descendants' color theme.
* Overrides parent color context.
* Your theme will influence these colors so check there first if you are seeing inconsistencies.
* See [CSS Custom Properties](#css-custom-properties) for default values
*/
@colorContextProvider()
@property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette;

/**
* Sets color theme based on parent context
*/
Expand Down Expand Up @@ -159,17 +149,19 @@ export class RhCta extends LitElement {
const icon = !!this.icon;
const iconOrSvg = !!this.#isDefault || !!this.icon;
return html`
<span id="container" part="container" class="${classMap({ rtl, [on]: !!on, icon, svg })}">
<slot @slotchange=${this.firstUpdated}></slot>${!iconOrSvg ? '' : this.icon ? html`
<pf-icon icon=${this.icon} size="md" set="far"></pf-icon>` : html`<svg xmlns="http://www.w3.org/2000/svg"
<span id="container" part="container" class="${classMap({ rtl, [on]: !!on, icon, svg })}">${this.variant === 'brick' && this.icon ? html`
<pf-icon icon=${this.icon} size="md" set="far"></pf-icon>` : ''}
<slot @slotchange=${this.firstUpdated}></slot>${!iconOrSvg ? '' : this.variant !== 'brick' && this.icon ? html`
<pf-icon icon=${this.icon} size="md" set="far"></pf-icon>` : this.variant ? '' : html`
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 31.56 31.56" focusable="false" width="1em" aria-hidden="true">
<path d="M15.78 0l-3.1 3.1 10.5 10.49H0v4.38h23.18l-10.5 10.49 3.1 3.1 15.78-15.78L15.78 0z" />
</svg>`}
</span>
`;
}

firstUpdated() {
override firstUpdated() {
let [cta] = this.shadowRoot?.querySelector('slot')?.assignedElements() ?? [];

while (cta instanceof HTMLSlotElement) {
Expand Down
Loading

0 comments on commit 8d16162

Please sign in to comment.