fix: handle no label yield case

1024pix · Apr 30, 2024 · 1c3b5f0 · 1c3b5f0
1 parent aac50b7
commit 1c3b5f0
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 10 deletions.
diff --git a/addon/components/pix-input.hbs b/addon/components/pix-input.hbs
@@ -1,14 +1,16 @@
 <div class="pix-input {{if @inlineLabel ' pix-input--inline'}}">
-  <PixLabel
-    @for={{this.id}}
-    @requiredLabel={{@requiredLabel}}
-    @subLabel={{@subLabel}}
-    @size={{@size}}
-    @screenReaderOnly={{@screenReaderOnly}}
-    @inlineLabel={{@inlineLabel}}
-  >
-    {{yield to="label"}}
-  </PixLabel>
+  {{#if (has-block "label")}}
+    <PixLabel
+      @for={{this.id}}
+      @requiredLabel={{@requiredLabel}}
+      @subLabel={{@subLabel}}
+      @size={{@size}}
+      @screenReaderOnly={{@screenReaderOnly}}
+      @inlineLabel={{@inlineLabel}}
+    >
+      {{yield to="label"}}
+    </PixLabel>
+  {{/if}}
   <div>
     <div class="pix-input__container">
       <input

diff --git a/app/stories/pix-input.mdx b/app/stories/pix-input.mdx
@@ -72,6 +72,10 @@ En readonly, l'input n'est pas modifiable, mais il est toujours focusable et est
 
 <Story of={ComponentStories.withRequiredLabel} height={100} />
 
+## Without label
+
+<Story of={ComponentStories.withoutLabel} height={100} />
+
 ## Usage
 
 ```html

diff --git a/app/stories/pix-input.stories.js b/app/stories/pix-input.stories.js
@@ -102,6 +102,24 @@ const Template = (args) => {
   };
 };
 
+const TemplateWithoutLabel = (args) => {
+  return {
+    template: hbs`<PixInput
+  @id={{this.id}}
+  @errorMessage={{this.errorMessage}}
+  placeholder='Jeanne, Pierre ...'
+  @validationStatus={{this.validationStatus}}
+  @size={{this.size}}
+  disabled={{this.disabled}}
+  readonly={{this.readonly}}
+  @subLabel={{this.subLabel}}
+  @inlineLabel={{this.inlineLabel}}
+  @requiredLabel={{this.requiredLabel}}
+/>`,
+    context: args,
+  };
+};
+
 export const Default = Template.bind({});
 Default.args = {
   id: 'first-name',
@@ -150,3 +168,8 @@ withRequiredLabel.args = {
   label: 'Prénom',
   requiredLabel: 'Champ obligatoire',
 };
+
+export const withoutLabel = TemplateWithoutLabel.bind({});
+withoutLabel.args = {
+  id: 'first-name',
+};