fix(Grid): pass legal HTML props to the root dom node, close #2867

alibaba-fusion · Mar 27, 2024 · abdf18b · abdf18b
1 parent 8007d24
commit abdf18b
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 4 deletions.
diff --git a/components/grid/__tests__/index-spec.tsx b/components/grid/__tests__/index-spec.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import ConfigProvider from '../../config-provider';
 import Grid from '../index';
 
 const { Row, Col } = Grid;
@@ -132,3 +133,34 @@ describe('Col', () => {
         cy.get('.cus-component');
     });
 });
+
+describe('Issues', () => {
+    // https://github.com/alibaba-fusion/next/issues/2867
+    it('should not pass common props to dom', () => {
+        cy.mount(
+            <ConfigProvider
+                prefix="next-"
+                device="desktop"
+                popupContainer={document.body}
+                pure
+                rtl
+                warning
+                locale={{}}
+                errorBoundary
+                defaultPropsConfig={{}}
+            >
+                <div>
+                    <Row>
+                        <Col span={4}>11</Col>
+                    </Row>
+                </div>
+            </ConfigProvider>
+        );
+        ['prefix', 'device', 'popupContainer', 'pure', 'rtl', 'warning', 'locale'].forEach(key => {
+            cy.get('.next-row').should('not.have.attr', key);
+            cy.get('.next-row').should('not.have.attr', key.toLowerCase());
+            cy.get('.next-col').should('not.have.attr', key);
+            cy.get('.next-col').should('not.have.attr', key.toLowerCase());
+        });
+    });
+});
diff --git a/components/grid/col.tsx b/components/grid/col.tsx
@@ -1,7 +1,9 @@
 import React, { Component, ComponentClass, FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
+import ConfigProvider from '../config-provider';
 import { type ColProps, type BreakPoints, type PointProps, type TypeRecord } from './types';
+import { obj } from '../util';
 
 const breakPoints: BreakPoints[] = ['xxs', 'xs', 's', 'm', 'l', 'xl'];
 
@@ -14,6 +16,7 @@ export default class Col extends Component<ColProps> {
     static isNextCol = true;
 
     static propTypes = {
+        ...ConfigProvider.propTypes,
         prefix: PropTypes.string,
         pure: PropTypes.bool,
         rtl: PropTypes.bool,
@@ -90,6 +93,7 @@ export default class Col extends Component<ColProps> {
             rtl,
             ...others
         } = this.props;
+        const domOtherProps = obj.pickOthers(Col.propTypes, others);
         const Tag = component as
             | string
             | FunctionComponent<Record<string, unknown> & { className: string }>
@@ -134,7 +138,7 @@ export default class Col extends Component<ColProps> {
         });
 
         return (
-            <Tag dir={rtl ? 'rtl' : 'ltr'} role="gridcell" className={classes} {...others}>
+            <Tag dir={rtl ? 'rtl' : 'ltr'} role="gridcell" className={classes} {...domOtherProps}>
                 {children}
             </Tag>
         );

diff --git a/components/grid/row.tsx b/components/grid/row.tsx
@@ -8,8 +8,10 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
+import ConfigProvider from '../config-provider';
 import { type RowProps, type TypeRecord } from './types';
 import Col from './col';
+import { obj } from '../util';
 
 type BooleanRecord = TypeRecord<boolean>;
 
@@ -19,6 +21,7 @@ type BooleanRecord = TypeRecord<boolean>;
  */
 export default class Row extends Component<RowProps> {
     static propTypes = {
+        ...ConfigProvider.propTypes,
         prefix: PropTypes.string,
         pure: PropTypes.bool,
         rtl: PropTypes.bool,
@@ -74,11 +77,13 @@ export default class Row extends Component<RowProps> {
             justify,
             hidden,
             className,
+            style,
             component,
             children,
             rtl,
             ...others
         } = this.props;
+        const domOtherProps = obj.pickOthers(Row.propTypes, others);
         const Tag = component as
             | string
             | FunctionComponent<Record<string, unknown> & { className: string }>
@@ -108,13 +113,14 @@ export default class Row extends Component<RowProps> {
         });
 
         let newChildren = children;
+        let newStyle = style;
         const gutterNumber = parseInt((gutter as string).toString(), 10);
         if (gutterNumber !== 0) {
             const halfGutterString = `${gutterNumber / 2}px`;
-            others.style = {
+            newStyle = {
                 marginLeft: `-${halfGutterString}`,
                 marginRight: `-${halfGutterString}`,
-                ...(others.style || {}),
+                ...newStyle,
             };
             newChildren = Children.map(children, (child: ReactElement) => {
                 if (
@@ -139,7 +145,13 @@ export default class Row extends Component<RowProps> {
         }
 
         return (
-            <Tag dir={rtl ? 'rtl' : 'ltr'} role="row" className={newClassName} {...others}>
+            <Tag
+                dir={rtl ? 'rtl' : 'ltr'}
+                role="row"
+                className={newClassName}
+                style={newStyle}
+                {...domOtherProps}
+            >
                 {newChildren}
             </Tag>
         );