patternfly · tlabaj · Aug 23, 2021 · Aug 11, 2021 · Aug 11, 2021 · Aug 11, 2021
diff --git a/packages/react-core/src/components/ContextSelector/ContextSelector.tsx b/packages/react-core/src/components/ContextSelector/ContextSelector.tsx
@@ -29,6 +29,8 @@ export interface ContextSelectorProps extends ToggleMenuBaseProps, OUIAProps {
   onToggle?: (event: any, value: boolean) => void;
   /** Function callback called when user selects item */
   onSelect?: (event: any, value: React.ReactNode) => void;
+  /** Flag indicating that the context selector should expand to full height */
+  isFullHeight?: boolean;
   /** Labels the Context Selector for Screen Readers */
   screenReaderLabel?: string;
   /** Text that appears in the Context Selector Toggle */
@@ -95,6 +97,7 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
       children,
       className,
       isOpen,
+      isFullHeight,
       onToggle,
       onSelect,
       screenReaderLabel,
@@ -155,7 +158,12 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
     );
     const mainContainer = (
       <div
-        className={css(styles.contextSelector, isOpen && styles.modifiers.expanded, className)}
+        className={css(
+          styles.contextSelector,
+          isOpen && styles.modifiers.expanded,
+          isFullHeight && styles.modifiers.fullHeight,
+          className
+        )}
         ref={this.parentRef}
         {...getOUIAProps(ContextSelector.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
         {...props}

diff --git a/packages/react-core/src/components/Dropdown/Dropdown.tsx b/packages/react-core/src/components/Dropdown/Dropdown.tsx
@@ -16,6 +16,8 @@ export interface DropdownProps extends ToggleMenuBaseProps, React.HTMLProps<HTML
   isOpen?: boolean;
   /** Display the toggle with no border or background */
   isPlain?: boolean;
+  /** Flag indicating that the dropdown should expand to full height */
+  isFullHeight?: boolean;
   /** Indicates where menu will be aligned horizontally */
   position?: DropdownPosition | 'right' | 'left';
   /** Indicates how the menu will align at screen size breakpoints. Default alignment is set via the position property. */

diff --git a/packages/react-core/src/components/Dropdown/DropdownWithContext.tsx b/packages/react-core/src/components/Dropdown/DropdownWithContext.tsx
@@ -66,6 +66,7 @@ export class DropdownWithContext extends React.Component<DropdownProps & OUIAPro
       isOpen,
       isPlain,
       isGrouped,
+      isFullHeight,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onSelect,
       position,
@@ -126,6 +127,7 @@ export class DropdownWithContext extends React.Component<DropdownProps & OUIAPro
                 direction === DropdownDirection.up && styles.modifiers.top,
                 position === DropdownPosition.right && styles.modifiers.alignRight,
                 isOpen && styles.modifiers.expanded,
+                isFullHeight && styles.modifiers.fullHeight,
                 className
               )}
               ref={this.baseComponentRef}

diff --git a/packages/react-core/src/components/Masthead/Masthead.tsx b/packages/react-core/src/components/Masthead/Masthead.tsx
@@ -0,0 +1,54 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Masthead/masthead';
+import { css } from '@patternfly/react-styles';
+import { formatBreakpointMods } from '../../helpers/util';
+export interface MastheadProps extends React.DetailedHTMLProps<React.HTMLProps<HTMLDivElement>, HTMLDivElement> {
+  /** Content rendered inside of the masthead */
+  children?: React.ReactNode;
+  /** Additional classes added to the masthead */
+  className?: string;
+  /** Background theme color of the masthead */
+  backgroundColor?: 'dark' | 'light' | 'light200';
+  /** Display type at various breakpoints */
+  display?: {
+    default?: 'inline' | 'stack';
+    sm?: 'inline' | 'stack';
+    md?: 'inline' | 'stack';
+    lg?: 'inline' | 'stack';
+    xl?: 'inline' | 'stack';
+    '2xl'?: 'inline' | 'stack';
+  };
+  /** Insets at various breakpoints */
+  inset?: {
+    default?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';
+    sm?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';
+    md?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';
+    lg?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';
+    xl?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';
+    '2xl'?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';
+  };
+}
+
+export const Masthead: React.FunctionComponent<MastheadProps> = ({
+  children,
+  className,
+  backgroundColor = 'dark',
+  display,
+  inset,
+  ...props
+}: MastheadProps) => (
+  <header
+    className={css(
+      styles.masthead,
+      formatBreakpointMods(display, styles, 'display-'),
+      formatBreakpointMods(inset, styles),
+      backgroundColor === 'light' && styles.modifiers.light,
+      backgroundColor === 'light200' && styles.modifiers.light_200,
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </header>
+);
+Masthead.displayName = 'Masthead';
diff --git a/packages/react-core/src/components/Masthead/MastheadBrand.tsx b/packages/react-core/src/components/Masthead/MastheadBrand.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Masthead/masthead';
+import { css } from '@patternfly/react-styles';
+
+export interface MastheadBrandProps
+  extends React.DetailedHTMLProps<React.HTMLProps<HTMLAnchorElement>, HTMLAnchorElement> {
+  /** Content rendered inside of the masthead brand. */
+  children?: React.ReactNode;
+  /** Additional classes added to the masthead brand. */
+  className?: string;
+  /** Component type of the masthead brand. */
+  component?: React.ElementType<any> | React.ComponentType<any>;
+}
+
+export const MastheadBrand: React.FunctionComponent<MastheadBrandProps> = ({
+  children,
+  className,
+  component = 'a',
+  ...props
+}: MastheadBrandProps) => {
+  const Component = component as any;
+  return (
+    <Component className={css(styles.mastheadBrand, className)} tabIndex={0} {...props}>
+      {children}
+    </Component>
+  );
+};
+MastheadBrand.displayName = 'MastheadBrand';
diff --git a/packages/react-core/src/components/Masthead/MastheadContent.tsx b/packages/react-core/src/components/Masthead/MastheadContent.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Masthead/masthead';
+import { css } from '@patternfly/react-styles';
+
+export interface MastheadContentProps extends React.DetailedHTMLProps<React.HTMLProps<HTMLDivElement>, HTMLDivElement> {
+  /** Content rendered inside of the masthead content block. */
+  children?: React.ReactNode;
+  /** Additional classes added to the masthead content. */
+  className?: string;
+}
+
+export const MastheadContent: React.FunctionComponent<MastheadContentProps> = ({
+  children,
+  className,
+  ...props
+}: MastheadContentProps) => (
+  <div className={css(styles.mastheadContent, className)} {...props}>
+    {children}
+  </div>
+);
+MastheadContent.displayName = 'MastheadContent';
diff --git a/packages/react-core/src/components/Masthead/MastheadMain.tsx b/packages/react-core/src/components/Masthead/MastheadMain.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Masthead/masthead';
+import { css } from '@patternfly/react-styles';
+
+export interface MastheadMainProps extends React.DetailedHTMLProps<React.HTMLProps<HTMLDivElement>, HTMLDivElement> {
+  /** Content rendered inside of the masthead main block. */
+  children?: React.ReactNode;
+  /** Additional classes added to the masthead main. */
+  className?: string;
+}
+
+export const MastheadMain: React.FunctionComponent<MastheadMainProps> = ({
+  children,
+  className,
+  ...props
+}: MastheadMainProps) => (
+  <div className={css(styles.mastheadMain, className)} {...props}>
+    {children}
+  </div>
+);
+MastheadMain.displayName = 'MastheadMain';
diff --git a/packages/react-core/src/components/Masthead/MastheadToggle.tsx b/packages/react-core/src/components/Masthead/MastheadToggle.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Masthead/masthead';
+import { css } from '@patternfly/react-styles';
+
+export interface MastheadToggleProps extends React.DetailedHTMLProps<React.HTMLProps<HTMLDivElement>, HTMLDivElement> {
+  /** Content rendered inside of the masthead toggle. */
+  children?: React.ReactNode;
+  /** Additional classes added to the masthead toggle. */
+  className?: string;
+}
+
+export const MastheadToggle: React.FunctionComponent<MastheadToggleProps> = ({
+  children,
+  className,
+  ...props
+}: MastheadToggleProps) => (
+  <div className={css(styles.mastheadToggle, className)} {...props}>
+    {children}
+  </div>
+);
+MastheadToggle.displayName = 'MastheadToggle';
diff --git a/packages/react-core/src/components/Masthead/__tests__/Masthead.test.tsx b/packages/react-core/src/components/Masthead/__tests__/Masthead.test.tsx
@@ -0,0 +1,135 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import { Masthead, MastheadBrand, MastheadContent, MastheadMain, MastheadToggle } from '../index';
+
+describe('Masthead', () => {
+  test('verify basic', () => {
+    const view = shallow(<Masthead>test</Masthead>);
+
+    expect(view).toMatchSnapshot();
+  });
+
+  test('verify full structure', () => {
+    const view = mount(
+      <Masthead>
+        <MastheadToggle>Toggle</MastheadToggle>
+        <MastheadMain>
+          <MastheadBrand>Logo</MastheadBrand>
+        </MastheadMain>
+        <MastheadContent>
+          <span>Content</span>
+        </MastheadContent>
+      </Masthead>
+    );
+
+    expect(view).toMatchSnapshot();
+  });
+
+  test('verify custom class', () => {
+    const view = mount(<Masthead className="custom-css">test</Masthead>);
+
+    expect(view).toMatchSnapshot();
+  });
+
+  test('verify inline display breakpoints', () => {
+    const view = mount(
+      <Masthead
+        display={{ default: 'inline', sm: 'inline', md: 'inline', lg: 'inline', xl: 'inline', '2xl': 'inline' }}
+      >
+        test
+      </Masthead>
+    );
+
+    expect(view).toMatchSnapshot();
+  });
+
+  test('verify stack display breakpoints', () => {
+    const view = mount(
+      <Masthead display={{ default: 'stack', sm: 'stack', md: 'stack', lg: 'stack', xl: 'stack', '2xl': 'stack' }}>
+        test
+      </Masthead>
+    );
+
+    expect(view).toMatchSnapshot();
+  });
+
+  Object.values(['insetNone', 'insetXs', 'insetSm', 'insetMd', 'insetLg', 'insetXl', 'inset2xl', 'inset3xl'] as [
+    'insetNone',
+    'insetXs',
+    'insetSm',
+    'insetMd',
+    'insetLg',
+    'insetXl',
+    'inset2xl',
+    'inset3xl'
+  ]).forEach(inset => {
+    test(`verify ${inset} inset breakpoints`, () => {
+      const view = mount(
+        <Masthead inset={{ default: inset, sm: inset, md: inset, lg: inset, xl: inset, '2xl': inset }}>test</Masthead>
+      );
+      expect(view).toMatchSnapshot();
+    });
+  });
+});
+
+describe('MastheadBrand', () => {
+  test('verify basic', () => {
+    const view = shallow(<MastheadBrand>test</MastheadBrand>);
+
+    expect(view).toMatchSnapshot();
+  });
+
+  test('verify custom class', () => {
+    const view = mount(<MastheadBrand className="custom-css">test</MastheadBrand>);
+
+    expect(view).toMatchSnapshot();
+  });
+
+  test('verify custom component', () => {
+    const view = mount(<MastheadBrand component="div">test</MastheadBrand>);
+
+    expect(view).toMatchSnapshot();
+  });
+});
+
+describe('MastheadContent', () => {
+  test('verify basic', () => {
+    const view = shallow(<MastheadContent>test</MastheadContent>);
+
+    expect(view).toMatchSnapshot();
+  });
+
+  test('verify custom class', () => {
+    const view = mount(<MastheadContent className="custom-css">test</MastheadContent>);
+
+    expect(view).toMatchSnapshot();
+  });
+});
+
+describe('MastheadMain', () => {
+  test('verify basic', () => {
+    const view = shallow(<MastheadMain>test</MastheadMain>);
+
+    expect(view).toMatchSnapshot();
+  });
+
+  test('verify custom class', () => {
+    const view = mount(<MastheadMain className="custom-css">test</MastheadMain>);
+
+    expect(view).toMatchSnapshot();
+  });
+});
+
+describe('MastheadToggle', () => {
+  test('verify basic', () => {
+    const view = shallow(<MastheadToggle>test</MastheadToggle>);
+
+    expect(view).toMatchSnapshot();
+  });
+
+  test('verify custom class', () => {
+    const view = mount(<MastheadToggle className="custom-css">test</MastheadToggle>);
+
+    expect(view).toMatchSnapshot();
+  });
+});