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

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

Hide file tree

Showing 3 changed files with 72 additions and 5 deletions.
diff --git a/src/components/cc-input-date/cc-input-date.js b/src/components/cc-input-date/cc-input-date.js
@@ -98,6 +98,9 @@ function invalid (code) {
  * @fires {CustomEvent} cc-input-date:requestimplicitsubmit - Fires when enter key is pressed.
  *
  * @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.
@@ -405,7 +408,7 @@ export class CcInputDate extends LitElement {
     return html`
       ${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-date.required')}</span>
           ` : ''}
@@ -480,11 +483,13 @@ export class CcInputDate 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;
         }
 
@@ -506,9 +511,14 @@ export class CcInputDate 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-date/cc-input-date.stories.js b/src/components/cc-input-date/cc-input-date.stories.js
@@ -108,6 +108,7 @@ export const timezone = makeStory(conf, {
 
 const date = new Date();
 export const customWidth = makeStory(conf, {
+  // language=CSS
   css: `
     cc-input-date {
       display: block;
@@ -126,6 +127,61 @@ export const customWidth = makeStory(conf, {
     }),
 });
 
+const customBaseItems = [
+  { label: 'The label' },
+  { label: 'The label', required: true },
+];
+
+export const customLabelStyle = makeStory({ ...conf, displayMode: 'block' }, {
+  // language=CSS
+  css: `
+    cc-input-date {
+      --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-date:nth-of-type(${customBaseItems.length + 'n'}) {
+      margin-block-end: 2em;
+    }
+  `,
+  items: [
+    ...customBaseItems,
+    ...customBaseItems.map((item) => ({
+      ...item,
+      innerHTML: `<p slot="help">Must be a date</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 a date</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 a date</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 a date</p><p slot="error">You must enter a value</p>`,
+    })),
+  ],
+});
+
 export const allFormControls = allFormControlsStory;
 
 export const simulation = makeStory(conf, {

diff --git a/src/stories/all-form-controls.js b/src/stories/all-form-controls.js
@@ -1,4 +1,5 @@
 import '../components/cc-button/cc-button.js';
+import '../components/cc-input-date/cc-input-date.js';
 import '../components/cc-input-number/cc-input-number.js';
 import '../components/cc-input-text/cc-input-text.js';
 import '../components/cc-select/cc-select.js';