Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
May 26, 2017
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9619dbc
change type property to buttonType
nreese May 17, 2017
cd18158
Update the tests to assert that the type HTML attribute is supported
nreese May 17, 2017
5ad8aa5
remove type=submit from KuiSubmitButton since component automatically…
nreese May 17, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 40 additions & 40 deletions ui_framework/components/button/__snapshots__/button.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,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"
Expand Down Expand Up @@ -108,43 +148,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>
`;
80 changes: 40 additions & 40 deletions ui_framework/components/button/__snapshots__/link_button.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,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"
Expand Down Expand Up @@ -109,43 +149,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>
`;
22 changes: 11 additions & 11 deletions ui_framework/components/button/__snapshots__/submit_button.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,38 +17,38 @@ exports[`KuiSubmitButton Baseline is rendered 1`] = `
/>
`;

exports[`KuiSubmitButton Props children is rendered as value 1`] = `
exports[`KuiSubmitButton Props buttonType basic renders the basic class 1`] = `
<input
class="kuiButton"
class="kuiButton kuiButton--basic"
type="submit"
value="Hello"
/>
`;

exports[`KuiSubmitButton Props type basic renders the basic class 1`] = `
exports[`KuiSubmitButton Props buttonType danger renders the danger class 1`] = `
<input
class="kuiButton kuiButton--basic"
class="kuiButton kuiButton--danger"
type="submit"
/>
`;

exports[`KuiSubmitButton Props type danger renders the danger class 1`] = `
exports[`KuiSubmitButton Props buttonType hollow renders the hollow class 1`] = `
<input
class="kuiButton kuiButton--danger"
class="kuiButton kuiButton--hollow"
type="submit"
/>
`;

exports[`KuiSubmitButton Props type hollow renders the hollow class 1`] = `
exports[`KuiSubmitButton Props buttonType primary renders the primary class 1`] = `
<input
class="kuiButton kuiButton--hollow"
class="kuiButton kuiButton--primary"
type="submit"
/>
`;

exports[`KuiSubmitButton Props type primary renders the primary class 1`] = `
exports[`KuiSubmitButton Props children is rendered as value 1`] = `
<input
class="kuiButton kuiButton--primary"
class="kuiButton"
type="submit"
value="Hello"
/>
`;
22 changes: 11 additions & 11 deletions ui_framework/components/button/button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});

Expand Down Expand Up @@ -63,7 +63,7 @@ const KuiButton = ({
isLoading,
iconPosition = DEFAULT_ICON_POSITION,
className,
type,
buttonType,
icon,
children,
...rest
Expand All @@ -72,7 +72,7 @@ const KuiButton = ({
<button
className={getClassName({
className,
type,
buttonType,
hasIcon: icon || isLoading,
})}
{...rest}
Expand All @@ -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,
};

Expand All @@ -103,7 +103,7 @@ const KuiLinkButton = ({
iconPosition = DEFAULT_ICON_POSITION,
className,
disabled,
type,
buttonType,
children,
...rest
}) => {
Expand All @@ -115,7 +115,7 @@ const KuiLinkButton = ({

const classes = classNames(getClassName({
className,
type,
buttonType,
hasIcon: icon || isLoading,
}), { 'kuiButton-isDisabled': disabled });

Expand All @@ -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
}) => {
Expand All @@ -156,15 +156,15 @@ const KuiSubmitButton = ({
<input
type="submit"
value={children}
className={getClassName({ className, type })}
className={getClassName({ className, buttonType })}
{...rest}
/>
);
};

KuiSubmitButton.propTypes = {
children: PropTypes.string,
type: PropTypes.oneOf(BUTTON_TYPES),
buttonType: PropTypes.oneOf(BUTTON_TYPES),
className: PropTypes.string,
};

Expand Down
10 changes: 5 additions & 5 deletions ui_framework/components/button/button.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,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} />);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll need to update the test above this one to be:

    test('HTML attributes are rendered', () => {
      const $button = render(
        <KuiButton
          aria-label="aria label"
          className="testClass1 testClass2"
          data-test-subj="test subject string"
          type="submit"
          disabled
        />
      );

      expect($button)
        .toMatchSnapshot();
    });

This will allow us to test that specifying the prop type="submit" renders as the HTML attribute type="submit".

We'll need to do this with the KuiLinkButton and KuiSubmitButton tests. too.

expect($button).toMatchSnapshot();
});
});
Expand Down
10 changes: 5 additions & 5 deletions ui_framework/components/button/link_button.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,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();
});
});
Expand Down
10 changes: 5 additions & 5 deletions ui_framework/components/button/submit_button.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});
Expand Down
6 changes: 4 additions & 2 deletions ui_framework/components/modal/__snapshots__/confirm_modal.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,9 @@ exports[`renders KuiConfirmModal 1`] = `
class="kuiModalFooter"
>
<button
class="kuiButton kuiButton--hollow"
class="kuiButton"
data-test-subj="confirmModalCancelButton"
type="hollow"
>
<span
class="kuiButton__inner"
Expand All @@ -43,8 +44,9 @@ exports[`renders KuiConfirmModal 1`] = `
</span>
</button>
<button
class="kuiButton kuiButton--primary"
class="kuiButton"
data-test-subj="confirmModalConfirmButton"
type="primary"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like we'll need to update confirm_modal.js, which creates instances of KuiButton.

>
<span
class="kuiButton__inner"
Expand Down
Loading