Skip to content

Commit 88b26ed

Browse files
chrisdo1castastrophekylebuch8starryeyez024
committed
fix: pfe-navigation: Trigger link color, font-size, logo min-width, spacing (#631)
* Set trigger link color to be white when not expanded. * fixed trigger size and color for older browsers. * Set tray contents to center using justify-content, set lightdom styles to match this. * close overlay on mobile navigation click * adjust margins between triggers in lightdom. * Adjust margin & font size for icons in edge. * switching from close event to click event on the actual button * adding a click listener to the overlay to close it when it's open * Add minimum width variable for logo * fix: playing squishy window can cause overlay to stay open * Updates to nav alignment / width; add broadcast vars to pfelement * fixed padding collapsed caused by flexbox, fixed safari overlay width bug. * centered utility links * removed centered links, set flex-basis for all menu items. * removed flex: 1 from slotted trays, fixed accordion width on mobile. * adjusted breakpoints for menus on mobile wide. * Adjusted widths & flex props of various nav items * made nav triggers wider, centered nav triggers except for the ones in accordions. * modify spacing on nav items and around nav containers * Update to breakpoint function to accept custom breakpoints from local variables map; Adjust spacing on nav items * Fixed broadcast function, resolved menu breakpoint issues from previous commit, added map-merges so all variables are available in each file * Made max--trigger wider at xl breakpoints * Code revisions, removed flex styles from logo. * Added flex styles back to logo, set margin-right for logo in Edge * removed broken code in demo, adjusted icon-font triggers to 12px in lightdom * Fixed max--trigger var that was breaking IE11, set tray to column display in IE11. * Added PanelContainer--padding * Fixed accordion padding variables * Add ie11 style fixes: add padding to top/bottom of tray; force trigger text to wrap * removed sass var that was breaking ie11, fixed tray padding * Set max-width for slotted triggers in ie11 * Remove grid overrides for tray footer in ie11 fix tray alignment * Moved padding between main + utility navs to main nav when show_links is present * edge-trigger-color adjust accordion chevron position, adjust alignment of mobile tray and padding * Fix ie11 tray padding * drop font size on small desktop links, remove commented out code * fixed trigger padding vars Co-authored-by: [ Cassondra ] <[email protected]> Co-authored-by: Kyle Buchanan <[email protected]> Co-authored-by: Kendall Totten <[email protected]>
1 parent f20063d commit 88b26ed

File tree

14 files changed

+1952
-259
lines changed

14 files changed

+1952
-259
lines changed

‎elements/pfe-accordion/demo/index.html‎

Lines changed: 30 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
1616
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typebase.css/0.5.0/typebase.css">
1717
-->
18-
18+
1919
<link rel="stylesheet" href="../../pfe-styles/dist/pfe-base.css" />
2020
<link rel="stylesheet" href="../../pfe-styles/dist/pfe-context.css" />
2121
<link rel="stylesheet" href="../../pfe-styles/dist/pfe-layouts.css" />
@@ -31,13 +31,13 @@
3131
'../../pfe-cta/dist/pfe-cta.umd.js'
3232
])</script>
3333
</head>
34-
<body unresolved>
34+
<body unresolved>
3535

3636
<style>
3737
section {
3838
padding: 2rem;
3939
}
40-
40+
4141
.dark-background {
4242
background-color: #252525;
4343
--theme: dark;
@@ -68,11 +68,11 @@
6868
.border-card h3 {
6969
margin-top: 0;
7070
}
71-
71+
7272
.resource-card [slot="pfe-card--header"] {
7373
text-transform: uppercase;
7474
}
75-
75+
7676
/* Example not using theme variable */
7777
.custom-styles {
7878
background-color: #e00;
@@ -86,7 +86,7 @@
8686
--pfe-accordion--accent: #fff;
8787
--pfe-theme--color--ui-base: #444;
8888
}
89-
89+
9090
.custom-styles h2 {
9191
margin-top: 0;
9292
}
@@ -204,28 +204,29 @@ <h2>Accordion component on saturated</h2>
204204
</header>
205205
<article>
206206
<pfe-accordion>
207-
<pfe-accordion-header>
208-
<h3>Nested panel example</h3>
209-
</pfe-accordion-header>
210-
<pfe-accordion-panel>
211-
<pfe-accordion>
212-
<pfe-accordion-header>
213-
<h3>Panel with multiple paragraphs</h3>
214-
</pfe-accordion-header>
215-
<pfe-accordion-panel>
216-
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
217-
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
218-
et ea rebum.</p>
219-
<p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor
220-
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
221-
magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
222-
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
223-
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
224-
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
225-
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
226-
</pfe-accordion-panel>
227-
</pfe-accordion>
228-
</pfe-accordion-panel>
207+
<pfe-accordion-header>
208+
<h3>Nested panel example</h3>
209+
</pfe-accordion-header>
210+
<pfe-accordion-panel>
211+
<pfe-accordion>
212+
<pfe-accordion-header>
213+
<h3>Panel with multiple paragraphs</h3>
214+
</pfe-accordion-header>
215+
<pfe-accordion-panel>
216+
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
217+
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
218+
dolores et ea rebum.</p>
219+
<p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
220+
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
221+
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
222+
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
223+
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
224+
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
225+
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
226+
amet.</p>
227+
</pfe-accordion-panel>
228+
</pfe-accordion>
229+
</pfe-accordion-panel>
229230
<pfe-accordion-header>
230231
<h3>Panel with links</h3>
231232
</pfe-accordion-header>
@@ -250,7 +251,7 @@ <h3>Panel with CTA</h3>
250251
</pfe-accordion>
251252
</article>
252253
</pfe-band>
253-
254+
254255
<section class="light-gray-background">
255256
<h2>&lt;pfe-accordion&gt;</h2><br/>
256257
<pfe-accordion>

‎elements/pfe-accordion/src/pfe-accordion-header.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ button[aria-expanded="true"] {
7676

7777
:host([pfe-disclosure="true"]) {
7878
button {
79-
--pfe-accordion--Trigger--padding: #{pfe-local(PaddingBase)} calc(#{pfe-local(PaddingBase)} * 1.5) #{pfe-local(PaddingBase)} calc((#{pfe-local(PaddingBase)} * 3) + 2px) !important;
79+
--pfe-accordion--Trigger--padding: #{pfe-local(base--Padding)} calc(#{pfe-local(base--Padding)} * 1.5) #{pfe-local(base--Padding)} calc((#{pfe-local(base--Padding)} * 3) + 2px) !important;
8080
@include browser-query(ie11) {
8181
padding: 16px 24px 16px 47px;
8282
border-right-color: #{pfe-color(surface--border)};

‎elements/pfe-accordion/src/pfe-accordion-panel.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ $LOCAL: accordion;
2020

2121
.container {
2222
@include pfe-panel-container;
23-
--pfe-accordion--PanelContainer--padding: 0 calc(#{pfe-local(PaddingBase)} * 3) #{pfe-local(PaddingBase)} calc(#{pfe-local(PaddingBase)} * 1.5);
23+
--pfe-accordion--panel-container--Padding: 0 calc(#{pfe-local(base--Padding)} * 3) #{pfe-local(base--Padding)} calc(#{pfe-local(base--Padding)} * 1.5);
2424
}
2525

2626
:host(:last-of-type[expanded]) {
@@ -53,6 +53,6 @@ $LOCAL: accordion;
5353

5454
:host([pfe-disclosure="true"]) {
5555
.container {
56-
--pfe-accordion--PanelContainer--padding: 0 calc(#{pfe-local(PaddingBase)} * 3) #{pfe-local(PaddingBase)} calc((#{pfe-local(PaddingBase)} * 1.5) - 4px);
56+
--pfe-accordion--panel-container--padding: 0 calc(#{pfe-local(base--Padding)} * 3) #{pfe-local(base--Padding)} calc((#{pfe-local(base--Padding)} * 1.5) - 4px);
5757
}
5858
}

‎elements/pfe-navigation/demo/index.html‎

Lines changed: 7 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -45,21 +45,20 @@
4545
</head>
4646

4747
<body unresolved>
48-
<h1>&lt;pfe-navigation&gt;</h1>
49-
<pfe-navigation pfe-sticky pfe-close-on-click="external" pfe-menu-label="Menu">
48+
49+
<pfe-navigation style="--pfe-navigation__logo--MinWidth:150px;" pfe-sticky pfe-close-on-click="external" pfe-menu-label="Menu">
5050
<!-- Skip navigation -->
5151
<div slot="skip">
5252
<ul>
5353
<li><a href="#rh-main-content">Skip to content</a></li>
5454
</ul>
5555
</div>
5656
<!-- Site logo -->
57-
<div slot="logo">
58-
<a href="https://company.com">
57+
58+
<a slot="logo" href="https://company.com">
5959
<img class="logo" src="https://via.placeholder.com/150x50.png" title="Company logo" />
6060
<!-- <img class="logo" src="https://www.redhat.com/profiles/rh/themes/redhatdotcom/img/logo.svg" width="200" title="Company logo" /> -->
6161
</a>
62-
</div>
6362
<!-- Search -->
6463
<pfe-navigation-item slot="search" pfe-icon="web-search">
6564
<h2 slot="trigger"><a href="#url-to-search-page">Search</a></h2>
@@ -645,69 +644,7 @@ <h3 slot="pfe-card--header">Aside: left full bottom</h3>
645644
</pfe-card>
646645
</pfe-band>
647646

648-
<pfe-band pfe-color="darkest" pfe-aside-mobile="top" pfe-aside-height="full">
649-
<header slot="pfe-band--header">
650-
<h2>Darkest band with header tag</h2>
651-
<p class="custom-band-summary">Header region, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
652-
ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
653-
</header>
654-
<section class="body1 generic1 band">
655-
<p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
656-
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
657-
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
658-
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
659-
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
660-
dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
661-
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
662-
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
663-
<pfe-cta priority="primary" slot="pfe-band--footer">
664-
<a href="#">Learn more</a>
665-
</pfe-cta>
666-
</section>
667-
<pfe-card color="dark" slot="pfe-band--aside">
668-
<h3 slot="pfe-card--header"d--header">Aside: right full top</h3>
669-
<p>Ut wisi enim ad minim veniam. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
670-
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
671-
dolores et ea rebum.</p>
672-
<pfe-cta slot="pfe-card--footer" priority="tertiary">
673-
<a href="#">Learn more</a>
674-
</pfe-cta>
675-
</pfe-card>
676-
</pfe-band>
677-
678-
<pfe-band pfe-color="accent" pfe-aside-desktop="left" pfe-aside-mobile="top">
679-
<header slot="pfe-band--header">
680-
<h2>Accent band</h2>
681-
<p class="custom-band-summary">Header region, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
682-
ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
683-
</header>
684-
<p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
685-
diam voluptua.</p>
686-
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
687-
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
688-
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
689-
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor
690-
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
691-
erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
692-
sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
693-
<pfe-cta priority="primary">
694-
<a href="#">Learn more</a>
695-
</pfe-cta>
696-
<pfe-card color="lightest" slot="pfe-band--aside">
697-
<h3 slot="pfe-card--header">Aside: left body top</h3>
698-
<p>Ut wisi enim ad minim veniam.</p>
699-
<pfe-cta slot="pfe-card--footer" priority="tertiary">
700-
<a href="#">Learn more</a>
701-
</pfe-cta>
702-
</pfe-card>
703-
<footer slot="pfe-band--footer" class="custom-footnote">
704-
<ol>
705-
<li>Footnote ipsum accusam et justo duo dolores et ea rebum.</li>
706-
<li>Footnote ipsum accusam et justo duo dolores et ea rebum.</li>
707-
</ol>
708-
</footer>
709-
</pfe-band>
710-
647+
711648
<pfe-band pfe-aside-desktop="left" pfe-aside-mobile="top">
712649
<header slot="pfe-band--header">
713650
<h2>Short content band</h2>
@@ -731,47 +668,15 @@ <h3 slot="pfe-card--header">Aside: left body top</h3>
731668
</footer>
732669
</pfe-band>
733670

734-
<pfe-band pfe-color="complement" pfe-aside-desktop="left" pfe-aside-mobile="top" pfe-aside-height="body">
735-
<header slot="pfe-band--header">
736-
<h2>Complement band, layout classes</h2>
737-
<p class="custom-band-summary">Header region, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
738-
ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
739-
</header>
740-
<article class="pfe-l-grid pfe-m-gutters pfe-m-all-6-col">
741-
<pfe-card>
742-
<h3>Lorem ipsum</h3>
743-
<p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
744-
sed diam voluptua.</p>
745-
<pfe-cta slot="pfe-card--footer" priority="tertiary">
746-
<a href="#">Learn more</a>
747-
</pfe-cta>
748-
</pfe-card>
749-
<pfe-card>
750-
<h3>Lorem ipsum</h3>
751-
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
752-
est Lorem ipsum dolor sit amet.</p>
753-
<pfe-cta slot="pfe-card--footer" priority="tertiary">
754-
<a href="#">Learn more</a>
755-
</pfe-cta>
756-
</pfe-card>
757-
</article>
758-
<pfe-card color="dark" slot="pfe-band--aside">
759-
<h3 slot="pfe-card--header">Aside: right body bottom</h3>
760-
<p>Ut wisi enim ad minim veniam. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit
761-
amet.</p>
762-
<pfe-cta slot="pfe-card--footer" priority="tertiary">
763-
<a href="#">Learn more</a>
764-
</pfe-cta>
765-
</pfe-card>
766-
</pfe-band>
671+
767672

768673
<script>
769674
// Listen for the toggled event and if the slot is the language slot, inject new content
770675
// Replicates AJAX-like functionality
771676
document.addEventListener("pfe-navigation-item:open", function (event) {
772677
if (event.target && event.target.slot === "language") {
773678
const container = event.target.querySelector(".pfe-navigation-item__tray--container");
774-
const newContent = "<p>Inject new content into the " + event.detail.slot + " slot.</p>";
679+
const newContent = "<p>Inject new content into the " + event.detail.slot + " slot. Adding more words and text here, to show where the tray wraps.</p>";
775680
if (container) {
776681
if (event.target.expanded) {
777682
setTimeout(function () {

0 commit comments

Comments
 (0)