feat: added polymorphic props support for column (#18846)

* feat: added polymorphic props sucpport for column

* chore: removed ref from cssgrid

* chore: changed names

* fix: changed polymorphic props implementation

* feat: added test story

* Update packages/react/src/components/Grid/Column.tsx

---------

Co-authored-by: Heloise Lui <71858203+heloiselui@users.noreply.github.com>
Co-authored-by: Riddhi Bansal <41935566+riddhybansal@users.noreply.github.com>
Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>

Author: 4 people

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -899,6 +899,7 @@ Map {
     },
   },
   "Column" => Object {
+    "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {
       "as": Object {
         "args": Array [
@@ -1246,6 +1247,7 @@ Map {
         "type": "oneOfType",
       },
     },
+    "render": [Function],
   },
   "ColumnHang" => Object {
     "propTypes": Object {

packages/react/src/components/Grid/Column.tsx

@@ -12,6 +12,10 @@ import React from 'react';
 import { usePrefix } from '../../internal/usePrefix';
 import { PolymorphicProps } from '../../types/common';
 import { useGridSettings } from './GridContext';
+import {
+  PolymorphicComponentPropWithRef,
+  PolymorphicRef,
+} from '../../internal/PolymorphicProps';
 
 type ColumnSpanPercent = '25%' | '50%' | '75%' | '100%';
 
@@ -87,10 +91,8 @@ export interface ColumnBaseProps {
   span?: ColumnSpan;
 }
 
-export type ColumnProps<T extends React.ElementType> = PolymorphicProps<
-  T,
-  ColumnBaseProps
->;
+export type ColumnProps<T extends React.ElementType> =
+  PolymorphicComponentPropWithRef<T, ColumnBaseProps>;
 
 export interface ColumnComponent {
   <T extends React.ElementType>(
@@ -99,19 +101,25 @@ export interface ColumnComponent {
   ): React.ReactElement<any, any> | null;
 }
 
-function Column<T extends React.ElementType>({
-  as: BaseComponent = 'div' as T,
-  children,
-  className: customClassName,
-  sm,
-  md,
-  lg,
-  xlg,
-  max,
-  ...rest
-}: ColumnProps<T>) {
+const Column = React.forwardRef(function Column<
+  T extends React.ElementType = 'div',
+>(
+  {
+    as,
+    children,
+    className: customClassName,
+    sm,
+    md,
+    lg,
+    xlg,
+    max,
+    ...rest
+  }: ColumnProps<T>,
+  ref?: PolymorphicRef<T>
+) {
   const { mode } = useGridSettings();
   const prefix = usePrefix();
+  const BaseComponent = as || 'div';
 
   if (mode === 'css-grid') {
     return (
@@ -137,14 +145,12 @@ function Column<T extends React.ElementType>({
     [`${prefix}--col`]: columnClassName.length === 0,
   });
 
-  // cast as any to let TypeScript allow passing in attributes to base component
-  const BaseComponentAsAny: any = BaseComponent;
   return (
-    <BaseComponentAsAny className={className} {...rest}>
+    <BaseComponent className={className} ref={ref} {...rest}>
       {children}
-    </BaseComponentAsAny>
+    </BaseComponent>
   );
-}
+});
 
 const percentSpanType = PropTypes.oneOf(['25%', '50%', '75%', '100%']);
 

packages/react/src/components/Grid/FlexGrid.stories.js

@@ -418,6 +418,36 @@ export const Default = (args) => {
   );
 };
 
+export const Test1 = (args) => {
+  // Grab the style from here to see the visual example
+  //https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/Grid/FlexGrid.stories.scss
+  function DemoContent({ children }) {
+    return (
+      <div className="outside">
+        <div className="inside">{children}</div>
+      </div>
+    );
+  }
+  return (
+    <FlexGrid {...args} as="section">
+      <Row>
+        <Column as="section">
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+      </Row>
+    </FlexGrid>
+  );
+};
+
 Default.args = {
   as: 'div',
   fullWidth: false,