diff --git a/packages/react-core/src/components/NotificationDrawer/NotificationDrawerGroup.tsx b/packages/react-core/src/components/NotificationDrawer/NotificationDrawerGroup.tsx index 926ca1feaae..bd38524f7a2 100644 --- a/packages/react-core/src/components/NotificationDrawer/NotificationDrawerGroup.tsx +++ b/packages/react-core/src/components/NotificationDrawer/NotificationDrawerGroup.tsx @@ -41,6 +41,8 @@ export interface NotificationDrawerGroupProps extends Omit = ({ @@ -54,6 +56,7 @@ export const NotificationDrawerGroup: React.FunctionComponent { const titleRef = React.useRef(null); @@ -85,7 +88,7 @@ export const NotificationDrawerGroup: React.FunctionComponent -

+ -

+ {children} ); diff --git a/packages/react-core/src/components/NotificationDrawer/NotificationDrawerListItemHeader.tsx b/packages/react-core/src/components/NotificationDrawer/NotificationDrawerListItemHeader.tsx index 76872ff2067..c934038b920 100644 --- a/packages/react-core/src/components/NotificationDrawer/NotificationDrawerListItemHeader.tsx +++ b/packages/react-core/src/components/NotificationDrawer/NotificationDrawerListItemHeader.tsx @@ -52,6 +52,8 @@ export interface NotificationDrawerListItemHeaderProps extends React.HTMLProps = ({ @@ -63,6 +65,7 @@ export const NotificationDrawerListItemHeader: React.FunctionComponent { const titleRef = React.useRef(null); @@ -79,14 +82,14 @@ export const NotificationDrawerListItemHeader: React.FunctionComponent {srTitle && {srTitle}} {title} - + ); return ( diff --git a/packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawerGroup.test.tsx b/packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawerGroup.test.tsx index 56097b9f99a..9db5ee24483 100644 --- a/packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawerGroup.test.tsx +++ b/packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawerGroup.test.tsx @@ -11,6 +11,11 @@ describe('NotificationDrawerGroup', () => { expect(asFragment()).toMatchSnapshot(); }); + test('renders correct heading level', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); + test('className is added to the root element', () => { render( { expect(asFragment()).toMatchSnapshot(); }); + test('renders with correct heading level', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); + test('className is added to the root element', () => { render( diff --git a/packages/react-core/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerGroup.test.tsx.snap b/packages/react-core/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerGroup.test.tsx.snap index bd3d9190c9f..c7bec6f6929 100644 --- a/packages/react-core/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerGroup.test.tsx.snap +++ b/packages/react-core/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerGroup.test.tsx.snap @@ -94,6 +94,53 @@ exports[`NotificationDrawerGroup drawer group with isRead applied 1`] = ` `; +exports[`NotificationDrawerGroup renders correct heading level 1`] = ` + +
+

+ +

+
+ +`; + exports[`NotificationDrawerGroup renders with PatternFly Core styles 1`] = `
`; + +exports[`NotificationDrawerListItemHeader renders with correct heading level 1`] = ` + +
+ + + +

+ Pod quit unexpectedly +

+
+ +`; diff --git a/packages/react-core/src/components/Tabs/examples/Tabs.md b/packages/react-core/src/components/Tabs/examples/Tabs.md index aa1ffb07f23..88ce4264b45 100644 --- a/packages/react-core/src/components/Tabs/examples/Tabs.md +++ b/packages/react-core/src/components/Tabs/examples/Tabs.md @@ -62,24 +62,25 @@ class SimpleTabs extends React.Component { isBox={isBox} aria-label="Tabs in the default example" > - Users}> + Users}> Users - Containers}> + Containers}> Containers - Database}> + Database}> Database - Disabled} isDisabled> + Disabled} isDisabled> Disabled - ARIA Disabled} isAriaDisabled> + ARIA Disabled} isAriaDisabled> ARIA Disabled ARIA Disabled (Tooltip)} isAriaDisabled > @@ -92,8 +93,8 @@ class SimpleTabs extends React.Component { isChecked={isBox} onChange={this.toggleBox} aria-label="show box variation checkbox" - id="toggle-box" - name="toggle-box" + id="toggle-simple-box" + name="toggle-simple-box" /> @@ -145,23 +146,24 @@ class SimpleTabs extends React.Component { isBox={isBox} aria-label="Tabs in the example with a tooltip ref" > - Users}> + Users}> Users - Containers}> + Containers}> Containers - Database}> + Database}> Database - Disabled} isDisabled> + Disabled} isDisabled> Disabled - ARIA Disabled} isAriaDisabled> + ARIA Disabled} isAriaDisabled> ARIA Disabled ARIA Disabled (Tooltip)} isAriaDisabled ref={tooltipRef} @@ -181,8 +183,8 @@ class SimpleTabs extends React.Component { isChecked={isBox} onChange={this.toggleBox} aria-label="show box variation checkbox" - id="toggle-box" - name="toggle-box" + id="toggle-box-with-tooltip" + name="toggle-box-with-tooltip" /> @@ -206,23 +208,24 @@ class UncontrolledSimpleTabs extends React.Component { return ( <> - Users}> + Users}> Users - Containers}> + Containers}> Containers - Database}> + Database}> Database - Disabled} isDisabled> + Disabled} isDisabled> Disabled - ARIA Disabled} isAriaDisabled> + ARIA Disabled} isAriaDisabled> ARIA Disabled ARIA Disabled (Tooltip)} isAriaDisabled tooltip={tooltip} @@ -278,23 +281,24 @@ class SimpleTabs extends React.Component { isBox aria-label="Tabs in the box light variation example" > - Users}> + Users}> Users - Containers}> + Containers}> Containers - Database}> + Database}> Database - Disabled} isDisabled> + Disabled} isDisabled> Disabled - ARIA Disabled} isAriaDisabled> + ARIA Disabled} isAriaDisabled> ARIA Disabled ARIA Disabled (Tooltip)} isAriaDisabled tooltip={tooltip} @@ -356,37 +360,37 @@ class ScrollButtonsPrimaryTabs extends React.Component { isBox={isBox} aria-label="Tabs in the default overflow example" > - Users}> + Users}> Users - Containers}> + Containers}> Containers - Database}> + Database}> Database - Server}> + Server}> Server - System}> + System}> System - Network}> + Network}> Network - Tab item 7}> + Tab item 7}> Tab 7 section - Tab item 8}> + Tab item 8}> Tab 8 section - Tab item 9}> + Tab item 9}> Tab 9 section - Tab item 10}> + Tab item 10}> Tab 10 section - Tab item 11}> + Tab item 11}> Tab 11 section @@ -448,23 +452,24 @@ class VerticalTabs extends React.Component { isBox={isBox} aria-label="Tabs in the vertical example" > - Users}> + Users}> Users - Containers}> + Containers}> Containers - Database}> + Database}> Database - Disabled} isDisabled> + Disabled} isDisabled> Disabled - ARIA Disabled} isAriaDisabled> + ARIA Disabled} isAriaDisabled> ARIA Disabled ARIA Disabled (Tooltip)} isAriaDisabled tooltip={tooltip} @@ -525,22 +530,22 @@ class VerticalExpandableTabs extends React.Component { toggleText="Containers" aria-label="Tabs in the vertical expandable example" > - Users}> + Users}> Users - Containers}> + Containers}> Containers - Database}> + Database}> Database - Server}> + Server}> Server - System}> + System}> System - Network}> + Network}> Network @@ -579,22 +584,22 @@ class VerticalExpandableUncontrolledTabs extends React.Component { toggleText="Containers" aria-label="Tabs in the vertical expandable uncontrolled example" > - Users}> + Users}> Users - Containers}> + Containers}> Containers - Database}> + Database}> Database - Server}> + Server}> Server - System}> + System}> System - Network}> + Network}> Network @@ -646,22 +651,22 @@ class InsetTabs extends React.Component { isBox={isBox} aria-label="Tabs in the inset example" > - Users}> + Users}> Users - Containers}> + Containers}> Containers - Database}> + Database}> Database - Server}> + Server}> Server - System}> + System}> System - Network}> + Network}> Network @@ -719,22 +724,22 @@ class PageInsetsTabs extends React.Component { isBox={isBox} aria-label="Tabs in the page insets example" > - Users}> + Users}> Users - Containers}> + Containers}> Containers - Database}> + Database}> Database - Server}> + Server}> Server - System}> + System}> System - Network}> + Network}> Network @@ -744,8 +749,8 @@ class PageInsetsTabs extends React.Component { isChecked={isBox} onChange={this.toggleBox} aria-label="show box variation checkbox with inset" - id="toggle-box-inset" - name="toggle-box-inset" + id="toggle-box-page-inset" + name="toggle-box-page-inset" /> @@ -789,6 +794,7 @@ class IconAndTextTabs extends React.Component { > @@ -802,6 +808,7 @@ class IconAndTextTabs extends React.Component { @@ -815,6 +822,7 @@ class IconAndTextTabs extends React.Component { @@ -828,6 +836,7 @@ class IconAndTextTabs extends React.Component { @@ -841,6 +850,7 @@ class IconAndTextTabs extends React.Component { @@ -854,6 +864,7 @@ class IconAndTextTabs extends React.Component { @@ -915,7 +926,7 @@ class SecondaryTabs extends React.Component { isBox={isBox} aria-label="Tabs in the tabs with subtabs example" > - Users}> + Users}> - Containers}> + Containers}> Containers - Database}> + Database}> Database - Server}> + Server}> Server - System}> + System}> System - Network}> + Network}> Network - Tab item 7}> + Tab item 7}> Tab 7 section - Tab item 8}> + Tab item 8}> Tab 8 section - Tab item 9}> + Tab item 9}> Tab 9 section - Tab item 10}> + Tab item 10}> Tab 10 section - Tab item 11}> + Tab item 11}> Tab 11 section @@ -1033,13 +1044,13 @@ class FilledTabs extends React.Component { isBox={isBox} aria-label="Tabs in the filled example" > - Users}> + Users}> Users - Containers}> + Containers}> Containers - Database}> + Database}> Database @@ -1102,6 +1113,7 @@ class FilledTabsWithIcons extends React.Component { > @@ -1115,6 +1127,7 @@ class FilledTabsWithIcons extends React.Component { @@ -1128,6 +1141,7 @@ class FilledTabsWithIcons extends React.Component { @@ -1186,22 +1200,22 @@ class TabsNav extends React.Component { component={TabsComponent.nav} aria-label="Tabs in the nav element example" > - Users} href="#users"> + Users} href="#users"> Users - Containers} href="#containers"> + Containers} href="#containers"> Containers - Database} href="#database"> + Database} href="#database"> Database - Disabled} isDisabled href="#disabled"> + Disabled} isDisabled href="#disabled"> Disabled - ARIA Disabled} isAriaDisabled href="#aria-disabled"> + ARIA Disabled} isAriaDisabled href="#aria-disabled"> ARIA Disabled - Network} href="#network"> + Network} href="#network"> Network @@ -1248,7 +1262,7 @@ class SecondaryTabsNav extends React.Component { component={TabsComponent.nav} aria-label="Tabs in the sub tabs with nav element example" > - Users} href="#"> + Users} href="#"> - Containers} href="#"> + Containers} href="#"> Containers - Database} href="#"> + Database} href="#"> Database - Disabled} isDisabled href="#"> + Disabled} isDisabled href="#"> Disabled - ARIA Disabled} isAriaDisabled href="#"> + ARIA Disabled} isAriaDisabled href="#"> ARIA Disabled - Network} href="#"> + Network} href="#"> Network @@ -1332,18 +1346,21 @@ class SeparateTabContent extends React.Component { > Tab item 1} tabContentId="refTab1Section" tabContentRef={this.contentRef1} /> Tab item 2} tabContentId="refTab2Section" tabContentRef={this.contentRef2} /> Tab item 3} tabContentId="refTab3Section" tabContentRef={this.contentRef3} @@ -1406,30 +1423,33 @@ const TabContentWithBody = () => { Tab item 1} - tabContentId="refTab1Section" + tabContentId="tab1WithBodyPaddingSection" tabContentRef={contentRef1} /> Tab item 2} - tabContentId="refTab2Section" + tabContentId="tab2WithBodyPaddingSection" tabContentRef={contentRef2} /> Tab item 3} - tabContentId="refTab3Section" + tabContentId="tab3WithBodyPaddingSection" tabContentRef={contentRef3} />
- + Tab 1 section