fix(select.tsx/badge.tsx): With icon classes preference (#877)

* fix(select.tsx): set correct theme className ordering in twMerge

the ordering of the classNames in the twMerge was removing important classes when Select hadan Icon

fix #869

* fix(badge.tsx): set correct theme className ordering in twMerge

the ordering of the classNames in the twMerge was preventing yo customize padding attributes of the
badge when it had an icon

src/components/Badge/Badge.stories.tsx

@@ -12,6 +12,10 @@ export default {
       options: Object.keys(theme.badge.root.color),
       control: { type: 'inline-radio' },
     },
+    size: {
+      options: Object.keys(theme.badge.root.size),
+      control: { type: 'inline-radio' },
+    },
   },
 } as Meta;
 

src/components/Badge/Badge.tsx

@@ -49,8 +49,8 @@ export const Badge: FC<BadgeProps> = ({
       className={twMerge(
         theme.root.base,
         theme.root.color[color],
-        theme.icon[Icon ? 'on' : 'off'],
         theme.root.size[size],
+        theme.icon[Icon ? 'on' : 'off'],
         className,
       )}
       data-testid="flowbite-badge"

src/components/Select/Select.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, Story } from '@storybook/react';
+import { BsFlagFill } from 'react-icons/bs';
 import type { SelectProps } from './Select';
 import { Select } from './Select';
 
@@ -22,3 +23,17 @@ DefaultSelect.args = {
     </>
   ),
 };
+
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+  id: 'countries',
+  icon: BsFlagFill,
+  children: (
+    <>
+      <option>United States</option>
+      <option>Canada</option>
+      <option>France</option>
+      <option>Germany</option>
+    </>
+  ),
+};

src/components/Select/Select.tsx

@@ -74,10 +74,10 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
             className={twMerge(
               theme.field.select.base,
               theme.field.select.colors[color],
+              theme.field.select.sizes[sizing],
               theme.field.select.withIcon[Icon ? 'on' : 'off'],
               theme.field.select.withAddon[addon ? 'on' : 'off'],
               theme.field.select.withShadow[shadow ? 'on' : 'off'],
-              theme.field.select.sizes[sizing],
             )}
             {...props}
             ref={ref}