Skip to content

Commit 99f7576

Browse files
GomezIvannGomezIvann
authored
Merge pull request #1594 from dxc-technology/rarrojolopez/flex-enhancements
Several Flex enhancements
2 parents 811cb92 + fa0027b commit 99f7576

File tree

11 files changed

+195
-37
lines changed

11 files changed

+195
-37
lines changed

‎lib/src/button/Button.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -339,7 +339,7 @@ export const Chromatic = () => (
339339
</ExampleContainer>
340340
<Title title="Inside a flex" theme="light" level={2} />
341341
<ExampleContainer>
342-
<DxcFlex direction="column" gap="0.75rem">
342+
<DxcFlex direction="column" gap="1rem">
343343
<DxcButton label="Button" />
344344
<DxcButton label="Button" />
345345
<DxcButton label="Button" />

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

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const Chromatic = () => (
2222
</Container>
2323
<Title title="Direction column, wrap, justify content end, align items center and gap" level={4} />
2424
<Container>
25-
<DxcFlex direction="column" wrap="wrap" justifyContent="end" alignItems="center" gap="20px">
25+
<DxcFlex direction="column" wrap="wrap" justifyContent="end" alignItems="center" gap="1.5rem">
2626
<Placeholder />
2727
<Placeholder minWidth="100px" />
2828
<Placeholder />
@@ -32,7 +32,7 @@ export const Chromatic = () => (
3232
</Container>
3333
<Title title="Wrap with align content space between, row and column gaps, and as a span" level={4} />
3434
<Container height="250px">
35-
<DxcFlex wrap="wrap" alignContent="space-between" as="span" gap={{ rowGap: "10px", columnGap: "20px" }}>
35+
<DxcFlex wrap="wrap" alignContent="space-between" as="span" gap={{ rowGap: "0.5rem", columnGap: "1.5rem" }}>
3636
<Placeholder />
3737
<Placeholder />
3838
<Placeholder />
@@ -51,30 +51,44 @@ export const Chromatic = () => (
5151
<Container height="75px">
5252
<DxcFlex basis="100%">
5353
<DxcFlex order={3} grow={1} alignSelf="flex-end">
54-
<Placeholder width="100%" minWidth="0">order 3, grow 1, align self end</Placeholder>
54+
<Placeholder width="100%" minWidth="0">
55+
order 3, grow 1, align self end
56+
</Placeholder>
5557
</DxcFlex>
5658
<DxcFlex order={-1} grow={4}>
57-
<Placeholder width="100%" minWidth="0">order -1, grow 4</Placeholder>
59+
<Placeholder width="100%" minWidth="0">
60+
order -1, grow 4
61+
</Placeholder>
5862
</DxcFlex>
5963
<DxcFlex order={5} grow={1}>
60-
<Placeholder width="100%" minWidth="0">order 5, grow 1</Placeholder>
64+
<Placeholder width="100%" minWidth="0">
65+
order 5, grow 1
66+
</Placeholder>
6167
</DxcFlex>
6268
<DxcFlex order={2} grow={2}>
63-
<Placeholder width="100%" minWidth="0">order 2. grow 2</Placeholder>
69+
<Placeholder width="100%" minWidth="0">
70+
order 2. grow 2
71+
</Placeholder>
6472
</DxcFlex>
6573
</DxcFlex>
6674
</Container>
6775
<Title title="Basis and shrink" level={4} />
6876
<Container>
6977
<DxcFlex basis="600px">
7078
<DxcFlex shrink={4} basis="400px">
71-
<Placeholder width="100%" minWidth="0">shrink 4</Placeholder>
79+
<Placeholder width="100%" minWidth="0">
80+
shrink 4
81+
</Placeholder>
7282
</DxcFlex>
7383
<DxcFlex shrink={2} basis="400px">
74-
<Placeholder width="100%" minWidth="0">shrink 2</Placeholder>
84+
<Placeholder width="100%" minWidth="0">
85+
shrink 2
86+
</Placeholder>
7587
</DxcFlex>
7688
<DxcFlex shrink={1} basis="400px">
77-
<Placeholder width="100%" minWidth="0">shrink 1</Placeholder>
89+
<Placeholder width="100%" minWidth="0">
90+
shrink 1
91+
</Placeholder>
7892
</DxcFlex>
7993
</DxcFlex>
8094
</Container>
@@ -88,7 +102,7 @@ const Container = styled.div<{ height?: string }>`
88102
${({ height }) => (height ? `height: ${height}` : "max-height: 150px")};
89103
`;
90104

91-
const Placeholder = styled.div<{ minWidth?: string, width?: string }>`
105+
const Placeholder = styled.div<{ minWidth?: string; width?: string }>`
92106
height: 40px;
93107
min-width: ${({ minWidth }) => minWidth ?? "200px"};
94108
width: ${({ width }) => width};

‎lib/src/flex/Flex.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import FlexPropsType, { StyledProps } from "./types";
55
const DxcFlex = ({
66
direction = "row",
77
wrap = "nowrap",
8-
gap = "0",
8+
gap = "0rem",
99
order = 0,
1010
grow = 0,
1111
shrink = 1,
@@ -42,7 +42,9 @@ const Flex = styled.div<StyledProps>`
4242
align-items: ${alignItems};
4343
align-content: ${alignContent};
4444
align-self: ${alignSelf};
45-
gap: ${typeof props.$gap === "object" ? `${props.$gap.rowGap} ${props.$gap.columnGap}` : props.$gap};
45+
gap: ${props.$gap != null && typeof props.$gap === "string" ? props.$gap ?? "" : ""}}
46+
row-gap: ${props.$gap != null && typeof props.$gap === "object" ? props.$gap.rowGap ?? "" : ""}}
47+
column-gap: ${props.$gap != null && typeof props.$gap === "object" ? props.$gap.columnGap ?? "" : ""}}
4648
order: ${props.$order};
4749
flex-grow: ${props.$grow};
4850
flex-shrink: ${props.$shrink};

‎lib/src/flex/types.ts‎

Lines changed: 65 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
1-
type Gap = { rowGap: string; columnGap: string };
1+
type Spaces = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
2+
type Gap = { rowGap: Spaces; columnGap?: Spaces } | { rowGap?: Spaces; columnGap?: Spaces } | Spaces;
23

34
type CommonProps = {
5+
/**
6+
* Sets the justify-content CSS property.
7+
*
8+
* See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
9+
*/
410
justifyContent?:
511
| "flex-start"
612
| "flex-end"
@@ -12,6 +18,11 @@ type CommonProps = {
1218
| "space-between"
1319
| "space-around"
1420
| "space-evenly";
21+
/**
22+
* Sets the align-items CSS property.
23+
*
24+
* See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
25+
*/
1526
alignItems?:
1627
| "stretch"
1728
| "flex-start"
@@ -22,6 +33,11 @@ type CommonProps = {
2233
| "self-end"
2334
| "center"
2435
| "baseline";
36+
/**
37+
* Sets the align-content CSS property.
38+
*
39+
* See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
40+
*/
2541
alignContent?:
2642
| "normal"
2743
| "flex-start"
@@ -33,25 +49,71 @@ type CommonProps = {
3349
| "space-around"
3450
| "space-evenly"
3551
| "stretch";
52+
/**
53+
* Sets the align-self CSS property.
54+
*
55+
* See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
56+
*/
3657
alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
3758
};
3859

3960
type Props = CommonProps & {
61+
/**
62+
* Sets the flex-direction CSS property.
63+
*
64+
* See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
65+
*/
4066
direction?: "row" | "row-reverse" | "column" | "column-reverse";
67+
/**
68+
* Sets the flex-wrap CSS property.
69+
*
70+
* See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
71+
*/
4172
wrap?: "nowrap" | "wrap" | "wrap-reverse";
42-
gap?: string | Gap;
73+
/**
74+
* Sets the gap CSS property.
75+
*
76+
* See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/gap
77+
*/
78+
gap?: Gap;
79+
/**
80+
* Sets the order CSS property.
81+
*
82+
* See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/order
83+
*/
4384
order?: number;
85+
/**
86+
* Sets the flex-grow CSS property.
87+
*
88+
* See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
89+
*/
4490
grow?: number;
91+
/**
92+
* Sets the flex-shrink CSS property.
93+
*
94+
* See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink
95+
*/
4596
shrink?: number;
97+
/**
98+
* Sets the flex-basis CSS property.
99+
*
100+
* See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
101+
*/
46102
basis?: string;
103+
/**
104+
* Sets a custom HTML tag.
105+
*/
47106
as?: keyof HTMLElementTagNameMap;
107+
/**
108+
* Custom content inside the flex container.
109+
*/
48110
children: React.ReactNode;
49111
};
50112

51113
export type StyledProps = CommonProps & {
52114
$direction?: "row" | "row-reverse" | "column" | "column-reverse";
53115
$wrap?: "nowrap" | "wrap" | "wrap-reverse";
54-
$gap?: string | Gap;
116+
$gap?: Spaces | Gap;
55117
$order?: number;
56118
$grow?: number;
57119
$shrink?: number;

‎lib/src/inset/Inset.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@ export const Chromatic = () => (
205205
</Container>
206206
<Title title="Inside a flex column" level={4} />
207207
<Container>
208-
<DxcFlex direction="column" gap="0.75rem">
208+
<DxcFlex direction="column" gap="1rem">
209209
<Placeholder></Placeholder>
210210
<DxcInset top="0.25rem" right="1.5rem" bottom="2rem" left="4rem">
211211
<Placeholder></Placeholder>

‎lib/src/text-input/TextInput.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -522,7 +522,7 @@ const DarkAutosuggestListbox = () => {
522522
<Title title="Dark theme" theme="dark" level={2} />
523523
<ExampleContainer>
524524
<Title title="Default with opened suggestions" theme="dark" level={3} />
525-
<DxcFlex direction="column" gap="80px">
525+
<DxcFlex direction="column" gap="5rem">
526526
<DxcTextInput label="Label" suggestions={countries} optional placeholder="Choose an option" />
527527
<DxcCheckbox
528528
label="You understand the selection and give your consent"

0 commit comments

Comments
 (0)