Add rectangular shape to button (#9382)

src/components/AppLanguageDropdown.tsx

@@ -48,6 +48,7 @@ export function AppLanguageDropdown() {
             })}
             variant="ghost"
             color="secondary"
+            shape="rectangular"
             style={[
               a.pr_xs,
               a.pl_sm,

src/components/Button.tsx

@@ -39,7 +39,7 @@ export type ButtonColor =
   | 'primary_subtle'
   | 'negative_subtle'
 export type ButtonSize = 'tiny' | 'small' | 'large'
-export type ButtonShape = 'round' | 'square' | 'default'
+export type ButtonShape = 'round' | 'square' | 'rectangular' | 'default'
 export type VariantProps = {
   /**
    * The style variation of the button
@@ -56,6 +56,11 @@ export type VariantProps = {
   size?: ButtonSize
   /**
    * The shape of the button
+   *
+   * - `default`: Pill shaped. Most buttons should use this shape.
+   * - `round`: Circular. For icon-only buttons.
+   * - `square`: Square. For icon-only buttons.
+   * - `rectangular`: Rectangular. Matches previous style, use when adjacent to form fields.
    */
   shape?: ButtonShape
 }
@@ -453,6 +458,29 @@ export const Button = React.forwardRef<View, ButtonProps>(
             gap: 2,
           })
         }
+      } else if (shape === 'rectangular') {
+        if (size === 'large') {
+          baseStyles.push({
+            paddingVertical: 12,
+            paddingHorizontal: 25,
+            borderRadius: 10,
+            gap: 3,
+          })
+        } else if (size === 'small') {
+          baseStyles.push({
+            paddingVertical: 8,
+            paddingHorizontal: 13,
+            borderRadius: 8,
+            gap: 3,
+          })
+        } else if (size === 'tiny') {
+          baseStyles.push({
+            paddingVertical: 5,
+            paddingHorizontal: 9,
+            borderRadius: 6,
+            gap: 2,
+          })
+        }
       } else if (shape === 'round' || shape === 'square') {
         /*
          * These sizes match the actual rendered size on screen, based on

src/components/Select/index.tsx

@@ -106,7 +106,7 @@ export function Trigger({children, label}: TriggerProps) {
         style={[a.flex_1, a.justify_between]}
         color="secondary"
         size="small"
-        variant="solid">
+        shape="rectangular">
         <>{children}</>
       </Button>
     )