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

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<RcButtonBaseProps, 'color'>;
 
 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,
 };

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<IconButtonProps> = ({
+  variant = 'contained',
+  ...args
+}) => {
+  switchToControlKnobs();
+
+  return (
+    <RcBox margin="1em" textAlign="center" key={variant}>
+      <Title>{variant}</Title>
+      <RcIconButton variant={variant} symbol={Phone} {...args} />
+      <RcIconButton
+        variant={variant}
+        symbol={Phone}
+        {...args}
+        color="neutral.b01"
+      />
+      <RcIconButton
+        variant={variant}
+        symbol={Phone}
+        {...args}
+        color="neutral.b05"
+      />
+      <RcIconButton
+        variant={variant}
+        symbol={Phone}
+        color="success.b03"
+        elevation={0}
+        activeElevation={0}
+        {...args}
+      />
+      <br />
+      <br />
+      <Title>Disabled ripple</Title>
+      <RcIconButton
+        variant={variant}
+        symbol={Phone}
+        disableRipple
+        elevation={0}
+        activeElevation={0}
+        color="danger.b04"
+        {...args}
+      />
+      <RcIconButton
+        variant="inverse"
+        symbol={Phone}
+        disableRipple
+        elevation={0}
+        activeElevation={0}
+        color="danger.b04"
+        {...args}
+      />
+      <br />
+      <br />
+      <Title>
+        disabledFakeBorder
+        <br />
+        <RcText highlight variant="body1">
+          (Only use in highContractMode)
+        </RcText>
+      </Title>
+      <RcIconButton
+        variant="contained"
+        symbol={Phone}
+        disabledFakeBorder
+        color="danger.b04"
+        {...args}
+      />
+      <RcIconButton
+        variant="inverse"
+        symbol={Phone}
+        disabledFakeBorder
+        color="danger.b04"
+        {...args}
+      />
+    </RcBox>
+  );
+};
+
 export const IconButtonWithElevation: Story<IconButtonProps> = () => {
   switchToControlKnobs();
   return (

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<RcIconButtonProps, any> = ({
   useColorWhenDisabled,
   shouldPersistBg,
   radius: radiusProp,
+  disableRipple,
   elevation,
+  disabledFakeBorder,
   activeElevation,
 }) => {
   const iconSize = RcIconButtonSizes[size!];
@@ -98,6 +101,16 @@ export const iconButtonStyle: RcThemedStyled<RcIconButtonProps, any> = ({
   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<RcIconButtonProps, any> = ({
     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<RcIconButtonProps, any> = ({
       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,22 +235,33 @@ export const iconButtonStyle: RcThemedStyled<RcIconButtonProps, any> = ({
       }
 
       ${focusVisible} {
-        background-color: ${setOpacity(mainColor, '16', true)};
+        &:before {
+          background-color: ${setOpacity(mainColorContrast, '16')};
+        }
 
         ${childrenClass} {
           color: ${mainColorContrast};
         }
       }
 
       &:active {
-        background-color: ${setOpacity(mainColor, '24', true)};
+        ${disableRipple &&
+        css`
+          &:before {
+            background-color: ${setOpacity(mainColorContrast, '24')};
+          }
+        `}
 
         ${childrenClass} {
           color: ${mainColorContrast};
         }
       }
     }
 
+    &.${RcIconButtonClasses.inverse} {
+      ${contrastColorBorder};
+    }
+
     .${RcIconButtonTouchRippleClasses.ripplePulsate} {
       border-radius: 0;
       animation-name: none;

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<RcIconButtonProps>(
-  ['root', 'disabled', 'invisible', 'outline', 'contained', 'persistBg'],
+  [
+    'root',
+    'disabled',
+    'invisible',
+    'outline',
+    'contained',
+    'inverse',
+    'persistBg',
+  ],
   'RcIconButton',
 );
 

sync-github.json

@@ -1,3 +1,3 @@
 {
-  "latestCommitSHA": "d344987cda9c1c6ffdf5c26ea279afb33b2e1cc3"
+  "latestCommitSHA": "8b063d92b0c92bfb0479b1de8436954073ae476c"
 }