feat(cc-input-text): adds label style customization

Fixes #888
CleverCloud · Mar 7, 2024 · 51fa2f4 · 51fa2f4
1 parent 549d60b
commit 51fa2f4
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 10 deletions.
diff --git a/src/components/cc-input-text/cc-input-text.js b/src/components/cc-input-text/cc-input-text.js
@@ -35,6 +35,9 @@ const TAG_SEPARATOR = ' ';
  *
  * @cssprop {Color} --cc-input-btn-icon-color - The color for the icon within the clipboard/secret button (defaults: `#595959`).
  * @cssprop {FontFamily} --cc-input-font-family - The font-family for the input content (defaults: `inherit` or `--cc-ff-monospace` when using the tags mode).
+ * @cssprop {Color} --cc-input-label-color - The color for the input's label (defaults: `inherit`).
+ * @cssprop {FontSize} --cc-input-label-font-size - The font-size for the input's label (defaults: `inherit`).
+ * @cssprop {FontWeight} --cc-input-label-font-weight - The font-weight for the input's label (defaults: `normal`).
  *
  * @slot error - The error message to be displayed below the `<input>` element or below the help text. Please use a `<p>` tag.
  * @slot help - The help message to be displayed right below the `<input>` element. Please use a `<p>` tag.
@@ -228,7 +231,7 @@ export class CcInputText extends LitElement {
 
       ${this.label != null ? html`
         <label class=${classMap({ 'visually-hidden': this.hiddenLabel })} for="input-id">
-          <span>${this.label}</span>
+          <span class="label-text">${this.label}</span>
           ${this.required ? html`
             <span class="required">${i18n('cc-input-text.required')}</span>
           ` : ''}
@@ -351,11 +354,13 @@ export class CcInputText extends LitElement {
 
         :host([inline]) {
           display: inline-grid;
+          align-items: baseline;
           gap: 0 1em;
-          grid-template-areas: 
+          grid-auto-rows: min-content;
+          grid-template-areas:
             'label input'
-            '. help'
-            '. error';
+            'label help'
+            'label error';
           grid-template-columns: auto 1fr;
         }
 
@@ -381,19 +386,19 @@ export class CcInputText extends LitElement {
           line-height: 1.25em;
         }
 
+        label .label-text {
+          color: var(--cc-input-label-color, inherit);
+          font-size: var(--cc-input-label-font-size, inherit);
+          font-weight: var(--cc-input-label-font-weight, normal);
+        }
+
         :host([inline]) label {
           flex-direction: column;
-          justify-content: center;
           padding: 0;
           gap: 0;
           grid-area: label;
           line-height: normal;
         }
-        
-        :host([inline][multi]) label {
-          /* Allows the label text to be aligned with the first line of the input. */
-          height: 2em;
-        }
 
         .required {
           color: var(--cc-color-text-weak);

diff --git a/src/components/cc-input-text/cc-input-text.stories.js b/src/components/cc-input-text/cc-input-text.stories.js
@@ -226,6 +226,68 @@ export const tagsWithClipboard = makeStory(conf, {
   items: tagsItems.map((p) => ({ ...p, clipboard: true })),
 });
 
+const customBaseItems = [
+  { label: 'The label', placeholder: 'No value yet...' },
+  { label: 'The label', placeholder: 'No value yet...', required: true },
+  { label: 'The label', placeholder: 'No value yet...', multi: true },
+  { label: 'The label', placeholder: 'No value yet...', multi: true, required: true },
+  { label: 'The label', placeholder: 'No value yet...', multi: true, value: 'Simple value\nOther lines...' },
+  { label: 'The label', placeholder: 'No value yet...', multi: true, required: true, value: 'Simple value\nOther lines...' },
+];
+
+export const customLabelStyle = makeStory(conf, {
+  // language=CSS
+  css: `
+    cc-input-text {
+      --cc-input-label-color: #475569;
+      --cc-input-label-font-size: 1.2em;
+      --cc-input-label-font-weight: bold;
+      font-size: 1.25em;
+    }
+    cc-input-text:nth-of-type(${customBaseItems.length + 'n'}) {
+      margin-block-end: 2em;
+    }
+    cc-input-text[multi] {
+      /* Necessary because the container is a display:flex */
+      width: 100%;
+    }
+  `,
+  items: [
+    ...customBaseItems,
+    ...customBaseItems.map((item) => ({
+      ...item,
+      innerHTML: `<p slot="help">Must be at least 7 characters long</p>`,
+    })),
+    ...customBaseItems.map((item) => ({
+      ...item,
+      innerHTML: `<p slot="error">You must enter a value</p>`,
+    })),
+    ...customBaseItems.map((item) => ({
+      ...item,
+      innerHTML: `<p slot="help">Must be at least 7 characters long</p><p slot="error">You must enter a value</p>`,
+    })),
+    ...customBaseItems.map((item) => ({
+      ...item,
+      inline: true,
+    })),
+    ...customBaseItems.map((item) => ({
+      ...item,
+      inline: true,
+      innerHTML: `<p slot="help">Must be at least 7 characters long</p>`,
+    })),
+    ...customBaseItems.map((item) => ({
+      ...item,
+      inline: true,
+      innerHTML: `<p slot="error">You must enter a value</p>`,
+    })),
+    ...customBaseItems.map((item) => ({
+      ...item,
+      inline: true,
+      innerHTML: `<p slot="help">Must be at least 7 characters long</p><p slot="error">You must enter a value</p>`,
+    })),
+  ],
+});
+
 export const allFormControls = allFormControlsStory;
 
 export const simulation = makeStory(conf, {