From 42d22063a4d5bfdc1b7ebf8e6389db8b5692a97a Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Tue, 25 Nov 2025 17:09:18 +0100 Subject: [PATCH 1/4] Expose Container ref and Flex fullHeight --- packages/lib/src/container/Container.tsx | 11 ++++++++--- packages/lib/src/flex/Flex.tsx | 4 +++- packages/lib/src/flex/types.ts | 5 +++++ 3 files changed, 16 insertions(+), 4 deletions(-) diff --git a/packages/lib/src/container/Container.tsx b/packages/lib/src/container/Container.tsx index 37ac9672b2..6297fd8b09 100644 --- a/packages/lib/src/container/Container.tsx +++ b/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` padding-left: ${({ padding }) => (typeof padding === "object" && padding.left ? padding.left : "")}; `; -export default function DxcContainer({ display, width, height, overflow, ...props }: ContainerPropsType) { - return ; -} +const DxcContainer = forwardRef( + ({ display, width, height, overflow, ...props }, ref) => { + return ; + } +); + +export default DxcContainer; diff --git a/packages/lib/src/flex/Flex.tsx b/packages/lib/src/flex/Flex.tsx index 1a198e554d..ca57aa486a 100644 --- a/packages/lib/src/flex/Flex.tsx +++ b/packages/lib/src/flex/Flex.tsx @@ -9,6 +9,7 @@ const Flex = styled.div` ${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` `} `; -const DxcFlex = ({ basis, direction, gap, grow, order, shrink, wrap, ...props }: FlexPropsType) => ( +const DxcFlex = ({ basis, direction, fullHeight = false, gap, grow, order, shrink, wrap, ...props }: FlexPropsType) => ( ); diff --git a/packages/lib/src/flex/types.ts b/packages/lib/src/flex/types.ts index e7c28dfcb6..b610975302 100644 --- a/packages/lib/src/flex/types.ts +++ b/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; From 628cc80fbaae28a1d98135b11e4c0cbbb19494f5 Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso Date: Wed, 26 Nov 2025 08:57:04 +0100 Subject: [PATCH 2/4] Add fullHeight prop documentation to FlexCodePage --- .../screens/components/flex/code/FlexCodePage.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/apps/website/screens/components/flex/code/FlexCodePage.tsx b/apps/website/screens/components/flex/code/FlexCodePage.tsx index 9fb0ce5ffa..175a58535f 100644 --- a/apps/website/screens/components/flex/code/FlexCodePage.tsx +++ b/apps/website/screens/components/flex/code/FlexCodePage.tsx @@ -135,6 +135,16 @@ const sections = [ 'row' + + fullHeight + + boolean + + If true, the component will take the full height of its parent container. + + false + + gap From 684870a1cbcf9ca4dc0849bce6420af3334a7f09 Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso Date: Wed, 26 Nov 2025 09:15:50 +0100 Subject: [PATCH 3/4] Update ContainerCodePage component structure and improve documentation --- .../components/container/code/ContainerCodePage.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/apps/website/screens/components/container/code/ContainerCodePage.tsx b/apps/website/screens/components/container/code/ContainerCodePage.tsx index e3ec95970c..c48b2e152d 100644 --- a/apps/website/screens/components/container/code/ContainerCodePage.tsx +++ b/apps/website/screens/components/container/code/ContainerCodePage.tsx @@ -361,6 +361,14 @@ const sections = [ 'static' + + ref + + {"React.Ref"} + + Reference to the component. + - + width From 8665786cabe51acf2202e61047dadeff9f11acf3 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Fri, 28 Nov 2025 12:19:26 +0100 Subject: [PATCH 4/4] Add story to fullHeight --- packages/lib/src/flex/Flex.stories.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/lib/src/flex/Flex.stories.tsx b/packages/lib/src/flex/Flex.stories.tsx index fd088a1cb9..3368f4615c 100644 --- a/packages/lib/src/flex/Flex.stories.tsx +++ b/packages/lib/src/flex/Flex.stories.tsx @@ -113,6 +113,12 @@ const Flex = () => ( + + <div style={{ height: "300px", backgroundColor: "#f2eafa", margin: "2.5rem" }}> + <DxcFlex fullHeight justifyContent="center" alignItems="center"> + <Placeholder /> + </DxcFlex> + </div> </> );