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.

Sign up for GitHub

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

docs: various demo fixes #1678

Merged
merged 29 commits into from
Jul 15, 2024
Merged

docs: various demo fixes #1678

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
a168c93
docs: fix card heading sizes
bennypowers Jun 27, 2024
8162846
docs: juggle selectors
bennypowers Jun 27, 2024
b16760e
docs: more selector juggling
bennypowers Jun 27, 2024
903ed4f
docs: a different approach
bennypowers Jun 27, 2024
d1fc393
fix: context demo height
bennypowers Jun 27, 2024
16a4546
docs: reorder demo DOM
bennypowers Jun 27, 2024
6baca56
docs: icons from node_modules
bennypowers Jun 27, 2024
ecde53b
docs: icon import map
bennypowers Jun 27, 2024
6b21265
docs: accordion demo height
bennypowers Jun 27, 2024
29a2428
docs(accordion): accents
bennypowers Jun 27, 2024
55a60ab
docs(accordion): accents demos
bennypowers Jun 27, 2024
13f09d9
docs: import map for icon in demos?
bennypowers Jun 27, 2024
2897a3a
docs(status-page): Fixing status table padding (#1674)
markcaron Jun 27, 2024
b798008
fix(card): slightly more specific selectors
bennypowers Jun 28, 2024
3bc5964
docs: hide demos tab when there are none (#1684)
bennypowers Jul 1, 2024
603182e
docs(tile): fix light theme selected state image (#1683)
marionnegp Jul 2, 2024
e6a3668
docs: fix base "View Fullscreen" link URL on element Demos pages (#1688)
adamjohnson Jul 3, 2024
c355d86
docs: Added alt text to Typography page image (#1691)
hellogreg Jul 3, 2024
77291af
docs: added coming soon section to popover docs (#1695)
hellogreg Jul 3, 2024
a5b51e6
docs: add aria-labels to sample icons on status page (#1697)
hellogreg Jul 3, 2024
203f3d4
docs: elements > code > accordion + table layout tweaks (#1613)
adamjohnson Jul 9, 2024
95c2d55
docs: added alt text to kitten image on card pattern page (#1699)
hellogreg Jul 9, 2024
feb39dd
docs: redirect from /components/get-started (#1707)
bennypowers Jul 12, 2024
0874a85
docs(progress steps): adding coming soon messaging (#1712)
markcaron Jul 12, 2024
66b8ef9
chore: revert card css changes
bennypowers Jul 15, 2024
3f68b4c
Merge branch 'main' into docs/card-headings
bennypowers Jul 15, 2024
db92ecf
docs(site-status): minor demo refactors
bennypowers Jul 15, 2024
c714f36
docs: demo layout changes
bennypowers Jul 15, 2024
b9e3ed7
Merge branch 'staging/charmander' into docs/card-headings
bennypowers Jul 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions docs/elements/demos.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,14 @@
}}
}
</script>
{%- else -%}
<script type="sample/importmap">
{
"imports": {
"@patternfly/icons/": "https://ux.redhat.com/assets/packages/@patternfly/icons/"
}
}
</script>
{%- endif -%}
{% for filename, config in playground.files %}
{%- if not config.label -%}
Expand Down
31 changes: 31 additions & 0 deletions elements/rh-accordion/demo/accents-bottom.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<rh-accordion accents="bottom">
<rh-accordion-header>
<h4>Item One</h4>
<rh-tag slot="accents" color="green" variant="filled" icon="info" icon-set="fas">Green</rh-tag>
<rh-tag slot="accents" color="red" variant="filled" icon="info" icon-set="fas">Red</rh-tag>
<rh-tag slot="accents" color="orange" variant="filled" icon="bell" icon-set="fas">Orange</rh-tag>
<rh-tag slot="accents" color="purple" variant="filled" icon="ban" icon-set="fas">Purple</rh-tag>
</rh-accordion-header>
<rh-accordion-panel>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</rh-accordion-panel>
<rh-accordion-header>
<h4>Item Two</h4>
<rh-tag slot="accents" color="green" variant="filled" icon="info" icon-set="fas">Green</rh-tag>
</rh-accordion-header>
<rh-accordion-panel>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</rh-accordion-panel>
<rh-accordion-header>
<h4>Item Three</h4>
<rh-tag slot="accents" color="red" variant="filled" icon="info" icon-set="fas">Red</rh-tag>
</rh-accordion-header>
<rh-accordion-panel>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</rh-accordion-panel>
</rh-accordion>

<script type="module">
import '@rhds/elements/rh-accordion/rh-accordion.js';
import '@rhds/elements/rh-tag/rh-tag.js';
</script>
98 changes: 29 additions & 69 deletions elements/rh-accordion/demo/accents.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,71 +1,31 @@
<section id="inline">
<h3>Inline</h3>
<rh-accordion>
<rh-accordion-header>
<h4>Item One</h4>
<rh-tag slot="accents" color="green" variant="filled" icon="info" icon-set="fas">Green</rh-tag>
<rh-tag slot="accents" color="red" variant="filled" icon="info" icon-set="fas">Red</rh-tag>
<rh-tag slot="accents" color="orange" variant="filled" icon="bell" icon-set="fas">Orange</rh-tag>
<rh-tag slot="accents" color="purple" variant="filled" icon="ban" icon-set="fas">Purple</rh-tag>
</rh-accordion-header>
<rh-accordion-panel>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</rh-accordion-panel>
<rh-accordion-header>
<h4>Item Two</h4>
<rh-tag slot="accents" color="green" variant="filled" icon="info" icon-set="fas">Green</rh-tag>
</rh-accordion-header>
<rh-accordion-panel>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</rh-accordion-panel>
<rh-accordion-header>
<h4>Item Three</h4>
<rh-tag slot="accents" color="red" variant="filled" icon="info" icon-set="fas">Red</rh-tag>
</rh-accordion-header>
<rh-accordion-panel>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</rh-accordion-panel>
</rh-accordion>
</section>


<section id="bottom">
<h3>Bottom</h3>
<rh-accordion accents="bottom">
<rh-accordion-header>
<h4>Item One</h4>
<rh-tag slot="accents" color="green" variant="filled" icon="info" icon-set="fas">Green</rh-tag>
<rh-tag slot="accents" color="red" variant="filled" icon="info" icon-set="fas">Red</rh-tag>
<rh-tag slot="accents" color="orange" variant="filled" icon="bell" icon-set="fas">Orange</rh-tag>
<rh-tag slot="accents" color="purple" variant="filled" icon="ban" icon-set="fas">Purple</rh-tag>
</rh-accordion-header>
<rh-accordion-panel>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</rh-accordion-panel>
<rh-accordion-header>
<h4>Item Two</h4>
<rh-tag slot="accents" color="green" variant="filled" icon="info" icon-set="fas">Green</rh-tag>
</rh-accordion-header>
<rh-accordion-panel>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</rh-accordion-panel>
<rh-accordion-header>
<h4>Item Three</h4>
<rh-tag slot="accents" color="red" variant="filled" icon="info" icon-set="fas">Red</rh-tag>
</rh-accordion-header>
<rh-accordion-panel>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</rh-accordion-panel>
</rh-accordion>
</section>

<style>
#inline, #bottom {
margin-block-end: var(--rh-space-3xl, 48px);
}
</style>
<rh-accordion>
<rh-accordion-header>
<h4>Item One</h4>
<rh-tag slot="accents" color="green" variant="filled" icon="info" icon-set="fas">Green</rh-tag>
<rh-tag slot="accents" color="red" variant="filled" icon="info" icon-set="fas">Red</rh-tag>
<rh-tag slot="accents" color="orange" variant="filled" icon="bell" icon-set="fas">Orange</rh-tag>
<rh-tag slot="accents" color="purple" variant="filled" icon="ban" icon-set="fas">Purple</rh-tag>
</rh-accordion-header>
<rh-accordion-panel>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</rh-accordion-panel>
<rh-accordion-header>
<h4>Item Two</h4>
<rh-tag slot="accents" color="green" variant="filled" icon="info" icon-set="fas">Green</rh-tag>
</rh-accordion-header>
<rh-accordion-panel>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</rh-accordion-panel>
<rh-accordion-header>
<h4>Item Three</h4>
<rh-tag slot="accents" color="red" variant="filled" icon="info" icon-set="fas">Red</rh-tag>
</rh-accordion-header>
<rh-accordion-panel>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</rh-accordion-panel>
</rh-accordion>

<script type="module">
import '@rhds/elements/rh-accordion/rh-accordion.js';
import '@rhds/elements/rh-tag/rh-tag.js';
</script>
import '@rhds/elements/rh-accordion/rh-accordion.js';
import '@rhds/elements/rh-tag/rh-tag.js';
</script>
7 changes: 7 additions & 0 deletions elements/rh-accordion/demo/color-context.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,13 @@ <h3>Item Three</h3>
</rh-accordion>
</rh-context-demo>

<style>
zeroedin marked this conversation as resolved.
Show resolved Hide resolved
rh-context-demo {
height: auto;
min-height: 100%;
}
</style>

<script type="module">
import '@rhds/elements/rh-accordion/rh-accordion.js';
import '@rhds/elements/rh-cta/rh-cta.js';
Expand Down
10 changes: 5 additions & 5 deletions elements/rh-alert/demo/alternate.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,6 @@ <h3 slot="header">Danger</h3>
</rh-alert>
</section>

<script type="module">
import '@rhds/elements/rh-alert/rh-alert.js';
import '@rhds/elements/rh-button/rh-button.js';
</script>

<style>
#alert-variant-alternate {
display: grid;
Expand All @@ -53,3 +48,8 @@ <h3 slot="header">Danger</h3>
gap: var(--rh-space-lg, 16px);
}
</style>

<script type="module">
import '@rhds/elements/rh-alert/rh-alert.js';
import '@rhds/elements/rh-button/rh-button.js';
</script>
10 changes: 5 additions & 5 deletions elements/rh-alert/demo/inline.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,6 @@ <h3 slot="header">Danger</h3>
</rh-alert>
</section>

<script type="module">
import '@rhds/elements/rh-alert/rh-alert.js';
import '@rhds/elements/rh-button/rh-button.js';
</script>

<style>
#alert-variant-inline {
display: grid;
Expand All @@ -53,3 +48,8 @@ <h3 slot="header">Danger</h3>
gap: var(--rh-space-lg, 16px);
}
</style>

<script type="module">
import '@rhds/elements/rh-alert/rh-alert.js';
import '@rhds/elements/rh-button/rh-button.js';
</script>
10 changes: 5 additions & 5 deletions elements/rh-alert/demo/states.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,6 @@ <h3 slot="header">Danger</h3>
</rh-alert>
</section>

<script type="module">
import '@rhds/elements/rh-alert/rh-alert.js';
import '@rhds/elements/rh-button/rh-button.js';
</script>

<style>
#alert-states {
display: grid;
Expand All @@ -61,3 +56,8 @@ <h3 slot="header">Danger</h3>
gap: var(--rh-space-lg, 16px);
}
</style>

<script type="module">
import '@rhds/elements/rh-alert/rh-alert.js';
import '@rhds/elements/rh-button/rh-button.js';
</script>
10 changes: 5 additions & 5 deletions elements/rh-alert/demo/toast.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,6 @@ <h3 slot="header">Danger</h3>
</rh-alert>
</section>

<script type="module">
import '@rhds/elements/rh-alert/rh-alert.js';
import '@rhds/elements/rh-button/rh-button.js';
</script>

<style>
#alert-variant-toast {
display: grid;
Expand All @@ -53,3 +48,8 @@ <h3 slot="header">Danger</h3>
gap: var(--rh-space-lg, 16px);
}
</style>

<script type="module">
import '@rhds/elements/rh-alert/rh-alert.js';
import '@rhds/elements/rh-button/rh-button.js';
</script>
9 changes: 6 additions & 3 deletions elements/rh-card/demo/rh-card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,14 @@ <h2 slot="header">Card</h2>
</rh-cta>
</rh-card>

<style>
rh-card {
& h2 { font-size: initial; }
}
</style>

<script type="module">
import '@rhds/elements/rh-cta/rh-cta.js';
import '@rhds/elements/rh-card/rh-card.js';
</script>

<style>
[data-demo] { height: auto; }
</style>
4 changes: 2 additions & 2 deletions elements/rh-card/rh-card.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ article {
display: none;
}

#header ::slotted(:is(h1, h2, h3, h4, h5, h6)),
#header ::slotted([slot]:is(h1, h2, h3, h4, h5, h6)),
bennypowers marked this conversation as resolved.
Show resolved Hide resolved
#body ::slotted(:is(h1, h2, h3, h4, h5, h6)) {
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 @@ -80,7 +80,7 @@ article {
margin-block: auto var(--rh-space-xl, 24px);
}

#header ::slotted(:is(h1, h2, h3, h4, h5, h6)) {
#header ::slotted([slot]:is(h1, h2, h3, h4, h5, h6)) {
bennypowers marked this conversation as resolved.
Show resolved Hide resolved
margin: unset;
font-weight: var(--rh-font-weight-body-text-medium, 500);
font-size: inherit;
Expand Down
1 change: 1 addition & 0 deletions eleventy.config.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ module.exports = function(eleventyConfig) {
'@rhds/tokens/media.js',
'@rhds/tokens/meta.js',
'@patternfly/elements',
'@patternfly/icons/',
'@patternfly/icons/far/',
'@patternfly/icons/fas/',
'@patternfly/icons/fab/',
Expand Down
2 changes: 1 addition & 1 deletion lib/elements/rh-context-demo/rh-context-demo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
:host {
display: block;
height: 100%;
min-height: 100%;
}

.light { color: var(--rh-color-text-primary-on-light, #151515); }
Expand Down
1 change: 1 addition & 0 deletions scripts/playgrounds.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -294,6 +294,7 @@ class PlaygroundDemo {
const dir = demoSlug === 'index.html' ? '.' : '..';
const resourcePrefix = `${primaryElementName}-${demoSlug.replace('.html', '')}-inline`;
let count = 0;
// TODO: add an empty stylesheet if none exists
for (const node of Tools.queryAll<Tools.Element>(this.fragment, Tools.isElementNode)) {
if (isInlineModule(node)) {
const moduleName = `${resourcePrefix}-${count++}.js`;
Expand Down
Loading