How to use @patternfly/react-styles - 10 common examples

const {
    extraParams: { onExpand }
  } = column;
  const extraData = {
    rowIndex,
    columnIndex,
    column,
    property
  };

  function onToggle(event: React.MouseEvent) {
    // tslint:disable-next-line:no-unused-expression
    onExpand && onExpand(event, rowIndex, columnIndex, props.isOpen, rowData, extraData);
  }
  return {
    className: css(styles.tableCompoundExpansionToggle, props.isOpen && styles.modifiers.expanded),
    children: props.isOpen !== undefined && (
      <button aria-controls="{props.ariaControls}" aria-expanded="{props.isOpen}">
        {title}
      </button>
    )
  };
};

import { css, pickProperties } from '@patternfly/react-styles';
import styles from '@patternfly/react-styles/css/components/Table/table';
import { ITransform } from '../../Table';

export const Visibility = pickProperties(styles.modifiers, [
  'hidden',
  'hiddenOnSm',
  'hiddenOnMd',
  'hiddenOnLg',
  'hiddenOnXl',
  'hiddenOn_2xl',
  'visibleOnSm',
  'visibleOnMd',
  'visibleOnLg',
  'visibleOnXl',
  'visibleOn_2xl'
]);

// tslint:disable-next-line:no-shadowed-variable
export const classNames = (...classNames: string[]): ITransform => () => ({
  className: css(...classNames)

} else {
      reversedDirection = sortBy.direction === SortByDirection.asc ? SortByDirection.desc : SortByDirection.asc;
    }
    // tslint:disable-next-line:no-unused-expression
    onSort && onSort(event, columnIndex, reversedDirection, extraData);
  }

  return {
    className: css(styles.tableSort, isSortedBy && styles.modifiers.selected),
    'aria-sort': isSortedBy ? `${sortBy.direction}ending` : 'none',
    children: (
      
        {label}
      
    )
  };
};

export const Dropdown: React.FunctionComponent = ({
  onSelect,
  ref, // Types of Ref are different for React.FC vs React.Component
  ...props
}: DropdownProps) => (
   onSelect && onSelect(event),
      toggleTextClass: styles.dropdownToggleText,
      toggleIconClass: styles.dropdownToggleIcon,
      menuClass: styles.dropdownMenu,
      itemClass: styles.dropdownMenuItem,
      toggleClass: styles.dropdownToggle,
      baseClass: styles.dropdown,
      baseComponent: 'div',
      sectionClass: styles.dropdownGroup,
      sectionTitleClass: styles.dropdownGroupTitle,
      sectionComponent: 'section',
      disabledClass: styles.modifiers.disabled,
      hoverClass: styles.modifiers.hover,
      separatorClass: styles.dropdownSeparator
    }}
  >
    
  
);

const AlertIcon = ({ variant, className, ...props }) => {
  const Icon = variantIcons[variant];
  return (
    <div>
      
    </div>
  );
};

...props
}) => {
  variantLabel = variantLabel || capitalize(AlertVariant[variant]);
  const readerTitle = (
    
      <span>{`${variantLabel} alert:`}</span>
      {title}
    
  );

  const customClassName = css(styles.alert, getModifier(styles, variant, styles.modifiers.info), className);

  return (
    <div aria-label="{ariaLabel}">
      
      <h4>{readerTitle}</h4>
      {children &amp;&amp; (
        <div>
          <p>{children}</p>
        </div>
      )}
      {action &amp;&amp; (
        <div>{React.cloneElement(action, { title, variantLabel })}</div>
      )}
    </div>
  );
};

colSpan,
  component = 'td',
  isVisible,
  parentId,
  textCenter = false,
  isOpen,
  ariaControls = '',
  ...props
}: BodyCellProps) => {
  const Component = component as any;
  const mappedProps = {
    ...(dataLabel ? { 'data-label': dataLabel } : {}),
    ...props
  };
  return (parentId !== undefined && colSpan === undefined) || !isVisible ? null : (
    
  );
};

export const LoginMainFooterBandItem: React.FunctionComponent = ({
  children = null,
  className = '',
  ...props
}: LoginMainFooterBandItemProps) => (
  <p>
    {children}
  </p>
);

render() {
    const { children, className, isExpanded, checked, isGrouped, ...props } = this.props;
    this.renderedChildren = this.extendChildren(props);
    return (
      
        <div>
          <form novalidate="">
            <div>{this.renderedChildren}</div>
          </form>
        </div>
      
    );
  }
}

export const AboutModalBoxContent: React.SFC = ({
  children,
  className = '',
  trademark,
  id,
  noAboutModalBoxContentContainer = false,
  ...props
}: AboutModalBoxContentProps) => (
  <div id="{id}">
    <div>
      {noAboutModalBoxContentContainer ? children : <div>{children}</div>}
    </div>
    <p>{trademark}</p>
  </div>
);