[SegmentedControl]: Add variable to set width of control (#792)

This will default to the container being `fit-content`. If the width is wider than the necessary width of it's children, then the children will evenly divide across the total width.
brave · Aug 27, 2024 · 862f4d1 · 862f4d1
1 parent 1b2767a
commit 862f4d1
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 12 deletions.
diff --git a/examples/plain-html/index.html b/examples/plain-html/index.html
@@ -12,6 +12,7 @@
   <style>
     body {
       background: var(--leo-color-page-background);
+      color: var(--leo-color-text-primary);
     }
 
     .component-container {
@@ -50,6 +51,10 @@
     .navigation-action-items {
       padding-top: var(--leo-spacing-m);
     }
+
+    .segmented-control-full {
+      --leo-segmented-control-width: 100%;
+    }
   </style>
 </head>
 
@@ -99,7 +104,9 @@
     const dropdown = document.querySelector('leo-dropdown')
     const dropdownSelected = document.querySelector('leo-dropdown [slot="value"]')
     const input = document.querySelector('leo-input')
-    const segmentedControl = document.querySelector('leo-segmentedcontrol');
+    const segmentedControlExample = document.querySelector('#example-segmented-control');
+    const segmentedControlToggle = segmentedControlExample.querySelector('leo-toggle');
+    const segmentedControl = segmentedControlExample.querySelector('leo-segmentedcontrol');
 
     function updateSelectedOption(e) {
       for (const radio of radios)
@@ -147,6 +154,10 @@
       toggleButton.textContent = e.value
     })
 
+    segmentedControlToggle.addEventListener('change', () => {
+      segmentedControl.classList.toggle('segmented-control-full')
+    })
+
     dialogButton.addEventListener('click', () => {
       dialog.isOpen = true
       dialogButton.isDisabled = true
@@ -245,16 +256,19 @@
         <leo-button kind="filled">Primary</leo-button>
       </div>
     </leo-dialog>
-    <leo-segmentedcontrol value="full">
-      <leo-controlitem value="full">
-        Full
-        <leo-icon slot="icon-after" name="fullscreen-on"></leo-icon>
-      </leo-controlitem>
-      <leo-controlitem value="simple">
-        Simple
-        <leo-icon slot="icon-after" name="fullscreen-off"></leo-icon>
-      </leo-controlitem>
-    </leo-segmentedcontrol>
+    <div id="example-segmented-control">
+      <leo-toggle>Toggle segmented control from automatic to parent's width</leo-toggle>
+      <leo-segmentedcontrol value="full">
+        <leo-controlitem value="full">
+          Full
+          <leo-icon slot="icon-after" name="fullscreen-on"></leo-icon>
+        </leo-controlitem>
+        <leo-controlitem value="simple">
+          Simple
+          <leo-icon slot="icon-after" name="fullscreen-off"></leo-icon>
+        </leo-controlitem>
+      </leo-segmentedcontrol>
+    </div>
 
     <div class="navigation-container">
       <leo-navigation>

diff --git a/src/components/controlItem/controlItem.svelte b/src/components/controlItem/controlItem.svelte
@@ -18,11 +18,14 @@
   :host {
     display: flex;
     height: 100%;
+    flex: 1 0 0;
   }
   .leo-control-item {
     all: unset;
     display: flex;
     align-items: center;
+    justify-content: center;
+    flex: 1 0 0;
     box-sizing: border-box;
     height: 100%;
     border-radius: var(--leo-control-item-radius);

diff --git a/src/components/segmentedControl/segmentedControl.stories.svelte b/src/components/segmentedControl/segmentedControl.stories.svelte
@@ -16,6 +16,11 @@
   title="Components/SegmentedControl"
   component={SegmentedControl}
   argTypes={{
+    '--leo-segmented-control-width': {
+      control: 'text',
+      type: 'string',
+      description: 'The width for the entire control (defaults to `fit-content`).'
+    },
     '--leo-control-padding': {
       control: 'text',
       type: 'string',

diff --git a/src/components/segmentedControl/segmentedControl.svelte b/src/components/segmentedControl/segmentedControl.svelte
@@ -107,6 +107,11 @@
   :host {
     display: flex;
     position: relative;
+    width: var(--leo-segmented-control-width, fit-content);
+
+    & .leo-segmented-control {
+        width: 100%;
+    }
   }
 
   .leo-segmented-control {
@@ -122,7 +127,8 @@
     --leo-control-item-font: var(--leo-font-components-button-default);
 
     display: flex;
-    max-width: max-content;
+    min-width: max-content;
+    width: var(--leo-segmented-control-width, fit-content);
     align-items: center;
     position: relative;