Fix dropdown indicator size, allow left alignment of button label

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@near-pagoda/ui",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "description": "A React component library that implements the official NEAR design system.",
   "license": "MIT",
   "repository": {

src/components/Button.module.scss

@@ -236,6 +236,16 @@
       }
     }
   }
+
+  &[data-label-alignment='left'] {
+    .inner {
+      flex-grow: 1;
+    }
+    .label {
+      flex-grow: 1;
+      text-align: left;
+    }
+  }
 }
 
 .inner {

src/components/Button.tsx

@@ -18,6 +18,7 @@ type Props = Omit<ComponentPropsWithRef<'button'>, 'size'> & {
   iconLeft?: ReactElement;
   iconRight?: ReactElement;
   label: string;
+  labelAlignment?: 'center' | 'left';
   loading?: boolean;
   size?: Size;
   variant?: Variant;
@@ -35,6 +36,7 @@ export const Button = forwardRef<HTMLButtonElement, Props>(
       iconLeft,
       iconRight,
       label,
+      labelAlignment,
       loading,
       size = 'default',
       type = 'button',
@@ -67,6 +69,7 @@ export const Button = forwardRef<HTMLButtonElement, Props>(
         data-loading={loading}
         data-size={size}
         data-variant={variant}
+        data-label-alignment={labelAlignment}
         ref={ref}
         {...conditionalAttributes}
         {...forwardedProps}

src/components/Dropdown/Dropdown.README.md

@@ -12,7 +12,7 @@ import { Button, Dropdown, SvgIcon } from '~/components/lib/Dropdown';
 
 <Dropdown.Root>
   <Dropdown.Trigger asChild>
-    <Button label="My Dropdown" iconRight={<Dropdown.Indicator />} />
+    <Button label="My Dropdown" labelAlignment="left" iconRight={<Dropdown.Indicator />} />
   </Dropdown.Trigger>
 
   <Dropdown.Content>

src/components/Dropdown/Dropdown.tsx

@@ -70,7 +70,7 @@ export const Item = forwardRef<
 Item.displayName = 'Item';
 
 export const Indicator = () => {
-  return <SvgIcon icon={<CaretDown weight="bold" />} className={s.indicator} />;
+  return <SvgIcon icon={<CaretDown weight="bold" />} className={s.indicator} size="stretch" />;
 };
 
 export const Section = ({ children }: { children: ReactNode }) => {

src/components/ImageIcon.module.scss

@@ -47,6 +47,11 @@
     height: var(--icon-size-xl);
     padding: 8px;
   }
+  &[data-size='stretch'] {
+    width: 100%;
+    height: 100%;
+    padding: 8px;
+  }
 
   &[data-parent-clickable='true'] {
     a:focus-visible &,

src/components/SvgIcon.module.scss

@@ -47,4 +47,8 @@
     width: var(--icon-size-xl);
     height: var(--icon-size-xl);
   }
+  &[data-size='stretch'] {
+    width: 100%;
+    height: 100%;
+  }
 }

src/utils/theme.ts

@@ -1,5 +1,5 @@
 export type ThemeInputVariant = 'default' | 'success' | 'error';
-export type ThemeIconSize = '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl';
+export type ThemeIconSize = '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'stretch';
 export type ThemeGap = 'none' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl';
 
 export type ThemeBreakpointProps<T> = T & {