feat: create interfaces for individual flex properties (#27331)
## Description Created and exported interfaces for the following flex properties: 1. AlignContent 2. AlignItems 3. AlignSelf 4. JustifyContent 5. JustifySelf 6. FlexDirection 7. FlexWrap These interfaces will enable better type casting for Flex component usage in client. #### Type of change - Chore (housekeeping or task changes that don't impact user perception) ## Testing #### How Has This Been Tested? > Please describe the tests that you ran to verify your changes. Also list any relevant details for your test configuration. > Delete anything that is not relevant - [x] Manual - [ ] JUnit - [ ] Jest - [ ] Cypress ## Checklist: #### Dev activity - [ ] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-) - [ ] Test plan has been peer reviewed by project stakeholders and other QA members - [ ] Manually tested functionality on DP - [ ] We had an implementation alignment call with stakeholders post QA Round 2 - [ ] Cypress test cases have been added and approved by SDET/manual QA - [ ] Added `Test Plan Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
This commit is contained in:
Preet Sidhu
GitHub
parent
ed49e2997e
commit
792b46f2da
|
|
@ -1 +1,13 @@
|
|||
export { Flex } from "./Flex";
|
||||
export type {
|
||||
AlignContent,
|
||||
AlignItems,
|
||||
AlignSelf,
|
||||
JustifyContent,
|
||||
JustifySelf,
|
||||
FlexDirection,
|
||||
FlexProps,
|
||||
FlexWrap,
|
||||
Responsive,
|
||||
} from "./types";
|
||||
export type { SizingDimension, SpacingDimension } from "./dimensions";
|
||||
|
|
|
|||
|
|
@ -8,21 +8,64 @@ export type Responsive<T> =
|
|||
[custom: string]: T | undefined;
|
||||
};
|
||||
|
||||
export interface FlexProps {
|
||||
/*
|
||||
* Layout props
|
||||
export interface AlignContent {
|
||||
/**
|
||||
* The distribution of space around child items along the cross axis. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content).
|
||||
* @default 'start'
|
||||
*/
|
||||
alignContent?: Responsive<
|
||||
| "start"
|
||||
| "end"
|
||||
| "center"
|
||||
| "space-between"
|
||||
| "space-around"
|
||||
| "space-evenly"
|
||||
| "stretch"
|
||||
| "baseline"
|
||||
| "first baseline"
|
||||
| "last baseline"
|
||||
| "safe center"
|
||||
| "unsafe center"
|
||||
>;
|
||||
}
|
||||
|
||||
export interface AlignItems {
|
||||
/**
|
||||
* The direction in which to layout children. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction).
|
||||
* @default 'row'
|
||||
* The alignment of children within their container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).
|
||||
* @default 'stretch'
|
||||
*/
|
||||
direction?: Responsive<"row" | "column" | "row-reverse" | "column-reverse">;
|
||||
/**
|
||||
* Whether to wrap items onto multiple lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap).
|
||||
* @default false
|
||||
*/
|
||||
wrap?: Responsive<boolean | "wrap" | "nowrap" | "wrap-reverse">;
|
||||
alignItems?: Responsive<
|
||||
| "start"
|
||||
| "end"
|
||||
| "center"
|
||||
| "stretch"
|
||||
| "self-start"
|
||||
| "self-end"
|
||||
| "baseline"
|
||||
| "first baseline"
|
||||
| "last baseline"
|
||||
| "safe center"
|
||||
| "unsafe center"
|
||||
>;
|
||||
}
|
||||
|
||||
export interface AlignSelf {
|
||||
/** Overrides the `alignItems` property of a flex or grid container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self). */
|
||||
alignSelf?: Responsive<
|
||||
| "auto"
|
||||
| "normal"
|
||||
| "start"
|
||||
| "end"
|
||||
| "center"
|
||||
| "flex-start"
|
||||
| "flex-end"
|
||||
| "self-start"
|
||||
| "self-end"
|
||||
| "stretch"
|
||||
>;
|
||||
}
|
||||
|
||||
export interface JustifyContent {
|
||||
/**
|
||||
* The distribution of space around items along the main axis. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).
|
||||
* @default 'stretch'
|
||||
|
|
@ -43,55 +86,9 @@ export interface FlexProps {
|
|||
| "safe center"
|
||||
| "unsafe center"
|
||||
>;
|
||||
/**
|
||||
* The distribution of space around child items along the cross axis. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content).
|
||||
* @default 'start'
|
||||
*/
|
||||
alignContent?: Responsive<
|
||||
| "start"
|
||||
| "end"
|
||||
| "center"
|
||||
| "space-between"
|
||||
| "space-around"
|
||||
| "space-evenly"
|
||||
| "stretch"
|
||||
| "baseline"
|
||||
| "first baseline"
|
||||
| "last baseline"
|
||||
| "safe center"
|
||||
| "unsafe center"
|
||||
>;
|
||||
/**
|
||||
* The alignment of children within their container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).
|
||||
* @default 'stretch'
|
||||
*/
|
||||
alignItems?: Responsive<
|
||||
| "start"
|
||||
| "end"
|
||||
| "center"
|
||||
| "stretch"
|
||||
| "self-start"
|
||||
| "self-end"
|
||||
| "baseline"
|
||||
| "first baseline"
|
||||
| "last baseline"
|
||||
| "safe center"
|
||||
| "unsafe center"
|
||||
>;
|
||||
/** The space to display between both rows and columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap). */
|
||||
gap?: Responsive<SpacingDimension>;
|
||||
/** The space to display between columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap). */
|
||||
columnGap?: Responsive<SpacingDimension>;
|
||||
/** The space to display between rows. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap). */
|
||||
rowGap?: Responsive<SpacingDimension>;
|
||||
/** When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex). */
|
||||
flex?: Responsive<string | number | boolean>;
|
||||
/** When used in a flex layout, specifies how the element will grow to fit the space available. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow). */
|
||||
flexGrow?: Responsive<number>;
|
||||
/** When used in a flex layout, specifies how the element will shrink to fit the space available. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink). */
|
||||
flexShrink?: Responsive<number>;
|
||||
/** When used in a flex layout, specifies the initial main size of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis). */
|
||||
flexBasis?: Responsive<SizingDimension>;
|
||||
}
|
||||
|
||||
export interface JustifySelf {
|
||||
/** Specifies how the element is justified inside a flex or grid container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self). */
|
||||
justifySelf?: Responsive<
|
||||
| "auto"
|
||||
|
|
@ -106,20 +103,52 @@ export interface FlexProps {
|
|||
| "left"
|
||||
| "right"
|
||||
| "stretch"
|
||||
>; // ...
|
||||
/** Overrides the `alignItems` property of a flex or grid container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self). */
|
||||
alignSelf?: Responsive<
|
||||
| "auto"
|
||||
| "normal"
|
||||
| "start"
|
||||
| "end"
|
||||
| "center"
|
||||
| "flex-start"
|
||||
| "flex-end"
|
||||
| "self-start"
|
||||
| "self-end"
|
||||
| "stretch"
|
||||
>;
|
||||
}
|
||||
|
||||
export interface FlexDirection {
|
||||
/**
|
||||
* The direction in which to layout children. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction).
|
||||
* @default 'row'
|
||||
*/
|
||||
direction?: Responsive<"row" | "column" | "row-reverse" | "column-reverse">;
|
||||
}
|
||||
|
||||
export interface FlexWrap {
|
||||
/**
|
||||
* Whether to wrap items onto multiple lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap).
|
||||
* @default false
|
||||
*/
|
||||
wrap?: Responsive<boolean | "wrap" | "nowrap" | "wrap-reverse">;
|
||||
}
|
||||
|
||||
export interface FlexProps
|
||||
extends AlignContent,
|
||||
AlignItems,
|
||||
AlignSelf,
|
||||
JustifyContent,
|
||||
JustifySelf,
|
||||
FlexDirection,
|
||||
FlexWrap {
|
||||
/*
|
||||
* Layout props
|
||||
*/
|
||||
|
||||
/** The space to display between both rows and columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap). */
|
||||
gap?: Responsive<SpacingDimension>;
|
||||
/** The space to display between columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap). */
|
||||
columnGap?: Responsive<SpacingDimension>;
|
||||
/** The space to display between rows. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap). */
|
||||
rowGap?: Responsive<SpacingDimension>;
|
||||
/** When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex). */
|
||||
flex?: Responsive<string | number | boolean>;
|
||||
/** When used in a flex layout, specifies how the element will grow to fit the space available. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow). */
|
||||
flexGrow?: Responsive<number>;
|
||||
/** When used in a flex layout, specifies how the element will shrink to fit the space available. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink). */
|
||||
flexShrink?: Responsive<number>;
|
||||
/** When used in a flex layout, specifies the initial main size of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis). */
|
||||
flexBasis?: Responsive<SizingDimension>;
|
||||
|
||||
/** The layout order for the element within a flex or grid container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/order). */
|
||||
order?: Responsive<number>;
|
||||
/** Hides the element. */
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user