Upgrade to @microbit/ui@0.1.0-alpha.31 (#1268)

Also @microbit/ui-patterns@0.1.0-alpha.4.

alpha.31 renames the props whose names said left/right while meaning
reading order: `leftIcon`/`rightIcon` are `startIcon`/`endIcon`, and
`InputLeftElement`/`InputRightElement` are
`InputStartElement`/`InputEndElement`. CollapsibleButton's `Omit`
follows. Mechanical, and no change in an LTR build.

The search field's leading padding follows its InputGroup element to
logical: that element moved to `insetStart` in alpha.31, so `pl` would
sit opposite it the moment a locale is RTL.

Author: microbit-matt-hillsdon

package-lock.json

@@ -21,8 +21,8 @@
     "@codemirror/view": "^6.26.3",
     "@microbit/microbit-connection": "^1.0.0",
     "@microbit/microbit-fs": "^0.10.0",
-    "@microbit/ui": "0.1.0-alpha.30",
-    "@microbit/ui-patterns": "0.1.0-alpha.3",
+    "@microbit/ui": "^0.1.0-alpha.31",
+    "@microbit/ui-patterns": "^0.1.0-alpha.4",
     "@sanity/block-content-to-react": "^3.0.0",
     "@sanity/image-url": "^1.0.1",
     "@testing-library/jest-dom": "^5.14.1",

package.json

@@ -8,7 +8,7 @@ import React, { ForwardedRef } from "react";
 import { SystemStyleObject } from "styled-system/types";
 
 export interface CollapsibleButtonProps
-  extends Omit<ButtonProps, "children" | "leftIcon" | "rightIcon"> {
+  extends Omit<ButtonProps, "children" | "startIcon" | "endIcon"> {
   mode: "icon" | "button";
   text: string;
   icon: React.ReactElement;
@@ -55,8 +55,8 @@ const CollapsibleButton = React.forwardRef(
     ) : (
       <Button
         ref={ref}
-        leftIcon={icon && !iconRight ? icon : undefined}
-        rightIcon={icon && iconRight ? icon : undefined}
+        startIcon={icon && !iconRight ? icon : undefined}
+        endIcon={icon && iconRight ? icon : undefined}
         {...props}
         css={cssProp}
       >

src/common/CollapsibleButton.tsx

@@ -51,10 +51,10 @@ const CodeActionButton = ({
             ml: "5",
           }}
           onPress={codeAction}
-          leftIcon={
+          startIcon={
             toolkitType === "ideas" ? <Icon as={RiFolderOpenLine} /> : undefined
           }
-          rightIcon={
+          endIcon={
             toolkitType !== "ideas" ? <Icon as={RiFileCopy2Line} /> : undefined
           }
         >

src/documentation/common/CodeActionButton.tsx

@@ -102,7 +102,7 @@ const DocumentationBreadcrumbHeading = ({
               height: "1.5rem",
             },
           }}
-          leftIcon={<RiArrowLeftSFill />}
+          startIcon={<RiArrowLeftSFill />}
         >
           <Text as="span">
             {grandparent && grandparent + " / "}

src/documentation/common/DocumentationBreadcrumbHeading.tsx

@@ -8,8 +8,8 @@ import {
   IconButton,
   Input,
   InputGroup,
-  InputLeftElement,
-  InputRightElement,
+  InputStartElement,
+  InputEndElement,
   Text,
 } from "@microbit/ui";
 import { useCallback, useRef } from "react";
@@ -50,9 +50,9 @@ const SearchDialog = ({
     <Box>
       <Box py="1.5" px="1">
         <InputGroup>
-          <InputLeftElement pointerEvents="none">
+          <InputStartElement pointerEvents="none">
             <RiSearch2Line />
-          </InputLeftElement>
+          </InputStartElement>
           <Input
             aria-label={intl.formatMessage({ id: "search" })}
             // react-aria focuses the dialog itself on open unless told
@@ -65,7 +65,7 @@ const SearchDialog = ({
             css={{
               outline: "none",
               border: "none",
-              pl: "10",
+              ps: "10",
               fontSize: "lg",
               // Needs some thought, the default breaks the design.
               "&:is(:focus-visible, [data-focused])": {
@@ -79,7 +79,7 @@ const SearchDialog = ({
             placeholder={intl.formatMessage({ id: "search" })}
           />
           {query && (
-            <InputRightElement>
+            <InputEndElement>
               <IconButton
                 css={{ fontSize: "2xl", color: "#838383" }}
                 variant="ghost"
@@ -88,7 +88,7 @@ const SearchDialog = ({
               >
                 <RiCloseLine />
               </IconButton>
-            </InputRightElement>
+            </InputEndElement>
           )}
         </InputGroup>
       </Box>

src/documentation/search/SearchDialog.tsx

@@ -97,7 +97,7 @@ const SendButton = React.forwardRef(
               ref={ref}
               size={size}
               variant="primary"
-              leftIcon={<RiUsbLine />}
+              startIcon={<RiUsbLine />}
               onPress={() => handleSendToMicrobit(sendButtonRef)}
             >
               <FormattedMessage id="send-action" />

src/project/SendButton.tsx

@@ -167,7 +167,7 @@ const DataLoggingModule = ({
           )}
         </HStack>
         <Button
-          leftIcon={<RiDownload2Line />}
+          startIcon={<RiDownload2Line />}
           onPress={handleSaveLog}
           isDisabled={!hasContent}
         >

src/simulator/DataLoggingModule.tsx

@@ -202,7 +202,7 @@ const AboutDialog = ({ isOpen, onClose, finalFocusRef }: AboutDialogProps) => {
                   ))}
                 </styled.tbody>
               </styled.table>
-              <Button leftIcon={<RiFileCopy2Line />} onPress={onCopy} size="md">
+              <Button startIcon={<RiFileCopy2Line />} onPress={onCopy} size="md">
                 <FormattedMessage id={hasCopied ? "copied" : "copy-action"} />
               </Button>
             </VStack>
@@ -236,7 +236,7 @@ const AboutDialog = ({ isOpen, onClose, finalFocusRef }: AboutDialogProps) => {
                 fontSize: "lg",
                 fontWeight: "normal",
               }}
-              rightIcon={<ExpandCollapseIcon open={micropythonOpen} />}
+              endIcon={<ExpandCollapseIcon open={micropythonOpen} />}
               onPress={() => setMicropythonOpen((open) => !open)}
             >
               {intl.formatMessage({

src/workbench/AboutDialog/AboutDialog.tsx

@@ -82,7 +82,7 @@ const PreReleaseNotice = ({ onDialogChange }: PreReleaseNoticeProps) => {
       <HStack>
         {hasInfoDialog && (
           <Button
-            leftIcon={<RiInformationFill />}
+            startIcon={<RiInformationFill />}
             variant="link"
             size="xs"
             css={{ color: "white", p: "1", fontWeight: "semibold" }}
@@ -92,7 +92,7 @@ const PreReleaseNotice = ({ onDialogChange }: PreReleaseNoticeProps) => {
           </Button>
         )}
         <Button
-          leftIcon={<RiFeedbackFill />}
+          startIcon={<RiFeedbackFill />}
           variant="link"
           size="xs"
           css={{ color: "white", p: "1", fontWeight: "semibold" }}