diff --git a/src/components/cc-input-text/cc-input-text.js b/src/components/cc-input-text/cc-input-text.js
index 875dcbbc8..35313120a 100644
--- 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 ` ` element or below the help text. Please use a `
` tag.
* @slot help - The help message to be displayed right below the ` ` element. Please use a `
` tag.
@@ -228,7 +231,7 @@ export class CcInputText extends LitElement {
${this.label != null ? html`
- ${this.label}
+ ${this.label}
${this.required ? html`
${i18n('cc-input-text.required')}
` : ''}
@@ -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
index a933c2dbd..cf4a1e5e1 100644
--- 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: `Must be at least 7 characters long
`,
+ })),
+ ...customBaseItems.map((item) => ({
+ ...item,
+ innerHTML: `You must enter a value
`,
+ })),
+ ...customBaseItems.map((item) => ({
+ ...item,
+ innerHTML: `Must be at least 7 characters long
You must enter a value
`,
+ })),
+ ...customBaseItems.map((item) => ({
+ ...item,
+ inline: true,
+ })),
+ ...customBaseItems.map((item) => ({
+ ...item,
+ inline: true,
+ innerHTML: `Must be at least 7 characters long
`,
+ })),
+ ...customBaseItems.map((item) => ({
+ ...item,
+ inline: true,
+ innerHTML: `You must enter a value
`,
+ })),
+ ...customBaseItems.map((item) => ({
+ ...item,
+ inline: true,
+ innerHTML: `Must be at least 7 characters long
You must enter a value
`,
+ })),
+ ],
+});
+
export const allFormControls = allFormControlsStory;
export const simulation = makeStory(conf, {