From 67bbe5aff5f1b169245198416c85dcf7a656a08b Mon Sep 17 00:00:00 2001
From: Julie Muzina <julie.muzina@canonical.com>
Date: Fri, 24 May 2024 10:28:47 -0400
Subject: [PATCH] example theme switch to p-theme-toggle__button class, set
 label in javascript

---
 scss/docs/example.scss               |  4 ----
 templates/static/js/example-tools.js | 13 +++++++++++--
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/scss/docs/example.scss b/scss/docs/example.scss
index 81ed385d03..0f187c7b09 100644
--- a/scss/docs/example.scss
+++ b/scss/docs/example.scss
@@ -27,10 +27,6 @@ body {
   position: fixed;
   right: 0;
 
-  .u-theme-toggle__button {
-    text-transform: capitalize;
-  }
-
   @media only percy {
     visibility: hidden !important;
   }
diff --git a/templates/static/js/example-tools.js b/templates/static/js/example-tools.js
index d40a5fd65e..3200509e8f 100644
--- a/templates/static/js/example-tools.js
+++ b/templates/static/js/example-tools.js
@@ -71,6 +71,15 @@ var activeTheme = DEFAULT_COLOR_THEME;
     return `js-${themeName}-theme-toggle`;
   }
 
+  /**
+   * Converts a string to titlecase (first letter capitalized & subsequent letters lowercase)
+   * @param {String} str
+   * @returns {string}
+   */
+  function titleCase(str) {
+    return `${str.charAt(0).toUpperCase()}${str.slice(1).toLowerCase()}`
+  }
+
   /**
    * Sets a color theme as active; removes all other color themes from active status
    * @param {String} themeToSelect
@@ -128,7 +137,7 @@ var activeTheme = DEFAULT_COLOR_THEME;
         if (SUPPORTED_THEMES?.length > 1) {
           var themeSwitcherControls = SUPPORTED_THEMES.map(
             (themeName) =>
-              `<button id="${convertThemeNameToButtonIdentifier(themeName)}" class="p-segmented-control__button u-theme-toggle__button is-dense" role="button" aria-selected="${body.classList.contains(convertThemeNameToClassName(themeName))}" data-color-theme-name="${themeName}">${themeName}</button>`,
+              `<button id="${convertThemeNameToButtonIdentifier(themeName)}" class="p-segmented-control__button p-theme-toggle__button is-dense" role="button" aria-selected="${body.classList.contains(convertThemeNameToClassName(themeName))}" data-color-theme-name="${themeName}">${titleCase(themeName)}</button>`,
           );
           var themeSwitcherSegmentedControl = fragmentFromString(
             `<div class="p-segmented-control u-theme-toggle"><div class="p-segmented-control__list">${themeSwitcherControls.join('')}</div></div>`,
@@ -147,7 +156,7 @@ var activeTheme = DEFAULT_COLOR_THEME;
       body.appendChild(controls);
 
       // Below code relies on the controls already existing in the DOM, so must come after `body.appendChild`.
-      var themeToggleButtons = document.querySelectorAll('.u-theme-toggle__button');
+      var themeToggleButtons = document.querySelectorAll('.p-theme-toggle__button');
       themeToggleButtons.forEach((themeToggleButton) => {
         themeToggleButton.addEventListener('click', () => {
           selectColorTheme(themeToggleButton.getAttribute('data-color-theme-name'));