UI polish: CompactToggleButtons

newIDE/app/src/UI/CompactToggleButtons/CompactToggleButtons.module.css

@@ -10,7 +10,7 @@
 }
 
 .compactToggleButton {
-  border-radius: 4px;
+  border-radius: 0;
   color: var(--theme-text-default-color);
   background-color: var(--theme-text-field-default-background-color);
   transition: box-shadow 0.1s;
@@ -20,7 +20,7 @@
   justify-content: center;
   flex: 1;
   min-width: 0px;
-  margin: 3px;
+  padding: 3px;
   border: 0;
 }
 
@@ -41,9 +41,9 @@
 
 .separator {
   background-color: var(--theme-text-field-disabled-color);
-  height: 15px;
+  align-self: stretch;
   width: 1px;
-  margin: 0 1px;
+  margin: 0;
 }
 
 /* svg tag is needed to be first priority compared to Material UI Custom SVG icon classes*/
@@ -53,6 +53,14 @@ svg.icon {
   transition: color 0.1s linear;
 }
 
+.compactToggleButton.first {
+  border-radius: 4px 0 0 4px;
+}
+
+.compactToggleButton.last {
+  border-radius: 0 4px 4px 0;
+}
+
 .compactToggleButton.active {
   background-color: var(--theme-icon-button-selected-background-color);
 }

newIDE/app/src/UI/CompactToggleButtons/index.js

@@ -45,6 +45,8 @@ const CompactToggleButtons = ({
             <button
               className={classNames({
                 [classes.compactToggleButton]: true,
+                [classes.first]: index === 0,
+                [classes.last]: index === buttons.length - 1,
                 [classes.active]: button.isActive,
               })}
               onClick={button.onClick}

newIDE/app/src/stories/componentStories/UI/CompactToggleButtons.stories.js

@@ -17,7 +17,7 @@ export default {
   decorators: [paperDecorator, muiDecorator],
 };
 
-export const Default = (): React.Node => {
+export const MultiSelect = (): React.Node => {
   const [value, setValue] = React.useState<boolean>(false);
   const [value1, setValue1] = React.useState<boolean>(true);
   const [value2, setValue2] = React.useState<boolean>(false);
@@ -150,3 +150,111 @@ export const Default = (): React.Node => {
     </ElementHighlighterProvider>
   );
 };
+
+/**
+ * Preferred usage pattern: exclusive selection (radio-like).
+ * Only one option can be active at a time, and clicking the active option
+ * does not deselect it. This prevents the component from acting as an on/off
+ * toggle on a single element, which goes against standardized UI patterns
+ * for segmented controls.
+ */
+export const ExclusiveSelection = (): React.Node => {
+  const [selectedTwo, setSelectedTwo] = React.useState<string>('button1');
+  const [selectedThree, setSelectedThree] = React.useState<string>('button1');
+  return (
+    <ElementHighlighterProvider
+      elements={[
+        { label: '2 items exclusive', id: 'two-items-exclusive' },
+        { label: '3 items exclusive', id: 'three-items-exclusive' },
+        {
+          label: '3 items exclusive, no separator',
+          id: 'three-items-exclusive-no-sep',
+        },
+      ]}
+    >
+      <ColumnStackLayout expand>
+        <Text size="sub-title">Two items (exclusive)</Text>
+        <CompactToggleButtons
+          expand
+          id="two-items-exclusive"
+          buttons={[
+            {
+              id: 'button1',
+              renderIcon: className => <Layers className={className} />,
+              tooltip: 'Layer 1',
+              onClick: () => setSelectedTwo('button1'),
+              isActive: selectedTwo === 'button1',
+            },
+            {
+              id: 'button2',
+              renderIcon: className => <Layers className={className} />,
+              tooltip: 'Layer 2',
+              onClick: () => setSelectedTwo('button2'),
+              isActive: selectedTwo === 'button2',
+            },
+          ]}
+        />
+        <Text size="sub-title">Three items (exclusive)</Text>
+        <CompactToggleButtons
+          expand
+          id="three-items-exclusive"
+          buttons={[
+            {
+              id: 'button1',
+              renderIcon: className => <Layers className={className} />,
+              tooltip: 'Layer 1',
+              onClick: () => setSelectedThree('button1'),
+              isActive: selectedThree === 'button1',
+            },
+            {
+              id: 'button2',
+              renderIcon: className => <Layers className={className} />,
+              tooltip: 'Layer 2',
+              onClick: () => setSelectedThree('button2'),
+              isActive: selectedThree === 'button2',
+            },
+            {
+              id: 'button3',
+              renderIcon: className => <Layers className={className} />,
+              tooltip: 'Layer 3',
+              onClick: () => setSelectedThree('button3'),
+              isActive: selectedThree === 'button3',
+            },
+          ]}
+        />
+        <Text size="sub-title">
+          Three items, exclusive, not expanded and no separators
+        </Text>
+        <Line expand noMargin>
+          <CompactToggleButtons
+            noSeparator
+            id="three-items-exclusive-no-sep"
+            buttons={[
+              {
+                id: 'button1',
+                renderIcon: className => <Layers className={className} />,
+                tooltip: 'Layer 1',
+                onClick: () => setSelectedThree('button1'),
+                isActive: selectedThree === 'button1',
+              },
+              {
+                id: 'button2',
+                renderIcon: className => <Layers className={className} />,
+                tooltip: 'Layer 2',
+                onClick: () => setSelectedThree('button2'),
+                isActive: selectedThree === 'button2',
+              },
+              {
+                id: 'button3',
+                renderIcon: className => <Layers className={className} />,
+                tooltip: 'Layer 3',
+                onClick: () => setSelectedThree('button3'),
+                isActive: selectedThree === 'button3',
+              },
+            ]}
+          />
+        </Line>
+      </ColumnStackLayout>
+    </ElementHighlighterProvider>
+  );
+};