@1024pix/pix-ui 14.6.0 → 14.8.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 (9) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/addon/components/pix-filter-banner.hbs +28 -21
  3. package/addon/components/pix-filter-banner.js +4 -0
  4. package/addon/styles/_colors.scss +1 -1
  5. package/addon/styles/_pix-filter-banner.scss +27 -52
  6. package/addon/styles/_pix-select.scss +2 -2
  7. package/app/stories/pix-filter-banner.stories.js +2 -0
  8. package/app/stories/pix-filter-banner.stories.mdx +1 -0
  9. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # Pix-UI Changelog
2
2
 
3
+ ## v14.7.1 (28/06/2022)
4
+
5
+
6
+ ### :coffee: Autre
7
+ - [#227](https://github.com/1024pix/pix-ui/pull/227) [DOCS] Ajoute des infos de breaking change sur la v14.4.0
8
+
9
+ ## v14.7.0 (28/06/2022)
10
+
11
+
12
+ ### :building_construction: Tech
13
+ - [#226](https://github.com/1024pix/pix-ui/pull/226) [TECH] Permettre le passage en multi ligne du bandeau (PIX-5213)
14
+
3
15
  ## v14.6.0 (27/06/2022)
4
16
 
5
17
 
@@ -17,6 +29,10 @@
17
29
 
18
30
  ## v14.4.0 (17/06/2022)
19
31
 
32
+ ### :warning: Breaking Change
33
+ La variable `$pix-gradient` a été supprimée par erreur, elle doit être remplacée par `$pix-primary-app-gradient`.
34
+
35
+ La totalité des couleurs du Design System ont été apportées dans cette version. Les remplacements nécessaires sont documentés dans [cette PR](https://github.com/1024pix/pix-ui/pull/219). Une version majeure suivra lorsque tous les fronts Pix auront migré.
20
36
 
21
37
  ### :building_construction: Tech
22
38
  - [#219](https://github.com/1024pix/pix-ui/pull/219) [TECH] Ajouter les variables du design system dans Pix-UI.(PIX-2307)
package/addon/components/pix-filter-banner.hbs CHANGED
@@ -1,26 +1,33 @@
1
1
  <div class="pix-filter-banner" ...attributes>
2
- <div class="pix-filter-banner__container-left">
3
- {{#if this.displayTitle}}
2
+ {{#if this.displayTitle}}
3
+ <div class="pix-filter-banner__container-title">
4
4
  <p class="pix-filter-banner__title">{{@title}}</p>
5
- {{/if}}
5
+ </div>
6
+ {{/if}}
7
+
8
+ <div class="pix-filter-banner__container-filter">
6
9
  {{yield}}
7
10
  </div>
8
- <div class="pix-filter-banner__container-right">
9
- {{#if this.displayDetails}}
10
- <p class="pix-filter-banner__details">{{@details}}</p>
11
- {{/if}}
12
- {{#if this.displayClearFilters}}
13
- <div class="pix-filter-banner__button-container">
14
- <PixButton
15
- class="pix-filter-banner__button"
16
- @shape="squircle"
17
- @size="small"
18
- @triggerAction={{@onClearFilters}}
19
- >
20
- <FaIcon class="pix-filter-banner-button__icon" @icon="trash-alt" @prefix="far" />
21
- {{@clearFiltersLabel}}
22
- </PixButton>
23
- </div>
24
- {{/if}}
25
- </div>
11
+
12
+ {{#if this.displayActionMenu}}
13
+ <div class="pix-filter-banner__container-action">
14
+ {{#if this.displayDetails}}
15
+ <p class="pix-filter-banner__details">{{@details}}</p>
16
+ {{/if}}
17
+
18
+ {{#if this.displayClearFilters}}
19
+ <div class="pix-filter-banner__button-container">
20
+ <PixButton
21
+ class="pix-filter-banner__button"
22
+ @shape="squircle"
23
+ @size="small"
24
+ @triggerAction={{@onClearFilters}}
25
+ >
26
+ <FaIcon class="pix-filter-banner-button__icon" @icon="trash-alt" @prefix="far" />
27
+ {{@clearFiltersLabel}}
28
+ </PixButton>
29
+ </div>
30
+ {{/if}}
31
+ </div>
32
+ {{/if}}
26
33
  </div>
package/addon/components/pix-filter-banner.js CHANGED
@@ -10,4 +10,8 @@ export default class PixFilterBanner extends Component {
10
10
  get displayClearFilters() {
11
11
  return Boolean(this.args.clearFiltersLabel);
12
12
  }
13
+
14
+ get displayActionMenu() {
15
+ return this.displayClearFilters || this.displayDetails;
16
+ }
13
17
  }
package/addon/styles/_colors.scss CHANGED
@@ -362,7 +362,7 @@ $grey-100: #091e42;
362
362
  $grey-150: #0c163a;
363
363
 
364
364
  /**
365
- * @deprecated Please use '$pix-neutral-200' instead!
365
+ * @deprecated Please use '$pix-neutral-110' instead!
366
366
  */
367
367
  $grey-200: #07142e;
368
368
 
package/addon/styles/_pix-filter-banner.scss CHANGED
@@ -1,31 +1,14 @@
1
1
  .pix-filter-banner {
2
2
  @import 'reset-css';
3
-
4
- position: relative;
5
3
  display: flex;
6
4
  flex-direction: column;
7
- gap: 6px;
5
+ position: relative;
6
+ gap: $spacing-xs;
8
7
  width: 100%;
9
-
10
8
  background-color: $pix-neutral-0;
11
9
  box-shadow: 0 2px 5px 0 rgba($pix-neutral-110, 0.05);
12
10
  min-height: 64px;
13
- padding: 14px 24px;
14
-
15
- &__container-left {
16
- display: flex;
17
- flex-direction: column;
18
- gap: 12px;
19
-
20
- > * > * {
21
- width: 100%;
22
- }
23
- }
24
-
25
- &__container-right {
26
- display: flex;
27
- flex-direction: column;
28
- }
11
+ padding: $spacing-s $spacing-m;
29
12
 
30
13
  &__title {
31
14
  color: $pix-neutral-60;
@@ -34,14 +17,20 @@
34
17
  margin: 0;
35
18
  }
36
19
 
37
- p.pix-filter-banner__details {
20
+ &__container-filter {
21
+ display: flex;
22
+ flex-direction: column;
23
+ gap: $spacing-s;
24
+ }
25
+
26
+ &__details {
38
27
  color: $pix-neutral-60;
39
28
  font-family: $font-roboto;
40
29
  font-weight: $font-medium;
30
+ padding: $spacing-xs 0 $spacing-xs 0;
31
+ margin: 0;
41
32
  font-size: 0.875rem;
42
- margin-top: 10px;
43
- padding-top: 10px;
44
- border-top: 1px solid$pix-neutral-15;
33
+ border-top: 1px solid $pix-neutral-15;
45
34
  }
46
35
 
47
36
  &__button {
@@ -50,55 +39,41 @@
50
39
  }
51
40
 
52
41
  .pix-filter-banner-button__icon {
53
- padding-right: 4px;
42
+ padding-right: $spacing-xxs;
54
43
  }
55
44
 
56
45
  @include device-is('tablet') {
57
46
  .pix-filter-banner {
58
- flex-direction: row;
59
47
  justify-content: space-between;
60
48
  align-items: center;
49
+ flex-direction: row;
50
+ gap: $spacing-m;
61
51
 
62
- &__container-left {
63
- flex-direction: row;
64
- height: 36px;
52
+ &__container-title {
53
+ display: flex;
65
54
  align-items: center;
66
55
  }
67
56
 
68
- &__container-right {
57
+ &__container-filter {
69
58
  flex-direction: row;
70
- height: 36px;
71
- align-items: center;
72
- justify-content: flex-end;
59
+ flex-wrap: wrap;
73
60
  }
74
61
 
75
- &__content {
76
- > * {
77
- margin-right: 16px;
78
- }
79
-
80
- > *:last-child {
81
- margin-right: 0;
82
- }
83
- }
84
-
85
- &__title {
86
- padding-right: 24px;
87
- margin: 0;
62
+ &__container-action {
63
+ display: flex;
64
+ align-items: center;
65
+ justify-content: flex-end;
88
66
  }
89
67
 
90
- p.pix-filter-banner__details {
91
- margin: 0;
92
- margin-right: 16px;
93
- padding-left: 16px;
94
- padding-top: 4px;
68
+ &__details {
69
+ padding: 0 $spacing-s 0 0;
95
70
  text-align: center;
96
71
  border: none;
97
72
  }
98
73
 
99
74
  &__button-container {
100
75
  border-left: 1px solid $pix-neutral-15;
101
- padding-left: 16px;
76
+ padding-left: $spacing-s;
102
77
  }
103
78
  }
104
79
  }
package/addon/styles/_pix-select.scss CHANGED
@@ -11,7 +11,7 @@
11
11
  font-family: $font-roboto;
12
12
  font-size: 0.875rem;
13
13
  height: 36px;
14
- max-width: 100%;
14
+ width: 100%;
15
15
  text-overflow: ellipsis;
16
16
 
17
17
  @include hoverFormElement();
@@ -55,7 +55,7 @@
55
55
  font-size: 11px;
56
56
  color: $pix-neutral-30;
57
57
  right: 10px;
58
- top: calc(50% - 6px);
58
+ top: calc(50% - 4px);
59
59
  padding: 0 0 2px;
60
60
  position: absolute;
61
61
  pointer-events: none;
package/app/stories/pix-filter-banner.stories.js CHANGED
@@ -7,6 +7,8 @@ export const filterBanner = (args) => {
7
7
  <PixFilterBanner @title={{title}} @details={{details}} @clearFiltersLabel={{clearFiltersLabel}} @onClearFilters={{onClearFilters}}>
8
8
  <PixSelect @options={{this.options}} @onChange={{this.onChange}} />
9
9
  <PixSelect @options={{this.options}} @onChange={{this.onChange}} />
10
+ <PixSelect @options={{this.options}} @onChange={{this.onChange}} />
11
+ <PixSelect @options={{this.options}} @onChange={{this.onChange}} />
10
12
  </PixFilterBanner>
11
13
  `,
12
14
  context: args,
package/app/stories/pix-filter-banner.stories.mdx CHANGED
@@ -25,6 +25,7 @@ Une `FilterBanner` permet de wrapper les éléments de filtres (`Select`, `Multi
25
25
  <PixFilterBanner aria-label="Filtres sur les campagnes">
26
26
  <PixSelect @options={{options}} @onChange={{onChange}} />
27
27
  <PixSelect @options={{options}} @onChange={{onChange}} />
28
+ <PixSelect @options={{options}} @onChange={{onChange}} />
28
29
  </PixFilterBanner>
29
30
  ```
30
31
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@1024pix/pix-ui",
3
- "version": "14.6.0",
3
+ "version": "14.8.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"