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 type { FlexProps } from "./types";
export const Flex = (props: FlexProps) => {
const _Flex = (props: FlexProps, ref: React.Ref<HTMLDivElement>) => {
const {
alignContent,
alignItems,
alignSelf,
children,
className,
columnGap,
direction,
flex,
@ -17,6 +16,7 @@ export const Flex = (props: FlexProps) => {
flexShrink,
gap,
height,
id,
isContainer = false,
isHidden = false,
justifyContent,
@ -37,7 +37,6 @@ export const Flex = (props: FlexProps) => {
paddingRight,
paddingTop,
rowGap,
style,
width,
wrap,
} = props;
@ -77,8 +76,8 @@ export const Flex = (props: FlexProps) => {
$rowGap={rowGap}
$width={width}
$wrap={wrap}
className={className}
style={style}
id={id}
ref={ref}
>
{children}
</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 { SizingDimension, SpacingDimension } from "./dimensions";
@ -179,6 +179,11 @@ export interface FlexProps {
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. */
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"
>;