From c8b6958ced54db431a2247736fafc4ea95bdfbc0 Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Wed, 21 Jun 2023 10:57:05 -0400 Subject: [PATCH 1/6] add outline for some lags and add Flag story --- .../variants/RegionSelect/RegionSelect.tsx | 4 +-- .../variants/RegionSelect/utils.ts | 2 ++ .../manager/src/components/Flag.stories.tsx | 19 +++++++++++ packages/manager/src/components/Flag.tsx | 34 ++++++++++++++++--- .../Linodes/MigrateLinode/ConfigureForm.tsx | 3 +- .../manager/src/utilities/formatRegion.ts | 5 ++- 6 files changed, 56 insertions(+), 11 deletions(-) create mode 100644 packages/manager/src/components/Flag.stories.tsx diff --git a/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.tsx b/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.tsx index 5b60c070c56..ec3a30a3d9e 100644 --- a/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.tsx +++ b/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.tsx @@ -8,7 +8,7 @@ import { _SingleValue } from 'src/components/EnhancedSelect/components/SingleVal import { Region } from '@linode/api-v4/lib/regions'; import { RegionOption, RegionItem } from './RegionOption'; import { Flag } from 'src/components/Flag'; -import { ContinentNames } from './utils'; +import { ContinentNames, Country } from './utils'; import { getRegionCountryGroup } from 'src/utilities/formatRegion'; interface Props @@ -49,7 +49,7 @@ export const getRegionOptions = (regions: Region[]) => { groups[group].push({ label: `${region.label} (${region.id})`, value: region.id, - flag: , + flag: , country: region.country, }); } diff --git a/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/utils.ts b/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/utils.ts index fbf836fa492..bf15f09adc7 100644 --- a/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/utils.ts +++ b/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/utils.ts @@ -254,6 +254,8 @@ export const COUNTRY_CODE_TO_CONTINENT_CODE = Object.freeze({ ZW: 'AF', }); +export type Country = keyof typeof COUNTRY_CODE_TO_CONTINENT_CODE; + export const CONTINENT_CODE_TO_CONTINENT = Object.freeze({ EU: 'Europe', AS: 'Asia', diff --git a/packages/manager/src/components/Flag.stories.tsx b/packages/manager/src/components/Flag.stories.tsx new file mode 100644 index 00000000000..afdcaecbc1b --- /dev/null +++ b/packages/manager/src/components/Flag.stories.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { Meta, StoryObj } from '@storybook/react'; +import { Flag } from './Flag'; + +const meta: Meta = { + title: 'Components/Flag', + component: Flag, +}; + +type Story = StoryObj; + +export const Default: Story = { + render: (args) => , + args: { + country: 'US', + }, +}; + +export default meta; diff --git a/packages/manager/src/components/Flag.tsx b/packages/manager/src/components/Flag.tsx index bb836146138..53fc99387d0 100644 --- a/packages/manager/src/components/Flag.tsx +++ b/packages/manager/src/components/Flag.tsx @@ -1,21 +1,45 @@ import React from 'react'; +import { makeStyles } from 'tss-react/mui'; import 'flag-icons/css/flag-icons.min.css'; +import { Country } from './EnhancedSelect/variants/RegionSelect/utils'; -const countryFlagOverrides = { +const COUNTRY_FLAG_OVERRIDES = { uk: 'gb', }; +const COUNTRIES_TO_OUTLINE = ['jp', 'id', 'sg']; + interface Props { - /** expects a iso code of a country - `us`, `ca`, etc... */ - country: string; + country: Country; } +const useStyles = makeStyles()((theme) => ({ + root: { + fontSize: '1.5rem', + verticalAlign: 'top', + width: '1.41rem', + }, + outline: { + outline: `1px solid ${theme.color.border3}`, + }, +})); + +/** + * Flag icons are provided by the [flag-icons](https://www.npmjs.com/package/flag-icon) package + */ export const Flag = (props: Props) => { + const { classes, cx } = useStyles(); const country = props.country.toLowerCase(); + return (
); }; diff --git a/packages/manager/src/features/Linodes/MigrateLinode/ConfigureForm.tsx b/packages/manager/src/features/Linodes/MigrateLinode/ConfigureForm.tsx index 0dc40f397fa..840ce5b1c81 100644 --- a/packages/manager/src/features/Linodes/MigrateLinode/ConfigureForm.tsx +++ b/packages/manager/src/features/Linodes/MigrateLinode/ConfigureForm.tsx @@ -7,6 +7,7 @@ import { RegionSelect } from 'src/components/EnhancedSelect/variants/RegionSelec import { useRegionsQuery } from 'src/queries/regions'; import { getRegionCountryGroup } from 'src/utilities/formatRegion'; import { Flag } from 'src/components/Flag'; +import { Country } from 'src/components/EnhancedSelect/variants/RegionSelect/utils'; const useStyles = makeStyles((theme: Theme) => ({ root: { @@ -53,7 +54,7 @@ const ConfigureForm = (props: Props) => { Configure Migration Current Region
- + {`${getRegionCountryGroup(currentActualRegion)}: ${ currentActualRegion?.label ?? currentRegion }`} diff --git a/packages/manager/src/utilities/formatRegion.ts b/packages/manager/src/utilities/formatRegion.ts index 213abbac83e..ab19af5d1b4 100644 --- a/packages/manager/src/utilities/formatRegion.ts +++ b/packages/manager/src/utilities/formatRegion.ts @@ -2,6 +2,7 @@ import { Region } from '@linode/api-v4'; import { COUNTRY_CODE_TO_CONTINENT_CODE, CONTINENT_CODE_TO_CONTINENT, + Country, } from 'src/components/EnhancedSelect/variants/RegionSelect/utils'; export const getRegionCountryGroup = (region: Region | undefined) => { @@ -10,9 +11,7 @@ export const getRegionCountryGroup = (region: Region | undefined) => { } const continentCode = - COUNTRY_CODE_TO_CONTINENT_CODE[ - region.country.toUpperCase() as keyof typeof COUNTRY_CODE_TO_CONTINENT_CODE - ]; + COUNTRY_CODE_TO_CONTINENT_CODE[region.country.toUpperCase() as Country]; return continentCode ? CONTINENT_CODE_TO_CONTINENT[continentCode] ?? 'Other' From e4838c10e3c32b55b4d63255ed1d734410e36144 Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Wed, 21 Jun 2023 10:59:19 -0400 Subject: [PATCH 2/6] make type respect what the Linode API returns --- .../EnhancedSelect/variants/RegionSelect/RegionSelect.tsx | 2 +- packages/manager/src/components/Flag.stories.tsx | 2 +- packages/manager/src/components/Flag.tsx | 4 ++-- .../src/features/Linodes/MigrateLinode/ConfigureForm.tsx | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.tsx b/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.tsx index ec3a30a3d9e..6bda044fb0e 100644 --- a/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.tsx +++ b/packages/manager/src/components/EnhancedSelect/variants/RegionSelect/RegionSelect.tsx @@ -49,7 +49,7 @@ export const getRegionOptions = (regions: Region[]) => { groups[group].push({ label: `${region.label} (${region.id})`, value: region.id, - flag: , + flag: } />, country: region.country, }); } diff --git a/packages/manager/src/components/Flag.stories.tsx b/packages/manager/src/components/Flag.stories.tsx index afdcaecbc1b..1c2b2c8be88 100644 --- a/packages/manager/src/components/Flag.stories.tsx +++ b/packages/manager/src/components/Flag.stories.tsx @@ -12,7 +12,7 @@ type Story = StoryObj; export const Default: Story = { render: (args) => , args: { - country: 'US', + country: 'us', }, }; diff --git a/packages/manager/src/components/Flag.tsx b/packages/manager/src/components/Flag.tsx index 53fc99387d0..47678eef5c4 100644 --- a/packages/manager/src/components/Flag.tsx +++ b/packages/manager/src/components/Flag.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { makeStyles } from 'tss-react/mui'; -import 'flag-icons/css/flag-icons.min.css'; import { Country } from './EnhancedSelect/variants/RegionSelect/utils'; +import 'flag-icons/css/flag-icons.min.css'; const COUNTRY_FLAG_OVERRIDES = { uk: 'gb', @@ -10,7 +10,7 @@ const COUNTRY_FLAG_OVERRIDES = { const COUNTRIES_TO_OUTLINE = ['jp', 'id', 'sg']; interface Props { - country: Country; + country: Lowercase; } const useStyles = makeStyles()((theme) => ({ diff --git a/packages/manager/src/features/Linodes/MigrateLinode/ConfigureForm.tsx b/packages/manager/src/features/Linodes/MigrateLinode/ConfigureForm.tsx index 840ce5b1c81..97970415e37 100644 --- a/packages/manager/src/features/Linodes/MigrateLinode/ConfigureForm.tsx +++ b/packages/manager/src/features/Linodes/MigrateLinode/ConfigureForm.tsx @@ -54,7 +54,7 @@ const ConfigureForm = (props: Props) => { Configure Migration Current Region
- + } /> {`${getRegionCountryGroup(currentActualRegion)}: ${ currentActualRegion?.label ?? currentRegion }`} From 1912f7e3c73c9a72bdae7d8bb3d0577bda414a26 Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Wed, 21 Jun 2023 11:14:53 -0400 Subject: [PATCH 3/6] Added changeset: Outline to some country flags --- packages/manager/.changeset/pr-9288-added-1687360493313.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-9288-added-1687360493313.md diff --git a/packages/manager/.changeset/pr-9288-added-1687360493313.md b/packages/manager/.changeset/pr-9288-added-1687360493313.md new file mode 100644 index 00000000000..cae93f6f088 --- /dev/null +++ b/packages/manager/.changeset/pr-9288-added-1687360493313.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Added +--- + +Outline to some country flags ([#9288](https://github.com/linode/manager/pull/9288)) From a4d02774e9fc1abd8e6f96cf97a57ba3dec72da3 Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Wed, 21 Jun 2023 18:37:22 -0400 Subject: [PATCH 4/6] use `styled` --- packages/manager/src/components/Flag.tsx | 38 ++++++++++-------------- 1 file changed, 16 insertions(+), 22 deletions(-) diff --git a/packages/manager/src/components/Flag.tsx b/packages/manager/src/components/Flag.tsx index 47678eef5c4..f897a7d4b2f 100644 --- a/packages/manager/src/components/Flag.tsx +++ b/packages/manager/src/components/Flag.tsx @@ -1,7 +1,8 @@ import React from 'react'; -import { makeStyles } from 'tss-react/mui'; -import { Country } from './EnhancedSelect/variants/RegionSelect/utils'; import 'flag-icons/css/flag-icons.min.css'; +import { Country } from './EnhancedSelect/variants/RegionSelect/utils'; +import { styled } from '@mui/material/styles'; +import { isPropValid } from 'src/utilities/isPropValid'; const COUNTRY_FLAG_OVERRIDES = { uk: 'gb', @@ -13,33 +14,26 @@ interface Props { country: Lowercase; } -const useStyles = makeStyles()((theme) => ({ - root: { - fontSize: '1.5rem', - verticalAlign: 'top', - width: '1.41rem', - }, - outline: { - outline: `1px solid ${theme.color.border3}`, - }, -})); - /** * Flag icons are provided by the [flag-icons](https://www.npmjs.com/package/flag-icon) package */ export const Flag = (props: Props) => { - const { classes, cx } = useStyles(); const country = props.country.toLowerCase(); return ( -
); }; + +const StyledFlag = styled('div', { + label: 'StyledFlag', + shouldForwardProp: (prop) => isPropValid(['hasOutline'], prop), +})<{ hasOutline: boolean }>(({ theme, ...props }) => ({ + fontSize: '1.5rem', + outline: props.hasOutline ? `1px solid ${theme.color.border3}` : 'none', + verticalAlign: 'top', + width: '1.41rem', +})); From 048a55e30a2e4d9a6b98e6f25426f546063d65e0 Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Thu, 22 Jun 2023 13:40:20 -0400 Subject: [PATCH 5/6] only add outline in light mode --- packages/manager/src/components/Flag.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/manager/src/components/Flag.tsx b/packages/manager/src/components/Flag.tsx index f897a7d4b2f..486a3d85d9f 100644 --- a/packages/manager/src/components/Flag.tsx +++ b/packages/manager/src/components/Flag.tsx @@ -33,7 +33,10 @@ const StyledFlag = styled('div', { shouldForwardProp: (prop) => isPropValid(['hasOutline'], prop), })<{ hasOutline: boolean }>(({ theme, ...props }) => ({ fontSize: '1.5rem', - outline: props.hasOutline ? `1px solid ${theme.color.border3}` : 'none', + outline: + props.hasOutline && theme.palette.mode === 'light' + ? `1px solid ${theme.color.border3}` + : 'none', verticalAlign: 'top', width: '1.41rem', })); From 8b8d9ac6fdbfb2db1ab38f5e15ff6c56b27965ff Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Thu, 22 Jun 2023 15:42:52 -0400 Subject: [PATCH 6/6] use boxShadow --- packages/manager/src/components/Flag.tsx | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/packages/manager/src/components/Flag.tsx b/packages/manager/src/components/Flag.tsx index 486a3d85d9f..79eb58a141d 100644 --- a/packages/manager/src/components/Flag.tsx +++ b/packages/manager/src/components/Flag.tsx @@ -2,14 +2,11 @@ import React from 'react'; import 'flag-icons/css/flag-icons.min.css'; import { Country } from './EnhancedSelect/variants/RegionSelect/utils'; import { styled } from '@mui/material/styles'; -import { isPropValid } from 'src/utilities/isPropValid'; const COUNTRY_FLAG_OVERRIDES = { uk: 'gb', }; -const COUNTRIES_TO_OUTLINE = ['jp', 'id', 'sg']; - interface Props { country: Lowercase; } @@ -23,20 +20,14 @@ export const Flag = (props: Props) => { return ( ); }; -const StyledFlag = styled('div', { - label: 'StyledFlag', - shouldForwardProp: (prop) => isPropValid(['hasOutline'], prop), -})<{ hasOutline: boolean }>(({ theme, ...props }) => ({ +const StyledFlag = styled('div', { label: 'StyledFlag' })(({ theme }) => ({ fontSize: '1.5rem', - outline: - props.hasOutline && theme.palette.mode === 'light' - ? `1px solid ${theme.color.border3}` - : 'none', + boxShadow: + theme.palette.mode === 'light' ? `0px 0px 0px 1px #00000010` : undefined, verticalAlign: 'top', width: '1.41rem', }));