style: [M3-6639] - Add outline to country flags that contain white

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))

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<IsClearable extends boolean>
@@ -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} />,
+      flag: <Flag country={region.country as Lowercase<Country>} />,
       country: region.country,
     });
   }

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',

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<typeof Flag> = {
+  title: 'Components/Flag',
+  component: Flag,
+};
+
+type Story = StoryObj<typeof Flag>;
+
+export const Default: Story = {
+  render: (args) => <Flag {...args} />,
+  args: {
+    country: 'us',
+  },
+};
+
+export default meta;

packages/manager/src/components/Flag.tsx

@@ -1,21 +1,39 @@
 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 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: Lowercase<Country>;
 }
 
+/**
+ * Flag icons are provided by the [flag-icons](https://www.npmjs.com/package/flag-icon) package
+ */
 export const Flag = (props: Props) => {
   const country = props.country.toLowerCase();
+
   return (
-    <div
-      className={`fi fi-${countryFlagOverrides[country] ?? country} fi-xx`}
-      style={{ fontSize: '1.5rem', verticalAlign: 'top' }}
+    <StyledFlag
+      className={`fi fi-${COUNTRY_FLAG_OVERRIDES[country] ?? country} fi-xx`}
+      hasOutline={COUNTRIES_TO_OUTLINE.includes(country)}
     />
   );
 };
+
+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',
+}));

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) => {
       <Typography variant="h3">Configure Migration</Typography>
       <Typography>Current Region</Typography>
       <div className={classes.currentRegion}>
-        <Flag country={country} />
+        <Flag country={country as Lowercase<Country>} />
         <Typography>{`${getRegionCountryGroup(currentActualRegion)}: ${
           currentActualRegion?.label ?? currentRegion
         }`}</Typography>

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'