[Chip] adding 'rounded' property to chip component

packages/mui-material/src/Chip/Chip.d.ts

@@ -72,6 +72,11 @@ export interface ChipTypeMap<P = {}, D extends React.ElementType = 'div'> {
      * @default 'medium'
      */
     size?: OverridableStringUnion<'small' | 'medium', ChipPropsSizeOverrides>;
+    /**
+     * If 'true' the component will be rounded instead of circular
+     * @default true
+     */
+    rounded?: boolean;
     /**
      * If `true`, allows the disabled chip to escape focus.
      * If `false`, allows the disabled chip to receive focus.

packages/mui-material/src/Chip/Chip.js

@@ -13,7 +13,8 @@ import styled from '../styles/styled';
 import chipClasses, { getChipUtilityClass } from './chipClasses';
 
 const useUtilityClasses = (ownerState) => {
-  const { classes, disabled, size, color, iconColor, onDelete, clickable, variant } = ownerState;
+  const { classes, disabled, size, color, iconColor, onDelete, clickable, variant, rounded } =
+    ownerState;
 
   const slots = {
     root: [
@@ -27,6 +28,7 @@ const useUtilityClasses = (ownerState) => {
       onDelete && 'deletable',
       onDelete && `deletableColor${capitalize(color)}`,
       `${variant}${capitalize(color)}`,
+      rounded && 'rounded',
     ],
     label: ['label', `label${capitalize(size)}`],
     avatar: ['avatar', `avatar${capitalize(size)}`, `avatarColor${capitalize(color)}`],
@@ -37,6 +39,7 @@ const useUtilityClasses = (ownerState) => {
       `deleteIconColor${capitalize(color)}`,
       `deleteIcon${capitalize(variant)}Color${capitalize(color)}`,
     ],
+    rounded: ['rounded', `rounded`],
   };
 
   return composeClasses(slots, getChipUtilityClass, classes);
@@ -63,6 +66,7 @@ const ChipRoot = styled('div', {
         [`& .${chipClasses.deleteIcon}`]:
           styles[`deleteIcon${capitalize(variant)}Color${capitalize(color)}`],
       },
+      { [`& .${chipClasses.rounded}`]: styles.rounded },
       styles.root,
       styles[`size${capitalize(size)}`],
       styles[`color${capitalize(color)}`],
@@ -172,6 +176,9 @@ const ChipRoot = styled('div', {
       ...(ownerState.size === 'small' && {
         height: 24,
       }),
+      ...(ownerState.rounded === true && {
+        borderRadius: 32 / 4,
+      }),
       ...(ownerState.color !== 'default' && {
         backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
         color: (theme.vars || theme).palette[ownerState.color].contrastText,
@@ -337,6 +344,7 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
     onDelete,
     onKeyDown,
     onKeyUp,
+    rounded,
     size = 'medium',
     variant = 'filled',
     tabIndex,
@@ -397,6 +405,7 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
     onDelete: !!onDelete,
     clickable,
     variant,
+    rounded,
   };
 
   const classes = useUtilityClasses(ownerState);
@@ -549,6 +558,11 @@ Chip.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   onKeyUp: PropTypes.func,
+  /**
+   * Makes chips rounded instead of circular default
+   * @default true
+   */
+  rounded: PropTypes.bool,
   /**
    * The size of the component.
    * @default 'medium'

packages/mui-material/src/Chip/Chip.test.js

@@ -680,6 +680,13 @@ describe('<Chip />', () => {
       expect(icon).to.have.class(classes.deleteIcon);
       expect(icon).to.have.class(classes.deleteIconSmall);
     });
+
+    it('should render the chip with rounded class', () => {
+      const { container } = render(<Chip rounded />);
+
+      const chip = container.querySelector(`.${classes.root}`);
+      expect(chip).to.have.class(classes.rounded);
+    });
   });
 
   describe('event: focus', () => {

packages/mui-material/src/Chip/chipClasses.ts

@@ -92,6 +92,8 @@ export interface ChipClasses {
   deleteIconFilledColorSecondary: string;
   /** State class applied to the root element if keyboard focused. */
   focusVisible: string;
+  /** Styles applied to chip if 'rounded=true' */
+  rounded: string;
 }
 
 export type ChipClassKey = keyof ChipClasses;
@@ -146,6 +148,7 @@ const chipClasses: ChipClasses = generateUtilityClasses('MuiChip', [
   'deleteIconFilledColorPrimary',
   'deleteIconFilledColorSecondary',
   'focusVisible',
+  'rounded',
 ]);
 
 export default chipClasses;