feat(cc-toggle): adds label style customization

Fixes #888
CleverCloud · Mar 7, 2024 · 1556ecc · 1556ecc
1 parent e0edcc0
commit 1556ecc
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/src/components/cc-toggle/cc-toggle.js b/src/components/cc-toggle/cc-toggle.js
@@ -38,6 +38,9 @@ import { dispatchCustomEvent } from '../../lib/events.js';
  * @cssprop {FontWeight} --cc-toggle-font-weight - Sets the value of the font weight CSS property (defaults: `bold`).
  * @cssprop {Filter} --cc-toggle-img-filter - A CSS filter to apply on images of all choices (defaults: `none`). It must be defined directly on the element.
  * @cssprop {Filter} --cc-toggle-img-filter-selected - A CSS filter to apply on images of selected choices (defaults: `none`). It must be defined directly on the element.
+ * @cssprop {Color} --cc-toggle-legend-color - The color for the group's legend (defaults: `inherit`).
+ * @cssprop {FontSize} --cc-toggle-legend-font-size - The font-size for the group's legend (defaults: `inherit`).
+ * @cssprop {FontWeight} --cc-toggle-legend-font-weight - The font-weight for the group's legend (defaults: `normal`).
  * @cssprop {TextTransform} --cc-toggle-text-transform - Sets the value of the text transform CSS property (defaults: `uppercase`).
  */
 export class CcToggle extends LitElement {
@@ -69,7 +72,7 @@ export class CcToggle extends LitElement {
     /** @type {boolean} Hides the text and only displays the image specified with `choices[i].image`. The text will be added as `title` on the inner `<label>` and an `aria-label` on the inner `<input>`. */
     this.hideText = false;
 
-    /** @type {boolean} Sets the `<label>` on the left of the `<select>` element.
+    /** @type {boolean} Sets the legend on the left of the `<select>` element.
      * Only use this if your form contains 1 or 2 fields and your labels are short.
      */
     this.inline = false;
@@ -190,6 +193,9 @@ export class CcToggle extends LitElement {
         }
         
         #legend {
+          color: var(--cc-toggle-legend-color, inherit);
+          font-size: var(--cc-toggle-legend-font-size, inherit);
+          font-weight: var(--cc-toggle-legend-font-weight, normal);
           line-height: 1.25em;
         }
 

diff --git a/src/components/cc-toggle/cc-toggle.stories.js b/src/components/cc-toggle/cc-toggle.stories.js
@@ -243,4 +243,23 @@ Here you can see a series of toolbar examples using CSS custom propreties of the
   ],
 });
 
+export const customLegendStyle = makeStory({ ...conf, displayMode: 'block' }, {
+  // language=CSS
+  css: `
+    cc-toggle {
+      --cc-toggle-legend-color: #475569;
+      --cc-toggle-legend-font-size: 1.2em;
+      --cc-toggle-legend-font-weight: bold;
+      font-size: 1.25em;
+    }
+    cc-toggle:nth-of-type(${normalAndSubtleItems.length + 'n'}) {
+      margin-block-end: 2em;
+    }
+  `,
+  items: [
+    ...normalAndSubtleItems.map((p) => ({ ...p, legend: 'The legend' })),
+    ...normalAndSubtleItems.map((p) => ({ ...p, legend: 'The legend', inline: true })),
+  ],
+});
+
 export const allFormControls = allFormControlsStory;