[material-ui][Badge] Make keys in anchor origin partial (#43950)

Co-authored-by: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
mui · Oct 3, 2024 · 00f333f · 00f333f
1 parent 8f3e6e9
commit 00f333f
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 11 deletions.
diff --git a/docs/pages/material-ui/api/badge.json b/docs/pages/material-ui/api/badge.json
@@ -3,7 +3,7 @@
     "anchorOrigin": {
       "type": {
         "name": "shape",
-        "description": "{ horizontal: 'left'<br>&#124;&nbsp;'right', vertical: 'bottom'<br>&#124;&nbsp;'top' }"
+        "description": "{ horizontal?: 'left'<br>&#124;&nbsp;'right', vertical?: 'bottom'<br>&#124;&nbsp;'top' }"
       },
       "default": "{\n  vertical: 'top',\n  horizontal: 'right',\n}"
     },

diff --git a/packages/mui-material/src/Badge/Badge.d.ts b/packages/mui-material/src/Badge/Badge.d.ts
@@ -29,8 +29,8 @@ export type BadgeOwnerState = Simplify<
 >;
 
 export interface BadgeOrigin {
-  vertical: 'top' | 'bottom';
-  horizontal: 'left' | 'right';
+  vertical?: 'top' | 'bottom';
+  horizontal?: 'left' | 'right';
 }
 
 export interface BadgeOwnProps {

diff --git a/packages/mui-material/src/Badge/Badge.js b/packages/mui-material/src/Badge/Badge.js
@@ -242,13 +242,17 @@ const BadgeBadge = styled('span', {
   })),
 );
 
+function getAnchorOrigin(anchorOrigin) {
+  return {
+    vertical: anchorOrigin?.vertical ?? 'top',
+    horizontal: anchorOrigin?.horizontal ?? 'right',
+  };
+}
+
 const Badge = React.forwardRef(function Badge(inProps, ref) {
   const props = useDefaultProps({ props: inProps, name: 'MuiBadge' });
   const {
-    anchorOrigin: anchorOriginProp = {
-      vertical: 'top',
-      horizontal: 'right',
-    },
+    anchorOrigin: anchorOriginProp,
     className,
     classes: classesProp,
     component,
@@ -280,7 +284,7 @@ const Badge = React.forwardRef(function Badge(inProps, ref) {
   });
 
   const prevProps = usePreviousProps({
-    anchorOrigin: anchorOriginProp,
+    anchorOrigin: getAnchorOrigin(anchorOriginProp),
     color: colorProp,
     overlap: overlapProp,
     variant: variantProp,
@@ -292,10 +296,11 @@ const Badge = React.forwardRef(function Badge(inProps, ref) {
   const {
     color = colorProp,
     overlap = overlapProp,
-    anchorOrigin = anchorOriginProp,
+    anchorOrigin: anchorOriginPropProp,
     variant = variantProp,
   } = invisible ? prevProps : props;
 
+  const anchorOrigin = getAnchorOrigin(anchorOriginPropProp);
   const displayValue = variant !== 'dot' ? displayValueFromHook : undefined;
 
   const ownerState = {
@@ -360,8 +365,8 @@ Badge.propTypes /* remove-proptypes */ = {
    * }
    */
   anchorOrigin: PropTypes.shape({
-    horizontal: PropTypes.oneOf(['left', 'right']).isRequired,
-    vertical: PropTypes.oneOf(['bottom', 'top']).isRequired,
+    horizontal: PropTypes.oneOf(['left', 'right']),
+    vertical: PropTypes.oneOf(['bottom', 'top']),
   }),
   /**
    * The content rendered within the badge.

diff --git a/packages/mui-material/src/Badge/Badge.spec.tsx b/packages/mui-material/src/Badge/Badge.spec.tsx
@@ -8,3 +8,6 @@ function classesTest() {
     </Badge>
   );
 }
+
+<Badge anchorOrigin={{ vertical: 'bottom' }} />;
+<Badge anchorOrigin={{ horizontal: 'left' }} />;
diff --git a/packages/mui-material/src/Badge/Badge.test.js b/packages/mui-material/src/Badge/Badge.test.js
@@ -238,6 +238,20 @@ describe('<Badge />', () => {
       expect(findBadge(container)).to.have.class(classes.anchorOriginBottomRightRectangular);
     });
 
+    it('should apply style for bottom right rectangular when only vertical is specified', () => {
+      const { container } = render(
+        <Badge {...defaultProps} anchorOrigin={{ vertical: 'bottom' }} />,
+      );
+      expect(findBadge(container)).to.have.class(classes.anchorOriginBottomRightRectangular);
+    });
+
+    it('should apply style for top left rectangular when only horizontal is specified', () => {
+      const { container } = render(
+        <Badge {...defaultProps} anchorOrigin={{ horizontal: 'left' }} />,
+      );
+      expect(findBadge(container)).to.have.class(classes.anchorOriginTopLeftRectangular);
+    });
+
     it('should apply style for top left circular', () => {
       const { container } = render(
         <Badge