Merge pull request #17 from Snapchat/clholgat/corebutton-font-indexpicker-web

Add CoreButton font override and tighten web IndexPicker

Author: clholgat

valdi_modules/widgets/src/components/button/CoreButton.tsx

@@ -78,6 +78,11 @@ export interface CoreButtonViewModel {
    */
   icon?: Asset | string;
   text?: string;
+  /**
+   * Optional label font override (Valdi "family size [weight]" string).
+   * Defaults to the font for the chosen `sizing`.
+   */
+  font?: string;
   loading?: boolean;
   disabled?: boolean;
   /**
@@ -247,7 +252,9 @@ export class CoreButton extends StatefulComponent<CoreButtonViewModel, CoreButto
     const sidesSize = sizingOption.sides;
     const separatorSize = sizingOption.separator;
     const verticalPad = sizingOption.verticalPad;
-    const textFont = viewModel.disableAccessibilityFontScaling ? sizingOption.nonDynamicFont : sizingOption.font;
+    const textFont =
+      viewModel.font ??
+      (viewModel.disableAccessibilityFontScaling ? sizingOption.nonDynamicFont : sizingOption.font);
     const borderWidth = viewModel.borderWidth ?? sizingOption.border;
 
     const rootRadius = minHeight / 2;

valdi_modules/widgets/web/src/WidgetsWeb.ts

@@ -120,16 +120,24 @@ function createIndexPickerFactory(): ViewFactory {
   return (container: HTMLElement): AttributeHandler => {
     container.style.display = 'flex';
     container.style.alignItems = 'center';
-    container.style.justifyContent = 'center';
+    container.style.justifyContent = 'stretch';
     container.style.pointerEvents = 'auto';
+    // Explicit height prevents WebValdiCustomView from applying the 80px default min-height.
+    container.style.height = '32px';
+    container.style.minHeight = '0';
 
     const select = document.createElement('select');
-    select.style.fontSize = '16px';
-    select.style.padding = '8px';
+    select.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+    select.style.fontSize = '13px';
+    select.style.padding = '4px 8px';
     select.style.border = '1px solid #ccc';
     select.style.borderRadius = '6px';
     select.style.cursor = 'pointer';
-    select.style.minWidth = '120px';
+    select.style.minWidth = '0';
+    select.style.width = '100%';
+    select.style.height = '100%';
+    select.style.maxWidth = '100%';
+    select.style.boxSizing = 'border-box';
     select.style.pointerEvents = 'auto';
     container.appendChild(select);