Commit c562f2b4 authored by Kyle Keating's avatar Kyle Keating Committed by Kyle Keating

Improve button types

parent 41f289d1
......@@ -3,12 +3,39 @@ import propTypes from 'prop-types';
import SvgIcon from '../../shared/components/svg-icon';
/**
* @typedef ButtonProps
* @prop {string} [buttonText] -
* The presence of this property indicates that the button will have a visibly-rendered
* label (with this prop's value). For brevity, when providing `buttonText`, the `title`
* prop is optional—if `title` is not present, the value of `buttonText` will be used for
* the button's `title` attribute, as they are typically identical. When this prop is
* missing, an icon-only button will be rendered.
* @prop {string} [className] -
* When present, this will be used as the base class name and will override all styling.
* See `buttons` SCSS mixins module for more details.
* @prop {string} [icon] -
* The name of the SVGIcon to render. This is optional if a `buttonText` is provided.
* @prop {boolean} [isExpanded] -
* Is the expandable element controlled by this button currently expanded?
* @prop {boolean} [isPressed] -
* Indicate that this is a toggle button (if `isPressed` is a boolean) and whether it
* is pressed. If omitted, the button is a non-toggle button.
* @prop {(e: Event) => any} onClick - callback for button clicks
* @prop {boolean} [disabled] - disables the button when true
* @prop {Object} [style] - optional inline styling
* @prop {string} [title] -
* `title`, used for button `title`, is required unless `buttonText` is present
*/
/**
* A button.
*
* By default, styling will be applied for the button based on its general
* "type" (e.g. an icon-only button, a labeled button). The presence of a
* `className` prop will disable all default styling.
*
* @param {ButtonProps} props
*/
export default function Button({
buttonText = '',
......@@ -80,52 +107,13 @@ if string property 'buttonText' omitted`
}
Button.propTypes = {
/**
* The presence of this property indicates that the button will have a
* visibly-rendered label (with this prop's value). For brevity, when providing
* `buttonText`, the `title` prop is optional—if `title` is not present,
* the value of `buttonText` will be used for the button's `title` attribute,
* as they are typically identical. When this prop is missing, an icon-only
* button will be rendered.
*/
buttonText: propTypes.string,
/**
* When present, this will be used as the base class name and will override
* all styling. See `buttons` SCSS mixins module for more details.
*/
className: propTypes.string,
/**
* The name of the SVGIcon to render. This is optional if a `buttonText` is
* provided.
*/
icon: requiredStringIfButtonTextMissing,
/**
* Is the expandable element controlled by this button currently expanded?
*/
isExpanded: propTypes.bool,
/**
* Indicate that this is a toggle button (if `isPressed` is a boolean) and
* whether it is pressed.
*
* If omitted, the button is a non-toggle button.
*/
isPressed: propTypes.bool,
/** callback for button clicks */
onClick: propTypes.func,
/** disables the button when true */
onClick: propTypes.func.isRequired,
disabled: propTypes.bool,
/** optional inline styling */
style: propTypes.object,
/**
* `title`, used for button `title`, is required unless `buttonText` is present
*/
title: requiredStringIfButtonTextMissing,
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment