FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

feat(AlertGroup): Add alert group component by jessiehuff · Pull Request #3531 · patternfly/patternfly-react · GitHub

/ patternfly-react Public

feat(AlertGroup): Add alert group component #3531

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

Merged
tlabaj merged 16 commits into from
Jan 27, 2020
Conversation 23 Commits 16 Checks 0 Files changed
Merged

feat(AlertGroup): Add alert group component #3531

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
233d6fd
Add alert group component
jessiehuff Jan 20, 2020
8a70c9f
Fix css
jessiehuff Jan 20, 2020
7dd6c30
Update alert, edit examples, make alert group appendable
jessiehuff Jan 22, 2020
f055867
Add alert group component
jessiehuff Jan 20, 2020
4cc9ce6
Fix css
jessiehuff Jan 20, 2020
0785f7d
Create alert group demo
jessiehuff Jan 23, 2020
14cfaca
Add integration tests
jessiehuff Jan 23, 2020
40d566b
Fix toast example
jessiehuff Jan 23, 2020
4527ffb
Make alert group accessible without alert isToast
jessiehuff Jan 23, 2020
07ff361
Clear up difference between toast styling and a11y live regions
jessiehuff Jan 24, 2020
d345c7c
Clean up tests
jessiehuff Jan 24, 2020
2c2bbbe
Clean up demo
jessiehuff Jan 24, 2020
e696b6a
Fix examples
jessiehuff Jan 24, 2020
c0b03f5
Edit append ability
jessiehuff Jan 27, 2020
8661e35
Address feedback
jessiehuff Jan 27, 2020
7358826
Update snapshots
jessiehuff Jan 27, 2020
File filter

Filter by extension

Filter by extension .md  (2) .snap  (2) .ts  (5) .tsx  (7) All 4 file types selected
Viewed files
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Unified
Split
Hide whitespace
Diff view
Unified
Split
Hide whitespace
        • Alert.test.tsx
        • Alert.tsx
          • Alert.test.tsx.snap
          • Alert.md
        • AlertGroup.test.tsx
        • AlertGroup.tsx
        • AlertGroupInline.tsx
          • AlertGroup.md
        • index.ts
      • index.ts
        • Demos.ts
            • AlertDemo.tsx
            • AlertGroupDemo.tsx
          • index.ts
25 changes: 5 additions & 20 deletions packages/patternfly-4/react-core/src/components/Alert/Alert.test.tsx
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { mount, shallow } from 'enzyme';
import { mount } from 'enzyme';

import { Alert, AlertVariant } from './Alert';
import { AlertActionLink } from './AlertActionLink';
Expand All @@ -15,7 +15,7 @@ test('default Alert variant is info', () => {
).toContain('pf-m-info');
});

Object.values(['success' as AlertVariant]).forEach(variant => {
Object.values(AlertVariant).forEach(variant => {
describe(`Alert - ${variant}`, () => {
test('Description', () => {
const view = mount(
Expand Down Expand Up @@ -91,7 +91,7 @@ Object.values(['success' as AlertVariant]).forEach(variant => {
test('Toast alerts match snapsnot', () => {
const view = mount(
<Alert
isToast={true}
isLiveRegion={true}
variant={variant}
aria-label={`${variant} toast alert`}
title="Some title"
Expand All @@ -105,7 +105,7 @@ Object.values(['success' as AlertVariant]).forEach(variant => {
test('Toast alerts contain default live region', () => {
const wrapper = mount(
<Alert
isToast={true}
isLiveRegion={true}
variant={variant}
aria-label={`${variant} toast alert`}
title="Some title"
Expand All @@ -120,7 +120,7 @@ Object.values(['success' as AlertVariant]).forEach(variant => {
test('Toast alert live regions are not atomic', () => {
const wrapper = mount(
<Alert
isToast={true}
isLiveRegion={true}

tlabaj Jan 24, 2020

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

I like this prop name change!
variant={variant}
aria-label={`${variant} toast alert`}
title="Some title"
Expand All @@ -131,21 +131,6 @@ Object.values(['success' as AlertVariant]).forEach(variant => {
expect(wrapper.find('.pf-c-alert').prop('aria-atomic')).toBe('false');
});

test('Toast alert should specify pf-m-live on container', () => {
const wrapper = mount(
<Alert
isToast={true}
variant={variant}
aria-label={`${variant} toast alert`}
title="Some title"
>
Some toast alert
</Alert>
);
const alert = wrapper.find('div').first();
expect(alert.hasClass('pf-m-live')).toBe(true);
});

test('Non-toast alerts can have custom live region settings', () => {
const wrapper = mount(
<Alert
Expand Down
9 changes: 4 additions & 5 deletions packages/patternfly-4/react-core/src/components/Alert/Alert.tsx
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,14 @@ export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'actio
'aria-label'?: string;
/** Variant label text for screen readers */
variantLabel?: string;
/** Flag to indicate if the Alert is a toast alert */
isToast?: boolean;
/** Flag to indicate if the Alert is in a live region */
isLiveRegion?: boolean;
}

const Alert: React.FunctionComponent<AlertProps & InjectedOuiaProps> = ({
variant = AlertVariant.info,
isInline = false,
isToast = false,
isLiveRegion = false,
variantLabel = `${capitalize(variant)} alert:`,
'aria-label': ariaLabel = `${capitalize(variant)} Alert`,
action = null,
Expand All @@ -60,7 +60,6 @@ const Alert: React.FunctionComponent<AlertProps & InjectedOuiaProps> = ({
const customClassName = css(
styles.alert,
isInline && styles.modifiers.inline,
isToast && 'pf-m-live',
variant !== AlertVariant.default && getModifier(styles, variant, styles.modifiers.info),
className
);
Expand All @@ -74,7 +73,7 @@ const Alert: React.FunctionComponent<AlertProps & InjectedOuiaProps> = ({
'data-ouia-component-type': 'Alert',
'data-ouia-component-id': ouiaId || ouiaContext.ouiaId
})}
{...(isToast && {
{...(isLiveRegion && {
'aria-live': 'polite',
'aria-atomic': 'false'
})}
Expand Down
Loading
Back | FazBrowse Home | New Git URL