@1024pix/pix-ui 14.5.0 → 14.7.1
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.
- package/CHANGELOG.md +25 -0
- package/addon/components/pix-collapsible.hbs +3 -1
- package/addon/components/pix-collapsible.js +6 -0
- package/addon/components/pix-filter-banner.hbs +28 -21
- package/addon/components/pix-filter-banner.js +4 -0
- package/addon/styles/_colors.scss +1 -1
- package/addon/styles/_pix-filter-banner.scss +27 -52
- package/addon/styles/_pix-select.scss +2 -2
- package/app/stories/pix-filter-banner.stories.js +2 -0
- package/app/stories/pix-filter-banner.stories.mdx +1 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,26 @@
|
|
|
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
|
+
|
|
15
|
+
## v14.6.0 (27/06/2022)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### :rocket: Amélioration
|
|
19
|
+
- [#225](https://github.com/1024pix/pix-ui/pull/225) [FEATURE] Rendre le contenu de PixCollapsible en lazy
|
|
20
|
+
|
|
21
|
+
### :coffee: Autre
|
|
22
|
+
- [#167](https://github.com/1024pix/pix-ui/pull/167) Bump axios from 0.21.1 to 0.21.2
|
|
23
|
+
|
|
3
24
|
## v14.5.0 (22/06/2022)
|
|
4
25
|
|
|
5
26
|
|
|
@@ -8,6 +29,10 @@
|
|
|
8
29
|
|
|
9
30
|
## v14.4.0 (17/06/2022)
|
|
10
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é.
|
|
11
36
|
|
|
12
37
|
### :building_construction: Tech
|
|
13
38
|
- [#219](https://github.com/1024pix/pix-ui/pull/219) [TECH] Ajouter les variables du design system dans Pix-UI.(PIX-2307)
|
|
@@ -8,11 +8,16 @@ export default class PixCollapsible extends Component {
|
|
|
8
8
|
contentId = 'pix-collapsible-' + guidFor(this);
|
|
9
9
|
|
|
10
10
|
@tracked isCollapsed = true;
|
|
11
|
+
@tracked hasUnCollapsedOnce = false;
|
|
11
12
|
|
|
12
13
|
get isUnCollapsed() {
|
|
13
14
|
return !this.isCollapsed;
|
|
14
15
|
}
|
|
15
16
|
|
|
17
|
+
get isContentRendered() {
|
|
18
|
+
return this.hasUnCollapsedOnce;
|
|
19
|
+
}
|
|
20
|
+
|
|
16
21
|
get title() {
|
|
17
22
|
if (!this.args.title || !this.args.title.trim()) {
|
|
18
23
|
throw new Error('ERROR in PixCollapsible component, @title param is not provided');
|
|
@@ -23,5 +28,6 @@ export default class PixCollapsible extends Component {
|
|
|
23
28
|
@action
|
|
24
29
|
toggleCollapsible() {
|
|
25
30
|
this.isCollapsed = !this.isCollapsed;
|
|
31
|
+
this.hasUnCollapsedOnce = true;
|
|
26
32
|
}
|
|
27
33
|
}
|
|
@@ -1,26 +1,33 @@
|
|
|
1
1
|
<div class="pix-filter-banner" ...attributes>
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
{{#if this.displayTitle}}
|
|
3
|
+
<div class="pix-filter-banner__container-title">
|
|
4
4
|
<p class="pix-filter-banner__title">{{@title}}</p>
|
|
5
|
-
|
|
5
|
+
</div>
|
|
6
|
+
{{/if}}
|
|
7
|
+
|
|
8
|
+
<div class="pix-filter-banner__container-filter">
|
|
6
9
|
{{yield}}
|
|
7
10
|
</div>
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
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>
|
|
@@ -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
|
-
|
|
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:
|
|
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
|
-
|
|
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
|
-
|
|
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:
|
|
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-
|
|
63
|
-
|
|
64
|
-
height: 36px;
|
|
52
|
+
&__container-title {
|
|
53
|
+
display: flex;
|
|
65
54
|
align-items: center;
|
|
66
55
|
}
|
|
67
56
|
|
|
68
|
-
&__container-
|
|
57
|
+
&__container-filter {
|
|
69
58
|
flex-direction: row;
|
|
70
|
-
|
|
71
|
-
align-items: center;
|
|
72
|
-
justify-content: flex-end;
|
|
59
|
+
flex-wrap: wrap;
|
|
73
60
|
}
|
|
74
61
|
|
|
75
|
-
&
|
|
76
|
-
|
|
77
|
-
|
|
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
|
-
|
|
91
|
-
|
|
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:
|
|
76
|
+
padding-left: $spacing-s;
|
|
102
77
|
}
|
|
103
78
|
}
|
|
104
79
|
}
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
font-family: $font-roboto;
|
|
12
12
|
font-size: 0.875rem;
|
|
13
13
|
height: 36px;
|
|
14
|
-
|
|
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% -
|
|
58
|
+
top: calc(50% - 4px);
|
|
59
59
|
padding: 0 0 2px;
|
|
60
60
|
position: absolute;
|
|
61
61
|
pointer-events: none;
|
|
@@ -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,
|
|
@@ -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
|
|