@1024pix/pix-ui 46.3.1 → 46.3.2

package/addon/components/pix-checkbox.hbs

@@ -1,15 +1,5 @@
 <div class="pix-checkbox {{@class}}">
-  <input
-    type="checkbox"
-    id={{this.id}}
-    class={{this.inputClasses}}
-    checked={{@checked}}
-    aria-disabled={{this.isDisabled}}
-    {{on "click" this.avoidCheckedStateChangeIfIsDisabled}}
-    ...attributes
-  />
-
-  <PixLabel
+  <PixLabelWrapped
     @for={{this.id}}
     @requiredLabel={{@requiredLabel}}
     @subLabel={{@subLabel}}
@@ -18,6 +8,19 @@
     @screenReaderOnly={{@screenReaderOnly}}
     @isDisabled={{this.isDisabled}}
   >
-    {{yield to="label"}}
-  </PixLabel>
+    <:inputElement>
+      <input
+        type="checkbox"
+        id={{this.id}}
+        class={{this.inputClasses}}
+        checked={{@checked}}
+        aria-disabled={{this.isDisabled}}
+        {{on "click" this.avoidCheckedStateChangeIfIsDisabled}}
+        ...attributes
+      />
+    </:inputElement>
+    <:default>
+      {{yield to="label"}}
+    </:default>
+  </PixLabelWrapped>
 </div>

package/addon/components/pix-label-wrapped.hbs

@@ -0,0 +1,15 @@
+<label for={{@for}} class={{this.className}} ...attributes>
+  {{yield to="inputElement"}}
+
+  <span class="{{if @screenReaderOnly 'screen-reader-only'}}">
+    {{#if @requiredLabel}}
+      <abbr title={{@requiredLabel}} class="mandatory-mark">*</abbr>
+    {{/if}}
+
+    {{yield}}
+
+    {{#if @subLabel}}
+      <span class="pix-label__sub-label">{{@subLabel}}</span>
+    {{/if}}
+  </span>
+</label>

package/addon/components/pix-label-wrapped.js

@@ -0,0 +1,16 @@
+import Component from '@glimmer/component';
+
+export default class PixLabelWrapped extends Component {
+  get className() {
+    const classes = ['pix-label', 'pix-label--wrapped'];
+
+    if (this.args.inlineLabel) classes.push('pix-label--inline-label');
+    if (this.args.isDisabled) classes.push('pix-label--disabled');
+
+    const size = ['small', 'large'].includes(this.args.size) ? this.args.size : 'default';
+
+    classes.push(`pix-label--${size}`);
+
+    return classes.join(' ');
+  }
+}

package/addon/components/pix-radio-button.hbs

@@ -1,15 +1,5 @@
 <div class="pix-radio-button {{@class}}">
-  <input
-    type="radio"
-    id={{this.id}}
-    class="pix-radio-button__input"
-    value={{@value}}
-    aria-disabled={{this.isDisabled}}
-    {{on "click" this.avoidCheckedStateChangeIfIsDisabled}}
-    ...attributes
-  />
-
-  <PixLabel
+  <PixLabelWrapped
     @for={{this.id}}
     @requiredLabel={{@requiredLabel}}
     @subLabel={{@subLabel}}
@@ -18,6 +8,19 @@
     @isDisabled={{this.isDisabled}}
     @inlineLabel={{true}}
   >
-    {{yield to="label"}}
-  </PixLabel>
+    <:inputElement>
+      <input
+        type="radio"
+        id={{this.id}}
+        class="pix-radio-button__input"
+        value={{@value}}
+        aria-disabled={{this.isDisabled}}
+        {{on "click" this.avoidCheckedStateChangeIfIsDisabled}}
+        ...attributes
+      />
+    </:inputElement>
+    <:default>
+      {{yield to="label"}}
+    </:default>
+  </PixLabelWrapped>
 </div>

package/addon/styles/_pix-checkbox.scss

@@ -1,8 +1,6 @@
 .pix-checkbox {
   position: relative;
   z-index: 0;
-  display: flex;
-  align-items: center;
 
   & + .pix-checkbox {
     margin-top: var(--pix-spacing-4x);

package/addon/styles/_pix-label.scss

@@ -3,6 +3,12 @@
   color: var(--pix-neutral-900);
   font-weight: var(--pix-font-medium);
 
+  &--wrapped {
+    display: flex;
+    gap: var(--pix-spacing-2x);
+    align-items: center;
+  }
+
   &--disabled {
     color: var(--pix-neutral-500);
   }
@@ -20,8 +26,6 @@
   }
 
   &--inline-label {
-    margin: 0;
-    padding: 0 var(--pix-spacing-2x);
     font-weight: var(--pix-font-normal);
   }
 

package/addon/styles/_pix-radio-button.scss

@@ -1,8 +1,6 @@
 .pix-radio-button {
   position: relative;
   z-index: 0;
-  display: flex;
-  align-items: center;
 
   & + .pix-radio-button {
     margin-top: var(--pix-spacing-4x);

package/app/components/pix-label-wrapped.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-label-wrapped';

package/app/stories/pix-checkbox.mdx

@@ -18,6 +18,12 @@ En ce sens, nous avons déjà prévu un espace vertical pour séparer 2 composan
 
 <Story of={ComponentStories.multiple} height={140} />
 
+### Dimensions du label
+
+La PixCheckbox prend tout l'espace à sa disposition.
+
+<Story of={ComponentStories.FullWidth} height={100} />
+
 ## États de la Checkbox
 
 <br />

package/app/stories/pix-checkbox.stories.js

@@ -108,6 +108,18 @@ const Template = (args) => {
   };
 };
 
+const FullWidthTemplate = (args) => {
+  return {
+    template: hbs`{{! template-lint-disable no-inline-styles }}
+<div
+  style='border: 1px solid var(--pix-neutral-500); background: var(--pix-neutral-20); padding: var(--pix-spacing-4x); width: 500px'
+><PixCheckbox @id={{this.id}} @isIndeterminate={{false}}>
+    <:label>{{this.label}}</:label>
+  </PixCheckbox></div>`,
+    context: args,
+  };
+};
+
 export const Default = Template.bind({});
 Default.args = {
   id: 'accept-newsletter',
@@ -121,6 +133,12 @@ DefaultChecked.args = {
   checked: true,
 };
 
+export const FullWidth = FullWidthTemplate.bind({});
+FullWidth.args = {
+  id: 'proposal',
+  label: 'Une réponse',
+};
+
 export const isIndeterminate = Template.bind({});
 isIndeterminate.args = {
   id: 'accept-newsletter-2',

package/app/stories/pix-label.mdx

@@ -6,6 +6,7 @@ import * as ComponentStories from './pix-label.stories';
 # Pix Label
 
 Le `PixLabel` permet de créer label pour un input donnée.
+Il existe une version `PixLabelWrapped` pour les `PixCheckox` / `PixRadioButton` qui permet d'inclure l'`input` à l'intérieur du son `label`
 
 ## Accessibilité
 

package/app/stories/pix-radio-button.mdx

@@ -24,6 +24,12 @@ Pour les considérer comme un seul groupe d'inputs, **il est nécessaire qu'ils
 
 <Story of={ComponentStories.multiple} height={140} />
 
+### Dimensions du label
+
+PixRadioButton prend tout l'espace à sa disposition.
+
+<Story of={ComponentStories.FullWidth} height={100} />
+
 ## Disabled
 
 L'attribut `@isDisabled` permet de désactiver la radio en conservant la possibilité de naviguer avec le clavier ou le lecteur d'écran. Il est préféré à l'attribut natif `disabled` qui empêche ces usages.

package/app/stories/pix-radio-button.stories.js

@@ -102,6 +102,18 @@ const Template = (args) => {
   };
 };
 
+const FullWidthTemplate = (args) => {
+  return {
+    template: hbs`{{! template-lint-disable no-inline-styles }}
+<div
+  style='border: 1px solid var(--pix-neutral-500); background: var(--pix-neutral-20); padding: var(--pix-spacing-4x); width: 500px'
+><PixRadioButton @id={{this.id}}>
+    <:label>{{this.label}}</:label>
+  </PixRadioButton></div>`,
+    context: args,
+  };
+};
+
 export const Default = Template.bind({});
 Default.args = {
   label: 'Poivron',
@@ -113,6 +125,11 @@ defaultChecked.args = {
   checked: true,
 };
 
+export const FullWidth = FullWidthTemplate.bind({});
+FullWidth.args = {
+  label: 'Une réponse',
+};
+
 export const isDisabled = Template.bind({});
 isDisabled.args = {
   ...Default.args,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "46.3.1",
+  "version": "46.3.2",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"