Add inline variant for form field labels

packages/pharos/src/components/combobox/PharosCombobox.react.stories.tsx

@@ -40,6 +40,7 @@ export const Base: Story = {
       style={{ display: 'grid', gridTemplateColumns: '300px' }}
       validated={args.validated}
       value={args.value}
+      inline={args.inline}
     >
       <span slot="label">{args.label}</span>
       <option value="1">New Hampshire</option>

packages/pharos/src/components/combobox/pharos-combobox.scss

@@ -10,6 +10,17 @@
   width: 100%;
 }
 
+.combobox-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--pharos-spacing-1-x);
+}
+
+label[for='input-element'].input-label--inline {
+  flex-shrink: 0;
+  margin-bottom: 0;
+}
+
 .combobox__icon {
   fill: var(--pharos-combobox-color-icon-dropdown);
 }

packages/pharos/src/components/combobox/pharos-combobox.ts

@@ -74,6 +74,13 @@ export class PharosCombobox extends ScopedRegistryMixin(FormMixin(FormElement))
   @property({ type: Boolean, reflect: true, attribute: 'loose-match' })
   public looseMatch = false;
 
+  /**
+   * Indicates if the label should be positioned inline with the input.
+   * @attr inline
+   */
+  @property({ type: Boolean, reflect: true })
+  public inline = false;
+
   /**
    * The list of options available in the combobox dropdown list
    * @readonly
@@ -458,8 +465,8 @@ export class PharosCombobox extends ScopedRegistryMixin(FormMixin(FormElement))
   }
 
   protected override render(): TemplateResult {
-    return html`
-      <label for="input-element" id="input-label">
+    const content = html`
+      <label for="input-element" id="input-label" class=${this.inline ? 'input-label--inline' : ''}>
         <slot name="label"></slot>
         ${this.requiredIndicator}
       </label>
@@ -489,7 +496,15 @@ export class PharosCombobox extends ScopedRegistryMixin(FormMixin(FormElement))
         />
         ${this._renderClearButton()} ${this._renderIconButton()} ${this._renderList()}
       </div>
-      ${this.messageContent}
     `;
+
+    if (this.inline) {
+      return html`
+        <div class="combobox-wrapper">${content}</div>
+        ${this.messageContent}
+      `;
+    } else {
+      return html` ${content} ${this.messageContent} `;
+    }
   }
 }

packages/pharos/src/components/combobox/pharos-combobox.wc.stories.ts

@@ -36,6 +36,7 @@ export const Base: Story = {
       .placeholder=${args.placeholder}
       message=${ifDefined(args.message)}
       .required=${args.required}
+      .inline=${args.inline}
       style="display: grid; grid-template-columns: 300px;"
     >
       <span slot="label">${args.label}</span>

packages/pharos/src/components/combobox/storyArgs.ts

@@ -11,6 +11,7 @@ export interface ComponentArgs {
   required?: boolean;
   validated?: boolean;
   value?: string;
+  inline?: boolean;
 }
 
 export type StoryArgs = ComponentArgs & {};
@@ -28,4 +29,5 @@ export const defaultArgs: StoryArgs = {
   required: false,
   validated: false,
   value: '',
+  inline: false,
 };