button component: adds button-group component

pkgs/webview-ui/app/src/components/button/css/button-dark.css

@@ -0,0 +1,31 @@
+/* button DARK and states */
+
+.button--dark {
+  @apply border border-solid border-secondary-950 bg-primary-800 text-white;
+
+  box-shadow: inset 1px 1px theme(backgroundColor.secondary.700);
+
+  &:disabled {
+    @apply disabled:bg-secondary-200 disabled:text-secondary-700 disabled:border-secondary-300;
+  }
+
+  & .button__icon {
+    color: theme(textColor.secondary.200);
+  }
+}
+
+.button--dark-hover:hover {
+  @apply hover:bg-secondary-900;
+}
+
+.button--dark-focus:focus {
+  @apply focus:border-secondary-900;
+}
+
+.button--dark-active:active {
+  @apply focus:border-secondary-900;
+}
+
+.button--dark-active:active {
+  @apply active:border-secondary-900 active:shadow-inner-primary-active;
+}

pkgs/webview-ui/app/src/components/button/css/button-light.css

@@ -0,0 +1,37 @@
+/* button LIGHT and states */
+
+.button--light {
+  @apply border border-solid border-secondary-400 bg-secondary-100 text-secondary-950;
+
+  box-shadow: inset 1px 1px theme(backgroundColor.white);
+
+  &:disabled {
+    @apply disabled:bg-secondary-50 disabled:text-secondary-200 disabled:border-secondary-700;
+  }
+
+  & .button__icon {
+    color: theme(textColor.secondary.900);
+  }
+}
+
+.button--light-hover:hover {
+  @apply hover:bg-secondary-200;
+}
+
+.button--light-focus:focus {
+  @apply focus:bg-secondary-200;
+
+  & .button__label {
+    color: theme(textColor.secondary.900) !important;
+  }
+}
+
+.button--light-active:active {
+  @apply active:bg-secondary-200 border-secondary-600 active:text-secondary-900 active:shadow-inner-primary-active;
+
+  box-shadow: inset 2px 2px theme(backgroundColor.secondary.300);
+
+  & .button__label {
+    color: theme(textColor.secondary.900) !important;
+  }
+}

pkgs/webview-ui/app/src/components/button/css/index.css

@@ -1,5 +1,8 @@
+@import "./button-light.css";
+@import "./button-dark.css";
+
 .button {
-  @apply inline-flex items-center flex-shrink gap-1 justify-center p-4 text-secondary-950 font-semibold;
+  @apply inline-flex items-center flex-shrink gap-1 justify-center p-4  font-semibold;
   letter-spacing: 0.0275rem;
 }
 
@@ -7,88 +10,45 @@
 
 .button--default {
   padding: theme(padding.2) theme(padding.4);
+  height: theme(height.9);
   border-radius: theme(borderRadius.DEFAULT);
 
   &:has(> .button__icon--start):has(> .button__label) {
     padding-left: theme(padding[2.5]);
   }
+
+  &:has(> .button__icon--end):has(> .button__label) {
+    padding-right: theme(padding[2.5]);
+  }
 }
 
 .button--small {
   padding: theme(padding[1.5]) theme(padding[3]);
+  height: theme(height.8);
   border-radius: 3px;
 
   &:has(> .button__icon--start):has(> .button__label) {
     padding-left: theme(padding.2);
   }
-}
 
-/* button DARK and states */
-
-.button--dark {
-  @apply border border-solid border-secondary-950 bg-primary-800 text-white;
-
-  box-shadow: inset 1px 1px theme(backgroundColor.secondary.700);
-
-  &:disabled {
-    @apply disabled:bg-secondary-200 disabled:text-secondary-700 disabled:border-secondary-300;
-  }
-
-  & .button__icon {
-    color: theme(textColor.secondary.200);
+  &:has(> .button__icon--end):has(> .button__label) {
+    padding-left: theme(padding.2);
   }
 }
 
-.button--dark-hover:hover {
-  @apply hover:bg-secondary-900;
+/* button group */
+
+.button-group .button:first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
-.button--dark-focus:focus {
-  @apply focus:border-secondary-900;
+.button-group .button:first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
-.button--dark-active:active {
-  @apply focus:border-secondary-900;
-}
-
-.button--dark-active:active {
-  @apply active:border-secondary-900 active:shadow-inner-primary-active;
-}
-
-/* button LIGHT and states */
-
-.button--light {
-  @apply border border-solid border-secondary-400 bg-secondary-100 text-secondary-950;
-
-  box-shadow: inset 1px 1px theme(backgroundColor.white);
-
-  &:disabled {
-    @apply disabled:bg-secondary-50 disabled:text-secondary-200 disabled:border-secondary-700;
-  }
-
-  & .button__icon {
-    color: theme(textColor.secondary.900);
-  }
-}
-
-.button--light-hover:hover {
-  @apply hover:bg-secondary-200;
-}
-
-.button--light-focus:focus {
-  @apply focus:bg-secondary-200;
-
-  & .button__label {
-    color: theme(textColor.secondary.900) !important;
-  }
-}
-
-.button--light-active:active {
-  @apply active:bg-secondary-200 border-secondary-600 active:text-secondary-900 active:shadow-inner-primary-active;
-
-  box-shadow: inset 2px 2px theme(backgroundColor.secondary.300);
-
-  & .button__label {
-    color: theme(textColor.secondary.900) !important;
-  }
+.button-group .button:last-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }

pkgs/webview-ui/app/src/components/button/index.tsx

@@ -79,7 +79,7 @@ export const Button = (props: ButtonProps) => {
       {...other}
     >
       {local.startIcon && (
-        <span class="button__icon--start h-4">{local.startIcon}</span>
+        <span class="button__icon--start">{local.startIcon}</span>
       )}
       {local.children && (
         <Typography
@@ -94,7 +94,9 @@ export const Button = (props: ButtonProps) => {
           {local.children}
         </Typography>
       )}
-      {local.endIcon && <span class="h-4">{local.endIcon}</span>}
+      {local.endIcon && (
+        <span class="button__icon--start">{local.endIcon}</span>
+      )}
     </button>
   );
 };

pkgs/webview-ui/app/src/routes/machines/list.tsx

@@ -82,37 +82,31 @@ export const MachineListView: Component = () => {
                 size="s"
                 onClick={() => refresh()}
                 startIcon={<Icon icon="Update" />}
-              ></Button>
+              />
             </span>
 
-            <div class="border border-def-3">
-              <span class="" data-tip="List View">
-                <Button
-                  onclick={() => setView("list")}
-                  variant={view() == "list" ? "dark" : "light"}
-                  size="s"
-                  startIcon={<Icon icon="List" />}
-                ></Button>
-              </span>
-              <span class="" data-tip="Grid View">
-                <Button
-                  onclick={() => setView("grid")}
-                  variant={view() == "grid" ? "dark" : "light"}
-                  size="s"
-                  startIcon={<Icon icon="Grid" />}
-                ></Button>
-              </span>
-            </div>
-            <span class="" data-tip="New Machine">
+            <div class="button-group">
               <Button
-                onClick={() => navigate("create")}
+                onclick={() => setView("list")}
+                variant={view() == "list" ? "dark" : "light"}
                 size="s"
-                variant="light"
-                startIcon={<Icon icon="Plus" />}
-              >
-                New Machine
-              </Button>
-            </span>
+                startIcon={<Icon icon="List" />}
+              />
+              <Button
+                onclick={() => setView("grid")}
+                variant={view() == "grid" ? "dark" : "light"}
+                size="s"
+                startIcon={<Icon icon="Grid" />}
+              />
+            </div>
+            <Button
+              onClick={() => navigate("create")}
+              size="s"
+              variant="light"
+              startIcon={<Icon size={14} icon="Plus" />}
+            >
+              New Machine
+            </Button>
           </>
         }
       />

pkgs/webview-ui/app/src/routes/modules/list.tsx

@@ -113,38 +113,33 @@ export const ModuleList = () => {
         title="Modules"
         toolbar={
           <>
-            <span class="" data-tip="Reload">
-              <Button
-                variant="light"
-                size="s"
-                onClick={() => refresh()}
-                startIcon={<Icon icon="Update" />}
-              ></Button>
-            </span>
+            <Button
+              variant="light"
+              size="s"
+              onClick={() => refresh()}
+              startIcon={<Icon icon="Update" />}
+            />
 
-            <div class="border border-def-3">
-              <span class="" data-tip="List View">
-                <Button
-                  onclick={() => setView("list")}
-                  variant={view() == "list" ? "dark" : "light"}
-                  size="s"
-                  startIcon={<Icon icon="List" />}
-                ></Button>
-              </span>
-              <span class="" data-tip="Grid View">
-                <Button
-                  onclick={() => setView("grid")}
-                  variant={view() == "grid" ? "dark" : "light"}
-                  size="s"
-                  startIcon={<Icon icon="Grid" />}
-                ></Button>
-              </span>
+            <div class="button-group">
+              <Button
+                onclick={() => setView("list")}
+                variant={view() == "list" ? "dark" : "light"}
+                size="s"
+                startIcon={<Icon icon="List" />}
+              />
+
+              <Button
+                onclick={() => setView("grid")}
+                variant={view() == "grid" ? "dark" : "light"}
+                size="s"
+                startIcon={<Icon icon="Grid" />}
+              />
             </div>
             <span class="" data-tip="New Machine">
               <Button
                 size="s"
                 variant="light"
-                startIcon={<Icon icon="CaretUp" />}
+                startIcon={<Icon size={14} icon="CaretUp" />}
               >
                 Import Module
               </Button>