Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

chore: Add id & ref to Flex component (#26190)

Browse Source 
## Description
Added `id` and `ref` properties to Flex component

---------

Co-authored-by: Pawan Kumar <pawan.stardust@gmail.com>
Co-authored-by: Valera Melnikov <valera@appsmith.com>
This commit is contained in:
Aswath K 2023-08-16 18:39:32 +05:30 committed by GitHub
parent ce78775277
commit d917b42126
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/client/packages/design-system/widgets/src/components/Flex/Flex.tsx
View File

@ -1,14 +1,13 @@
import React from "react"; import React, { forwardRef } from "react";
import { StyledContainerFlex, StyledFlex } from "./index.styled"; import { StyledContainerFlex, StyledFlex } from "./index.styled";
import type { FlexProps } from "./types"; import type { FlexProps } from "./types";
export const Flex = (props: FlexProps) => { const _Flex = (props: FlexProps, ref: React.Ref<HTMLDivElement>) => {
const { const {
alignContent, alignContent,
alignItems, alignItems,
alignSelf, alignSelf,
children, children,
className,
columnGap, columnGap,
direction, direction,
flex, flex,
@ -17,6 +16,7 @@ export const Flex = (props: FlexProps) => {
flexShrink, flexShrink,
gap, gap,
height, height,
id,
isContainer = false, isContainer = false,
isHidden = false, isHidden = false,
justifyContent, justifyContent,
@ -37,7 +37,6 @@ export const Flex = (props: FlexProps) => {
paddingRight, paddingRight,
paddingTop, paddingTop,
rowGap, rowGap,
style,
width, width,
wrap, wrap,
} = props; } = props;
@ -77,8 +76,8 @@ export const Flex = (props: FlexProps) => {
$rowGap={rowGap} $rowGap={rowGap}
$width={width} $width={width}
$wrap={wrap} $wrap={wrap}
className={className} id={id}
style={style} ref={ref}
> >
{children} {children}
</StyledFlex> </StyledFlex>
@ -92,3 +91,5 @@ export const Flex = (props: FlexProps) => {
</> </>
); );
}; };
export const Flex = forwardRef(_Flex);

9
app/client/packages/design-system/widgets/src/components/Flex/types.ts
View File

@ -1,4 +1,4 @@
import type { ReactNode, CSSProperties } from "react"; import type { CSSProperties, ReactNode } from "react";
import type { OmitRename } from "../../utils"; import type { OmitRename } from "../../utils";
import type { SizingDimension, SpacingDimension } from "./dimensions"; import type { SizingDimension, SpacingDimension } from "./dimensions";
@ -179,6 +179,11 @@ export interface FlexProps {
className?: string; className?: string;
/** Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use style props instead. */ /** Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use style props instead. */
style?: CSSProperties; style?: CSSProperties;
/** Sets the HTML [id](https://developer.mozilla.org/en-US/docs/Web/API/Element/id) for the element. */
id?: string;
} }
export type StyledFlexProps = OmitRename<FlexProps, "style" | "className">; export type StyledFlexProps = OmitRename<
FlexProps,
"style" | "className" | "id"
>;