1940

pending completion

Build # 1940

Build Type

Pull #536

travis-ci

Committed by

web-flow

Commit Message

feat(react-core-button): add aria-label validation for plain buttons

affects: @patternfly/react-core

Pull Request Pull Request #536: feat(react-core-button): add aria-label validation for plain buttons

Run Details

971 of 1497 branches covered (64.86%)

Branch coverage included in aggregate %.

3 of 3 new or added lines in 1 file covered. (100.0%)

2727 of 3262 relevant lines covered (83.6%)

30.67 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

91.67

/packages/react-core/src/components/Button/Button.js

import React from 'react';
import { css, getModifier } from '@patternfly/react-styles';
import PropTypes from 'prop-types';
import { componentShape } from '../../internal/componentShape';
import styles from '@patternfly/patternfly-next/components/Button/styles.css';

export const ButtonVariant = {
  primary: 'primary',
  secondary: 'secondary',
  tertiary: 'tertiary',
  danger: 'danger',
  link: 'link',
  plain: 'plain'
};

export const ButtonType = {
  button: 'button',
  submit: 'submit'
};

const propTypes = {
  /** content rendered inside the button */
  children: PropTypes.node,
  /** additional classes added to the button */
  className: PropTypes.string,
  /** Sets the base component to render. defaults to button */
  component: componentShape,
  /**  Adds active styling to button. */
  isActive: PropTypes.bool,
  /** Adds block styling to button */
  isBlock: PropTypes.bool,
  /** Disables the button and adds disabled styling */
  isDisabled: PropTypes.bool,
  /** Adds focus styling to the button */
  isFocus: PropTypes.bool,
  /** Adds hove styling to the button */
  isHover: PropTypes.bool,
  /** Sets button type */
  type: PropTypes.oneOf(Object.values(ButtonType)),
  /** Adds button variant styles */
  variant: PropTypes.oneOf(Object.values(ButtonVariant)),
  /** Adds accessible text to the button. Required for plain buttons */
  'aria-label': props => {
    if (props.variant === ButtonVariant.plain && !props['aria-label']) {
      return new Error('aria-label is required for Buttons with the plain variant');
    }
    return null;
  }
};

const defaultProps = {
  children: '',
  className: '',
  component: 'button',
  isActive: false,
  isBlock: false,
  isDisabled: false,
  isFocus: false,
  isHover: false,
  type: ButtonType.button,
  variant: ButtonVariant.primary,
  'aria-label': null
};

const Button = ({
  children,
  className,
  component: Component,
  isActive,
  isBlock,
  isDisabled,
  isFocus,
  isHover,
  variant,
  type,
  ...props
}) => {
  const isButtonElement = Component === 'button';

  return (
    <Component
      {...props}
      aria-disabled={isButtonElement ? null : isDisabled}
      className={css(
        styles.button,
        getModifier(styles.modifiers, variant),
        isBlock && styles.modifiers.block,
        isDisabled && styles.modifiers.disabled,
        isActive && styles.modifiers.active,
        isFocus && styles.modifiers.focus,
        isHover && styles.modifiers.hover,
        className
      )}
      disabled={isButtonElement ? isDisabled : null}
      tabIndex={isDisabled && !isButtonElement ? -1 : null}
      type={isButtonElement ? type : null}
    >
      {children}
    </Component>
  );
};

Button.propTypes = propTypes;
Button.defaultProps = defaultProps;

export default Button;

1	import React from 'react';
2	import { css, getModifier } from '@patternfly/react-styles';
3	import PropTypes from 'prop-types';
4	import { componentShape } from '../../internal/componentShape';
5	import styles from '@patternfly/patternfly-next/components/Button/styles.css';
6
7	export const ButtonVariant = {	4✔
8	primary: 'primary',
9	secondary: 'secondary',
10	tertiary: 'tertiary',
11	danger: 'danger',
12	link: 'link',
13	plain: 'plain'
14	};
15
16	export const ButtonType = {	4✔
17	button: 'button',
18	submit: 'submit'
19	};
20
21	const propTypes = {	4✔
22	/** content rendered inside the button */
23	children: PropTypes.node,
24	/** additional classes added to the button */
25	className: PropTypes.string,
26	/** Sets the base component to render. defaults to button */
27	component: componentShape,
28	/** Adds active styling to button. */
29	isActive: PropTypes.bool,
30	/** Adds block styling to button */
31	isBlock: PropTypes.bool,
32	/** Disables the button and adds disabled styling */
33	isDisabled: PropTypes.bool,
34	/** Adds focus styling to the button */
35	isFocus: PropTypes.bool,
36	/** Adds hove styling to the button */
37	isHover: PropTypes.bool,
38	/** Sets button type */
39	type: PropTypes.oneOf(Object.values(ButtonType)),
40	/** Adds button variant styles */
41	variant: PropTypes.oneOf(Object.values(ButtonVariant)),
42	/** Adds accessible text to the button. Required for plain buttons */
43	'aria-label': props => {
44	if (props.variant === ButtonVariant.plain && !props['aria-label']) {	15!
45	return new Error('aria-label is required for Buttons with the plain variant');	×
46	}
47	return null;	15✔
48	}
49	};
50
51	const defaultProps = {	4✔
52	children: '',
53	className: '',
54	component: 'button',
55	isActive: false,
56	isBlock: false,
57	isDisabled: false,
58	isFocus: false,
59	isHover: false,
60	type: ButtonType.button,
61	variant: ButtonVariant.primary,
62	'aria-label': null
63	};
64
65	const Button = ({	4✔
66	children,
67	className,
68	component: Component,
69	isActive,
70	isBlock,
71	isDisabled,
72	isFocus,
73	isHover,
74	variant,
75	type,
76	...props
77	}) => {
78	const isButtonElement = Component === 'button';	14✔
79
80	return (	14✔
81	<Component
82	{...props}
83	aria-disabled={isButtonElement ? null : isDisabled}	14✔
84	className={css(
85	styles.button,
86	getModifier(styles.modifiers, variant),
87	isBlock && styles.modifiers.block,	15✔
88	isDisabled && styles.modifiers.disabled,	16✔
89	isActive && styles.modifiers.active,	14!
90	isFocus && styles.modifiers.focus,	15✔
91	isHover && styles.modifiers.hover,	15✔
92	className
93	)}
94	disabled={isButtonElement ? isDisabled : null}	14✔
95	tabIndex={isDisabled && !isButtonElement ? -1 : null}	30✔
96	type={isButtonElement ? type : null}	14✔
97	>
98	{children}
99	</Component>
100	);
101	};
102
103	Button.propTypes = propTypes;	4✔
104	Button.defaultProps = defaultProps;	4✔
105
106	export default Button;

patternfly / patternfly-react / 1940

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous