@1024pix/pix-ui 54.1.1 → 54.3.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 (10) hide show
  1. package/addon/components/pix-button/pix-button-content.hbs +17 -0
  2. package/addon/components/pix-button-link.hbs +16 -2
  3. package/addon/components/pix-button-link.js +1 -1
  4. package/addon/components/pix-button.hbs +8 -17
  5. package/addon/components/pix-select-list.hbs +16 -14
  6. package/addon/styles/_pix-select-list.scss +23 -30
  7. package/addon/styles/_pix-select.scss +1 -1
  8. package/addon/styles/_pix-structure-switcher.scss +0 -1
  9. package/app/components/pix-button-content.js +1 -0
  10. package/package.json +1 -1
package/addon/components/pix-button/pix-button-content.hbs ADDED
@@ -0,0 +1,17 @@
1
+ {{#if @iconBefore}}
2
+ <PixIcon
3
+ class="pix-button__icon pix-button__icon--before"
4
+ @ariaHidden={{true}}
5
+ @name={{@iconBefore}}
6
+ @plainIcon={{@plainIconBefore}}
7
+ />
8
+ {{/if}}
9
+ {{yield}}
10
+ {{#if @iconAfter}}
11
+ <PixIcon
12
+ class="pix-button__icon pix-button__icon--after"
13
+ @name={{@iconAfter}}
14
+ @ariaHidden={{true}}
15
+ @plainIcon={{@plainIconAfter}}
16
+ />
17
+ {{/if}}
package/addon/components/pix-button-link.hbs CHANGED
@@ -7,10 +7,24 @@
7
7
  class={{this.className}}
8
8
  ...attributes
9
9
  >
10
- {{yield}}
10
+ <PixButtonContent
11
+ @iconBefore={{@iconBefore}}
12
+ @iconAfter={{@iconAfter}}
13
+ @plainIconAfter={{@plainIconAfter}}
14
+ @plainIconBefore={{@plainIconBefore}}
15
+ >
16
+ {{yield}}
17
+ </PixButtonContent>
11
18
  </LinkTo>
12
19
  {{else}}
13
20
  <a href={{@href}} class={{this.className}} ...attributes>
14
- {{yield}}
21
+ <PixButtonContent
22
+ @iconBefore={{@iconBefore}}
23
+ @iconAfter={{@iconAfter}}
24
+ @plainIconAfter={{@plainIconAfter}}
25
+ @plainIconBefore={{@plainIconBefore}}
26
+ >
27
+ {{yield}}
28
+ </PixButtonContent>
15
29
  </a>
16
30
  {{/if}}
package/addon/components/pix-button-link.js CHANGED
@@ -5,6 +5,6 @@ export default class PixButtonLink extends PixButtonBase {
5
5
  defaultParams = {};
6
6
 
7
7
  get className() {
8
- return [...super.baseClassNames, 'pix-button-link'].join(' ');
8
+ return super.baseClassNames.join(' ');
9
9
  }
10
10
  }
package/addon/components/pix-button.hbs CHANGED
@@ -14,22 +14,13 @@
14
14
  </div>
15
15
  <span class="loader__not-visible-text">{{yield}}</span>
16
16
  {{else}}
17
- {{#if @iconBefore}}
18
- <PixIcon
19
- class="pix-button__icon pix-button__icon--before"
20
- @ariaHidden={{true}}
21
- @name={{@iconBefore}}
22
- @plainIcon={{@plainIconBefore}}
23
- />
24
- {{/if}}
25
- {{yield}}
26
- {{#if @iconAfter}}
27
- <PixIcon
28
- class="pix-button__icon pix-button__icon--after"
29
- @name={{@iconAfter}}
30
- @ariaHidden={{true}}
31
- @plainIcon={{@plainIconAfter}}
32
- />
33
- {{/if}}
17
+ <PixButtonContent
18
+ @iconBefore={{@iconBefore}}
19
+ @iconAfter={{@iconAfter}}
20
+ @plainIconAfter={{@plainIconAfter}}
21
+ @plainIconBefore={{@plainIconBefore}}
22
+ >
23
+ {{yield}}
24
+ </PixButtonContent>
34
25
  {{/if}}
35
26
  </button>
package/addon/components/pix-select-list.hbs CHANGED
@@ -1,18 +1,20 @@
1
1
  <ul role="listbox" id={{@listId}} class="pix-select_list" ...attributes>
2
- <li
3
- class="pix-select-list-category__option{{unless
4
- @value
5
- ' pix-select-list-category__option--selected'
6
- }}{{unless @displayDefaultOption ' pix-select-list-category__option--hidden'}}"
7
- role="option"
8
- tabindex={{if this.isDefaultOptionHidden "-1" "0"}}
9
- aria-selected={{if @value "false" "true"}}
10
- {{on "click" (fn @onChange @defaultOption)}}
11
- {{on-enter-action (fn @onChange @defaultOption)}}
12
- {{on-space-action (fn @onChange @defaultOption)}}
13
- >
14
- {{@defaultOptionValue}}
15
- </li>
2
+ {{#if @displayDefaultOption}}
3
+ <li
4
+ class="pix-select-list-category__option{{unless
5
+ @value
6
+ ' pix-select-list-category__option--selected'
7
+ }}"
8
+ role="option"
9
+ tabindex={{if this.isDefaultOptionHidden "-1" "0"}}
10
+ aria-selected={{if @value "false" "true"}}
11
+ {{on "click" (fn @onChange @defaultOption)}}
12
+ {{on-enter-action (fn @onChange @defaultOption)}}
13
+ {{on-space-action (fn @onChange @defaultOption)}}
14
+ >
15
+ {{@defaultOptionValue}}
16
+ </li>
17
+ {{/if}}
16
18
  {{#if this.results}}
17
19
  {{#if this.displayCategory}}
18
20
  {{#each this.results as |element index|}}
package/addon/styles/_pix-select-list.scss CHANGED
@@ -1,14 +1,16 @@
1
1
  @use "pix-design-tokens/typography";
2
2
 
3
3
  .pix-select_list {
4
- padding: var(--pix-spacing-2x);
5
- border-top: 1px solid var(--pix-neutral-20);
6
-
7
- --border-radius-2x: var(--pix-spacing-2x);
8
-
4
+ display: flex;
5
+ flex-direction: column;
6
+ gap: var(--pix-spacing-1x);
7
+ padding: var(--pix-spacing-2x) var(--pix-spacing-1x);
9
8
  }
10
9
 
11
10
  .pix-select-list-category {
11
+ display: flex;
12
+ flex-direction: column;
13
+ gap: var(--pix-spacing-1x);
12
14
  margin: 0;
13
15
  padding: 0;
14
16
  list-style: none;
@@ -16,26 +18,30 @@
16
18
  &__name {
17
19
  @extend %pix-body-s;
18
20
 
19
- padding: var(--pix-spacing-4x) var(--pix-spacing-6x) var(--pix-spacing-2x) var(--pix-spacing-4x);
20
- color: var(--pix-neutral-500);
21
- text-transform: uppercase;
21
+ padding: var(--pix-spacing-1x) var(--pix-spacing-3x);
22
+ color: var(--pix-neutral-800);
23
+ font-weight: var(--pix-font-bold);
24
+ text-transform: capitalize;
25
+ background-color: var(--pix-neutral-20);
26
+ border-radius: 0.25rem;
22
27
  }
23
28
 
24
29
  &__option {
25
30
  @extend %pix-body-s;
26
31
 
27
32
  position: relative;
28
- padding: var(--pix-spacing-2x) var(--pix-spacing-8x) var(--pix-spacing-2x) var(--pix-spacing-4x);
33
+ padding: var(--pix-spacing-2x) var(--pix-spacing-10x) var(--pix-spacing-2x) var(--pix-spacing-3x);
29
34
  color: var(--pix-neutral-900);
30
- border-radius: 8px;
35
+ border-radius: 0.25rem;
31
36
 
32
- &:nth-child(even) {
33
- background-color: var(--pix-neutral-20);
37
+ &:hover {
38
+ background-color: rgba(var(--pix-neutral-100-inline), 0.60);
39
+ outline: none;
40
+ cursor: pointer;
34
41
  }
35
42
 
36
- &:hover,
37
43
  &:focus {
38
- background-color: var(--pix-primary-10);
44
+ background-color: var(--pix-primary-100);
39
45
  outline: none;
40
46
  cursor: pointer;
41
47
  }
@@ -43,27 +49,14 @@
43
49
  svg {
44
50
  position: absolute;
45
51
  top: 50%;
46
- right: var(--pix-spacing-2x);
52
+ right: var(--pix-spacing-3x);
47
53
  transform: translateY(-50%);
48
- visibility: hidden;
49
- opacity: 0;
50
54
  }
51
55
 
52
56
  &--selected {
53
- align-items: center;
57
+ color: var(--pix-primary-900);
58
+ font-weight: var(--pix-font-bold);
54
59
  background-color: var(--pix-primary-10);
55
-
56
- svg {
57
- visibility: visible;
58
- opacity: 1;
59
- }
60
- }
61
-
62
- &--hidden {
63
- height: 0;
64
- padding-top: 0;
65
- padding-bottom: 0;
66
- visibility: hidden;
67
60
  }
68
61
  }
69
62
  }
package/addon/styles/_pix-select.scss CHANGED
@@ -64,7 +64,7 @@
64
64
 
65
65
  &__search {
66
66
  display: flex;
67
- margin: var(--pix-spacing-4x) var(--pix-spacing-6x);
67
+ margin: var(--pix-spacing-2x) var(--pix-spacing-3x);
68
68
  color: var(--pix-neutral-100);
69
69
  border-bottom: 2px solid var(--pix-neutral-100);
70
70
  border-radius: var(--pix-spacing-1x) var(--pix-spacing-1x) 0 0;
package/addon/styles/_pix-structure-switcher.scss CHANGED
@@ -72,7 +72,6 @@
72
72
  white-space: wrap;
73
73
  text-align: left;
74
74
  word-break: break-word;
75
- border-radius: var(--border-radius-2x);
76
75
 
77
76
  &:focus:not(.pix-select-list-category__option--selected ) {
78
77
  background-color: var(--pix-structure-bg-hover);
package/app/components/pix-button-content.js ADDED
@@ -0,0 +1 @@
1
+ export { default } from '@1024pix/pix-ui/components/pix-button/pix-button-content';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@1024pix/pix-ui",
3
- "version": "54.1.1",
3
+ "version": "54.3.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"