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

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

Hide file tree

Showing 2 changed files with 72 additions and 5 deletions.
diff --git a/src/components/cc-input-number/cc-input-number.js b/src/components/cc-input-number/cc-input-number.js
@@ -27,6 +27,9 @@ import '../cc-icon/cc-icon.js';
  * @cssprop {Align} --cc-input-number-align - Change the alignment of the number present in the input (defaults: `right`).
  * @cssprop {Color} --cc-input-btn-icon-color - The color for the icon within the +/- buttons (defaults: `#595959`).
  * @cssprop {FontFamily} --cc-input-font-family - The font-family for the input content (defaults: `inherit`).
+ * @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.
@@ -178,7 +181,7 @@ export class CcInputNumber 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-number.required')}</span>
           ` : ''}
@@ -246,11 +249,13 @@ export class CcInputNumber 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;
         }
 
@@ -272,9 +277,14 @@ export class CcInputNumber 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;

diff --git a/src/components/cc-input-number/cc-input-number.stories.js b/src/components/cc-input-number/cc-input-number.stories.js
@@ -172,6 +172,63 @@ export const customWidth = makeStory(conf, {
     }),
 });
 
+const customBaseItems = [
+  { label: 'The label', value: 100 },
+  { label: 'The label', value: 100, required: true },
+  { label: 'The label', value: 100, controls: true },
+  { label: 'The label', value: 100, required: true, controls: true },
+];
+
+export const customLabelStyle = makeStory({ ...conf, displayMode: 'block' }, {
+  // language=CSS
+  css: `
+    cc-input-number {
+      --cc-input-label-color: #475569;
+      --cc-input-label-font-size: 1.2em;
+      --cc-input-label-font-weight: bold;
+      font-size: 1.25em;
+      max-width: 32em;
+    }
+    cc-input-number:nth-of-type(${customBaseItems.length + 'n'}) {
+      margin-block-end: 2em;
+    }
+  `,
+  items: [
+    ...customBaseItems,
+    ...customBaseItems.map((item) => ({
+      ...item,
+      innerHTML: `<p slot="help">Must be an integer</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 an integer</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 an integer</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 an integer</p><p slot="error">You must enter a value</p>`,
+    })),
+  ],
+});
+
 export const allFormControls = allFormControlsStory;
 
 export const simulation = makeStory(conf, {