Merge pull request #2346 from dxc-technology/PelayoFelgueroso/missing-attributes

Expose Container ref and Flex fullHeight

Author: Jialecl

apps/website/screens/components/container/code/ContainerCodePage.tsx

@@ -361,6 +361,14 @@ const sections = [
               <TableCode>'static'</TableCode>
             </td>
           </tr>
+          <tr>
+            <td>ref</td>
+            <td>
+              <TableCode>{"React.Ref<HTMLDivElement>"}</TableCode>
+            </td>
+            <td>Reference to the component.</td>
+            <td>-</td>
+          </tr>
           <tr>
             <td>width</td>
             <td>

apps/website/screens/components/flex/code/FlexCodePage.tsx

@@ -135,6 +135,16 @@ const sections = [
               <TableCode>'row'</TableCode>
             </td>
           </tr>
+          <tr>
+            <td>fullHeight</td>
+            <td>
+              <TableCode>boolean</TableCode>
+            </td>
+            <td>If true, the component will take the full height of its parent container.</td>
+            <td>
+              <TableCode>false</TableCode>
+            </td>
+          </tr>
           <tr>
             <td>gap</td>
             <td>

packages/lib/src/container/Container.tsx

@@ -1,5 +1,6 @@
 import styled from "@emotion/styled";
 import ContainerPropsType, { BorderProperties, StyledProps } from "./types";
+import { forwardRef } from "react";
 
 const getBorderStyles = (direction: "top" | "bottom" | "left" | "right", borderProperties: BorderProperties) =>
   `border-${direction}: ${borderProperties.width ?? ""} ${borderProperties.style ?? ""} ${
@@ -82,6 +83,10 @@ const Container = styled.div<StyledProps>`
   padding-left: ${({ padding }) => (typeof padding === "object" && padding.left ? padding.left : "")};
 `;
 
-export default function DxcContainer({ display, width, height, overflow, ...props }: ContainerPropsType) {
-  return <Container $display={display} $width={width} $height={height} $overflow={overflow} {...props} />;
-}
+const DxcContainer = forwardRef<HTMLDivElement, ContainerPropsType>(
+  ({ display, width, height, overflow, ...props }, ref) => {
+    return <Container ref={ref} $display={display} $width={width} $height={height} $overflow={overflow} {...props} />;
+  }
+);
+
+export default DxcContainer;

packages/lib/src/flex/Flex.stories.tsx

@@ -113,6 +113,12 @@ const Flex = () => (
         </DxcFlex>
       </DxcFlex>
     </Container>
+    <Title title="Full Height" level={4} />
+    <div style={{ height: "300px", backgroundColor: "#f2eafa", margin: "2.5rem" }}>
+      <DxcFlex fullHeight justifyContent="center" alignItems="center">
+        <Placeholder />
+      </DxcFlex>
+    </div>
   </>
 );
 

packages/lib/src/flex/Flex.tsx

@@ -9,6 +9,7 @@ const Flex = styled.div<StyledProps>`
     ${typeof props.alignSelf === "string" ? `align-self: ${props.alignSelf};` : ""}
     ${typeof props.$basis === "string" ? `flex-basis: ${props.$basis};` : ""}
     ${typeof props.$direction === "string" ? `flex-direction: ${props.$direction};` : ""}
+    ${props.$fullHeight ? "height: 100%;" : ""}
     ${typeof props.$gap === "string" ? `gap: ${props.$gap};` : ""}
     ${typeof props.$gap === "object" ? `column-gap: ${props.$gap.columnGap}; row-gap: ${props.$gap.rowGap};` : ""}
     ${typeof props.$grow === "number" ? `flex-grow: ${props.$grow};` : ""}
@@ -19,7 +20,7 @@ const Flex = styled.div<StyledProps>`
   `}
 `;
 
-const DxcFlex = ({ basis, direction, gap, grow, order, shrink, wrap, ...props }: FlexPropsType) => (
+const DxcFlex = ({ basis, direction, fullHeight = false, gap, grow, order, shrink, wrap, ...props }: FlexPropsType) => (
   <Flex
     $basis={basis}
     $direction={direction}
@@ -28,6 +29,7 @@ const DxcFlex = ({ basis, direction, gap, grow, order, shrink, wrap, ...props }:
     $order={order}
     $shrink={shrink}
     $wrap={wrap}
+    $fullHeight={fullHeight}
     {...props}
   />
 );

packages/lib/src/flex/types.ts

@@ -85,6 +85,10 @@ type Props = CommonProps & {
    * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/order
    */
   order?: number;
+  /**
+   * If true, the flex container will take the full height of its parent.
+   */
+  fullHeight?: boolean;
   /**
    * Sets the flex-grow CSS property.
    *
@@ -117,6 +121,7 @@ export type StyledProps = CommonProps & {
   $direction?: "row" | "row-reverse" | "column" | "column-reverse";
   $wrap?: "nowrap" | "wrap" | "wrap-reverse";
   $gap?: Gap;
+  $fullHeight?: boolean;
   $order?: number;
   $grow?: number;
   $shrink?: number;