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

fix(IconButton): adds hasIconOnly classname to fix right padding #11352

Merged
merged 5 commits into from
May 10, 2022
Merged

fix(IconButton): adds hasIconOnly classname to fix right padding #11352

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f0cf836
fix: add icon only btn styles
jnm2377 May 5, 2022
889f1dd
fix: icon btn story spacing
jnm2377 May 5, 2022
40398bd
chore: update snapshots
jnm2377 May 5, 2022
173379f
fix: icon btn size knob
jnm2377 May 9, 2022
eb6c510
Merge branch 'main' into fix-icon-btn
kodiakhq[bot] May 10, 2022
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
3 changes: 3 additions & 0 deletions packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3570,6 +3570,9 @@ Map {
"children": Object {
"type": "node",
},
"className": Object {
"type": "string",
},
"defaultOpen": Object {
"type": "bool",
},
Expand Down
14 changes: 13 additions & 1 deletion packages/react/src/components/IconButton/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,13 @@ import React from 'react';
import Button from '../Button';
import { Tooltip } from '../Tooltip/next';
import { usePrefix } from '../../internal/usePrefix';
import cx from 'classnames';

const IconButton = React.forwardRef(function IconButton(props, ref) {
const {
align,
children,
className,
defaultOpen = false,
enterDelayMs,
kind,
Expand All @@ -33,7 +35,12 @@ const IconButton = React.forwardRef(function IconButton(props, ref) {
enterDelayMs={enterDelayMs}
label={label}
leaveDelayMs={leaveDelayMs}>
<Button {...rest} kind={kind} ref={ref} size={size}>
<Button
{...rest}
kind={kind}
ref={ref}
size={size}
className={cx(`${prefix}--btn--icon-only`, { [className]: className })}>
{children}
</Button>
</Tooltip>
Expand All @@ -60,6 +67,11 @@ IconButton.propTypes = {
*/
children: PropTypes.node,

/**
* Specify an optional className to be added to your Button
*/
className: PropTypes.string,

/**
* Specify whether the tooltip should be open when it first renders
*/
Expand Down
21 changes: 12 additions & 9 deletions packages/react/src/components/IconButton/next/IconButton.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,16 +33,19 @@ export default {
};

const PlaygroundStory = (props) => {
const { align, defaultOpen, disabled, kind, label } = props;
const { align, defaultOpen, disabled, kind, label, size } = props;
return (
<IconButton
align={align}
defaultOpen={defaultOpen}
disabled={disabled}
kind={kind}
label={label}>
<Edit />
</IconButton>
<div style={{ margin: '3rem' }}>
<IconButton
align={align}
defaultOpen={defaultOpen}
disabled={disabled}
kind={kind}
label={label}
size={size}>
<Edit />
</IconButton>
</div>
);
};

Expand Down
4 changes: 2 additions & 2 deletions ...ages/react/src/components/UIShell/__tests__/__snapshots__/HeaderGlobalAction-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ exports[`HeaderGlobalAction should render 1`] = `
aria-label="Accessibility label"
aria-labelledby="tooltip-2"
aria-pressed={null}
className="custom-class cds--header__action cds--btn cds--btn--primary cds--btn--icon-only"
className="cds--btn--icon-only custom-class cds--header__action cds--btn cds--btn--primary cds--btn--icon-only"
disabled={false}
kind="primary"
onBlur={[Function]}
Expand All @@ -71,7 +71,7 @@ exports[`HeaderGlobalAction should render 1`] = `
aria-label="Accessibility label"
aria-labelledby="tooltip-2"
aria-pressed={null}
className="custom-class cds--header__action cds--btn cds--btn--primary cds--btn--icon-only cds--btn cds--btn--primary"
className="cds--btn--icon-only custom-class cds--header__action cds--btn cds--btn--primary cds--btn--icon-only cds--btn cds--btn--primary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
Expand Down