From 75dabca291c944b0222403086e3f6beffd6a6960 Mon Sep 17 00:00:00 2001
From: Sayam Samal <sayam@zulip.com>
Date: Sat, 11 Jan 2025 10:50:05 +0530
Subject: [PATCH] showroom: Rename dev/design-testing -> showroom.

---
 .../zerver/development/showroom/banners.html  | 172 +++++++++---------
 .../zerver/development/showroom/buttons.html  | 106 +++++------
 templates/zerver/portico-header.html          |   4 +-
 web/src/portico/showroom.ts                   |  72 ++++----
 web/styles/portico/showroom.css               |  54 +++---
 zerver/views/development/showroom.py          |   8 +-
 zproject/dev_urls.py                          |   2 +-
 7 files changed, 209 insertions(+), 209 deletions(-)

diff --git a/templates/zerver/development/showroom/banners.html b/templates/zerver/development/showroom/banners.html
index 16fa4eba5a..aaf5d4bd7c 100644
--- a/templates/zerver/development/showroom/banners.html
+++ b/templates/zerver/development/showroom/banners.html
@@ -10,30 +10,30 @@
     <div class="portico-wrap">
         {% include 'zerver/portico-header.html' %}
         <div class="app portico-page">
-            <div class="banner-wrapper" id="dev_navbar_alerts_wrapper"></div>
+            <div class="banner-wrapper" id="showroom_component_banner_navbar_alerts_wrapper"></div>
             <div class="app-main portico-page-container">
-                <div class="design-testing-wrapper">
-                    <div class="banner-wrapper" id="dev_normal_banner_wrapper"></div>
-                    <section class="design-controls-section">
-                        <div class="design-testing-controls-label">Theme Settings</div>
-                        <div class="design-testing-controls">
-                            <div class="design-testing-control">
-                                <span class="control-label">Dark Theme</span>
-                                <div role="group" class="tab-picker control-setting">
-                                    <input type="radio" data-theme="dark" id="dev_enable_dark_theme_banners" class="tab-option" name="dark-theme-select"/>
-                                    <label role="menuitemradio" class="tab-option-content design-testing-control-element" for="dev_enable_dark_theme_banners" tabindex="0">
+                <div class="showroom-wrapper">
+                    <div class="banner-wrapper" id="showroom_component_banner_default_wrapper"></div>
+                    <section class="showroom-controls-section">
+                        <div class="showroom-controls-label">Theme Settings</div>
+                        <div class="showroom-controls">
+                            <div class="showroom-control">
+                                <span class="showroom-control-label">Dark Theme</span>
+                                <div role="group" class="tab-picker showroom-control-setting">
+                                    <input type="radio" data-theme="dark" id="showroom_enable_dark_theme_banners" class="tab-option" name="showroom-dark-theme-select"/>
+                                    <label role="menuitemradio" class="tab-option-content showroom-control-element" for="showroom_enable_dark_theme_banners" tabindex="0">
                                         <span>Enable</span>
                                     </label>
-                                    <input type="radio" data-theme="light" id="dev_disable_dark_theme_banners" class="tab-option" name="dark-theme-select" checked/>
-                                    <label role="menuitemradio" class="tab-option-content design-testing-control-element" for="dev_disable_dark_theme_banners" tabindex="0">
+                                    <input type="radio" data-theme="light" id="showroom_disable_dark_theme_banners" class="tab-option" name="showroom-dark-theme-select" checked/>
+                                    <label role="menuitemradio" class="tab-option-content showroom-control-element" for="showroom_disable_dark_theme_banners" tabindex="0">
                                         <span>Disable</span>
                                     </label>
                                     <span class="slider"></span>
                                 </div>
                             </div>
-                            <div class="design-testing-control">
-                                <span class="control-label">Select Background</span>
-                                <select class="design-testing-control-element control-setting select_background">
+                            <div class="showroom-control">
+                                <span class="showroom-control-label">Select Background</span>
+                                <select class="showroom-control-element showroom-control-setting select_background">
                                     {% for background in background_colors %}
                                         <option value="{{ background.css_var }}" {% if background.css_var == "--color-background" %}selected{% endif %}>{{ background.name }}</option>
                                     {% endfor %}
@@ -41,29 +41,29 @@
                             </div>
                         </div>
 
-                        <div class="design-testing-controls-label">Banner Settings</div>
-                        <div class="design-testing-controls">
-                            <div class="design-testing-control">
-                                <span class="control-label">Alert Banner Type</span>
-                                <select class="design-testing-control-element control-setting" id="banner_select_type"></select>
+                        <div class="showroom-controls-label">Banner Settings</div>
+                        <div class="showroom-controls">
+                            <div class="showroom-control">
+                                <span class="showroom-control-label">Alert Banner Type</span>
+                                <select class="showroom-control-element showroom-control-setting" id="banner_select_type"></select>
                             </div>
-                            <div class="design-testing-control">
-                                <span class="control-label">Banner Intent</span>
-                                <select class="design-testing-control-element control-setting" id="banner_select_intent"></select>
+                            <div class="showroom-control">
+                                <span class="showroom-control-label">Banner Intent</span>
+                                <select class="showroom-control-element showroom-control-setting" id="showroom_component_banner_select_intent"></select>
                             </div>
-                            <div class="design-testing-control">
-                                <span class="control-label">Banner Label</span>
-                                <input class="design-testing-control-element control-setting" type="text" id="banner_label" />
+                            <div class="showroom-control">
+                                <span class="showroom-control-label">Banner Label</span>
+                                <input class="showroom-control-element showroom-control-setting" type="text" id="banner_label" />
                             </div>
-                            <div class="design-testing-control">
-                                <span class="control-label">Banner Close Button</span>
-                                <div role="group" class="tab-picker control-setting">
+                            <div class="showroom-control">
+                                <span class="showroom-control-label">Banner Close Button</span>
+                                <div role="group" class="tab-picker showroom-control-setting">
                                     <input type="radio" id="enable_banner_close_button" class="tab-option" name="banner-close-button-select"/>
-                                    <label role="menuitemradio" class="tab-option-content design-testing-control-element" for="enable_banner_close_button" tabindex="0">
+                                    <label role="menuitemradio" class="tab-option-content showroom-control-element" for="enable_banner_close_button" tabindex="0">
                                         <span>Enable</span>
                                     </label>
                                     <input type="radio" id="disable_banner_close_button" class="tab-option" name="banner-close-button-select" checked/>
-                                    <label role="menuitemradio" class="tab-option-content design-testing-control-element" for="disable_banner_close_button" tabindex="0">
+                                    <label role="menuitemradio" class="tab-option-content showroom-control-element" for="disable_banner_close_button" tabindex="0">
                                         <span>Disable</span>
                                     </label>
                                     <span class="slider"></span>
@@ -71,135 +71,135 @@
                             </div>
                         </div>
 
-                        <div class="design-testing-controls-label">Primary Button Settings</div>
-                        <div class="design-testing-controls">
-                            <div class="design-testing-control">
-                                <span class="control-label">Button</span>
-                                <div role="group" class="tab-picker control-setting">
+                        <div class="showroom-controls-label">Primary Button Settings</div>
+                        <div class="showroom-controls">
+                            <div class="showroom-control">
+                                <span class="showroom-control-label">Button</span>
+                                <div role="group" class="tab-picker showroom-control-setting">
                                     <input type="radio" id="enable_primary_button" class="tab-option" name="primary-button-select"/>
-                                    <label role="menuitemradio" class="tab-option-content design-testing-control-element" for="enable_primary_button" tabindex="0">
+                                    <label role="menuitemradio" class="tab-option-content showroom-control-element" for="enable_primary_button" tabindex="0">
                                         <span>Enable</span>
                                     </label>
                                     <input type="radio" id="disable_primary_button" class="tab-option" name="primary-button-select" checked/>
-                                    <label role="menuitemradio" class="tab-option-content design-testing-control-element" for="disable_primary_button" tabindex="0">
+                                    <label role="menuitemradio" class="tab-option-content showroom-control-element" for="disable_primary_button" tabindex="0">
                                         <span>Disable</span>
                                     </label>
                                     <span class="slider"></span>
                                 </div>
                             </div>
-                            <div class="design-testing-control">
-                                <span class="control-label">Button Icon</span>
-                                <div role="group" class="tab-picker control-setting">
+                            <div class="showroom-control">
+                                <span class="showroom-control-label">Button Icon</span>
+                                <div role="group" class="tab-picker showroom-control-setting">
                                     <input type="radio" id="enable_primary_button_icon" class="tab-option" name="primary-button-icon-select"/>
-                                    <label role="menuitemradio" class="tab-option-content design-testing-control-element" for="enable_primary_button_icon" tabindex="0">
+                                    <label role="menuitemradio" class="tab-option-content showroom-control-element" for="enable_primary_button_icon" tabindex="0">
                                         <span>Enable</span>
                                     </label>
                                     <input type="radio" id="disable_primary_button_icon" class="tab-option" name="primary-button-icon-select" checked/>
-                                    <label role="menuitemradio" class="tab-option-content design-testing-control-element" for="disable_primary_button_icon" tabindex="0">
+                                    <label role="menuitemradio" class="tab-option-content showroom-control-element" for="disable_primary_button_icon" tabindex="0">
                                         <span>Disable</span>
                                     </label>
                                     <span class="slider"></span>
                                 </div>
                             </div>
-                            <div class="design-testing-control">
-                                <span class="control-label">Select Icon</span>
-                                <select class="design-testing-control-element control-setting" id="primary_button_select_icon">
+                            <div class="showroom-control">
+                                <span class="showroom-control-label">Select Icon</span>
+                                <select class="showroom-control-element showroom-control-setting" id="primary_button_select_icon">
                                     {% for icon in icons %}
                                         <option value="{{ icon }}" {% if icon == "move-alt" %}selected{% endif %}>{{ icon }}</option>
                                     {% endfor %}
                                 </select>
                             </div>
-                            <div class="design-testing-control">
-                                <span class="control-label">Button Text</span>
-                                <input class="design-testing-control-element control-setting" type="text" id="primary_button_text" />
+                            <div class="showroom-control">
+                                <span class="showroom-control-label">Button Text</span>
+                                <input class="showroom-control-element showroom-control-setting" type="text" id="primary_button_text" />
                             </div>
                         </div>
 
-                        <div class="design-testing-controls-label">Quiet Button Settings</div>
-                        <div class="design-testing-controls">
-                            <div class="design-testing-control">
-                                <span class="control-label">Button</span>
-                                <div role="group" class="tab-picker control-setting">
+                        <div class="showroom-controls-label">Quiet Button Settings</div>
+                        <div class="showroom-controls">
+                            <div class="showroom-control">
+                                <span class="showroom-control-label">Button</span>
+                                <div role="group" class="tab-picker showroom-control-setting">
                                     <input type="radio" id="enable_quiet_button" class="tab-option" name="quiet-button-select"/>
-                                    <label role="menuitemradio" class="tab-option-content design-testing-control-element" for="enable_quiet_button" tabindex="0">
+                                    <label role="menuitemradio" class="tab-option-content showroom-control-element" for="enable_quiet_button" tabindex="0">
                                         <span>Enable</span>
                                     </label>
                                     <input type="radio" id="disable_quiet_button" class="tab-option" name="quiet-button-select" checked/>
-                                    <label role="menuitemradio" class="tab-option-content design-testing-control-element" for="disable_quiet_button" tabindex="0">
+                                    <label role="menuitemradio" class="tab-option-content showroom-control-element" for="disable_quiet_button" tabindex="0">
                                         <span>Disable</span>
                                     </label>
                                     <span class="slider"></span>
                                 </div>
                             </div>
-                            <div class="design-testing-control">
-                                <span class="control-label">Button Icon</span>
-                                <div role="group" class="tab-picker control-setting">
+                            <div class="showroom-control">
+                                <span class="showroom-control-label">Button Icon</span>
+                                <div role="group" class="tab-picker showroom-control-setting">
                                     <input type="radio" id="enable_quiet_button_icon" class="tab-option" name="quiet-button-icon-select"/>
-                                    <label role="menuitemradio" class="tab-option-content design-testing-control-element" for="enable_quiet_button_icon" tabindex="0">
+                                    <label role="menuitemradio" class="tab-option-content showroom-control-element" for="enable_quiet_button_icon" tabindex="0">
                                         <span>Enable</span>
                                     </label>
                                     <input type="radio" id="disable_quiet_button_icon" class="tab-option" name="quiet-button-icon-select" checked/>
-                                    <label role="menuitemradio" class="tab-option-content design-testing-control-element" for="disable_quiet_button_icon" tabindex="0">
+                                    <label role="menuitemradio" class="tab-option-content showroom-control-element" for="disable_quiet_button_icon" tabindex="0">
                                         <span>Disable</span>
                                     </label>
                                     <span class="slider"></span>
                                 </div>
                             </div>
-                            <div class="design-testing-control">
-                                <span class="control-label">Select Icon</span>
-                                <select class="design-testing-control-element control-setting" id="quiet_button_select_icon">
+                            <div class="showroom-control">
+                                <span class="showroom-control-label">Select Icon</span>
+                                <select class="showroom-control-element showroom-control-setting" id="quiet_button_select_icon">
                                     {% for icon in icons %}
                                         <option value="{{ icon }}" {% if icon == "move-alt" %}selected{% endif %}>{{ icon }}</option>
                                     {% endfor %}
                                 </select>
                             </div>
-                            <div class="design-testing-control">
-                                <span class="control-label">Button Text</span>
-                                <input class="design-testing-control-element control-setting" type="text" id="quiet_button_text" />
+                            <div class="showroom-control">
+                                <span class="showroom-control-label">Button Text</span>
+                                <input class="showroom-control-element showroom-control-setting" type="text" id="quiet_button_text" />
                             </div>
                         </div>
 
-                        <div class="design-testing-controls-label">Borderless Button Settings</div>
-                        <div class="design-testing-controls">
-                            <div class="design-testing-control">
-                                <span class="control-label">Button</span>
-                                <div role="group" class="tab-picker control-setting">
+                        <div class="showroom-controls-label">Borderless Button Settings</div>
+                        <div class="showroom-controls">
+                            <div class="showroom-control">
+                                <span class="showroom-control-label">Button</span>
+                                <div role="group" class="tab-picker showroom-control-setting">
                                     <input type="radio" id="enable_borderless_button" class="tab-option" name="borderless-button-select"/>
-                                    <label role="menuitemradio" class="tab-option-content design-testing-control-element" for="enable_borderless_button" tabindex="0">
+                                    <label role="menuitemradio" class="tab-option-content showroom-control-element" for="enable_borderless_button" tabindex="0">
                                         <span>Enable</span>
                                     </label>
                                     <input type="radio" id="disable_borderless_button" class="tab-option" name="borderless-button-select" checked/>
-                                    <label role="menuitemradio" class="tab-option-content design-testing-control-element" for="disable_borderless_button" tabindex="0">
+                                    <label role="menuitemradio" class="tab-option-content showroom-control-element" for="disable_borderless_button" tabindex="0">
                                         <span>Disable</span>
                                     </label>
                                     <span class="slider"></span>
                                 </div>
                             </div>
-                            <div class="design-testing-control">
-                                <span class="control-label">Button Icon</span>
-                                <div role="group" class="tab-picker control-setting">
+                            <div class="showroom-control">
+                                <span class="showroom-control-label">Button Icon</span>
+                                <div role="group" class="tab-picker showroom-control-setting">
                                     <input type="radio" id="enable_borderless_button_icon" class="tab-option" name="borderless-button-icon-select"/>
-                                    <label role="menuitemradio" class="tab-option-content design-testing-control-element" for="enable_borderless_button_icon" tabindex="0">
+                                    <label role="menuitemradio" class="tab-option-content showroom-control-element" for="enable_borderless_button_icon" tabindex="0">
                                         <span>Enable</span>
                                     </label>
                                     <input type="radio" id="disable_borderless_button_icon" class="tab-option" name="borderless-button-icon-select" checked/>
-                                    <label role="menuitemradio" class="tab-option-content design-testing-control-element" for="disable_borderless_button_icon" tabindex="0">
+                                    <label role="menuitemradio" class="tab-option-content showroom-control-element" for="disable_borderless_button_icon" tabindex="0">
                                         <span>Disable</span>
                                     </label>
                                     <span class="slider"></span>
                                 </div>
                             </div>
-                            <div class="design-testing-control">
-                                <span class="control-label">Select Icon</span>
-                                <select class="design-testing-control-element control-setting" id="borderless_button_select_icon">
+                            <div class="showroom-control">
+                                <span class="showroom-control-label">Select Icon</span>
+                                <select class="showroom-control-element showroom-control-setting" id="borderless_button_select_icon">
                                     {% for icon in icons %}
                                         <option value="{{ icon }}" {% if icon == "move-alt" %}selected{% endif %}>{{ icon }}</option>
                                     {% endfor %}
                                 </select>
                             </div>
-                            <div class="design-testing-control">
-                                <span class="control-label">Button Text</span>
-                                <input class="design-testing-control-element control-setting" type="text" id="borderless_button_text" />
+                            <div class="showroom-control">
+                                <span class="showroom-control-label">Button Text</span>
+                                <input class="showroom-control-element showroom-control-setting" type="text" id="borderless_button_text" />
                             </div>
                         </div>
                     </section>
diff --git a/templates/zerver/development/showroom/buttons.html b/templates/zerver/development/showroom/buttons.html
index 95b566aebf..8c12a398dd 100644
--- a/templates/zerver/development/showroom/buttons.html
+++ b/templates/zerver/development/showroom/buttons.html
@@ -11,15 +11,15 @@
         {% include 'zerver/portico-header.html' %}
         <div class="app portico-page">
             <div class="app-main portico-page-container">
-                <div class="design-testing-wrapper">
-                    <div class="dev-buttons-grid">
-                        <div class="dev-buttons-variant-group">
-                            <div class="dev-action-buttons-label">Action Buttons</div>
-                            <div class="dev-icon-buttons-label">Icon Buttons</div>
+                <div class="showroom-wrapper">
+                    <div class="showroom-button-grid">
+                        <div class="showroom-component-button-intent-group">
+                            <div class="showroom-component-action-button-label">Action Buttons</div>
+                            <div class="showroom-component-icon-button-label">Icon Buttons</div>
                         </div>
-                        <div class="dev-buttons-variant-group">
-                            <div class="dev-buttons-variant-label">Neutral Variant</div>
-                            <div class="dev-action-buttons-group">
+                        <div class="showroom-component-button-intent-group">
+                            <div class="showroom-component-button-intent-label">Neutral Variant</div>
+                            <div class="showroom-component-action-button-group">
                                 <button class="action-button action-button-primary-neutral" tabindex=0>
                                     <i class="zulip-icon zulip-icon-move-alt"></i>
                                     <span class="action-button-label">Button joy</span>
@@ -33,7 +33,7 @@
                                     <span class="action-button-label">Button joy</span>
                                 </button>
                             </div>
-                            <div class="dev-icon-buttons-group">
+                            <div class="showroom-component-icon-button-group">
                                 <button class="icon-button icon-button-neutral" tabindex=0>
                                     <i class="zulip-icon zulip-icon-move-alt"></i>
                                 </button>
@@ -42,9 +42,9 @@
                                 </button>
                             </div>
                         </div>
-                        <div class="dev-buttons-variant-group">
-                            <div class="dev-buttons-variant-label">Brand Variant</div>
-                            <div class="dev-action-buttons-group">
+                        <div class="showroom-component-button-intent-group">
+                            <div class="showroom-component-button-intent-label">Brand Variant</div>
+                            <div class="showroom-component-action-button-group">
                                 <button class="action-button action-button-primary-brand" tabindex=0>
                                     <i class="zulip-icon zulip-icon-move-alt"></i>
                                     <span class="action-button-label">Button joy</span>
@@ -58,7 +58,7 @@
                                     <span class="action-button-label">Button joy</span>
                                 </button>
                             </div>
-                            <div class="dev-icon-buttons-group">
+                            <div class="showroom-component-icon-button-group">
                                 <button class="icon-button icon-button-brand" tabindex=0>
                                     <i class="zulip-icon zulip-icon-move-alt"></i>
                                 </button>
@@ -67,9 +67,9 @@
                                 </button>
                             </div>
                         </div>
-                        <div class="dev-buttons-variant-group">
-                            <div class="dev-buttons-variant-label">Info Variant</div>
-                            <div class="dev-action-buttons-group">
+                        <div class="showroom-component-button-intent-group">
+                            <div class="showroom-component-button-intent-label">Info Variant</div>
+                            <div class="showroom-component-action-button-group">
                                 <button class="action-button action-button-primary-info" tabindex=0>
                                     <i class="zulip-icon zulip-icon-move-alt"></i>
                                     <span class="action-button-label">Button joy</span>
@@ -83,7 +83,7 @@
                                     <span class="action-button-label">Button joy</span>
                                 </button>
                             </div>
-                            <div class="dev-icon-buttons-group">
+                            <div class="showroom-component-icon-button-group">
                                 <button class="icon-button icon-button-info" tabindex=0>
                                     <i class="zulip-icon zulip-icon-move-alt"></i>
                                 </button>
@@ -92,9 +92,9 @@
                                 </button>
                             </div>
                         </div>
-                        <div class="dev-buttons-variant-group">
-                            <div class="dev-buttons-variant-label">Success Variant</div>
-                            <div class="dev-action-buttons-group">
+                        <div class="showroom-component-button-intent-group">
+                            <div class="showroom-component-button-intent-label">Success Variant</div>
+                            <div class="showroom-component-action-button-group">
                                 <button class="action-button action-button-primary-success" tabindex=0>
                                     <i class="zulip-icon zulip-icon-move-alt"></i>
                                     <span class="action-button-label">Button joy</span>
@@ -108,7 +108,7 @@
                                     <span class="action-button-label">Button joy</span>
                                 </button>
                             </div>
-                            <div class="dev-icon-buttons-group">
+                            <div class="showroom-component-icon-button-group">
                                 <button class="icon-button icon-button-success" tabindex=0>
                                     <i class="zulip-icon zulip-icon-move-alt"></i>
                                 </button>
@@ -117,9 +117,9 @@
                                 </button>
                             </div>
                         </div>
-                        <div class="dev-buttons-variant-group">
-                            <div class="dev-buttons-variant-label">Warning Variant</div>
-                            <div class="dev-action-buttons-group">
+                        <div class="showroom-component-button-intent-group">
+                            <div class="showroom-component-button-intent-label">Warning Variant</div>
+                            <div class="showroom-component-action-button-group">
                                 <button class="action-button action-button-primary-warning" tabindex=0>
                                     <i class="zulip-icon zulip-icon-move-alt"></i>
                                     <span class="action-button-label">Button joy</span>
@@ -133,7 +133,7 @@
                                     <span class="action-button-label">Button joy</span>
                                 </button>
                             </div>
-                            <div class="dev-icon-buttons-group">
+                            <div class="showroom-component-icon-button-group">
                                 <button class="icon-button icon-button-warning" tabindex=0>
                                     <i class="zulip-icon zulip-icon-move-alt"></i>
                                 </button>
@@ -142,9 +142,9 @@
                                 </button>
                             </div>
                         </div>
-                        <div class="dev-buttons-variant-group">
-                            <div class="dev-buttons-variant-label">Danger Variant</div>
-                            <div class="dev-action-buttons-group">
+                        <div class="showroom-component-button-intent-group">
+                            <div class="showroom-component-button-intent-label">Danger Variant</div>
+                            <div class="showroom-component-action-button-group">
                                 <button class="action-button action-button-primary-danger" tabindex=0>
                                     <i class="zulip-icon zulip-icon-move-alt"></i>
                                     <span class="action-button-label">Button joy</span>
@@ -158,7 +158,7 @@
                                     <span class="action-button-label">Button joy</span>
                                 </button>
                             </div>
-                            <div class="dev-icon-buttons-group">
+                            <div class="showroom-component-icon-button-group">
                                 <button class="icon-button icon-button-danger" tabindex=0>
                                     <i class="zulip-icon zulip-icon-move-alt"></i>
                                 </button>
@@ -168,58 +168,58 @@
                             </div>
                         </div>
                     </div>
-                    <section class="design-controls-section">
-                        <div class="design-testing-controls-label">Controls</div>
-                        <div class="design-testing-controls">
-                            <div class="design-testing-control">
-                                <span class="control-label">Dark Theme</span>
+                    <section class="showroom-controls-section">
+                        <div class="showroom-controls-label">Controls</div>
+                        <div class="showroom-controls">
+                            <div class="showroom-control">
+                                <span class="showroom-control-label">Dark Theme</span>
                                 <div role="group" class="tab-picker">
-                                    <input type="radio" data-theme="dark" id="dev_enable_dark_theme_buttons" class="tab-option" name="dark-theme-select"/>
-                                    <label role="menuitemradio" class="tab-option-content design-testing-control-element" for="dev_enable_dark_theme_buttons" tabindex="0">
+                                    <input type="radio" data-theme="dark" id="showroom_enable_dark_theme_buttons" class="tab-option" name="showroom-dark-theme-select"/>
+                                    <label role="menuitemradio" class="tab-option-content showroom-control-element" for="showroom_enable_dark_theme_buttons" tabindex="0">
                                         <span>Enable</span>
                                     </label>
-                                    <input type="radio" data-theme="light" id="dev_disable_dark_theme_buttons" class="tab-option" name="dark-theme-select" checked/>
-                                    <label role="menuitemradio" class="tab-option-content design-testing-control-element" for="dev_disable_dark_theme_buttons" tabindex="0">
+                                    <input type="radio" data-theme="light" id="showroom_disable_dark_theme_buttons" class="tab-option" name="showroom-dark-theme-select" checked/>
+                                    <label role="menuitemradio" class="tab-option-content showroom-control-element" for="showroom_disable_dark_theme_buttons" tabindex="0">
                                         <span>Disable</span>
                                     </label>
                                     <span class="slider"></span>
                                 </div>
                             </div>
-                            <div class="design-testing-control">
-                                <span class="control-label">Select Background</span>
-                                <select class="design-testing-control-element select_background">
+                            <div class="showroom-control">
+                                <span class="showroom-control-label">Select Background</span>
+                                <select class="showroom-control-element select_background">
                                     {% for background in background_colors %}
                                         <option value="{{ background.css_var }}" {% if background.css_var == "--color-background" %}selected{% endif %}>{{ background.name }}</option>
                                     {% endfor %}
                                 </select>
                             </div>
-                            <div class="design-testing-control">
-                                <span class="control-label">Action Button Icon</span>
+                            <div class="showroom-control">
+                                <span class="showroom-control-label">Action Button Icon</span>
                                 <div role="group" class="tab-picker">
                                     <input type="radio" id="enable_button_icon" class="tab-option" name="button-icon-select" checked/>
-                                    <label role="menuitemradio" class="tab-option-content design-testing-control-element" for="enable_button_icon" tabindex="0">
+                                    <label role="menuitemradio" class="tab-option-content showroom-control-element" for="enable_button_icon" tabindex="0">
                                         <span>Enable</span>
                                     </label>
                                     <input type="radio" id="disable_button_icon" class="tab-option" name="button-icon-select"/>
-                                    <label role="menuitemradio" class="tab-option-content design-testing-control-element" for="disable_button_icon" tabindex="0">
+                                    <label role="menuitemradio" class="tab-option-content showroom-control-element" for="disable_button_icon" tabindex="0">
                                         <span>Disable</span>
                                     </label>
                                     <span class="slider"></span>
                                 </div>
                             </div>
-                            <div class="design-testing-control">
-                                <span class="control-label">Select Icon</span>
-                                <select class="design-testing-control-element" id="button_select_icon">
+                            <div class="showroom-control">
+                                <span class="showroom-control-label">Select Icon</span>
+                                <select class="showroom-control-element" id="button_select_icon">
                                     {% for icon in icons %}
                                         <option value="{{ icon }}" {% if icon == "move-alt" %}selected{% endif %}>{{ icon }}</option>
                                     {% endfor %}
                                 </select>
                             </div>
-                            <div class="design-testing-control">
-                                <span class="control-label">Action Button Text</span>
-                                <div class="control-setting control-setting-multiple">
-                                    <input class="design-testing-control-element" type="text" id="button_text" />
-                                    <button class="design-testing-control-element" id="clear_button_text">Reset</button>
+                            <div class="showroom-control">
+                                <span class="showroom-control-label">Action Button Text</span>
+                                <div class="showroom-control-setting showroom-control-setting-multiple">
+                                    <input class="showroom-control-element" type="text" id="button_text" />
+                                    <button class="showroom-control-element" id="clear_button_text">Reset</button>
                                 </div>
                             </div>
                         </div>
diff --git a/templates/zerver/portico-header.html b/templates/zerver/portico-header.html
index f6d0486788..0709e6ebe0 100644
--- a/templates/zerver/portico-header.html
+++ b/templates/zerver/portico-header.html
@@ -23,8 +23,8 @@
                 {% if page_is_policy_center %}
                 <span class="light portico-header-text"> | <a href="{{ root_domain_url }}/policies/">{{ doc_root_title }}</a></span>
                 {% endif %}
-                {% if page_is_design_testing %}
-                <span class="light portico-header-text"> | <a href="{{ root_domain_url }}/devtools/{{ design_component }}">{{ doc_root_title }}</a></span>
+                {% if page_is_showroom %}
+                <span class="light portico-header-text"> | <a href="{{ root_domain_url }}/devtools/{{ showroom_component }}">{{ doc_root_title }}</a></span>
                 {% endif %}
             </div>
             {% endif %}
diff --git a/web/src/portico/showroom.ts b/web/src/portico/showroom.ts
index 61ace4289c..408a4f6962 100644
--- a/web/src/portico/showroom.ts
+++ b/web/src/portico/showroom.ts
@@ -275,10 +275,10 @@ const update_buttons = (buttons: ActionButton[]): void => {
 };
 
 function update_banner(): void {
-    $("#dev_navbar_alerts_wrapper").html(banner_html(current_banner));
-    $("#dev_normal_banner_wrapper").html(banner_html(custom_normal_banner));
+    $("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
+    $("#showroom_component_banner_default_wrapper").html(banner_html(custom_normal_banner));
 
-    $("#banner_select_intent").val(current_banner.intent);
+    $("#showroom_component_banner_select_intent").val(current_banner.intent);
     $("#banner_label").val(current_banner.label.toString());
     update_buttons(current_banner.buttons);
     if (current_banner.close_button) {
@@ -292,7 +292,7 @@ let current_banner = alert_banners["custom-banner"]!;
 
 $(window).on("load", () => {
     // Code for /devtools/buttons design testing page.
-    $("input[name='dark-theme-select']").on("change", (e) => {
+    $("input[name='showroom-dark-theme-select']").on("change", (e) => {
         if ($(e.target).data("theme") === "dark") {
             $(":root").addClass("dark-theme");
         } else {
@@ -341,12 +341,12 @@ $(window).on("load", () => {
         $banner_select.append($("<option>").val(key).text(key));
     }
 
-    const $banner_intent_select = $("#banner_select_intent");
+    const $banner_intent_select = $("#showroom_component_banner_select_intent");
     for (const intent of component_intents) {
         $banner_intent_select.append($("<option>").val(intent).text(intent));
     }
 
-    $("#banner_select_intent").on("change", function (this: HTMLElement) {
+    $("#showroom_component_banner_select_intent").on("change", function (this: HTMLElement) {
         const selected_intent = $(this).val()?.toString();
         if (selected_intent === undefined) {
             return;
@@ -361,9 +361,9 @@ $(window).on("load", () => {
             for (const button of custom_normal_banner.buttons) {
                 button.intent = custom_normal_banner.intent;
             }
-            $("#dev_normal_banner_wrapper").html(banner_html(custom_normal_banner));
+            $("#showroom_component_banner_default_wrapper").html(banner_html(custom_normal_banner));
         }
-        $("#dev_navbar_alerts_wrapper").html(banner_html(current_banner));
+        $("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
     });
 
     $banner_select.on("change", function (this: HTMLElement) {
@@ -381,20 +381,20 @@ $(window).on("load", () => {
         } else {
             current_banner.close_button = false;
         }
-        $("#dev_navbar_alerts_wrapper").html(banner_html(current_banner));
+        $("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
         if (current_banner.process === "custom-banner") {
             custom_normal_banner.close_button = current_banner.close_button;
-            $("#dev_normal_banner_wrapper").html(banner_html(custom_normal_banner));
+            $("#showroom_component_banner_default_wrapper").html(banner_html(custom_normal_banner));
         }
     });
 
     $("#banner_label").on("input", function (this: HTMLElement) {
         const banner_label = $(this).val()?.toString() ?? "";
         current_banner.label = banner_label;
-        $("#dev_navbar_alerts_wrapper").html(banner_html(current_banner));
+        $("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
         if (current_banner.process === "custom-banner") {
             custom_normal_banner.label = banner_label;
-            $("#dev_normal_banner_wrapper").html(banner_html(custom_normal_banner));
+            $("#showroom_component_banner_default_wrapper").html(banner_html(custom_normal_banner));
         }
     });
 
@@ -423,10 +423,10 @@ $(window).on("load", () => {
             );
         }
         sortButtons(current_banner.buttons);
-        $("#dev_navbar_alerts_wrapper").html(banner_html(current_banner));
+        $("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
         if (current_banner.process === "custom-banner") {
             custom_normal_banner.buttons = current_banner.buttons;
-            $("#dev_normal_banner_wrapper").html(banner_html(custom_normal_banner));
+            $("#showroom_component_banner_default_wrapper").html(banner_html(custom_normal_banner));
         }
     });
 
@@ -440,10 +440,10 @@ $(window).on("load", () => {
         } else {
             delete primary_button.icon;
         }
-        $("#dev_navbar_alerts_wrapper").html(banner_html(current_banner));
+        $("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
         if (current_banner.process === "custom-banner") {
             custom_normal_banner.buttons = current_banner.buttons;
-            $("#dev_normal_banner_wrapper").html(banner_html(custom_normal_banner));
+            $("#showroom_component_banner_default_wrapper").html(banner_html(custom_normal_banner));
         }
     });
 
@@ -456,10 +456,10 @@ $(window).on("load", () => {
             return;
         }
         primary_button.icon = $(this).val()?.toString() ?? "";
-        $("#dev_navbar_alerts_wrapper").html(banner_html(current_banner));
+        $("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
         if (current_banner.process === "custom-banner") {
             custom_normal_banner.buttons = current_banner.buttons;
-            $("#dev_normal_banner_wrapper").html(banner_html(custom_normal_banner));
+            $("#showroom_component_banner_default_wrapper").html(banner_html(custom_normal_banner));
         }
     });
 
@@ -469,10 +469,10 @@ $(window).on("load", () => {
             return;
         }
         primary_button.label = $(this).val()?.toString() ?? "";
-        $("#dev_navbar_alerts_wrapper").html(banner_html(current_banner));
+        $("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
         if (current_banner.process === "custom-banner") {
             custom_normal_banner.buttons = current_banner.buttons;
-            $("#dev_normal_banner_wrapper").html(banner_html(custom_normal_banner));
+            $("#showroom_component_banner_default_wrapper").html(banner_html(custom_normal_banner));
         }
     });
 
@@ -501,10 +501,10 @@ $(window).on("load", () => {
                 (button) => button.type !== "quiet",
             );
         }
-        $("#dev_navbar_alerts_wrapper").html(banner_html(current_banner));
+        $("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
         if (current_banner.process === "custom-banner") {
             custom_normal_banner.buttons = current_banner.buttons;
-            $("#dev_normal_banner_wrapper").html(banner_html(custom_normal_banner));
+            $("#showroom_component_banner_default_wrapper").html(banner_html(custom_normal_banner));
         }
     });
 
@@ -518,10 +518,10 @@ $(window).on("load", () => {
         } else {
             delete quiet_button.icon;
         }
-        $("#dev_navbar_alerts_wrapper").html(banner_html(current_banner));
+        $("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
         if (current_banner.process === "custom-banner") {
             custom_normal_banner.buttons = current_banner.buttons;
-            $("#dev_normal_banner_wrapper").html(banner_html(custom_normal_banner));
+            $("#showroom_component_banner_default_wrapper").html(banner_html(custom_normal_banner));
         }
     });
 
@@ -534,10 +534,10 @@ $(window).on("load", () => {
             return;
         }
         quiet_button.icon = $(this).val()?.toString() ?? "";
-        $("#dev_navbar_alerts_wrapper").html(banner_html(current_banner));
+        $("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
         if (current_banner.process === "custom-banner") {
             custom_normal_banner.buttons = current_banner.buttons;
-            $("#dev_normal_banner_wrapper").html(banner_html(custom_normal_banner));
+            $("#showroom_component_banner_default_wrapper").html(banner_html(custom_normal_banner));
         }
     });
 
@@ -547,10 +547,10 @@ $(window).on("load", () => {
             return;
         }
         quiet_button.label = $(this).val()?.toString() ?? "";
-        $("#dev_navbar_alerts_wrapper").html(banner_html(current_banner));
+        $("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
         if (current_banner.process === "custom-banner") {
             custom_normal_banner.buttons = current_banner.buttons;
-            $("#dev_normal_banner_wrapper").html(banner_html(custom_normal_banner));
+            $("#showroom_component_banner_default_wrapper").html(banner_html(custom_normal_banner));
         }
     });
 
@@ -579,10 +579,10 @@ $(window).on("load", () => {
                 (button) => button.type !== "borderless",
             );
         }
-        $("#dev_navbar_alerts_wrapper").html(banner_html(current_banner));
+        $("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
         if (current_banner.process === "custom-banner") {
             custom_normal_banner.buttons = current_banner.buttons;
-            $("#dev_normal_banner_wrapper").html(banner_html(custom_normal_banner));
+            $("#showroom_component_banner_default_wrapper").html(banner_html(custom_normal_banner));
         }
     });
 
@@ -598,10 +598,10 @@ $(window).on("load", () => {
         } else {
             delete borderless_button.icon;
         }
-        $("#dev_navbar_alerts_wrapper").html(banner_html(current_banner));
+        $("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
         if (current_banner.process === "custom-banner") {
             custom_normal_banner.buttons = current_banner.buttons;
-            $("#dev_normal_banner_wrapper").html(banner_html(custom_normal_banner));
+            $("#showroom_component_banner_default_wrapper").html(banner_html(custom_normal_banner));
         }
     });
 
@@ -616,10 +616,10 @@ $(window).on("load", () => {
             return;
         }
         borderless_button.icon = $(this).val()?.toString() ?? "";
-        $("#dev_navbar_alerts_wrapper").html(banner_html(current_banner));
+        $("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
         if (current_banner.process === "custom-banner") {
             custom_normal_banner.buttons = current_banner.buttons;
-            $("#dev_normal_banner_wrapper").html(banner_html(custom_normal_banner));
+            $("#showroom_component_banner_default_wrapper").html(banner_html(custom_normal_banner));
         }
     });
 
@@ -631,10 +631,10 @@ $(window).on("load", () => {
             return;
         }
         borderless_button.label = $(this).val()?.toString() ?? "";
-        $("#dev_navbar_alerts_wrapper").html(banner_html(current_banner));
+        $("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
         if (current_banner.process === "custom-banner") {
             custom_normal_banner.buttons = current_banner.buttons;
-            $("#dev_normal_banner_wrapper").html(banner_html(custom_normal_banner));
+            $("#showroom_component_banner_default_wrapper").html(banner_html(custom_normal_banner));
         }
     });
 });
diff --git a/web/styles/portico/showroom.css b/web/styles/portico/showroom.css
index 8284674f71..fdc26ab9a6 100644
--- a/web/styles/portico/showroom.css
+++ b/web/styles/portico/showroom.css
@@ -17,14 +17,14 @@ body {
     background-color: var(--color-background);
 }
 
-.design-testing-wrapper {
+.showroom-wrapper {
     display: flex;
     flex-flow: column;
     gap: 20px;
     padding: 40px 20px;
 }
 
-.design-controls-section {
+.showroom-controls-section {
     display: grid;
     grid-template-columns: [control-name-start] max-content [control-name-end control-input-start] 1fr [control-input-end];
     gap: 10px;
@@ -32,7 +32,7 @@ body {
     width: min(100%, 500px);
 }
 
-.design-testing-controls {
+.showroom-controls {
     display: grid;
     grid-template-columns: subgrid;
     grid-column: control-name-start / control-input-end;
@@ -44,29 +44,29 @@ body {
     width: 100%;
 }
 
-.design-testing-control {
+.showroom-control {
     display: grid;
     grid-template-columns: subgrid;
     grid-column: control-name-start / control-input-end;
     gap: 10px;
 }
 
-.design-testing-control-element {
+.showroom-control-element {
     font-size: inherit;
     font-family: inherit;
 }
 
-.control-label {
+.showroom-control-label {
     cursor: pointer;
     grid-column: control-name-start / control-name-end;
     align-self: center;
 }
 
-.control-setting {
+.showroom-control-setting {
     grid-column: control-input-start / control-input-end;
 }
 
-.control-setting-multiple {
+.showroom-control-setting-multiple {
     display: flex;
     align-items: center;
     gap: 10px;
@@ -76,60 +76,60 @@ body {
     display: none !important;
 }
 
-.design-testing-controls-label {
+.showroom-controls-label {
     grid-column: control-name-start / control-input-end;
     margin-top: 10px;
     font-size: 1.4em;
     font-weight: 600;
 }
 
-.dev-buttons-grid {
+.showroom-button-grid {
     display: grid;
-    grid-template-areas: "dev-buttons-variant-name dev-action-buttons-group dev-icon-buttons-group";
+    grid-template-areas: "showroom-component-button-intent-label showroom-component-action-button-group showroom-component-icon-button-group";
     grid-template-columns: repeat(3, max-content);
     gap: 15px 30px;
 }
 
-.dev-buttons-variant-group {
+.showroom-component-button-intent-group {
     display: grid;
     grid-template-columns: subgrid;
     grid-column: 1 / -1;
     place-items: center start;
 }
 
-.dev-buttons-variant-label {
-    grid-area: dev-buttons-variant-name;
+.showroom-component-button-intent-label {
+    grid-area: showroom-component-button-intent-label;
 }
 
-.dev-action-buttons-group,
-.dev-action-buttons-label {
-    grid-area: dev-action-buttons-group;
+.showroom-component-action-button-group,
+.showroom-component-action-button-label {
+    grid-area: showroom-component-action-button-group;
 }
 
-.dev-icon-buttons-group,
-.dev-icon-buttons-label {
-    grid-area: dev-icon-buttons-group;
+.showroom-component-icon-button-group,
+.showroom-component-icon-button-label {
+    grid-area: showroom-component-icon-button-group;
 }
 
-.dev-action-buttons-group,
-.dev-icon-buttons-group {
+.showroom-component-action-button-group,
+.showroom-component-icon-button-group {
     display: flex;
     flex-flow: row wrap;
     gap: 15px;
 }
 
-.dev-buttons-variant-label,
-.dev-action-buttons-label,
-.dev-icon-buttons-label {
+.showroom-component-button-intent-label,
+.showroom-component-action-button-label,
+.showroom-component-icon-button-label {
     font-size: 1.1em;
     font-weight: 500;
 }
 
-#banner_select_intent {
+#showroom_component_banner_select_intent {
     text-transform: capitalize;
 }
 
-#dev_normal_banner_wrapper {
+#showroom_component_banner_default_wrapper {
     width: min(100%, 800px);
     margin: 0 auto;
 }
diff --git a/zerver/views/development/showroom.py b/zerver/views/development/showroom.py
index 9b826424aa..acf4beb1dd 100644
--- a/zerver/views/development/showroom.py
+++ b/zerver/views/development/showroom.py
@@ -28,8 +28,8 @@ def showroom_component_buttons(request: HttpRequest) -> HttpResponse:
     context = {
         "background_colors": background_colors,
         "icons": get_svg_filenames(),
-        "page_is_design_testing": True,
-        "design_component": "buttons",
+        "page_is_showroom": True,
+        "showroom_component": "buttons",
         "doc_root_title": "Button styles browser",
         # We set isolated_page to avoid clutter from footer/header.
         "isolated_page": True,
@@ -41,8 +41,8 @@ def showroom_component_banners(request: HttpRequest) -> HttpResponse:
     context = {
         "background_colors": background_colors,
         "icons": get_svg_filenames(),
-        "page_is_design_testing": True,
-        "design_component": "banners",
+        "page_is_showroom": True,
+        "showroom_component": "banners",
         "doc_root_title": "Banner styles browser",
         # We set isolated_page to avoid clutter from footer/header.
         "isolated_page": True,
diff --git a/zproject/dev_urls.py b/zproject/dev_urls.py
index a06f54821a..8958a37805 100644
--- a/zproject/dev_urls.py
+++ b/zproject/dev_urls.py
@@ -98,7 +98,7 @@ urls = [
     path("flush_caches", remove_caches),
     # Redirect camo URLs for development
     path("external_content/<digest>/<received_url>", handle_camo_url),
-    # Endpoints for UI components sandbox.
+    # Endpoints for Showroom components.
     path("devtools/buttons/", showroom_component_buttons),
     path("devtools/banners/", showroom_component_banners),
 ]