From caeb43fa1d4d7ca7a8f4ed6f34823c8aba8ee9c2 Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Mon, 2 Jan 2023 12:31:45 +0100 Subject: [PATCH 1/2] introduce flex component --- .../CreateConnectionNameField.tsx | 5 +- .../DataResidency.module.scss | 8 --- .../CreateConnection/DataResidency.tsx | 5 +- .../src/components/ui/Flex/Flex.stories.tsx | 39 +++++++++++ .../ui/Flex/FlexContainer.module.scss | 69 +++++++++++++++++++ .../src/components/ui/Flex/FlexContainer.tsx | 67 ++++++++++++++++++ .../components/ui/Flex/FlexItem.module.scss | 25 +++++++ .../src/components/ui/Flex/FlexItem.tsx | 47 +++++++++++++ .../src/components/ui/Flex/index.ts | 2 + .../ConnectionForm/ConnectionForm.module.scss | 8 --- .../ConnectionFormFields.module.scss | 8 --- .../ConnectionForm/ConnectionFormFields.tsx | 9 +-- .../ScheduleField/ScheduleField.module.scss | 8 --- .../ScheduleField/ScheduleField.tsx | 13 ++-- .../components/NamespaceDefinitionField.tsx | 5 +- ...BreakingChangesPreferenceField.module.scss | 8 --- .../NonBreakingChangesPreferenceField.tsx | 5 +- 17 files changed, 273 insertions(+), 58 deletions(-) create mode 100644 airbyte-webapp/src/components/ui/Flex/Flex.stories.tsx create mode 100644 airbyte-webapp/src/components/ui/Flex/FlexContainer.module.scss create mode 100644 airbyte-webapp/src/components/ui/Flex/FlexContainer.tsx create mode 100644 airbyte-webapp/src/components/ui/Flex/FlexItem.module.scss create mode 100644 airbyte-webapp/src/components/ui/Flex/FlexItem.tsx create mode 100644 airbyte-webapp/src/components/ui/Flex/index.ts diff --git a/airbyte-webapp/src/components/CreateConnection/CreateConnectionNameField.tsx b/airbyte-webapp/src/components/CreateConnection/CreateConnectionNameField.tsx index e0ea3f271ff1..f1f9fb8f4b5b 100644 --- a/airbyte-webapp/src/components/CreateConnection/CreateConnectionNameField.tsx +++ b/airbyte-webapp/src/components/CreateConnection/CreateConnectionNameField.tsx @@ -2,6 +2,7 @@ import { Field, FieldProps } from "formik"; import { FormattedMessage, useIntl } from "react-intl"; import { ControlLabels } from "components/LabeledControl"; +import { FlexContainer } from "components/ui/Flex"; import { Heading } from "components/ui/Heading"; import { Input } from "components/ui/Input"; @@ -16,7 +17,7 @@ export const CreateConnectionNameField = () => {
{({ field, meta }: FieldProps) => ( -
+
{ })} />
-
+ )}
diff --git a/airbyte-webapp/src/components/CreateConnection/DataResidency.module.scss b/airbyte-webapp/src/components/CreateConnection/DataResidency.module.scss index 89f3ded0617c..1c496567f33e 100644 --- a/airbyte-webapp/src/components/CreateConnection/DataResidency.module.scss +++ b/airbyte-webapp/src/components/CreateConnection/DataResidency.module.scss @@ -1,13 +1,5 @@ @use "scss/variables"; -.flexRow { - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: flex-start; - gap: variables.$spacing-md; -} - .leftFieldCol { flex: 1; max-width: 640px; diff --git a/airbyte-webapp/src/components/CreateConnection/DataResidency.tsx b/airbyte-webapp/src/components/CreateConnection/DataResidency.tsx index deb49d071e68..19863551e2b4 100644 --- a/airbyte-webapp/src/components/CreateConnection/DataResidency.tsx +++ b/airbyte-webapp/src/components/CreateConnection/DataResidency.tsx @@ -4,6 +4,7 @@ import { FormattedMessage, useIntl } from "react-intl"; import { DataGeographyDropdown } from "components/common/DataGeographyDropdown"; import { ControlLabels } from "components/LabeledControl"; +import { FlexContainer } from "components/ui/Flex"; import { Geography } from "core/request/AirbyteClient"; import { useAvailableGeographies } from "packages/cloud/services/geographies/GeographiesService"; @@ -25,7 +26,7 @@ export const DataResidency: React.FC = ({ name = "geography"
{({ field, form }: FieldProps) => ( -
+
= ({ name = "geography" onChange={(geography) => setFieldValue(name, geography)} />
-
+ )}
diff --git a/airbyte-webapp/src/components/ui/Flex/Flex.stories.tsx b/airbyte-webapp/src/components/ui/Flex/Flex.stories.tsx new file mode 100644 index 000000000000..095f041b99d3 --- /dev/null +++ b/airbyte-webapp/src/components/ui/Flex/Flex.stories.tsx @@ -0,0 +1,39 @@ +import { ComponentStory, ComponentMeta } from "@storybook/react"; + +import { FlexContainer } from "./FlexContainer"; +import { FlexItem } from "./FlexItem"; + +export default { + title: "Ui/Flex", + component: FlexContainer, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ; + +const Item = ({ label, grow }: { label: string; grow?: boolean }) => ( + {`${label}`} +); + +export const NoGrow = Template.bind({}); +NoGrow.args = { + children: ( + <> + + + + + + ), +}; + +export const Grow = Template.bind({}); +Grow.args = { + children: ( + <> + + + + ), +}; diff --git a/airbyte-webapp/src/components/ui/Flex/FlexContainer.module.scss b/airbyte-webapp/src/components/ui/Flex/FlexContainer.module.scss new file mode 100644 index 000000000000..cd78a572abb6 --- /dev/null +++ b/airbyte-webapp/src/components/ui/Flex/FlexContainer.module.scss @@ -0,0 +1,69 @@ +@use "../../../scss/variables"; + +.container { + display: flex; +} + +.directionColumn { + flex-direction: column; +} + +.gapSm { + gap: variables.$spacing-sm; +} + +.gapMd { + gap: variables.$spacing-md; +} + +.gapLg { + gap: variables.$spacing-lg; +} + +.gapXl { + gap: variables.$spacing-xl; +} + +.alignItemsStart { + align-items: flex-start; +} + +.alignItemsEnd { + align-items: flex-end; +} + +.alignItemsCenter { + align-items: center; +} + +.alignItemsBaseline { + align-items: baseline; +} + +.alignItemsStretch { + align-items: stretch; +} + +.justifyContentStart { + justify-content: flex-start; +} + +.justifyContentEnd { + justify-content: flex-end; +} + +.justifyContentCenter { + justify-content: center; +} + +.justifyContentBetween { + justify-content: space-between; +} + +.justifyContentAround { + justify-content: space-around; +} + +.justifyContentEvenly { + justify-content: space-evenly; +} diff --git a/airbyte-webapp/src/components/ui/Flex/FlexContainer.tsx b/airbyte-webapp/src/components/ui/Flex/FlexContainer.tsx new file mode 100644 index 000000000000..21f68a128510 --- /dev/null +++ b/airbyte-webapp/src/components/ui/Flex/FlexContainer.tsx @@ -0,0 +1,67 @@ +import classNames from "classnames"; +import React, { HTMLAttributes } from "react"; + +import styles from "./FlexContainer.module.scss"; + +interface FlexContainerProps { + className?: string; + /** + * The flex-direction css property + */ + direction?: "row" | "column"; + /** + * gap between the flex items - defaults to `md` if not provided. None means no gap is applied, the others map to the respective scss spacing variable. + */ + gap?: "none" | "sm" | "md" | "lg" | "xl"; + /** + * The align-items css property + */ + alignItems?: "flex-start" | "flex-end" | "center" | "baseline" | "stretch"; + /** + * The justify-content css property + */ + justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly"; +} + +/** + * Renders a div element which layouts its children as flex items as specified by the props. + * Children of a `FlexContainer` can but don't have to be `FlexItem` elements. + */ +export const FlexContainer: React.FC>> = ({ + className, + direction = "row", + gap = "md", + alignItems = "stretch", + justifyContent = "flex-start", + children, + ...otherProps +}) => { + const fullClassName = classNames( + { + [styles.directionColumn]: direction === "column", + [styles.gapSm]: gap === "sm", + [styles.gapMd]: gap === "md", + [styles.gapLg]: gap === "lg", + [styles.gapXl]: gap === "xl", + [styles.alignItemsStart]: alignItems === "flex-start", + [styles.alignItemsEnd]: alignItems === "flex-end", + [styles.alignItemsCenter]: alignItems === "center", + [styles.alignItemsBaseline]: alignItems === "baseline", + [styles.alignItemsStretch]: alignItems === "stretch", + [styles.justifyContentStart]: justifyContent === "flex-start", + [styles.justifyContentEnd]: justifyContent === "flex-end", + [styles.justifyContentCenter]: justifyContent === "center", + [styles.justifyContentBetween]: justifyContent === "space-between", + [styles.justifyContentAround]: justifyContent === "space-around", + [styles.justifyContentEvenly]: justifyContent === "space-evenly", + }, + styles.container, + className + ); + + return ( +
+ {children} +
+ ); +}; diff --git a/airbyte-webapp/src/components/ui/Flex/FlexItem.module.scss b/airbyte-webapp/src/components/ui/Flex/FlexItem.module.scss new file mode 100644 index 000000000000..dc3d362f6766 --- /dev/null +++ b/airbyte-webapp/src/components/ui/Flex/FlexItem.module.scss @@ -0,0 +1,25 @@ +@use "../../../scss/variables"; + +.alignSelfStart { + align-items: flex-end; +} + +.alignSelfEnd { + align-items: flex-end; +} + +.alignSelfCenter { + align-items: center; +} + +.alignSelfBaseline { + align-items: baseline; +} + +.alignSelfStretch { + align-items: stretch; +} + +.grow { + flex-grow: 1; +} diff --git a/airbyte-webapp/src/components/ui/Flex/FlexItem.tsx b/airbyte-webapp/src/components/ui/Flex/FlexItem.tsx new file mode 100644 index 000000000000..b995df61f5db --- /dev/null +++ b/airbyte-webapp/src/components/ui/Flex/FlexItem.tsx @@ -0,0 +1,47 @@ +import classNames from "classnames"; +import React, { HTMLAttributes } from "react"; + +import styles from "./FlexItem.module.scss"; + +interface FlexItemProps { + className?: string; + /** + * Sets `flex-grow` to 1 if truthy + */ + grow?: boolean; + /** + * The `self-align` css property + */ + selfAlign?: "flex-start" | "flex-end" | "center" | "baseline" | "stretch"; +} + +/** + * Renders a div element which sets css properties for flex children as given by the props. + * This component can be used within a `FlexContainer` parent if grow or self-align props should be set, but it can also be omitted + * in case no special flex properties are required. + */ +export const FlexItem: React.FC>> = ({ + className, + grow, + selfAlign, + children, + ...otherProps +}) => { + const fullClassName = classNames( + { + [styles.grow]: grow, + [styles.alignSelfStart]: selfAlign === "flex-start", + [styles.alignSelfEnd]: selfAlign === "flex-end", + [styles.alignSelfCenter]: selfAlign === "center", + [styles.alignSelfBaseline]: selfAlign === "baseline", + [styles.alignSelfStretch]: selfAlign === "stretch", + }, + className + ); + + return ( +
+ {children} +
+ ); +}; diff --git a/airbyte-webapp/src/components/ui/Flex/index.ts b/airbyte-webapp/src/components/ui/Flex/index.ts new file mode 100644 index 000000000000..fb4448216903 --- /dev/null +++ b/airbyte-webapp/src/components/ui/Flex/index.ts @@ -0,0 +1,2 @@ +export { FlexContainer } from "./FlexContainer"; +export { FlexItem } from "./FlexItem"; diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.module.scss b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.module.scss index ef0b0aa1659e..cfefbbda849b 100644 --- a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.module.scss +++ b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.module.scss @@ -10,14 +10,6 @@ pointer-events: none; } -.flexRow { - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: flex-start; - gap: variables.$spacing-md; -} - .leftFieldCol { flex: 1; max-width: 640px; diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionFormFields.module.scss b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionFormFields.module.scss index f91656e35ca9..f9786ddd597a 100644 --- a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionFormFields.module.scss +++ b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionFormFields.module.scss @@ -11,14 +11,6 @@ pointer-events: none; } -.flexRow { - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: flex-start; - gap: variables.$spacing-md; -} - .leftFieldCol { flex: 1; max-width: 640px; diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionFormFields.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionFormFields.tsx index 6e72cb9d0c6c..fd04629466ca 100644 --- a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionFormFields.tsx +++ b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionFormFields.tsx @@ -9,6 +9,7 @@ import { useUnmount } from "react-use"; import { ControlLabels } from "components"; import { FormChangeTracker } from "components/common/FormChangeTracker"; import { Button } from "components/ui/Button"; +import { FlexContainer } from "components/ui/Flex"; import { Heading } from "components/ui/Heading"; import { Input } from "components/ui/Input"; @@ -74,7 +75,7 @@ export const ConnectionFormFields: React.FC = ({ valu {values.namespaceDefinition === NamespaceDefinitionType.customformat && ( {({ field, meta }: FieldProps) => ( -
+
= ({ valu })} />
-
+ )} )} {({ field }: FieldProps) => ( -
+
= ({ valu style={{ pointerEvents: mode === "readonly" ? "none" : "auto" }} />
-
+ )} diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/ScheduleField/ScheduleField.module.scss b/airbyte-webapp/src/views/Connection/ConnectionForm/ScheduleField/ScheduleField.module.scss index 4e5de9a6aecc..2cc85616b0ad 100644 --- a/airbyte-webapp/src/views/Connection/ConnectionForm/ScheduleField/ScheduleField.module.scss +++ b/airbyte-webapp/src/views/Connection/ConnectionForm/ScheduleField/ScheduleField.module.scss @@ -1,14 +1,6 @@ @use "scss/colors"; @use "scss/variables"; -.flexRow { - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: flex-start; - gap: 10px; -} - .connectorLabel { max-width: 328px; margin-right: 20px; diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/ScheduleField/ScheduleField.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/ScheduleField/ScheduleField.tsx index ec76042cdf38..b9d267c8d5e2 100644 --- a/airbyte-webapp/src/views/Connection/ConnectionForm/ScheduleField/ScheduleField.tsx +++ b/airbyte-webapp/src/views/Connection/ConnectionForm/ScheduleField/ScheduleField.tsx @@ -4,6 +4,7 @@ import { FormattedMessage, useIntl } from "react-intl"; import { ControlLabels, Link } from "components"; import { DropDown, DropDownOptionDataItem } from "components/ui/DropDown"; +import { FlexContainer } from "components/ui/Flex"; import { Input } from "components/ui/Input"; import { Text } from "components/ui/Text"; @@ -134,7 +135,7 @@ export const ScheduleField: React.FC = () => { {({ field, meta, form }: FieldProps) => ( <> -
+
{ value={getBasicScheduleValue(field.value, form)} />
-
+ {isCron(form) && ( -
+
{
-
+ { value={getZoneValue(field.value?.cron?.cronTimeZone)} onChange={(item: DropDownOptionDataItem) => onCronChange(item, field, form, "cronTimeZone")} /> -
+ {cronValidationError && ( )}
-
+ )} )} diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/components/NamespaceDefinitionField.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/components/NamespaceDefinitionField.tsx index df1e653f9db1..c56c0b26c035 100644 --- a/airbyte-webapp/src/views/Connection/ConnectionForm/components/NamespaceDefinitionField.tsx +++ b/airbyte-webapp/src/views/Connection/ConnectionForm/components/NamespaceDefinitionField.tsx @@ -4,6 +4,7 @@ import { FormattedMessage } from "react-intl"; import { ControlLabels } from "components/LabeledControl"; import { DropDown } from "components/ui/DropDown"; +import { FlexContainer } from "components/ui/Flex"; import { NamespaceDefinitionType } from "../../../../core/request/AirbyteClient"; import styles from "./NamespaceDefinitionField.module.scss"; @@ -30,7 +31,7 @@ export const NamespaceDefinitionField: React.FC> = ({ field, const [, meta] = useField(field.name); return ( -
+
> = ({ field, onChange={({ value }) => form.setFieldValue(field.name, value)} />
-
+ ); }; diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/components/NonBreakingChangesPreferenceField.module.scss b/airbyte-webapp/src/views/Connection/ConnectionForm/components/NonBreakingChangesPreferenceField.module.scss index 048cc29205f6..edc93abf0a94 100644 --- a/airbyte-webapp/src/views/Connection/ConnectionForm/components/NonBreakingChangesPreferenceField.module.scss +++ b/airbyte-webapp/src/views/Connection/ConnectionForm/components/NonBreakingChangesPreferenceField.module.scss @@ -1,14 +1,6 @@ @use "scss/colors"; @use "scss/variables"; -.flexRow { - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: flex-start; - gap: variables.$spacing-md; -} - .connectorLabel { max-width: 328px; margin-right: variables.$spacing-xl; diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/components/NonBreakingChangesPreferenceField.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/components/NonBreakingChangesPreferenceField.tsx index bbaf9f786e3c..bda4ddc17cfb 100644 --- a/airbyte-webapp/src/views/Connection/ConnectionForm/components/NonBreakingChangesPreferenceField.tsx +++ b/airbyte-webapp/src/views/Connection/ConnectionForm/components/NonBreakingChangesPreferenceField.tsx @@ -5,6 +5,7 @@ import { useIntl } from "react-intl"; import { ControlLabels } from "components"; import { DropDown } from "components/ui/DropDown"; +import { FlexContainer } from "components/ui/Flex"; import { NonBreakingChangesPreference } from "core/request/AirbyteClient"; import { useConnectionFormService } from "hooks/services/ConnectionForm/ConnectionFormService"; @@ -26,7 +27,7 @@ export const NonBreakingChangesPreferenceField: React.FC> = ( const { mode } = useConnectionFormService(); return ( -
+
> = ( onChange={({ value }) => form.setFieldValue(field.name, value)} />
-
+ ); }; From 94a80ed0cbca1cd09a8c01ad95f1440108079991 Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Mon, 2 Jan 2023 16:04:57 +0100 Subject: [PATCH 2/2] review comments --- .../ui/Flex/FlexContainer.module.scss | 22 ++++++++++++++++++- .../src/components/ui/Flex/FlexContainer.tsx | 9 ++++++-- .../components/ui/Flex/FlexItem.module.scss | 2 +- .../src/components/ui/Flex/FlexItem.tsx | 16 +++++++------- 4 files changed, 37 insertions(+), 12 deletions(-) diff --git a/airbyte-webapp/src/components/ui/Flex/FlexContainer.module.scss b/airbyte-webapp/src/components/ui/Flex/FlexContainer.module.scss index cd78a572abb6..636e1daeac82 100644 --- a/airbyte-webapp/src/components/ui/Flex/FlexContainer.module.scss +++ b/airbyte-webapp/src/components/ui/Flex/FlexContainer.module.scss @@ -1,13 +1,29 @@ -@use "../../../scss/variables"; +@use "scss/variables"; .container { display: flex; } +.directionRow { + flex-direction: row; +} + .directionColumn { flex-direction: column; } +.directionColumnReverse { + flex-direction: column-reverse; +} + +.directionRowReverse { + flex-direction: row-reverse; +} + +.gapXs { + gap: variables.$spacing-xs; +} + .gapSm { gap: variables.$spacing-sm; } @@ -24,6 +40,10 @@ gap: variables.$spacing-xl; } +.gap2xl { + gap: variables.$spacing-2xl; +} + .alignItemsStart { align-items: flex-start; } diff --git a/airbyte-webapp/src/components/ui/Flex/FlexContainer.tsx b/airbyte-webapp/src/components/ui/Flex/FlexContainer.tsx index 21f68a128510..b22d31f69e81 100644 --- a/airbyte-webapp/src/components/ui/Flex/FlexContainer.tsx +++ b/airbyte-webapp/src/components/ui/Flex/FlexContainer.tsx @@ -8,11 +8,11 @@ interface FlexContainerProps { /** * The flex-direction css property */ - direction?: "row" | "column"; + direction?: "row" | "column" | "row-reverse" | "column-reverse"; /** * gap between the flex items - defaults to `md` if not provided. None means no gap is applied, the others map to the respective scss spacing variable. */ - gap?: "none" | "sm" | "md" | "lg" | "xl"; + gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"; /** * The align-items css property */ @@ -38,11 +38,16 @@ export const FlexContainer: React.FC { const fullClassName = classNames( { + [styles.directionRow]: direction === "row", [styles.directionColumn]: direction === "column", + [styles.directionRowReverse]: direction === "row-reverse", + [styles.directionColumnReverse]: direction === "column-reverse", + [styles.gapXs]: gap === "xs", [styles.gapSm]: gap === "sm", [styles.gapMd]: gap === "md", [styles.gapLg]: gap === "lg", [styles.gapXl]: gap === "xl", + [styles.gap2xl]: gap === "2xl", [styles.alignItemsStart]: alignItems === "flex-start", [styles.alignItemsEnd]: alignItems === "flex-end", [styles.alignItemsCenter]: alignItems === "center", diff --git a/airbyte-webapp/src/components/ui/Flex/FlexItem.module.scss b/airbyte-webapp/src/components/ui/Flex/FlexItem.module.scss index dc3d362f6766..d0701f0d72bb 100644 --- a/airbyte-webapp/src/components/ui/Flex/FlexItem.module.scss +++ b/airbyte-webapp/src/components/ui/Flex/FlexItem.module.scss @@ -1,4 +1,4 @@ -@use "../../../scss/variables"; +@use "scss/variables"; .alignSelfStart { align-items: flex-end; diff --git a/airbyte-webapp/src/components/ui/Flex/FlexItem.tsx b/airbyte-webapp/src/components/ui/Flex/FlexItem.tsx index b995df61f5db..0885e4b0eec7 100644 --- a/airbyte-webapp/src/components/ui/Flex/FlexItem.tsx +++ b/airbyte-webapp/src/components/ui/Flex/FlexItem.tsx @@ -10,9 +10,9 @@ interface FlexItemProps { */ grow?: boolean; /** - * The `self-align` css property + * The `align-self` css property */ - selfAlign?: "flex-start" | "flex-end" | "center" | "baseline" | "stretch"; + alignSelf?: "flex-start" | "flex-end" | "center" | "baseline" | "stretch"; } /** @@ -23,18 +23,18 @@ interface FlexItemProps { export const FlexItem: React.FC>> = ({ className, grow, - selfAlign, + alignSelf, children, ...otherProps }) => { const fullClassName = classNames( { [styles.grow]: grow, - [styles.alignSelfStart]: selfAlign === "flex-start", - [styles.alignSelfEnd]: selfAlign === "flex-end", - [styles.alignSelfCenter]: selfAlign === "center", - [styles.alignSelfBaseline]: selfAlign === "baseline", - [styles.alignSelfStretch]: selfAlign === "stretch", + [styles.alignSelfStart]: alignSelf === "flex-start", + [styles.alignSelfEnd]: alignSelf === "flex-end", + [styles.alignSelfCenter]: alignSelf === "center", + [styles.alignSelfBaseline]: alignSelf === "baseline", + [styles.alignSelfStretch]: alignSelf === "stretch", }, className );