chore: fix button large

razorpay · Apr 2, 2024 · 7d8bb30 · 7d8bb30
1 parent 092a55d
commit 7d8bb30
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/packages/blade/src/components/Dropdown/Dropdown.tsx b/packages/blade/src/components/Dropdown/Dropdown.tsx
@@ -18,7 +18,7 @@ import { useControllableState } from '~utils/useControllable';
 
 const validDropdownChildren = [
   // TODO: Remove Box once CountrySelector's button sizing is fixed
-  dropdownComponentIds.Box,
+  dropdownComponentIds.BaseBox,
   dropdownComponentIds.triggers.SelectInput,
   dropdownComponentIds.triggers.DropdownButton,
   dropdownComponentIds.triggers.DropdownLink,

diff --git a/packages/blade/src/components/Dropdown/dropdownComponentIds.ts b/packages/blade/src/components/Dropdown/dropdownComponentIds.ts
@@ -1,7 +1,7 @@
 export const dropdownComponentIds = {
   DropdownOverlay: 'DropdownOverlay',
   Dropdown: 'Dropdown',
-  Box: 'Box',
+  BaseBox: 'BaseBox',
   triggers: {
     SelectInput: 'SelectInput',
     DropdownButton: 'DropdownButton',

diff --git a/packages/blade/src/components/Input/PhoneNumberInput/CountrySelector.web.tsx b/packages/blade/src/components/Input/PhoneNumberInput/CountrySelector.web.tsx
@@ -1,6 +1,7 @@
 import type { CountryCodeType, getFlagsForAllCountries } from '@razorpay/i18nify-js';
 import { getDialCodeByCountryCode, getFlagOfCountry } from '@razorpay/i18nify-js';
 import React from 'react';
+import styled from 'styled-components';
 import {
   ActionList,
   ActionListItem,
@@ -14,7 +15,7 @@ import { ChevronDownIcon, ChevronUpIcon } from '~components/Icons';
 import { useIsMobile } from '~utils/useIsMobile';
 import { size as sizes } from '~tokens/global';
 import { makeSize } from '~utils';
-import { Box } from '~components/Box';
+import BaseBox from '~components/Box/BaseBox';
 
 const countryNameFormatter = new Intl.DisplayNames(['en'], { type: 'region' });
 
@@ -32,6 +33,15 @@ type CounterSelectorProps = {
   size: 'medium' | 'large';
 };
 
+const CountryDropdownButtonWrapper = styled(BaseBox)(() => {
+  return {
+    '& > button': {
+      padding: '0',
+      width: '100%',
+    },
+  };
+});
+
 const CountrySelector = ({
   isDisabled,
   selectedCountry,
@@ -71,7 +81,10 @@ const CountrySelector = ({
   return (
     <Dropdown isOpen={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
       {/* TODO: Remove once CountrySelector's button sizing is fixed in figma */}
-      <Box width={size === 'medium' ? '50px' : '65px'}>
+      <CountryDropdownButtonWrapper
+        width={size === 'medium' ? '45px' : '60px'}
+        marginLeft={size === 'medium' ? '-3px' : '-2px'}
+      >
         <DropdownButton
           isDisabled={isDisabled}
           size={size === 'medium' ? 'xsmall' : 'medium'}
@@ -89,7 +102,7 @@ const CountrySelector = ({
             alt=""
           />
         </DropdownButton>
-      </Box>
+      </CountryDropdownButtonWrapper>
       {isMobile ? (
         <BottomSheet>
           <BottomSheetHeader title="Select A Country" />