refactor(Row): remove noGutters prop (react-bootstrap#5761)

* changed .no-gutter to g-0

* removed noGutter completely

* removed noGutters prop from interface also

* warning fix

* removed default props

* changed .no-gutter to g-0

* removed noGutter completely

* Update RowSpec.js

Co-authored-by: Kyle Tsang <[email protected]>

Author: mdctleo

src/Row.tsx

@@ -26,7 +26,6 @@ type RowColumns = RowColWidth | { cols?: RowColWidth };
 export interface RowProps
   extends BsPrefixProps,
     React.HTMLAttributes<HTMLElement> {
-  noGutters?: boolean;
   xs?: RowColumns;
   sm?: RowColumns;
   md?: RowColumns;
@@ -51,8 +50,6 @@ const propTypes = {
    */
   bsPrefix: PropTypes.string,
 
-  /** Removes the gutter spacing between `Col`s as well as any added negative margins. */
-  noGutters: PropTypes.bool.isRequired,
   as: PropTypes.elementType,
 
   /**
@@ -104,9 +101,6 @@ const propTypes = {
   xxl: rowColumns,
 };
 
-const defaultProps = {
-  noGutters: false,
-};
 
 const Row: BsPrefixRefForwardingComponent<'div', RowProps> = React.forwardRef<
   HTMLDivElement,
@@ -116,7 +110,6 @@ const Row: BsPrefixRefForwardingComponent<'div', RowProps> = React.forwardRef<
     {
       bsPrefix,
       className,
-      noGutters,
       // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
       as: Component = 'div',
       ...props
@@ -147,19 +140,13 @@ const Row: BsPrefixRefForwardingComponent<'div', RowProps> = React.forwardRef<
       <Component
         ref={ref}
         {...props}
-        className={classNames(
-          className,
-          decoratedBsPrefix,
-          noGutters && 'no-gutters',
-          ...classes,
-        )}
+        className={classNames(className, decoratedBsPrefix, ...classes)}
       />
     );
   },
 );
 
 Row.displayName = 'Row';
 Row.propTypes = propTypes;
-Row.defaultProps = defaultProps;
 
 export default Row;

test/RowSpec.js

@@ -40,8 +40,4 @@ describe('Row', () => {
   it('should allow custom elements instead of "div"', () => {
     mount(<Row as="section" />).assertSingle('section.row');
   });
-
-  it('Should render no-gutters correctly', () => {
-    mount(<Row noGutters />).assertSingle('.row.no-gutters');
-  });
 });