feat(select): add menuAlign to allow end-aligning the select menu

PiperOrigin-RevId: 592384480

Author: Elliott Marquez

select/demo/demo.ts

@@ -35,6 +35,15 @@ const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
     new Knob('disabled', {ui: boolInput(), defaultValue: false}),
     new Knob('errorText', {ui: textInput(), defaultValue: ''}),
     new Knob('supportingText', {ui: textInput(), defaultValue: ''}),
+    new Knob('menuAlign', {
+      defaultValue: 'start' as const,
+      ui: selectDropdown<'start' | 'end'>({
+        options: [
+          {label: 'start', value: 'start'},
+          {label: 'end', value: 'end'},
+        ],
+      }),
+    }),
     new Knob('menuPositioning', {
       defaultValue: 'popover' as const,
       ui: selectDropdown<'absolute' | 'fixed' | 'popover'>({

select/demo/stories.ts

@@ -24,6 +24,7 @@ export interface StoryKnobs {
   supportingText: string;
   error: boolean;
   clampMenuWidth: boolean;
+  menuAlign: 'start' | 'end' | undefined;
   menuPositioning: 'absolute' | 'fixed' | 'popover' | undefined;
 
   'md-select Slots': void;
@@ -35,15 +36,18 @@ const selects: MaterialStoryInit<StoryKnobs> = {
   name: 'Selects',
   render(knobs) {
     return html`
-      <div style="display: flex; gap: 16px">
+      <div
+        style="display: flex; gap: 16px;flex-direction: column;align-items:end;border: 1px solid black;">
         <md-filled-select
+          style="min-width: 100px;width: fit-content;"
           .label=${knobs.label}
           .quick=${knobs.quick}
           .required=${knobs.required}
           .disabled=${knobs.disabled}
           .errorText=${knobs.errorText}
           .supportingText=${knobs.supportingText}
           .clampMenuWidth=${knobs.clampMenuWidth}
+          .menuAlign=${knobs.menuAlign!}
           .menuPositioning=${knobs.menuPositioning!}
           .typeaheadDelay=${knobs.typeaheadDelay}
           .error=${knobs.error}>
@@ -60,6 +64,7 @@ const selects: MaterialStoryInit<StoryKnobs> = {
           .errorText=${knobs.errorText}
           .supportingText=${knobs.supportingText}
           .clampMenuWidth=${knobs.clampMenuWidth}
+          .menuAlign=${knobs.menuAlign!}
           .menuPositioning=${knobs.menuPositioning!}
           .typeaheadDelay=${knobs.typeaheadDelay}
           .error=${knobs.error}>

select/internal/select.ts

@@ -153,6 +153,12 @@ export abstract class Select extends selectBaseClass {
    */
   @property({attribute: 'display-text'}) displayText = '';
 
+  /**
+   * Whether the menu should be aligned to the start or the end of the select's
+   * textbox.
+   */
+  @property({attribute: 'menu-align'}) menuAlign: 'start'|'end' = 'start';
+
   /**
    * The value of the currently selected option.
    *
@@ -478,6 +484,8 @@ export abstract class Select extends selectBaseClass {
         .quick=${this.quick}
         .positioning=${this.menuPositioning}
         .typeaheadDelay=${this.typeaheadDelay}
+        .anchorCorner=${this.menuAlign === 'start'? 'end-start' : 'end-end'}
+        .menuCorner=${this.menuAlign === 'start'? 'start-start' : 'start-end'}
         @opening=${this.handleOpening}
         @opened=${this.redispatchEvent}
         @closing=${this.redispatchEvent}