From a3109bdfb77e3e58d79a9d5ae16d1bd3ae5ccb24 Mon Sep 17 00:00:00 2001 From: Alan Zou Date: Fri, 15 Apr 2022 16:27:44 +0800 Subject: [PATCH] feat(IconButton): change IconButton spec for more like mui fab Icon BREAKING CHANGE: [IconButton] that have a :before element near button, that may cause issue with some users custom style --- .../Buttons/IconButton/IconButton.tsx | 37 +++++---- .../__stories__/IconButton.story.tsx | 80 ++++++++++++++++++- .../IconButton/styles/StyledIconButton.tsx | 48 ++++++++++- .../IconButton/utils/IconButtonUtils.tsx | 10 ++- sync-github.json | 2 +- 5 files changed, 156 insertions(+), 21 deletions(-) diff --git a/packages/juno-core/src/components/Buttons/IconButton/IconButton.tsx b/packages/juno-core/src/components/Buttons/IconButton/IconButton.tsx index 6ca6e6c8..ac32e9a6 100644 --- a/packages/juno-core/src/components/Buttons/IconButton/IconButton.tsx +++ b/packages/juno-core/src/components/Buttons/IconButton/IconButton.tsx @@ -1,4 +1,4 @@ -import React, { forwardRef, memo, ReactElement } from 'react'; +import React, { forwardRef, memo, ReactElement, useMemo } from 'react'; import clsx from 'clsx'; @@ -12,6 +12,7 @@ import { useDeprecatedCheck, useTheme, useThemeProps, + combineClasses, } from '../../../foundation'; import { RcIcon, RcIconProps, RcIconSize } from '../../Icon'; import { RcTooltip, withTooltip } from '../../Tooltip'; @@ -57,6 +58,10 @@ type RcIconButtonProps = { * 0 ~ 24 for different elevation shadow */ activeElevation?: keyof RcTheme['shadows']; + /** + * not have fake border on `inverse` and `contained` variant in `highContrast` theme + */ + disabledFakeBorder?: boolean; } & RcIconButtonDeprecatedProps & Pick< RcIconProps, @@ -67,7 +72,9 @@ type RcIconButtonProps = { | 'iconSize' | 'color' > & - RcClassesProps<'invisible' | 'outline' | 'contained' | 'icon' | 'persistBg'> & + RcClassesProps< + 'invisible' | 'outline' | 'contained' | 'inverse' | 'icon' | 'persistBg' + > & RcBaseProps; const _RcIconButton = memo( @@ -82,9 +89,10 @@ const _RcIconButton = memo( const { buttonRef = ref, className, - classes, + classes: classesProp, children, title, + disabledFakeBorder, symbol, disabled, invisible, @@ -123,20 +131,22 @@ const _RcIconButton = memo( const isOutline = variant === 'outline'; const isContained = variant === 'contained'; + const isInverse = variant === 'inverse'; const isPlain = variant === 'plain'; - const IconClassName = clsx( - className, - classes!.root, - RcIconButtonClasses.root, - { - [RcIconButtonClasses.disabled]: disabled, - [RcIconButtonClasses.invisible]: invisible, - [RcIconButtonClasses.outline]: isOutline, - [RcIconButtonClasses.contained]: isContained, - }, + const classes = useMemo( + () => combineClasses(RcIconButtonClasses, classesProp), + [classesProp], ); + const IconClassName = clsx(className, classes.root, { + [classes.disabled]: disabled, + [classes.invisible]: invisible, + [classes.outline]: isOutline, + [classes.contained]: isContained, + [classes.inverse]: isInverse, + }); + const iconButton = (() => { const icon = React.isValidElement(children) || children === '' ? ( @@ -224,7 +234,6 @@ RcIconButton.defaultProps = { type: 'button', focusRipple: true, disableTouchRipple: true, - centerRipple: true, classes: {}, useRcTooltip: true, }; diff --git a/packages/juno-core/src/components/Buttons/IconButton/__stories__/IconButton.story.tsx b/packages/juno-core/src/components/Buttons/IconButton/__stories__/IconButton.story.tsx index c983cedf..7e2cd500 100644 --- a/packages/juno-core/src/components/Buttons/IconButton/__stories__/IconButton.story.tsx +++ b/packages/juno-core/src/components/Buttons/IconButton/__stories__/IconButton.story.tsx @@ -7,7 +7,7 @@ import { RcPaletteProp, RcText, } from '@ringcentral/juno'; -import { Star as StarIcon } from '@ringcentral/juno-icon'; +import { Star as StarIcon, Phone } from '@ringcentral/juno-icon'; import { notControlInDocTable, notShowInDocTable, @@ -135,6 +135,84 @@ IconButtonExamples.argTypes = { ]), }; +export const IconButtonContained: Story = ({ + variant = 'contained', + ...args +}) => { + switchToControlKnobs(); + + return ( + + {variant} + + + + +
+
+ Disabled ripple + + +
+
+ + disabledFakeBorder + <br /> + <RcText highlight variant="body1"> + (Only use in highContractMode) + </RcText> + + + + + ); +}; + export const IconButtonWithElevation: Story = () => { switchToControlKnobs(); return ( diff --git a/packages/juno-core/src/components/Buttons/IconButton/styles/StyledIconButton.tsx b/packages/juno-core/src/components/Buttons/IconButton/styles/StyledIconButton.tsx index 343a533c..a55df819 100644 --- a/packages/juno-core/src/components/Buttons/IconButton/styles/StyledIconButton.tsx +++ b/packages/juno-core/src/components/Buttons/IconButton/styles/StyledIconButton.tsx @@ -13,6 +13,7 @@ import { RcThemedStyled, setOpacity, shadows, + fakeBorder, } from '../../../../foundation'; import { RcIcon } from '../../../Icon'; import { RcIconButtonProps, RcIconButtonVariant } from '../IconButton'; @@ -70,7 +71,9 @@ export const iconButtonStyle: RcThemedStyled = ({ useColorWhenDisabled, shouldPersistBg, radius: radiusProp, + disableRipple, elevation, + disabledFakeBorder, activeElevation, }) => { const iconSize = RcIconButtonSizes[size!]; @@ -98,6 +101,16 @@ export const iconButtonStyle: RcThemedStyled = ({ const nowShadow = elevation !== undefined ? shadows(elevation) : defaultShadow; + const radiusValue = radius(currRadius); + + const contrastColorBorder = + !disabledFakeBorder && + fakeBorder({ + color: palette2('highContrast'), + radius: currRadius, + pseudo: true, + }); + return css` display: inline-flex; justify-content: center; @@ -106,7 +119,7 @@ export const iconButtonStyle: RcThemedStyled = ({ width: ${containerSize}; height: ${containerSize}; color: ${mainColor}; - border-radius: ${radius(currRadius)}; + border-radius: ${radiusValue}; transition: ${backgroundTransition}; cursor: ${disabled ? 'default' : 'pointer'}; background-color: ${(shouldPersistBg || isInverse) && persistBgColor}; @@ -195,9 +208,25 @@ export const iconButtonStyle: RcThemedStyled = ({ color: ${mainColorContrast}; background-color: ${mainColor}; + &:before { + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: ${radiusValue}; + position: absolute; + } + + ${contrastColorBorder}; + ${nonTouchHoverMedia} { &:hover { - background-color: ${setOpacity(mainColor, '08', true)}; + &:before { + background-color: ${setOpacity(mainColorContrast, '08')}; + } ${childrenClass} { color: ${mainColorContrast}; @@ -206,7 +235,9 @@ export const iconButtonStyle: RcThemedStyled = ({ } ${focusVisible} { - background-color: ${setOpacity(mainColor, '16', true)}; + &:before { + background-color: ${setOpacity(mainColorContrast, '16')}; + } ${childrenClass} { color: ${mainColorContrast}; @@ -214,7 +245,12 @@ export const iconButtonStyle: RcThemedStyled = ({ } &:active { - background-color: ${setOpacity(mainColor, '24', true)}; + ${disableRipple && + css` + &:before { + background-color: ${setOpacity(mainColorContrast, '24')}; + } + `} ${childrenClass} { color: ${mainColorContrast}; @@ -222,6 +258,10 @@ export const iconButtonStyle: RcThemedStyled = ({ } } + &.${RcIconButtonClasses.inverse} { + ${contrastColorBorder}; + } + .${RcIconButtonTouchRippleClasses.ripplePulsate} { border-radius: 0; animation-name: none; diff --git a/packages/juno-core/src/components/Buttons/IconButton/utils/IconButtonUtils.tsx b/packages/juno-core/src/components/Buttons/IconButton/utils/IconButtonUtils.tsx index 24651208..86037251 100644 --- a/packages/juno-core/src/components/Buttons/IconButton/utils/IconButtonUtils.tsx +++ b/packages/juno-core/src/components/Buttons/IconButton/utils/IconButtonUtils.tsx @@ -3,7 +3,15 @@ import { RcIconSizes } from '../../../Icon/utils'; import { RcIconButtonProps, RcIconButtonSize } from '../IconButton'; export const RcIconButtonClasses = RcClasses( - ['root', 'disabled', 'invisible', 'outline', 'contained', 'persistBg'], + [ + 'root', + 'disabled', + 'invisible', + 'outline', + 'contained', + 'inverse', + 'persistBg', + ], 'RcIconButton', ); diff --git a/sync-github.json b/sync-github.json index 8a033e7a..3dba9a3d 100644 --- a/sync-github.json +++ b/sync-github.json @@ -1,3 +1,3 @@ { - "latestCommitSHA": "d344987cda9c1c6ffdf5c26ea279afb33b2e1cc3" + "latestCommitSHA": "8b063d92b0c92bfb0479b1de8436954073ae476c" } \ No newline at end of file