fix(CountrySelector): render preferred country list divider as hr ele…

…ment
ybrusentsov · Jan 15, 2024 · d1df651 · d1df651
1 parent bcb8b89
commit d1df651
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 53 deletions.
diff --git a/packages/docs/docs/03-Subcomponents API/02-CountrySelectorDropdown.md b/packages/docs/docs/03-Subcomponents API/02-CountrySelectorDropdown.md
@@ -97,8 +97,10 @@ defaultValue="undefined"
 | --react-international-phone-dropdown-item-dial-code-color           | `gray`                                                              |
 | --react-international-phone-selected-dropdown-item-text-color       | --react-international-phone-text-color                              |
 | --react-international-phone-selected-dropdown-item-background-color | `whitesmoke`                                                        |
-| --react-international-phone-selected-dropdown-item-dial-code-color  | -react-international-phone-dropdown-item-dial-code-color            |
+| --react-international-phone-selected-dropdown-item-dial-code-color  | --react-international-phone-dropdown-item-dial-code-color           |
 | --react-international-phone-focused-dropdown-item-background-color  | --react-international-phone-selected-dropdown-item-background-color |
 | --react-international-phone-dropdown-shadow                         | `2px 2px 16px rgb(0 0 0 / 25%)`                                     |
 | --react-international-phone-dropdown-left                           | `0`                                                                 |
 | --react-international-phone-dropdown-top                            | `44px`                                                              |
+| --react-international-phone-dropdown-preferred-list-divider-color   | --react-international-phone-border-color                            |
+| --react-international-phone-dropdown-preferred-list-divider-margin  | `0`                                                                 |
diff --git a/src/components/CountrySelector/CountrySelectorDropdown.style.scss b/src/components/CountrySelector/CountrySelectorDropdown.style.scss
@@ -47,6 +47,16 @@ $dropdown-shadow: var(
 $dropdown-left: var(--react-international-phone-dropdown-left, 0);
 $dropdown-top: var(--react-international-phone-dropdown-left, 44px);
 
+$dropdown-preferred-list-divider-color: var(
+  --react-international-phone-dropdown-preferred-list-divider-color,
+  base.$border-color
+);
+
+$dropdown-preferred-list-divider-margin: var(
+  --react-international-phone-dropdown-preferred-list-divider-margin,
+  0
+);
+
 .react-international-phone-country-selector-dropdown {
   position: absolute;
   z-index: 1;
@@ -64,6 +74,13 @@ $dropdown-top: var(--react-international-phone-dropdown-left, 44px);
   list-style: none;
   overflow-y: scroll;
 
+  &__preferred-list-divider {
+    height: 1px;
+    border: none;
+    margin: $dropdown-preferred-list-divider-margin;
+    background: $dropdown-preferred-list-divider-color;
+  }
+
   &__list-item {
     display: flex;
     min-height: $dropdown-item-height; // min-height (instead of just height) for safari compatibility
@@ -93,10 +110,6 @@ $dropdown-top: var(--react-international-phone-dropdown-left, 44px);
       cursor: pointer;
     }
 
-    &--preferred + &:not(&--preferred) {
-      border-top: 1px solid base.$border-color;
-    }
-
     &--selected,
     &--focused {
       background-color: $selected-dropdown-item-background-color;

diff --git a/src/components/CountrySelector/CountrySelectorDropdown.tsx b/src/components/CountrySelector/CountrySelectorDropdown.tsx
@@ -36,6 +36,9 @@ export interface CountrySelectorDropdownStyleProps {
 
   listItemDialCodeStyle?: React.CSSProperties;
   listItemDialCodeClassName?: string;
+
+  preferredListDividerStyle?: React.CSSProperties;
+  preferredListDividerClassName?: string;
 }
 
 export interface CountrySelectorDropdownProps
@@ -261,61 +264,77 @@ export const CountrySelectorDropdown: React.FC<
         const isSelected = country.iso2 === selectedCountry;
         const isFocused = index === focusedItemIndex;
         const isPreferred = preferredCountries.includes(country.iso2);
+        const isLastPreferred = index === preferredCountries.length - 1;
         const flag = flags?.find((f) => f.iso2 === country.iso2);
 
         return (
-          <li
-            key={country.iso2}
-            data-country={country.iso2}
-            role="option"
-            aria-selected={isSelected}
-            aria-label={`${country.name} ${dialCodePrefix}${country.dialCode}`}
-            id={`react-international-phone__${country.iso2}-option`}
-            className={buildClassNames({
-              addPrefix: [
-                'country-selector-dropdown__list-item',
-                isPreferred &&
-                  'country-selector-dropdown__list-item--preferred',
-                isSelected && 'country-selector-dropdown__list-item--selected',
-                isFocused && 'country-selector-dropdown__list-item--focused',
-              ],
-              rawClassNames: [styleProps.listItemClassName],
-            })}
-            onClick={() => handleCountrySelect(country)}
-            style={styleProps.listItemStyle}
-            title={country.name}
-          >
-            <FlagImage
-              iso2={country.iso2}
-              src={flag?.src}
-              className={buildClassNames({
-                addPrefix: ['country-selector-dropdown__list-item-flag-emoji'],
-                rawClassNames: [styleProps.listItemFlagClassName],
-              })}
-              style={styleProps.listItemFlagStyle}
-            />
-            <span
+          <React.Fragment key={country.iso2}>
+            <li
+              data-country={country.iso2}
+              role="option"
+              aria-selected={isSelected}
+              aria-label={`${country.name} ${dialCodePrefix}${country.dialCode}`}
+              id={`react-international-phone__${country.iso2}-option`}
               className={buildClassNames({
                 addPrefix: [
-                  'country-selector-dropdown__list-item-country-name',
+                  'country-selector-dropdown__list-item',
+                  isPreferred &&
+                    'country-selector-dropdown__list-item--preferred',
+                  isSelected &&
+                    'country-selector-dropdown__list-item--selected',
+                  isFocused && 'country-selector-dropdown__list-item--focused',
                 ],
-                rawClassNames: [styleProps.listItemCountryNameClassName],
-              })}
-              style={styleProps.listItemCountryNameStyle}
-            >
-              {country.name}
-            </span>
-            <span
-              className={buildClassNames({
-                addPrefix: ['country-selector-dropdown__list-item-dial-code'],
-                rawClassNames: [styleProps.listItemDialCodeClassName],
+                rawClassNames: [styleProps.listItemClassName],
               })}
-              style={styleProps.listItemDialCodeStyle}
+              onClick={() => handleCountrySelect(country)}
+              style={styleProps.listItemStyle}
+              title={country.name}
             >
-              {dialCodePrefix}
-              {country.dialCode}
-            </span>
-          </li>
+              <FlagImage
+                iso2={country.iso2}
+                src={flag?.src}
+                className={buildClassNames({
+                  addPrefix: [
+                    'country-selector-dropdown__list-item-flag-emoji',
+                  ],
+                  rawClassNames: [styleProps.listItemFlagClassName],
+                })}
+                style={styleProps.listItemFlagStyle}
+              />
+              <span
+                className={buildClassNames({
+                  addPrefix: [
+                    'country-selector-dropdown__list-item-country-name',
+                  ],
+                  rawClassNames: [styleProps.listItemCountryNameClassName],
+                })}
+                style={styleProps.listItemCountryNameStyle}
+              >
+                {country.name}
+              </span>
+              <span
+                className={buildClassNames({
+                  addPrefix: ['country-selector-dropdown__list-item-dial-code'],
+                  rawClassNames: [styleProps.listItemDialCodeClassName],
+                })}
+                style={styleProps.listItemDialCodeStyle}
+              >
+                {dialCodePrefix}
+                {country.dialCode}
+              </span>
+            </li>
+            {isLastPreferred ? (
+              <hr
+                className={buildClassNames({
+                  addPrefix: [
+                    'country-selector-dropdown__preferred-list-divider',
+                  ],
+                  rawClassNames: [styleProps.preferredListDividerClassName],
+                })}
+                style={styleProps.preferredListDividerStyle}
+              />
+            ) : null}
+          </React.Fragment>
         );
       })}
     </ul>

diff --git a/src/components/PhoneInput/PhoneInput.test.tsx b/src/components/PhoneInput/PhoneInput.test.tsx
@@ -909,7 +909,7 @@ describe('PhoneInput', () => {
         getDropdownOption('gb'),
       );
       expect(getCountrySelectorDropdown().childNodes.length).toBe(
-        defaultCountries.length,
+        defaultCountries.length + 1, // sections divider included
       );
     });