noury/cinny
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Added variants in IconButton comp

Browse source
This commit is contained in:
unknown 2021-09-05 14:04:51 +05:30
parent 4efc320f23
commit c689836208
2 changed files with 21 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/app/atoms/button/IconButton.jsx
View file

@ -7,12 +7,6 @@ import Tooltip from '../tooltip/Tooltip';
import { blurOnBubbling } from './script'; import { blurOnBubbling } from './script';
import Text from '../text/Text'; import Text from '../text/Text';
// TODO:
// 1. [done] an icon only button have "src"
// 2. have multiple variant
// 3. [done] should have a smart accessibility "label" arial-label
// 4. [done] have size as RawIcon
const IconButton = React.forwardRef(({ const IconButton = React.forwardRef(({
variant, size, type, variant, size, type,
tooltip, tooltipPlacement, src, onClick, tooltip, tooltipPlacement, src, onClick,
@ -20,7 +14,7 @@ const IconButton = React.forwardRef(({
const btn = ( const btn = (
<button <button
ref={ref} ref={ref}
className={`ic-btn-${variant}`} className={`ic-btn ic-btn-${variant}`}
onMouseUp={(e) => blurOnBubbling(e, `.ic-btn-${variant}`)} onMouseUp={(e) => blurOnBubbling(e, `.ic-btn-${variant}`)}
onClick={onClick} onClick={onClick}
type={type === 'button' ? 'button' : 'submit'} type={type === 'button' ? 'button' : 'submit'}
@ -49,7 +43,7 @@ IconButton.defaultProps = {
}; };
IconButton.propTypes = { IconButton.propTypes = {
variant: PropTypes.oneOf(['surface']), variant: PropTypes.oneOf(['surface', 'positive', 'caution', 'danger']),
size: PropTypes.oneOf(['normal', 'small', 'extra-small']), size: PropTypes.oneOf(['normal', 'small', 'extra-small']),
type: PropTypes.oneOf(['button', 'submit']), type: PropTypes.oneOf(['button', 'submit']),
tooltip: PropTypes.string, tooltip: PropTypes.string,

23
src/app/atoms/button/IconButton.scss
View file

@ -1,9 +1,6 @@
@use 'state'; @use 'state';
.ic-btn-surface, .ic-btn {
.ic-btn-primary,
.ic-btn-caution,
.ic-btn-danger {
padding: var(--sp-extra-tight); padding: var(--sp-extra-tight);
border: none; border: none;
border-radius: var(--bo-radius); border-radius: var(--bo-radius);
@ -31,4 +28,22 @@
@include state.hover(var(--bg-surface-hover)); @include state.hover(var(--bg-surface-hover));
@include focus(var(--bg-surface-hover)); @include focus(var(--bg-surface-hover));
@include state.active(var(--bg-surface-active)); @include state.active(var(--bg-surface-active));
}
.ic-btn-positive {
@include color(var(--ic-positive-normal));
@include state.hover(var(--bg-positive-hover));
@include focus(var(--bg-positive-hover));
@include state.active(var(--bg-positive-active));
}
.ic-btn-caution {
@include color(var(--ic-caution-normal));
@include state.hover(var(--bg-caution-hover));
@include focus(var(--bg-caution-hover));
@include state.active(var(--bg-caution-active));
}
.ic-btn-danger {
@include color(var(--ic-danger-normal));
@include state.hover(var(--bg-danger-hover));
@include focus(var(--bg-danger-hover));
@include state.active(var(--bg-danger-active));
} }