Skip to content

Commit

Permalink
docs: fix image sizes and content lost in conflict merge (#1949)
Browse files Browse the repository at this point in the history 
* docs(accordion): add missing width

* docs(alert): update docs to correct images and sizes

* docs(audio-player): update missing image widths

* docs(avatar): add missing width attributes

* docs: update heights and widths

* docs(surface): fix grid

* docs(accordion): remove px

* docs: add height auto to correctly size images with height attr

* docs(back-to-top): correct width and height attrs

* docs(badge): add width and height attrs to images

* docs(blockquote): add missing height and width attributes

* docs(breadcrumb): add missing height and width attributes

* docs(button): add missing height and width attrs

* docs(card): add missing height and width attrs

* docs(code-block): add missing height and width attrs to images

* docs(cta): add missing height and width attributes from images

* docs(dialog): add missing height and width attributes to images

* docs(footer): add missing height and width attributes to images

* docs(health-index): add missing height and width attributes to images

* docs(icon): add missing height and width attributes to images

* docs(jump-links): add missing height and width attributes to images

* docs(navigation): add missing height and width attributes to images

* docs(navigation-secondary): add missing height and width attributes to images

* docs(pagination): add missing height and width attributes to images

* docs(popover): add missing height and width attributes to images

* docs(progress-steps): add missing height and width attributes to images

* docs(site-status): add missing height and width attributes to images

* docs(skip-link): add missing height and width attributes to images

* docs(spinner): add missing height and width attributes to images

* docs(stat): add missing height and width attributes to images

* docs(subnav): add missing height and width attributes to images

* docs(surface): remove unneeded extra styles from guidelines page

* docs(switch): add missing height and width attributes to images

* docs(table): add missing height and width attributes to images

* docs(tabs): add missing height and width attributes to images

* docs(tag): add missing height and width attributes to images

* docs(tile): add missing height and width attributes to images

* docs(timestamp): add missing height and width attributes to images

* docs(tooltip): add missing height and width attributes to images

* docs(video-embed): add missing height and width attributes to images

* docs(accordion): missed height width attrs on accessibility page

* docs(accordion): missed width-adjustment attr

* docs(accordion): incorrect values oops

* docs(blockquote): fix image paths

* docs(blockquote): fix image paths on blockquote guidelines

* docs(cta): fix width-adjustment values

* docs(health-index): fix width-adjustment values

* docs(icon): fix width-adjustment values

* docs(switch): fix width-adjustment values

* docs(table): fix width-adjustment values

* docs(tabs): fix width-adjustment values

* docs: clean up masthead and subnav z-index

* docs: small tweak broken image errant character
  • Loading branch information
@zeroedin
zeroedin authored Oct 4, 2024
1 parent 067bc1c commit 09b6ec0
Show file tree
Hide file tree
Showing 162 changed files with 4,634 additions and 4,090 deletions.
1 change: 1 addition & 0 deletions docs/assets/javascript/elements/uxdot-example.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
align-items: var(--_alignment, center);
justify-content: center;
max-width: 100%;
height: auto;
width: var(--_width, 100%);
}

Expand Down
4 changes: 0 additions & 4 deletions docs/assets/javascript/elements/uxdot-masthead.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,9 @@
display: block;
background-color: var(--rh-color-surface-darkest);
color: var(--rh-color-text-primary-on-dark);
position: fixed;
inset: 0;
height: max-content;
z-index: var(--uxdot-masthead-z-index, 2);
container-type: inline-size;
container-name: host;
z-index: 10;
}

#container {
Expand Down
14 changes: 13 additions & 1 deletion docs/styles/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@
@layer layout {
:root {
--uxdot-masthead-max-height: 72px;
--uxdot-masthead-z-index: 4;
--container-min-width: 992px;
--container-max-width: 1332px;
}
Expand Down Expand Up @@ -291,14 +292,25 @@
top: unset;
}

/**
* position masthead as fixed
* z-index: to float above scroll page content
*/
uxdot-masthead {
position: fixed;
inset: 0;
z-index: var(--uxdot-masthead-z-index);
}

/**
* Sticky header pattern
* progressive enhancement sticky, using :has()
* z-index: of masthead + 1
**/
uxdot-header:has(rh-subnav) {
position: sticky;
top: -54px; /* masthead height (72px) + subnav height (56px) - header mobile height (182px) */
z-index: 2;
z-index: calc(var(--uxdot-masthead-z-index) - 1); /* z-index 1 under masthead to allow content to scroll under */

@container main (min-width: 768px) {
top: -70px; /* masthead (72px) + subnav (56px) - header tablet (198px) */
Expand Down
7 changes: 5 additions & 2 deletions elements/rh-accordion/docs/00-overview.md
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
## Overview
{{ tagName | getElementDescription }}

<uxdot-example>
<img src="./accordion-sample-element.png" alt="An accordion with four collapsed panels and one expanded panel">
<uxdot-example width-adjustment="872px">
<img src="./accordion-sample-element.png"
alt="An accordion with four collapsed panels and one expanded panel"
width="872"
height="420">
</uxdot-example>

{% repoStatusList repoStatus=repoStatus %}
Expand Down
103 changes: 73 additions & 30 deletions elements/rh-accordion/docs/10-style.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,11 @@ Accordion panels include title text, a chevron icon, body text, and other conten

### Anatomy

<uxdot-example>
<img src="../accordion-anatomy.png" alt="Anatomy of an accordion with lots of annotations pointing to various parts">
<uxdot-example width-adjustment="872px">
<img src="../accordion-anatomy.png"
alt="Anatomy of an accordion with lots of annotations pointing to various parts"
width="872"
height="755">
</uxdot-example>

1) Collapsed panel
Expand All @@ -21,58 +24,80 @@ Accordion panels include title text, a chevron icon, body text, and other conten
### Sizes
There are two available sizes and the only difference is the title text size. You can use the Small size on large breakpoints, but not the Large size on small breakpoints due to the potential of long title text wrapping to more than two lines.

<uxdot-example>
<img src="../accordion-sizes.png" alt="A large size accordion with text underneath saying ‘Large size’ and a small size accordion with text underneath saying ‘Small size’">
<uxdot-example width-adjustment="872px">
<img src="../accordion-sizes.png"
alt="A large size accordion with text underneath saying ‘Large size’ and a small size accordion with text underneath saying ‘Small size’"
width="872"
height="536">
</uxdot-example>

## Theme
An accordion is available in both light and dark themes. The light theme expanded panel includes a box shadow, but the dark theme does not.
### Light theme

<uxdot-example>
<img src="../accordion-theme-light.png" alt="Light theme accordion with an expanded panel">
<uxdot-example width-adjustment="872px">
<img src="../accordion-theme-light.png"
alt="Light theme accordion with an expanded panel"
width="872"
height="213">
</uxdot-example>

### Dark theme

<uxdot-example color-palette="darkest">
<img src="../accordion-theme-dark.png" alt="Dark theme accordion with an expanded panel">
<uxdot-example color-palette="darkest" width-adjustment="872px">
<img src="../accordion-theme-dark.png"
alt="Dark theme accordion with an expanded panel"
width="872"
height="213">
</uxdot-example>

## Configuration

An expanded panel does not have a maximum height, but it may scroll if constrained by vertical space. The width of an accordion varies based on content and page layout. Title text and icons are horizontally aligned.

<uxdot-example>
<img src="../accordion-configuration.png" alt="How an accordion is constructed showing alignment, space, scrolling, and width details">
<uxdot-example width-adjustment="872px">
<img src="../accordion-configuration.png"
alt="How an accordion is constructed showing alignment, space, scrolling, and width details"
width="872"
height="356">
</uxdot-example>

### Accent slot

The accent slot can be positioned inline or below the panel's title. This can contain tags, badges, or other small elements with secondary information.

<uxdot-example>
<img src="../accordion-accent-slot.png" alt="Accordion panel with two tags in inline accent slot and an accordion with two tags below the title">
<uxdot-example width-adjustment="872px">
<img src="../accordion-accent-slot.png"
alt="Accordion panel with two tags in inline accent slot and an accordion with two tags below the title" width="872"
height="221">
</uxdot-example>

### Nested panels
Panels can be nested to help organize complex or granular sections of content.

<uxdot-example>
<img src="../accordion-nested-panels.png" alt="An accordion with an expanded panel and a nested expanded panel">
<uxdot-example width-adjustment="872px">
<img src="../accordion-nested-panels.png"
alt="An accordion with an expanded panel and a nested expanded panel"
width="872"
height="442">
</uxdot-example>

### Stacked panels
Multiple panels can be expanded simultaneously even when nested.

<uxdot-example>
<img src="../accordion-stacked-panels.png" alt="An accordion with one collapsed panel on top and two stacked expanded panels below">
<uxdot-example width-adjustment="872px">
<img src="../accordion-stacked-panels.png"
alt="An accordion with one collapsed panel on top and two stacked expanded panels below"
width="872"
height="999">
</uxdot-example>

## Space

<uxdot-example>
<img src="../accordion-space.png" alt="Accordion spacing within panels and in between elements like titles, body text, rules, and icons">
<uxdot-example width-adjustment="872px">
<img src="../accordion-space.png"
alt="Accordion spacing within panels and in between elements like titles, body text, rules, and icons" width="872"
height="1336">
</uxdot-example>

<rh-table>
Expand All @@ -89,12 +114,18 @@ Interaction states are visual representations used to communicate the status of

### Hover

<uxdot-example>
<img src="../accordion-hover-theme-light.png" alt="Light theme accordion with a hover state">
<uxdot-example width-adjustment="872px">
<img src="../accordion-hover-theme-light.png"
alt="Light theme accordion with a hover state"
width="872"
height="213">
</uxdot-example>

<uxdot-example color-palette="darkest">
<img src="../accordion-hover-theme-dark.png" alt="Dark theme accordion with a hover state">
<uxdot-example width-adjustment="872px" color-palette="darkest">
<img src="../accordion-hover-theme-dark.png"
alt="Dark theme accordion with a hover state"
width="872"
height="213">
</uxdot-example>


Expand All @@ -119,12 +150,18 @@ Interaction states are visual representations used to communicate the status of

### Focus

<uxdot-example>
<img src="../accordion-focus-theme-light.png" alt="Light theme accordion with a focus state">
<uxdot-example width-adjustment="872px">
<img src="../accordion-focus-theme-light.png"
alt="Light theme accordion with a focus state"
width="872"
height="213">
</uxdot-example>

<uxdot-example color-palette="darkest">
<img src="../accordion-focus-theme-dark.png" alt="Dark theme accordion with a focus state">
<uxdot-example width-adjustment="872px" color-palette="darkest">
<img src="../accordion-focus-theme-dark.png"
alt="Dark theme accordion with a focus state"
width="872"
height="213">
</uxdot-example>

<rh-table>
Expand Down Expand Up @@ -153,12 +190,18 @@ Interaction states are visual representations used to communicate the status of

### Active

<uxdot-example>
<img src="../accordion-active-theme-light.png" alt="Light theme accordion with an active state">
<uxdot-example width-adjustment="872px">
<img src="../accordion-active-theme-light.png"
alt="Light theme accordion with an active state"
width="872"
height="213">
</uxdot-example>

<uxdot-example>
<img src="../accordion-active-theme-dark.png" alt="Dark theme accordion with an active state">
<uxdot-example width-adjustment="872px">
<img src="../accordion-active-theme-dark.png"
alt="Dark theme accordion with an active state"
width="872"
height="213">
</uxdot-example>

<rh-table>
Expand Down
Loading

0 comments on commit 09b6ec0

Please sign in to comment.