@1024pix/pix-ui 55.33.1 → 55.34.0

package/addon/components/pix-input-base.js

@@ -29,6 +29,19 @@ export default class PixInputBase extends Component {
     return this.args.validationStatus === 'error' ? this.prefix + '-error' : null;
   }
 
+  get rootClassNames() {
+    const classNames = ['pix-input'];
+    if (this.args.inlineLabel) {
+      classNames.push('pix-input--inline');
+    }
+
+    if (this.args.isFullWidth) {
+      classNames.push('pix-input--full-width');
+    }
+
+    return classNames.join(' ');
+  }
+
   get hasError() {
     return this.args.validationStatus === 'error';
   }

package/addon/components/pix-input.hbs

@@ -1,4 +1,4 @@
-<div class="pix-input {{if @inlineLabel ' pix-input--inline'}}">
+<div class={{this.rootClassNames}}>
   {{#if (has-block "label")}}
     <PixLabel
       @for={{this.id}}
@@ -11,7 +11,7 @@
       {{yield to="label"}}
     </PixLabel>
   {{/if}}
-  <div>
+  <div class="pix-input__field-container">
     <div class="pix-input__container">
       <input
         id={{this.id}}

package/addon/components/pix-select.hbs

@@ -1,5 +1,5 @@
 <div
-  class="pix-select {{if @inlineLabel ' pix-select--inline'}}"
+  class={{this.rootClassNames}}
   id="container-{{this.selectId}}"
   {{on-click-outside this.hideDropdown}}
   {{on-arrow-down-up-action this.listId this.showDropdown this.isExpanded}}
@@ -20,13 +20,13 @@
     </PixLabel>
   {{/if}}
 
-  <div>
+  <div class="pix-select__button-container">
     <PopperJS @placement={{or @placement "bottom-start"}} as |reference popover|>
       <button
         {{reference}}
         type="button"
         id={{this.selectId}}
-        class={{this.className}}
+        class={{this.buttonClassName}}
         {{on "click" this.toggleDropdown}}
         aria-expanded={{this.isAriaExpanded}}
         aria-controls={{this.listId}}

package/addon/components/pix-select.js

@@ -34,13 +34,26 @@ export default class PixSelect extends Component {
     return !this.searchValue && !this.args.hideDefaultOption;
   }
 
-  get className() {
-    const classes = ['pix-select-button'];
+  get buttonClassName() {
+    const buttonClasses = ['pix-select-button'];
     if (this.args.className) {
-      classes.push(this.args.className);
+      buttonClasses.push(this.args.className);
     }
     if (this.args.errorMessage) {
-      classes.push('pix-select-button--error');
+      buttonClasses.push('pix-select-button--error');
+    }
+
+    return buttonClasses.join(' ');
+  }
+
+  get rootClassNames() {
+    const classes = ['pix-select'];
+    if (this.args.inlineLabel) {
+      classes.push('pix-select--inline');
+    }
+
+    if (this.args.isFullWidth) {
+      classes.push('pix-select--full-width');
     }
 
     return classes.join(' ');

package/addon/styles/_pix-input.scss

@@ -12,10 +12,18 @@
     align-items: center;
   }
 
+  &--full-width {
+    width: 100%;
+  }
+
   &__container {
     position: relative;
   }
 
+  &__field-container {
+    flex-grow: 1;
+  }
+
   svg {
     position: absolute;
     right: 12px;

package/addon/styles/_pix-label.scss

@@ -1,4 +1,4 @@
-@use "pix-design-tokens/typography";
+@use 'pix-design-tokens/typography';
 
 .pix-label {
   display: block;
@@ -22,6 +22,7 @@
   }
 
   &--inline-label {
+    flex-shrink: 0;
     font-weight: var(--pix-font-normal);
   }
 

package/addon/styles/_pix-select.scss

@@ -16,6 +16,10 @@
     align-items: center;
   }
 
+  &--full-width {
+    width: 100%;
+  }
+
   &__dropdown {
     @extend %pix-shadow-xs;
 
@@ -78,6 +82,10 @@
   &__error-message {
     @extend %pix-input-error-message;
   }
+
+  &__button-container {
+    flex-grow: 1;
+  }
 }
 
 .pix-select-button {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "55.33.1",
+  "version": "55.34.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"