Use the shared MoreMenuButton and ButtonGroup seam (#1266)

Upgrade to @microbit/ui@0.1.0-alpha.30

@microbit/ui's ButtonGroup now draws the seam between attached buttons
itself: a 1px hairline in the variant's border colour, or a gap where the
variant has no border to lend. That is what the split buttons here
already hand-wrote — a `borderRight` and a `borderLeft` either side of
the group's -1px overlap — so the save and send buttons lose their local
borders, and MoreMenuButton goes up to the shared package with them.

The zoom and undo/redo pills drop their gray.10 dividers for the same
reason. `neutral` has no border, so their seam is now a gap showing the
page through rather than a near-white line drawn over the grey; on this
surface that is the same pixels.

No visual change intended.

See microbit-foundation/ui#22

Author: microbit-matt-hillsdon

package-lock.json

@@ -21,7 +21,7 @@
     "@codemirror/view": "^6.26.3",
     "@microbit/microbit-connection": "^1.0.0",
     "@microbit/microbit-fs": "^0.10.0",
-    "@microbit/ui": "0.1.0-alpha.29",
+    "@microbit/ui": "0.1.0-alpha.30",
     "@microbit/ui-patterns": "0.1.0-alpha.3",
     "@sanity/block-content-to-react": "^3.0.0",
     "@sanity/image-url": "^1.0.1",

package.json

@@ -40,7 +40,6 @@ const UndoRedoControls = ({ css: cssProp }: UndoRedoControlsProps) => {
       </IconButton>
       <IconButton
         variant="neutral"
-        css={{ borderLeft: "1px solid", borderLeftColor: "gray.10" }}
         aria-label={intl.formatMessage({ id: "redo" })}
         onPress={actions?.redo}
         isDisabled={editorInfo.redo ? false : true}

src/editor/UndoRedoControls.tsx

@@ -53,7 +53,6 @@ const ZoomControls = ({ size, css: cssProp }: ZoomControlsProps) => {
         <RiZoomOutLine />
       </IconButton>
       <IconButton
-        css={{ borderLeft: "1px solid", borderLeftColor: "gray.10" }}
         size={size}
         variant="neutral"
         aria-label={intl.formatMessage({ id: "zoom-in-action" })}

src/editor/ZoomControls.tsx

@@ -3,12 +3,17 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { ButtonGroup, MenuItem, MenuList, MenuTrigger } from "@microbit/ui";
+import {
+  ButtonGroup,
+  MenuItem,
+  MenuList,
+  MenuTrigger,
+  MoreMenuButton,
+} from "@microbit/ui";
 import { RiDownload2Line } from "react-icons/ri";
 import { FormattedMessage, useIntl } from "react-intl";
 import { HStack } from "styled-system/jsx";
 import SaveButton from "./SaveButton";
-import MoreMenuButton from "./MoreMenuButton";
 import { useProjectActions } from "./project-hooks";
 import { useRef } from "react";
 
@@ -29,11 +34,7 @@ const SaveMenuButton = ({ size }: SaveMenuButtonProps) => {
   return (
     <HStack>
       <ButtonGroup isAttached>
-        <SaveButton
-          mode="button"
-          size={size}
-          css={{ borderRight: "1px solid" }}
-        />
+        <SaveButton mode="button" size={size} />
         <MenuTrigger>
           <MoreMenuButton
             ref={menuButtonRef}

src/project/MoreMenuButton.tsx

@@ -9,6 +9,7 @@ import {
   MenuItem,
   MenuList,
   MenuTrigger,
+  MoreMenuButton,
   Tooltip,
 } from "@microbit/ui";
 import React, { ForwardedRef, useCallback, useRef } from "react";
@@ -17,7 +18,6 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { HStack } from "styled-system/jsx";
 import { ConnectionStatus } from "@microbit/microbit-connection";
 import { useConnectionStatus } from "../device/device-hooks";
-import MoreMenuButton from "./MoreMenuButton";
 import { useProjectActions } from "./project-hooks";
 import { useHotkeys } from "react-hotkeys-hook";
 import {