@1024pix/pix-ui 24.0.0 → 24.0.2

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.
@@ -18,10 +18,10 @@ jobs:
18
18
  docker:
19
19
  - image: cimg/node:16.14.0-browsers
20
20
  steps:
21
+ - checkout
21
22
  - run: sudo npm i -g npm@8.13.2
22
23
  - browser-tools/install-chrome
23
24
  - browser-tools/install-chromedriver
24
- - checkout
25
25
  - run: npm ci
26
26
  - run: npm run lint:js
27
27
  - run: npm run lint:hbs
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # Pix-UI Changelog
2
2
 
3
+ ## v24.0.2 (18/01/2023)
4
+
5
+
6
+ ### :rocket: Amélioration
7
+ - [#319](https://github.com/1024pix/pix-ui/pull/319) [FEATURE] Ajouter un argument IconPrefixe au composant IndicatorCard afin d'autoriser l'utilisation d'icônes personnalisées (PIX-6809)
8
+
9
+ ### :building_construction: Tech
10
+ - [#318](https://github.com/1024pix/pix-ui/pull/318) [TECH] Changement du ratio minimal pour la couleur de fond accessible de 4.5 à 3 (PIX-6802)
11
+
12
+ ## v24.0.1 (11/01/2023)
13
+
14
+
15
+ ### :bug: Correction
16
+ - [#315](https://github.com/1024pix/pix-ui/pull/315) [BUGFIX] Améliorer le comportement du PixSelect (PIX-6775)
17
+ - [#317](https://github.com/1024pix/pix-ui/pull/317) [BUGFIX] La CI sort en erreur alors que les tests sont OK en local
18
+
3
19
  ## v24.0.0 (09/01/2023)
4
20
 
5
21
 
@@ -10,7 +10,7 @@
10
10
  aria-hidden="true"
11
11
  {{did-insert this.setIconColor}}
12
12
  >
13
- <FaIcon @icon={{@icon}} />
13
+ <FaIcon @icon={{@icon}} @prefix={{@iconPrefix}} />
14
14
  </div>
15
15
  <dl class="indicator-card__content">
16
16
  <div class="indicator-card__title">
@@ -33,7 +33,7 @@
33
33
  aria-controls={{this.listId}}
34
34
  aria-disabled={{@isDisabled}}
35
35
  >
36
- {{this.placeholder}}
36
+ <span class="pix-select-button__text">{{this.placeholder}}</span>
37
37
 
38
38
  <FaIcon
39
39
  class="pix-select-button__dropdown-icon"
@@ -139,7 +139,7 @@ export default class PixSelect extends Component {
139
139
  lockTab(event) {
140
140
  if (event.code === 'Tab' && this.isExpanded) {
141
141
  event.preventDefault();
142
- document.getElementById(this.searchId).focus();
142
+ if (this.args.isSearchable) document.getElementById(this.searchId).focus();
143
143
  }
144
144
  }
145
145
 
@@ -108,6 +108,12 @@
108
108
  @include formElementInError();
109
109
  }
110
110
 
111
+ &__text {
112
+ overflow: hidden;
113
+ white-space: nowrap;
114
+ text-overflow: ellipsis;
115
+ }
116
+
111
117
  &__dropdown-icon {
112
118
  @include text-small();
113
119
  margin-left: $spacing-xs;
@@ -165,7 +171,8 @@
165
171
  &--hidden {
166
172
  visibility: hidden;
167
173
  height: 0;
168
- padding: 0;
174
+ padding-top: 0;
175
+ padding-bottom: 0;
169
176
  }
170
177
  }
171
178
  }
@@ -24,6 +24,6 @@ export default function (hex) {
24
24
  contrast = color.contrast(newColor);
25
25
 
26
26
  // newColor.luminosity() can return 0.9999..99 when newColor is white but reinstanciating Color with the hexacode #FFFFFF returns 1
27
- } while (contrast < 4.5 && Color(newColor.hex()).luminosity() < 1);
27
+ } while (contrast < 3 && Color(newColor.hex()).luminosity() < 1);
28
28
  return newColor.hex();
29
29
  }
@@ -8,6 +8,7 @@ const Template = (args) => {
8
8
  @title={{this.title}}
9
9
  @color={{this.color}}
10
10
  @icon={{this.icon}}
11
+ @iconPrefix={{this.iconPrefix}}
11
12
  @info={{this.info}}
12
13
  @isLoading={{this.isLoading}}
13
14
  @loadingMessage={{this.loadingMessage}}
@@ -33,6 +34,12 @@ Default.args = {
33
34
  loadingMessage: 'texte de chargement ScreenReader',
34
35
  };
35
36
 
37
+ export const withIconPrefix = Template.bind({});
38
+ withIconPrefix.args = {
39
+ ...Default.args,
40
+ iconPrefix: 'far',
41
+ };
42
+
36
43
  export const argTypes = {
37
44
  title: {
38
45
  name: 'Title',
@@ -46,6 +53,12 @@ export const argTypes = {
46
53
  name: 'Icon',
47
54
  description: "Icone dans l'encart",
48
55
  },
56
+ iconPrefix: {
57
+ name: 'IconPrefix',
58
+ description:
59
+ "Préfixe pour l'icone dans l'encart - permet d'utiliser une variation de l'icone font awesome différente de celle par défaut (fa).",
60
+ defaultValue: null,
61
+ },
49
62
  value: {
50
63
  name: 'Value',
51
64
  description: 'Contenu principal',
@@ -17,6 +17,11 @@ Une carte est un bloc en 2 parties dont les bords sont arrondis et ayant une omb
17
17
  <Story name="Default" story={stories.Default} height={200} />
18
18
  </Canvas>
19
19
 
20
+ ## WithIconPrefix
21
+ <Canvas>
22
+ <Story name="WithIconPrefix" story={stories.withIconPrefix} height={200} />
23
+ </Canvas>
24
+
20
25
  ## Usage
21
26
 
22
27
  ```html
@@ -24,6 +29,7 @@ Une carte est un bloc en 2 parties dont les bords sont arrondis et ayant une omb
24
29
  @title={{this.title}}
25
30
  @color={{this.color}}
26
31
  @icon={{this.icon}}
32
+ @iconPrefix={{this.iconPrefix}}
27
33
  @info={{this.info}}
28
34
  @isLoading={{this.isLoading}}
29
35
  @loadingMessage={{this.loadingMessage}}
@@ -7,6 +7,7 @@ export const Template = (args) => {
7
7
  <style>
8
8
  .custom {
9
9
  border: 0;
10
+ width: 150px;
10
11
  }
11
12
  .custom:hover {
12
13
  border: 0;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@1024pix/pix-ui",
3
- "version": "24.0.0",
3
+ "version": "24.0.2",
4
4
  "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
5
5
  "keywords": [
6
6
  "ember-addon"