@1024pix/pix-ui 51.1.0 → 51.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/addon/components/pix-multi-select.hbs +10 -6
  2. package/addon/components/pix-multi-select.js +8 -4
  3. package/addon/styles/_pix-multi-select.scss +31 -26
  4. package/package.json +1 -1
package/addon/components/pix-multi-select.hbs CHANGED
@@ -19,11 +19,15 @@
19
19
  <PopperJS @placement={{or @placement "bottom-start"}} as |reference popover|>
20
20
 
21
21
  {{#if @isSearchable}}
22
- <span {{reference}} class={{this.headerClassName}}>
23
- <PixIcon @name="search" class="pix-multi-select-header__search-icon" @ariaHidden={{true}} />
22
+ <span {{reference}} class={{this.mainInputClassName}}>
23
+ <PixIcon
24
+ @name="search"
25
+ class="pix-multi-select-main-input__search-icon"
26
+ @ariaHidden={{true}}
27
+ />
24
28
 
25
29
  <input
26
- class="pix-multi-select-header__search-input"
30
+ class="pix-multi-select-main-input__search-input"
27
31
  id={{this.multiSelectId}}
28
32
  type="text"
29
33
  name={{this.multiSelectId}}
@@ -44,7 +48,7 @@
44
48
  aria-expanded={{this.isAriaExpanded}}
45
49
  aria-controls={{this.listId}}
46
50
  aria-haspopup="menu"
47
- class={{this.headerClassName}}
51
+ class={{this.mainInputClassName}}
48
52
  {{on "click" this.toggleDropDown}}
49
53
  >
50
54
  {{#if (has-block "placeholder")}}
@@ -53,8 +57,8 @@
53
57
  {{this.placeholder}}
54
58
  {{/if}}
55
59
  <PixIcon
56
- class="pix-multi-select-header__dropdown-icon
57
- {{if this.isExpanded ' pix-multi-select-header__dropdown-icon--expand'}}"
60
+ class="pix-multi-select-main-input__dropdown-icon
61
+ {{if this.isExpanded ' pix-multi-select-main-input__dropdown-icon--expand'}}"
58
62
  @name={{if this.isExpanded "chevronTop" "chevronBottom"}}
59
63
  @ariaHidden={{true}}
60
64
  />
package/addon/components/pix-multi-select.js CHANGED
@@ -30,13 +30,17 @@ export default class PixMultiSelect extends Component {
30
30
  this.options = [...(this.args.options || [])];
31
31
  }
32
32
 
33
- get headerClassName() {
34
- const classes = ['pix-multi-select-header'];
33
+ get mainInputClassName() {
34
+ let classes = 'pix-multi-select-main-input';
35
+
36
+ if (this.args.isSearchable) {
37
+ classes += ' pix-multi-select-main-input--is-searchable';
38
+ }
35
39
  if (this.args.className) {
36
- classes.push(this.args.className);
40
+ classes += ` ${this.args.className}`;
37
41
  }
38
42
 
39
- return classes.join(' ');
43
+ return classes;
40
44
  }
41
45
 
42
46
  get multiSelectId() {
package/addon/styles/_pix-multi-select.scss CHANGED
@@ -11,7 +11,8 @@
11
11
  }
12
12
  }
13
13
 
14
- .pix-multi-select-header {
14
+ /* Main input */
15
+ .pix-multi-select-main-input {
15
16
  @extend %pix-body-s;
16
17
  @extend %pix-form-element-state;
17
18
 
@@ -27,42 +28,46 @@
27
28
  border: 1px var(--pix-neutral-500) solid;
28
29
  border-radius: var(--pix-spacing-1x);
29
30
  cursor: pointer;
31
+ }
30
32
 
31
- &--big {
32
- height: 44px;
33
- }
33
+ .pix-multi-select-main-input__dropdown-icon {
34
+ @extend %pix-body-s;
34
35
 
35
- &__search-icon {
36
- color: var(--pix-neutral-900);
37
- }
36
+ color: var(--pix-neutral-900);
37
+ pointer-events: none;
38
+ }
38
39
 
39
- &__title {
40
- position: absolute;
41
- width: 0;
42
- height: 0;
43
- opacity: 0;
44
- }
40
+ // Searchable multiselect
41
+ .pix-multi-select-main-input--is-searchable {
42
+ padding: 0;
45
43
 
46
- input.pix-multi-select-header__search-input {
47
- width: 100%;
48
- height: inherit;
49
- padding: 0 10px;
50
- color: var(--pix-neutral-900);
51
- font-size: 0.875rem;
52
- background: transparent;
53
- border: none;
54
- border-radius: 3px;
55
- outline: none;
44
+ .pix-multi-select-main-input__search-icon {
45
+ position: absolute;
46
+ top: 50%;
47
+ left: var(--pix-spacing-3x);
48
+ z-index: 0;
49
+ width: var(--pix-spacing-4x);
50
+ height: var(--pix-spacing-4x);
51
+ color: var(--pix-neutral-500);
52
+ transform: translateY(-50%);
56
53
  }
57
54
 
58
- &__dropdown-icon {
55
+ .pix-multi-select-main-input__search-input {
59
56
  @extend %pix-body-s;
60
57
 
61
- color: var(--pix-neutral-900);
62
- pointer-events: none;
58
+ position: relative;
59
+ z-index: 1;
60
+ padding: var(--pix-spacing-2x) var(--pix-spacing-3x) var(--pix-spacing-2x) var(--pix-spacing-9x);
61
+ background-color: transparent;
62
+ border: none;
63
+
64
+ &:focus {
65
+ outline: none;
66
+ }
63
67
  }
64
68
  }
65
69
 
70
+ /* Select list */
66
71
  .pix-multi-select-list {
67
72
  @extend %pix-shadow-sm;
68
73
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@1024pix/pix-ui",
3
- "version": "51.1.0",
3
+ "version": "51.2.0",
4
4
  "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
5
5
  "keywords": [
6
6
  "ember-addon"