github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[UI Framework] Rename "type" property to "buttonType" (#11878)

Browse source 
* change type property to buttonType

* Update the tests to assert that the type HTML attribute is supported

* remove type=submit from KuiSubmitButton since component automatically sets type
This commit is contained in:
Nathan Reese 2017-05-26 13:38:19 -06:00 • committed by GitHub
parent c90ea5b993
commit e439d98fcd
21 changed files with 183 additions and 179 deletions
Download patch file Download diff file Expand all files Collapse all files

81
ui_framework/components/button/__snapshots__/button.test.js.snap
View file

@ -6,6 +6,7 @@ exports[`KuiButton Baseline HTML attributes are rendered 1`] = `
class="kuiButton testClass1 testClass2"
data-test-subj="test subject string"
disabled=""
type="submit"
>
<span
class="kuiButton__inner"
@ -23,6 +24,46 @@ exports[`KuiButton Baseline is rendered 1`] = `
</button>
`;
exports[`KuiButton Props buttonType basic renders the basic class 1`] = `
<button
class="kuiButton kuiButton--basic"
>
<span
class="kuiButton__inner"
/>
</button>
`;
exports[`KuiButton Props buttonType danger renders the danger class 1`] = `
<button
class="kuiButton kuiButton--danger"
>
<span
class="kuiButton__inner"
/>
</button>
`;
exports[`KuiButton Props buttonType hollow renders the hollow class 1`] = `
<button
class="kuiButton kuiButton--hollow"
>
<span
class="kuiButton__inner"
/>
</button>
`;
exports[`KuiButton Props buttonType primary renders the primary class 1`] = `
<button
class="kuiButton kuiButton--primary"
>
<span
class="kuiButton__inner"
/>
</button>
`;
exports[`KuiButton Props children is rendered 1`] = `
<button
class="kuiButton"
@ -108,43 +149,3 @@ exports[`KuiButton Props isLoading renders a spinner 1`] = `
</span>
</button>
`;
exports[`KuiButton Props type basic renders the basic class 1`] = `
<button
class="kuiButton kuiButton--basic"
>
<span
class="kuiButton__inner"
/>
</button>
`;
exports[`KuiButton Props type danger renders the danger class 1`] = `
<button
class="kuiButton kuiButton--danger"
>
<span
class="kuiButton__inner"
/>
</button>
`;
exports[`KuiButton Props type hollow renders the hollow class 1`] = `
<button
class="kuiButton kuiButton--hollow"
>
<span
class="kuiButton__inner"
/>
</button>
`;
exports[`KuiButton Props type primary renders the primary class 1`] = `
<button
class="kuiButton kuiButton--primary"
>
<span
class="kuiButton__inner"
/>
</button>
`;

81
ui_framework/components/button/__snapshots__/link_button.test.js.snap
View file

@ -7,6 +7,7 @@ exports[`KuiLinkButton Baseline HTML attributes are rendered (and disabled rende
data-test-subj="test subject string"
href="#"
target="_blank"
type="submit"
>
<span
class="kuiButton__inner"
@ -24,6 +25,46 @@ exports[`KuiLinkButton Baseline is rendered 1`] = `
</a>
`;
exports[`KuiLinkButton Props buttonType basic renders the basic class 1`] = `
<a
class="kuiButton kuiButton--basic"
>
<span
class="kuiButton__inner"
/>
</a>
`;
exports[`KuiLinkButton Props buttonType danger renders the danger class 1`] = `
<a
class="kuiButton kuiButton--danger"
>
<span
class="kuiButton__inner"
/>
</a>
`;
exports[`KuiLinkButton Props buttonType hollow renders the hollow class 1`] = `
<a
class="kuiButton kuiButton--hollow"
>
<span
class="kuiButton__inner"
/>
</a>
`;
exports[`KuiLinkButton Props buttonType primary renders the primary class 1`] = `
<a
class="kuiButton kuiButton--primary"
>
<span
class="kuiButton__inner"
/>
</a>
`;
exports[`KuiLinkButton Props children is rendered 1`] = `
<a
class="kuiButton"
@ -109,43 +150,3 @@ exports[`KuiLinkButton Props isLoading renders a spinner 1`] = `
</span>
</a>
`;
exports[`KuiLinkButton Props type basic renders the basic class 1`] = `
<a
class="kuiButton kuiButton--basic"
>
<span
class="kuiButton__inner"
/>
</a>
`;
exports[`KuiLinkButton Props type danger renders the danger class 1`] = `
<a
class="kuiButton kuiButton--danger"
>
<span
class="kuiButton__inner"
/>
</a>
`;
exports[`KuiLinkButton Props type hollow renders the hollow class 1`] = `
<a
class="kuiButton kuiButton--hollow"
>
<span
class="kuiButton__inner"
/>
</a>
`;
exports[`KuiLinkButton Props type primary renders the primary class 1`] = `
<a
class="kuiButton kuiButton--primary"
>
<span
class="kuiButton__inner"
/>
</a>
`;

56
ui_framework/components/button/__snapshots__/submit_button.test.js.snap
View file

@ -17,6 +17,34 @@ exports[`KuiSubmitButton Baseline is rendered 1`] = `
/>
`;
exports[`KuiSubmitButton Props buttonType basic renders the basic class 1`] = `
<input
class="kuiButton kuiButton--basic"
type="submit"
/>
`;
exports[`KuiSubmitButton Props buttonType danger renders the danger class 1`] = `
<input
class="kuiButton kuiButton--danger"
type="submit"
/>
`;
exports[`KuiSubmitButton Props buttonType hollow renders the hollow class 1`] = `
<input
class="kuiButton kuiButton--hollow"
type="submit"
/>
`;
exports[`KuiSubmitButton Props buttonType primary renders the primary class 1`] = `
<input
class="kuiButton kuiButton--primary"
type="submit"
/>
`;
exports[`KuiSubmitButton Props children is rendered as value 1`] = `
<input
class="kuiButton"
@ -24,31 +52,3 @@ exports[`KuiSubmitButton Props children is rendered as value 1`] = `
value="Hello"
/>
`;
exports[`KuiSubmitButton Props type basic renders the basic class 1`] = `
<input
class="kuiButton kuiButton--basic"
type="submit"
/>
`;
exports[`KuiSubmitButton Props type danger renders the danger class 1`] = `
<input
class="kuiButton kuiButton--danger"
type="submit"
/>
`;
exports[`KuiSubmitButton Props type hollow renders the hollow class 1`] = `
<input
class="kuiButton kuiButton--hollow"
type="submit"
/>
`;
exports[`KuiSubmitButton Props type primary renders the primary class 1`] = `
<input
class="kuiButton kuiButton--primary"
type="submit"
/>
`;

22
ui_framework/components/button/button.js
View file

@ -26,8 +26,8 @@ const buttonTypeToClassNameMap = {
primary: 'kuiButton--primary',
};
const getClassName = ({ className, type, hasIcon = false }) =>
classNames('kuiButton', className, buttonTypeToClassNameMap[type], {
const getClassName = ({ className, buttonType, hasIcon = false }) =>
classNames('kuiButton', className, buttonTypeToClassNameMap[buttonType], {
'kuiButton--iconText': hasIcon,
});
@ -63,7 +63,7 @@ const KuiButton = ({
isLoading,
iconPosition = DEFAULT_ICON_POSITION,
className,
type,
buttonType,
icon,
children,
...rest
@ -72,7 +72,7 @@ const KuiButton = ({
<button
className={getClassName({
className,
type,
buttonType,
hasIcon: icon || isLoading,
})}
{...rest}
@ -93,7 +93,7 @@ KuiButton.propTypes = {
iconPosition: PropTypes.oneOf(ICON_POSITIONS),
children: PropTypes.node,
isLoading: PropTypes.bool,
type: PropTypes.oneOf(BUTTON_TYPES),
buttonType: PropTypes.oneOf(BUTTON_TYPES),
className: PropTypes.string,
};
@ -103,7 +103,7 @@ const KuiLinkButton = ({
iconPosition = DEFAULT_ICON_POSITION,
className,
disabled,
type,
buttonType,
children,
...rest
}) => {
@ -115,7 +115,7 @@ const KuiLinkButton = ({
const classes = classNames(getClassName({
className,
type,
buttonType,
hasIcon: icon || isLoading,
}), { 'kuiButton-isDisabled': disabled });
@ -140,14 +140,14 @@ KuiLinkButton.propTypes = {
icon: PropTypes.node,
iconPosition: PropTypes.oneOf(ICON_POSITIONS),
isLoading: PropTypes.bool,
type: PropTypes.oneOf(BUTTON_TYPES),
buttonType: PropTypes.oneOf(BUTTON_TYPES),
className: PropTypes.string,
children: PropTypes.node,
};
const KuiSubmitButton = ({
className,
type,
buttonType,
children,
...rest
}) => {
@ -156,7 +156,7 @@ const KuiSubmitButton = ({
<input
type="submit"
value={children}
className={getClassName({ className, type })}
className={getClassName({ className, buttonType })}
{...rest}
/>
);
@ -164,7 +164,7 @@ const KuiSubmitButton = ({
KuiSubmitButton.propTypes = {
children: PropTypes.string,
type: PropTypes.oneOf(BUTTON_TYPES),
buttonType: PropTypes.oneOf(BUTTON_TYPES),
className: PropTypes.string,
};

11
ui_framework/components/button/button.test.js
View file

@ -24,6 +24,7 @@ describe('KuiButton', () => {
aria-label="aria label"
className="testClass1 testClass2"
data-test-subj="test subject string"
type="submit"
disabled
/>
);
@ -34,11 +35,11 @@ describe('KuiButton', () => {
});
describe('Props', () => {
describe('type', () => {
BUTTON_TYPES.forEach(type => {
describe(type, () => {
test(`renders the ${type} class`, () => {
const $button = render(<KuiButton type={type} />);
describe('buttonType', () => {
BUTTON_TYPES.forEach(buttonType => {
describe(buttonType, () => {
test(`renders the ${buttonType} class`, () => {
const $button = render(<KuiButton buttonType={buttonType} />);
expect($button).toMatchSnapshot();
});
});

11
ui_framework/components/button/link_button.test.js
View file

@ -24,6 +24,7 @@ describe('KuiLinkButton', () => {
className="testClass1 testClass2"
data-test-subj="test subject string"
disabled
type="submit"
href="#"
target="_blank"
/>
@ -35,11 +36,11 @@ describe('KuiLinkButton', () => {
});
describe('Props', () => {
describe('type', () => {
BUTTON_TYPES.forEach(type => {
describe(type, () => {
test(`renders the ${type} class`, () => {
const $button = render(<KuiLinkButton type={type} />);
describe('buttonType', () => {
BUTTON_TYPES.forEach(buttonType => {
describe(buttonType, () => {
test(`renders the ${buttonType} class`, () => {
const $button = render(<KuiLinkButton buttonType={buttonType} />);
expect($button).toMatchSnapshot();
});
});

10
ui_framework/components/button/submit_button.test.js
View file

@ -34,11 +34,11 @@ describe('KuiSubmitButton', () => {
});
describe('Props', () => {
describe('type', () => {
BUTTON_TYPES.forEach(type => {
describe(type, () => {
test(`renders the ${type} class`, () => {
const $button = render(<KuiSubmitButton type={type} />);
describe('buttonType', () => {
BUTTON_TYPES.forEach(buttonType => {
describe(buttonType, () => {
test(`renders the ${buttonType} class`, () => {
const $button = render(<KuiSubmitButton buttonType={buttonType} />);
expect($button).toMatchSnapshot();
});
});

4
ui_framework/components/modal/confirm_modal.js
View file

@ -64,7 +64,7 @@ export function KuiConfirmModal({
<KuiModalFooter>
<KuiButton
type="hollow"
buttonType="hollow"
autoFocus={ defaultFocusedButton === CANCEL_BUTTON }
data-test-subj="confirmModalCancelButton"
onClick={ onCancel }
@ -72,7 +72,7 @@ export function KuiConfirmModal({
{cancelButtonText}
</KuiButton>
<KuiButton
type="primary"
buttonType="primary"
autoFocus={ defaultFocusedButton === CONFIRM_BUTTON }
data-test-subj="confirmModalConfirmButton"
onClick={ onConfirm }

4
ui_framework/doc_site/src/views/button/button_basic.js
View file

@ -7,7 +7,7 @@ import {
export default () => (
<div>
<KuiButton
type="basic"
buttonType="basic"
onClick={() => window.alert('Button clicked')}
>
Basic button
@ -16,7 +16,7 @@ export default () => (
<br />
<KuiButton
type="basic"
buttonType="basic"
onClick={() => window.alert('Button clicked')}
disabled
>

4
ui_framework/doc_site/src/views/button/button_danger.js
View file

@ -6,14 +6,14 @@ import {
export default () => (
<div>
<KuiButton type="danger">
<KuiButton buttonType="danger">
Danger button
</KuiButton>
<br />
<KuiButton
type="danger"
buttonType="danger"
disabled
>
Danger button, disabled

10
ui_framework/doc_site/src/views/button/button_elements.js
View file

@ -8,7 +8,7 @@ import {
export default () => (
<div>
<KuiButton type="basic">
<KuiButton buttonType="basic">
Button element
</KuiButton>
@ -18,7 +18,7 @@ export default () => (
e.preventDefault();
window.alert('Submit');
}}>
<KuiSubmitButton type="basic">
<KuiSubmitButton buttonType="basic">
Submit input element
</KuiSubmitButton>
</form>
@ -28,7 +28,7 @@ export default () => (
e.preventDefault();
window.alert('Submit');
}}>
<KuiSubmitButton type="basic" disabled>
<KuiSubmitButton buttonType="basic" disabled>
Submit input element, disabled
</KuiSubmitButton>
</form>
@ -36,7 +36,7 @@ export default () => (
&nbsp;
<KuiLinkButton
type="basic"
buttonType="basic"
href="http://www.google.com"
target="_blank"
>
@ -46,7 +46,7 @@ export default () => (
&nbsp;
<KuiLinkButton
type="basic"
buttonType="basic"
href="http://www.google.com"
target="_blank"
disabled

8
ui_framework/doc_site/src/views/button/button_group.js
View file

@ -8,15 +8,15 @@ import {
export default () => (
<div>
<KuiButtonGroup>
<KuiButton type="basic">
<KuiButton buttonType="basic">
Cancel
</KuiButton>
<KuiButton type="basic">
<KuiButton buttonType="basic">
Duplicate
</KuiButton>
<KuiButton type="primary">
<KuiButton buttonType="primary">
Save
</KuiButton>
</KuiButtonGroup>
@ -24,7 +24,7 @@ export default () => (
<br />
<KuiButtonGroup>
<KuiButton type="basic">
<KuiButton buttonType="basic">
Button group with one button
</KuiButton>
</KuiButtonGroup>

10
ui_framework/doc_site/src/views/button/button_group_united.js
View file

@ -9,15 +9,15 @@ import {
export default () => (
<div>
<KuiButtonGroup isUnited>
<KuiButton type="basic">
<KuiButton buttonType="basic">
Option A
</KuiButton>
<KuiButton type="basic">
<KuiButton buttonType="basic">
Option B
</KuiButton>
<KuiButton type="basic">
<KuiButton buttonType="basic">
Option C
</KuiButton>
</KuiButtonGroup>
@ -26,12 +26,12 @@ export default () => (
<KuiButtonGroup isUnited>
<KuiButton
type="basic"
buttonType="basic"
icon={<KuiButtonIcon type="previous" />}
/>
<KuiButton
type="basic"
buttonType="basic"
icon={<KuiButtonIcon type="next" />}
/>
</KuiButtonGroup>

4
ui_framework/doc_site/src/views/button/button_hollow.js
View file

@ -6,14 +6,14 @@ import {
export default () => (
<div>
<KuiButton type="hollow">
<KuiButton buttonType="hollow">
Hollow button
</KuiButton>
<br />
<KuiButton
type="hollow"
buttonType="hollow"
disabled
>
Hollow button, disabled

4
ui_framework/doc_site/src/views/button/button_loading.js
View file

@ -34,7 +34,7 @@ export default class LoadingButton extends Component {
return (
<div>
<KuiButton
type="basic"
buttonType="basic"
onClick={this.onClick}
isLoading={this.state.isLoading}
disabled={this.state.isLoading}
@ -45,7 +45,7 @@ export default class LoadingButton extends Component {
<br />
<KuiButton
type="primary"
buttonType="primary"
onClick={this.onClick}
icon={<KuiButtonIcon type="create" />}
isLoading={this.state.isLoading}

4
ui_framework/doc_site/src/views/button/button_primary.js
View file

@ -6,14 +6,14 @@ import {
export default () => (
<div>
<KuiButton type="primary">
<KuiButton buttonType="primary">
Primary button
</KuiButton>
<br />
<KuiButton
type="primary"
buttonType="primary"
disabled
>
Primary button, disabled

12
ui_framework/doc_site/src/views/button/button_with_icon.js
View file

@ -8,7 +8,7 @@ import {
export default () => (
<div>
<KuiButton
type="primary"
buttonType="primary"
icon={<KuiButtonIcon type="create" />}
>
Create
@ -17,7 +17,7 @@ export default () => (
<br />
<KuiButton
type="danger"
buttonType="danger"
icon={<KuiButtonIcon type="delete" />}
>
Delete
@ -26,7 +26,7 @@ export default () => (
<br />
<KuiButton
type="basic"
buttonType="basic"
icon={<KuiButtonIcon type="previous" />}
>
Previous
@ -35,7 +35,7 @@ export default () => (
<br />
<KuiButton
type="basic"
buttonType="basic"
icon={<KuiButtonIcon type="next" />}
iconPosition='right'
>
@ -45,7 +45,7 @@ export default () => (
<br />
<KuiButton
type="basic"
buttonType="basic"
icon={<KuiButtonIcon type="loading" />}
>
Loading
@ -54,7 +54,7 @@ export default () => (
<br />
<KuiButton
type="basic"
buttonType="basic"
icon={<KuiButtonIcon className="fa-plane" />}
/>
</div>

12
ui_framework/doc_site/src/views/button/buttons_in_tool_bar.js
View file

@ -6,34 +6,34 @@ import {
export default () => (
<div className="kuiToolBar">
<KuiButton type="basic">
<KuiButton buttonType="basic">
Basic button
</KuiButton>
<KuiButton
type="basic"
buttonType="basic"
disabled
>
Basic button, disabled
</KuiButton>
<KuiButton type="primary">
<KuiButton buttonType="primary">
Primary button
</KuiButton>
<KuiButton
type="primary"
buttonType="primary"
disabled
>
Primary button, disabled
</KuiButton>
<KuiButton type="danger">
<KuiButton buttonType="danger">
Danger button
</KuiButton>
<KuiButton
type="danger"
buttonType="danger"
disabled
>
Danger button, disabled

2
ui_framework/doc_site/src/views/modal/confirm_modal_example.js
View file

@ -27,7 +27,7 @@ export class ConfirmModalExample extends React.Component {
render() {
return (
<div>
<KuiButton type="primary" onClick={this.showModal}>
<KuiButton buttonType="primary" onClick={this.showModal}>
Show Modal
</KuiButton>
{

8
ui_framework/doc_site/src/views/tool_bar/tool_bar.js
View file

@ -22,14 +22,14 @@ export const ToolBar = () => (
<div className="kuiToolBarSection">
<KuiButton
type="primary"
buttonType="primary"
icon={<KuiButtonIcon type="create" />}
>
Create
</KuiButton>
<KuiButton
type="danger"
buttonType="danger"
icon={<KuiButtonIcon type="delete" />}
>
Delete
@ -44,12 +44,12 @@ export const ToolBar = () => (
<KuiButtonGroup isUnited>
<KuiButton
type="basic"
buttonType="basic"
icon={<KuiButtonIcon type="previous" />}
>
</KuiButton>
<KuiButton
type="basic"
buttonType="basic"
icon={<KuiButtonIcon type="next" />}
>
</KuiButton>

4
ui_framework/doc_site/src/views/tool_bar/tool_bar_footer.js
View file

@ -22,11 +22,11 @@ export const ToolBarFooter = () => (
<KuiButtonGroup isUnited>
<KuiButton
type="basic"
buttonType="basic"
icon={<KuiButtonIcon type="previous" />}
></KuiButton>
<KuiButton
type="basic"
buttonType="basic"
icon={<KuiButtonIcon type="next" />}
></KuiButton>
</KuiButtonGroup>