feat(blade): removed padding prop from FilterChipGroup (#3012)

* feat(blade): removed padding prop from FilterChipGroup

* Create odd-beans-dress.md

* Update odd-beans-dress.md

* Update odd-beans-dress.md

* Update odd-beans-dress.md

* Update .changeset/odd-beans-dress.md

Co-authored-by: Copilot <[email protected]>

---------

Co-authored-by: Copilot <[email protected]>

Author: swapnil-kr1

.changeset/odd-beans-dress.md

@@ -0,0 +1,15 @@
+---
+"@razorpay/blade": minor
+---
+
+feat(blade): remove padding prop from FilterChipGroup
+
+We have removed the `padding` prop from the `FilterChipGroup` component, which was introduced in the previous version. Padding is now handled internally as part of the global spacing update.
+
+#### Impact
+
+If your code was using the `padding` prop, you might notice spacing differences or snapshot changes in your tests. No functional changes are required otherwise.
+
+#### How to Upgrade
+
+Remove the `padding` prop usage from `FilterChipGroup`. The component will now automatically apply the correct spacing as per the new global layout rules.

packages/blade/src/components/Dropdown/FilterChipGroup.web.tsx

@@ -12,7 +12,6 @@ const FilterChipGroup = ({
   children,
   showClearButton = true,
   onClearButtonClick,
-  padding = 'spacing.4',
   ...rest
 }: FilterChipGroupProps): React.ReactElement => {
   const [filterChipGroupSelectedFilters, setFilterChipGroupSelectedFilters] = useState<string[]>(
@@ -39,7 +38,7 @@ const FilterChipGroup = ({
         {...metaAttribute({ name: MetaConstants.FilterChipGroup, testID })}
         {...makeAnalyticsAttribute(rest)}
         display="flex"
-        padding={padding}
+        padding={['spacing.4', 'spacing.1']}
         alignItems="center"
         justifyContent="flex-start"
         width="100%"

packages/blade/src/components/Dropdown/types.ts

@@ -90,10 +90,6 @@ type FilterChipGroupProps = TestID &
      *
      */
     showClearButton?: boolean;
-    /**
-     * Padding for the FilterChipGroup
-     */
-    padding?: BoxProps['padding'];
   };
 
 type FilterChipGroupContextType = {

packages/blade/src/components/ListView/ListViewFilters.web.tsx

@@ -89,7 +89,8 @@ const ListViewFilters = ({
             <StyledQuickFilterContainer
               overflow="scroll"
               width="100%"
-              paddingY="spacing.4"
+              paddingTop={isMobile ? 'spacing.4' : 'spacing.1'}
+              paddingBottom="spacing.1"
               paddingLeft="spacing.1"
             >
               {quickFilters}

packages/blade/src/components/ListView/docs/ListView.stories.tsx

@@ -327,7 +327,6 @@ const Page = (): React.ReactElement => {
                     setFilterDateRange(undefined);
                     setSelectedQuickFilter('All');
                   }}
-                  padding={['spacing.0', 'spacing.1', 'spacing.4']}
                 >
                   <Dropdown selectionType="single">
                     <FilterChipSelectInput
@@ -799,7 +798,6 @@ const DefaultExample: StoryFn<typeof ListView> = (args) => {
               setFilterDateRange(undefined);
               setSelectedQuickFilter('All');
             }}
-            padding={['spacing.0', 'spacing.1', 'spacing.4']}
           >
             <Dropdown selectionType="single">
               <FilterChipSelectInput
@@ -1136,7 +1134,6 @@ const ControlledExample: StoryFn<typeof ListView> = (args) => {
               setFilterDateRange(undefined);
               setSelectedQuickFilter('All');
             }}
-            padding={['spacing.0', 'spacing.1', 'spacing.4']}
           >
             <Dropdown selectionType="single">
               <FilterChipSelectInput
@@ -1481,7 +1478,6 @@ const WithBulkActionExample: StoryFn<typeof ListView> = (args) => {
               setFilterDateRange(undefined);
               setSelectedQuickFilter('All');
             }}
-            padding={['spacing.0', 'spacing.1', 'spacing.4']}
           >
             <Dropdown selectionType="single">
               <FilterChipSelectInput
@@ -1893,7 +1889,6 @@ const MultiSelectQuickFilter: StoryFn<typeof ListView> = (args) => {
               const searchValueData = getSearchedData(data, searchValue);
               setListViewTableData(searchValueData);
             }}
-            padding={['spacing.0', 'spacing.1', 'spacing.4']}
           >
             <Dropdown selectionType="single">
               <FilterChipSelectInput
@@ -2188,7 +2183,6 @@ const WithoutSearchExample: StoryFn<typeof ListView> = (args) => {
               setFilterDateRange(undefined);
               setSelectedQuickFilter('All');
             }}
-            padding={['spacing.0', 'spacing.1', 'spacing.4']}
           >
             <Dropdown selectionType="single">
               <FilterChipSelectInput
@@ -2541,7 +2535,6 @@ const WithDropDownSearchExample: StoryFn<typeof ListView> = (args) => {
               setFilterDateRange(undefined);
               setSelectedQuickFilter('All');
             }}
-            padding={['spacing.0', 'spacing.1', 'spacing.4']}
           >
             <Dropdown selectionType="single">
               <FilterChipSelectInput