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

Jump to bottom

refactor(about-modal): moved to modal-box #5216

Merged
merged 5 commits into from
Nov 10, 2022
Merged

refactor(about-modal): moved to modal-box #5216

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e8e159f
refactor(about-modal): moved to modal-box
mattnolting Nov 4, 2022
c7db489
refactor(about-modal): updated width/height
mattnolting Nov 8, 2022
9150789
refactor(about-modal): removed max-width
mattnolting Nov 9, 2022
e16eef9
refactor(about-modal): removed aria-labelledby
mattnolting Nov 10, 2022
55cb5d6
refactor(about-modal): removed aria-label
mattnolting Nov 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 0 additions & 2 deletions src/patternfly/components/AboutModalBox/about-modal-box.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
<div class="pf-c-about-modal-box{{#if about-modal-box--modifier}} {{about-modal-box--modifier}}{{/if}}"
role="dialog"
aria-modal="true"
{{#if about-modal-box--attribute}}
{{{about-modal-box--attribute}}}
{{/if}}>
Expand Down
26 changes: 1 addition & 25 deletions src/patternfly/components/AboutModalBox/about-modal-box.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,12 @@
.pf-c-about-modal-box {
// Component variables
--pf-c-about-modal-box--BackgroundColor: var(--pf-global--palette--black-1000); // Modal uses a non-standard background color
--pf-c-about-modal-box--BoxShadow: 0 0 100px 0 rgba(255, 255, 255, .05); // This is a special one-off glow for the about modal
--pf-c-about-modal-box--ZIndex: var(--pf-global--ZIndex--xl);
--pf-c-about-modal-box--Height: 100%;
--pf-c-about-modal-box--lg--Height: #{pf-size-prem(762px)}; // Height is optimized for the exact height desired
--pf-c-about-modal-box--lg--MaxHeight: calc(100% - var(--pf-global--spacer--xl)); // MaxHeight ensures that the modal will not go off the screen and instead the content will scroll
mattnolting marked this conversation as resolved.
Show resolved Hide resolved
--pf-c-about-modal-box--Width: 100vw;
--pf-c-about-modal-box--lg--Width: calc(100% - (var(--pf-global--spacer--3xl) * 2)); // Modal should be full width with a gutter on either side until it hits a max-width
--pf-c-about-modal-box--lg--MaxWidth: #{pf-size-prem(1232px)};
--pf-c-about-modal-box--PaddingTop: var(--pf-global--spacer--xl);
--pf-c-about-modal-box--PaddingRight: var(--pf-global--spacer--xl);
--pf-c-about-modal-box--PaddingBottom: var(--pf-global--spacer--xl);
--pf-c-about-modal-box--PaddingLeft: var(--pf-global--spacer--xl);
--pf-c-about-modal-box--sm--PaddingTop: var(--pf-global--spacer--3xl);
--pf-c-about-modal-box--sm--PaddingRight: var(--pf-global--spacer--3xl);
--pf-c-about-modal-box--sm--PaddingBottom: var(--pf-global--spacer--3xl);
--pf-c-about-modal-box--sm--PaddingLeft: var(--pf-global--spacer--3xl);
--pf-c-about-modal-box--Width: 100%;
--pf-c-about-modal-box--sm--grid-template-columns: 5fr 1fr;
--pf-c-about-modal-box--lg--grid-template-columns: 1fr .6fr;

@media screen and (min-width: $pf-global--breakpoint--sm) {
--pf-c-about-modal-box--PaddingTop: var(--pf-c-about-modal-box--sm--PaddingTop);
--pf-c-about-modal-box--PaddingRight: var(--pf-c-about-modal-box--sm--PaddingRight);
--pf-c-about-modal-box--PaddingBottom: var(--pf-c-about-modal-box--sm--PaddingBottom);
--pf-c-about-modal-box--PaddingLeft: var(--pf-c-about-modal-box--sm--PaddingLeft);
}

// Brand
--pf-c-about-modal-box__brand--PaddingTop: var(--pf-global--spacer--2xl);
--pf-c-about-modal-box__brand--PaddingRight: var(--pf-global--spacer--xl);
Expand Down Expand Up @@ -119,7 +99,6 @@
@include pf-t-dark;

position: relative;
z-index: var(--pf-c-about-modal-box--ZIndex);
display: grid;
grid-template-rows: max-content max-content auto;
grid-template-areas:
Expand All @@ -131,7 +110,6 @@
overflow-x: hidden;
overflow-y: auto;
background-color: var(--pf-c-about-modal-box--BackgroundColor); // Because this component is always dark, set the background color
box-shadow: var(--pf-c-about-modal-box--BoxShadow);

@media only screen and (min-width: $pf-global--breakpoint--sm) {
grid-template-columns: var(--pf-c-about-modal-box--sm--grid-template-columns);
Expand All @@ -147,8 +125,6 @@

grid-template-columns: var(--pf-c-about-modal-box--lg--grid-template-columns);
grid-template-rows: max-content max-content auto;
max-width: var(--pf-c-about-modal-box--lg--MaxWidth);
max-height: var(--pf-c-about-modal-box--lg--MaxHeight);
}
}

Expand Down
11 changes: 2 additions & 9 deletions src/patternfly/components/AboutModalBox/examples/AboutModalBox.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,9 @@ cssPrefix: pf-c-about-modal-box
## Examples
### Basic
```hbs isFullscreen
{{#> about-modal-box about-modal-box--attribute='aria-labelledby="about-modal-title"'}}
{{#> about-modal-box}}
{{#> about-modal-box-brand}}
{{#> about-modal-box-brand-image about-modal-box-brand-image--attribute='src="/assets/images/pf_mini_logo_white.svg" alt="PatternFly brand logo"'}}
{{/about-modal-box-brand-image}}
{{> about-modal-box-brand-image about-modal-box-brand-image--attribute='src="/assets/images/pf_mini_logo_white.svg" alt="PatternFly brand logo"'}}
{{/about-modal-box-brand}}
{{#> about-modal-box-close}}
{{#> button button--attribute='aria-label="Close dialog"' button--modifier="pf-m-plain"}}
Expand Down Expand Up @@ -39,13 +38,7 @@ cssPrefix: pf-c-about-modal-box
### Accessibility
| Attribute | Applies to | Outcome |
| -- | -- | -- |
| `role="dialog"` | `.pf-c-about-modal-box` | Identifies the element that serves as the modal container. **Required** |
| `aria-labelledby="[id value of element describing modal]"` | `.pf-c-about-modal-box` | Gives the modal an accessible name by referring to the element that provides the dialog title. **Required when adequate titling element is present** |
| `aria-label="[title of modal]"` | `.pf-c-about-modal-box` | Gives the modal an accessible name. **Required when adequate titling element is _not_ present** |
| `aria-describedby="[id value of applicable content]"` | `.pf-c-about-modal-box` | Gives the modal an accessible description by referring to the modal content that describes the primary message or purpose of the dialog. Not used if there is no static text that describes the modal. |
| `aria-modal="true"` | `.pf-c-modal-box` | Tells assistive technologies that the windows underneath the current modal are not available for interaction. **Required** |
| `aria-label="Close Dialog"` | `.pf-c-modal-box__close .pf-c-button` | Provides an accessible name for the close button as it uses an icon instead of text. **Required** |
| `aria-hidden="true"` | Parent element containing the page contents when the modal is open. | Hides main contents of the page from screen readers. The element with `.pf-c-modal-box` must not be a descendent of the element with `aria-hidden="true"`. For more info, see [trapping focus](/accessibility/product-development-guide#trapping-focus). **Required** |

### Usage
| Class | Applied to | Outcome |
Expand Down
92 changes: 45 additions & 47 deletions src/patternfly/demos/AboutModal/about-modal-template.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,45 @@
{{#> about-modal}}
{{#> backdrop}}
{{#> bullseye}}
{{#> about-modal-box about-modal-box--attribute='aria-labelledby="about-modal-title"'}}
{{#> about-modal-box-brand}}
{{#> about-modal-box-brand-image about-modal-box-brand-image--attribute='src="/assets/images/pf_mini_logo_white.svg" alt="PatternFly brand logo"'}}
{{/about-modal-box-brand-image}}
{{/about-modal-box-brand}}
{{#> about-modal-box-close}}
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Close dialog"'}}
<i class="fas fa-times" aria-hidden="true"></i>
{{/button}}
{{/about-modal-box-close}}
{{#> about-modal-box-header}}
{{#> title titleType="h1" title--modifier="pf-m-4xl" title--attribute='id="about-modal-title"'}}
Red Hat OpenShift Container Platform
{{/title}}
{{/about-modal-box-header}}
{{#> about-modal-box-hero}}
{{/about-modal-box-hero}}
{{#> about-modal-box-content}}
{{#> content}}
<dl>
<dt>CFME version</dt>
<dd>5.5.3.4.20102789036450</dd>
<dt>Cloudforms version</dt>
<dd>4.1</dd>
<dt>Server name</dt>
<dd>40DemoMaster</dd>
<dt>User name</dt>
<dd>Administrator</dd>
<dt>User role</dt>
<dd>EvmRole-super_administrator</dd>
<dt>Browser version</dt>
<dd>601.2</dd>
<dt>Browser OS</dt>
<dd>Mac</dd>
</dl>
{{/content}}
{{#> about-modal-box-strapline}}
Trademark and copyright information here
{{/about-modal-box-strapline}}
{{/about-modal-box-content}}
{{/about-modal-box}}
{{/bullseye}}
{{/backdrop}}
{{/about-modal}}
{{#> modal-template}}
{{#> modal-box modal-box--modifier="pf-m-lg" modal-box--attribute='aria-labelledby="about-modal-title"'}}
{{#> about-modal-box}}
{{#> about-modal-box-brand}}
{{#> about-modal-box-brand-image about-modal-box-brand-image--attribute='src="/assets/images/pf_mini_logo_white.svg" alt="PatternFly brand logo"'}}
{{/about-modal-box-brand-image}}
{{/about-modal-box-brand}}
{{#> about-modal-box-close}}
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Close dialog"'}}
<i class="fas fa-times" aria-hidden="true"></i>
{{/button}}
{{/about-modal-box-close}}
{{#> about-modal-box-header}}
{{#> title titleType="h1" title--modifier="pf-m-4xl" title--attribute='id="about-modal-title"'}}
Red Hat OpenShift Container Platform
{{/title}}
{{/about-modal-box-header}}
{{#> about-modal-box-hero}}
{{/about-modal-box-hero}}
{{#> about-modal-box-content}}
{{#> content}}
<dl>
<dt>CFME version</dt>
<dd>5.5.3.4.20102789036450</dd>
<dt>Cloudforms version</dt>
<dd>4.1</dd>
<dt>Server name</dt>
<dd>40DemoMaster</dd>
<dt>User name</dt>
<dd>Administrator</dd>
<dt>User role</dt>
<dd>EvmRole-super_administrator</dd>
<dt>Browser version</dt>
<dd>601.2</dd>
<dt>Browser OS</dt>
<dd>Mac</dd>
</dl>
{{/content}}
{{#> about-modal-box-strapline}}
Trademark and copyright information here
{{/about-modal-box-strapline}}
{{/about-modal-box-content}}
{{/about-modal-box}}
{{/modal-box}}
{{/modal-template}}