pxt-core 12.3.23 → 12.3.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pxt-core",
-  "version": "12.3.23",
+  "version": "12.3.24",
   "description": "Microsoft MakeCode provides Blocks / JavaScript / Python tools and editors",
   "keywords": [
     "TypeScript",

package/react-common/components/controls/FocusList.tsx

@@ -6,6 +6,7 @@ export interface FocusListProps extends ContainerProps {
     childTabStopId?: string;
     focusSelectsItem?: boolean;
     useUpAndDownArrowKeys?: boolean;
+    title?: string;
     onItemReceivedFocus?: (item: HTMLElement) => void;
     onClose?: () => void;
 }
@@ -30,6 +31,7 @@ export const FocusList = (props: FocusListProps) => {
         focusSelectsItem,
         onItemReceivedFocus,
         useUpAndDownArrowKeys,
+        title,
         onClose
     } = props;
 
@@ -159,7 +161,8 @@ export const FocusList = (props: FocusListProps) => {
             onKeyDown={onKeyDown}
             ref={handleRef}
             aria-hidden={ariaHidden}
-            aria-label={ariaLabel}>
+            aria-label={ariaLabel}
+            title={title}>
             {children}
         </div>
     );

package/react-common/components/controls/Tree.tsx

@@ -5,6 +5,7 @@ import { FocusList } from "./FocusList";
 
 export interface TreeProps extends ContainerProps {
     role?: "tree" | "group";
+    title?: string;
 }
 
 export interface TreeItemProps extends ContainerProps {
@@ -26,6 +27,7 @@ export const Tree = (props: TreeProps) => {
         ariaHidden,
         ariaDescribedBy,
         role,
+        title
     } = props;
 
     if (!role || role === "tree") {
@@ -37,6 +39,7 @@ export const Tree = (props: TreeProps) => {
                 aria-hidden={ariaHidden}
                 aria-describedby={ariaDescribedBy}
                 role={role || "tree"}
+                title={title}
             >
                 {children}
             </FocusList>
@@ -51,6 +54,7 @@ export const Tree = (props: TreeProps) => {
             aria-hidden={ariaHidden}
             aria-describedby={ariaDescribedBy}
             role={role || "tree"}
+            title={title}
         >
             {children}
         </div>

package/react-common/styles/controls/Input.less

@@ -58,7 +58,8 @@
 .common-input-group {
     & > i.fas, i.far, .icon, .xicon {
         position: absolute;
-        bottom: 0.3rem;
+        bottom: 50%;
+        transform: translateY(50%);
         right: 0.5rem;
         width: 1.25rem;
         margin-right: 0;

package/react-common/styles/profile/profile.less

@@ -444,6 +444,13 @@
             display: flex;
             gap: 0.5rem;
             justify-content: center;
+
+            .link-button:focus-visible {
+                outline: var(--pxt-neutral-foreground1) solid 3px;
+                outline-offset: 2px;
+                border-radius: 0.1em;
+                text-decoration: none;
+            }
         }
 
         .learn {

package/theme/common.less

@@ -442,13 +442,15 @@ div.simframe > iframe {
 .menubar {
     .left.menu, .right.menu, .center.menu {
         display: flex;
-        flex: 1;
+        flex-grow: 1;
     }
     .right.menu {
         justify-content: flex-end;
+        flex-shrink: 0;
     }
     .center.menu {
         justify-content: center;
+        flex-shrink: 0;
     }
 
     .ui.item {
@@ -2695,6 +2697,33 @@ button.ui.button.hostmultiplayergame-button {
     }
 }
 
+.search-input.common-input-wrapper {
+    border-radius: 500rem;
+    height: 3rem;
+
+    .common-input-group {
+        border-radius: 500rem;
+        height: 3rem;
+
+        input {
+            border-radius: 500rem;
+            height: 3rem;
+        }
+
+        &:focus-within:after, &:focus:after {
+            border-radius: 500rem;
+        }
+    }
+
+    i {
+        color: var(--pxt-neutral-foreground2);
+    }
+
+    &.project-manager {
+        max-width: 250px;
+    }
+}
+
 // win the specificity fight with hc mode
 #root.hc .sim-presence-bar .sim-presence-bar-player {
     background-repeat: no-repeat !important;

package/theme/github.less

@@ -236,3 +236,28 @@
         }
     }
 }
+
+.create-gh-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+
+    &>div {
+        display: flex;
+        flex-direction: column;
+
+        label {
+            font-weight: 800;
+            font-size: 0.9rem;
+            margin-bottom: 0.25rem;
+        }
+    }
+
+    .common-dropdown {
+        width: 100%;
+
+        button.common-button {
+            width: 100%;
+        }
+    }
+}

package/theme/home.less

@@ -154,7 +154,7 @@
         background: var(--pxt-target-background1);
         color: var(--pxt-target-foreground1);
     }
-    
+
     .button.large {
         font-weight: 700;
     }
@@ -198,9 +198,6 @@
                 input {
                     padding: .75em 1em;
                 }
-                i {
-                    bottom: 1em;
-                };
             }
         }
 

package/theme/semantic-ui-overrides.less

@@ -26,10 +26,10 @@ This file overrides the default semantic ui theming with our own theme variables
         &:hover, &:focus {
             // Semantic UI darkens background using a filter, which isn't necessary when we have a hover color.
             filter: none;
-    
+
             background-color: @hoverBg;
             color: @hoverFg;
-    
+
             &.inverted {
                 background-color: @hoverFg;
                 color: @hoverBg;
@@ -84,11 +84,16 @@ body.pxt-theme-root {
         color: var(--pxt-neutral-foreground1);
         border-color: var(--pxt-neutral-stencil1);
 
-        &:hover, &:focus {
+        &:hover {
             background-color: var(--pxt-neutral-background1-hover);
             color: var(--pxt-neutral-foreground1-hover);
         }
 
+        &:focus-visible {
+            outline: 4px solid var(--pxt-focus-border);
+            outline-offset: 2px;
+        }
+
         .extra.content a.learnmore {
             color: var(--pxt-link);
         }
@@ -101,7 +106,7 @@ body.pxt-theme-root {
             .header {
                 color: var(--pxt-neutral-foreground1);
             }
-    
+
             .description {
                 color: var(--pxt-neutral-alpha80);
             }
@@ -125,7 +130,6 @@ body.pxt-theme-root {
         > .content,
         > .header,
         > .actions,
-        > .closeIcon,
         > .closeIcon .close,
         > .content > .ui.items > .item > .content > .description {
             background-color: var(--pxt-neutral-background1);
@@ -268,7 +272,7 @@ body.pxt-theme-root {
         input {
             border: 1px solid var(--pxt-neutral-stencil1);
 
-            & ~ .box:before, 
+            & ~ .box:before,
             & ~ label:before {
                 border: 1px solid var(--pxt-neutral-stencil1);
             }
@@ -281,7 +285,7 @@ body.pxt-theme-root {
                 color: var(--pxt-neutral-foreground1) !important;
             }
 
-            & ~ .box:before, 
+            & ~ .box:before,
             & ~ label:before {
                 border: 1px solid var(--pxt-neutral-stencil1);
                 background-color: var(--pxt-primary-background) !important;
@@ -296,7 +300,7 @@ body.pxt-theme-root {
     // Colors
     .blue {
         color: var(--pxt-colors-blue-background);
-        
+
         &.inverted {
             color: var(--pxt-colors-blue-background) !important;
             background-color: var(--pxt-colors-blue-foreground) !important;

package/theme/themes/pxt/modules/modal.overrides

@@ -262,16 +262,18 @@
     border-radius: 50%;
     font-size: 2.15rem;
     line-height: 2.15rem;
-    transition: all .15s ease-out;
     height: 2.15rem;
     width: 2.15rem;
     padding: 0;
 }
-.ui.modal > .closeIcon:focus .close,
-.ui.modal > .closeIcon:hover  .close {
-    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.50);
-    outline: none;
-    transform: scale(1.1);
+.ui.modal > .closeIcon:hover .close {
+    outline: solid 4px var(--pxt-neutral-alpha20);
+    outline-offset: 2px;
+}
+
+.ui.modal > .closeIcon:focus-visible .close {
+    outline: solid 4px var(--pxt-focus-border);
+    outline-offset: 2px;
 }
 
 .ui.button.icon.clear {

package/theme/timeMachine.less

@@ -153,4 +153,11 @@
     .time-machine-header {
         height: @mobileMenuHeight;
     }
+
+    button.common-button.square-on-mobile {
+        width: 3rem;
+        height: 3rem;
+        padding: 0;
+        min-width: 0;
+    }
 }

package/theme/toolbox.less

@@ -184,9 +184,22 @@ span.blocklyTreeLabel, text.blocklyText {
 *******************************/
 
 /* Blockly Search bar */
-.blocklySearchInputField {
+.ui.input > input.blocklySearchInputField {
     border: 0 !important;
     border-radius: 0 !important;
+
+    &::-webkit-input-placeholder {
+        color: var(--pxt-neutral-alpha50);
+    }
+    &:-moz-placeholder {
+        color: var(--pxt-neutral-alpha50);
+    }
+    &::-moz-placeholder {
+        color: var(--pxt-neutral-alpha50);
+    }
+    &:-ms-input-placeholder {
+        color: var(--pxt-neutral-alpha50);
+    }
 }
 
 @media only screen and (max-width: @largestMobileScreen) {

package/webapp/public/multiplayer.html

@@ -9,7 +9,7 @@
     <link rel="stylesheet" data-rtl="/blb/rtlsemantic.css" href="/blb/semantic.css">
     <link rel="stylesheet" href="/blb/icons.css">
     <link rel="stylesheet" href="/blb/react-common-multiplayer.css">
-  <script defer="defer" src="/blb/multiplayer/js/main.d5112b60.js"></script><link href="/blb/multiplayer/css/main.40f89d37.css" rel="stylesheet"></head>
+  <script defer="defer" src="/blb/multiplayer/js/main.7de24d49.js"></script><link href="/blb/multiplayer/css/main.40f89d37.css" rel="stylesheet"></head>
   <body class="pxt-theme-root">
     <noscript>You need to enable JavaScript to run this app.</noscript>
 

package/webapp/public/skillmap.html

@@ -7,7 +7,7 @@
     <link rel="stylesheet" data-rtl="/blb/rtlsemantic.css" href="/blb/semantic.css">
     <link rel="stylesheet" href="/blb/icons.css">
     <link rel="stylesheet" href="/blb/react-common-skillmap.css">
-  <script defer="defer" src="/blb/skillmap/js/main.015cce04.js"></script><link href="/blb/skillmap/css/main.450cb46e.css" rel="stylesheet"></head>
+  <script defer="defer" src="/blb/skillmap/js/main.d9d0dfdf.js"></script><link href="/blb/skillmap/css/main.450cb46e.css" rel="stylesheet"></head>
   <body class="pxt-theme-root">
     <noscript>You need to enable JavaScript to run this app.</noscript>
 

package/webapp/public/teachertool.html

@@ -18,7 +18,7 @@
     <!-- <link rel="manifest" href="/teachertool-data/manifest.json" /> -->
     <title>MakeCode Code Evaluation</title>
     <script>var pxtConfig=null</script>
-  <script defer="defer" src="/blb/teachertool/js/main.4fbd0fd2.js"></script><link href="/blb/teachertool/css/main.8ef9c91e.css" rel="stylesheet"></head>
+  <script defer="defer" src="/blb/teachertool/js/main.5580a613.js"></script><link href="/blb/teachertool/css/main.8ef9c91e.css" rel="stylesheet"></head>
   <body class="pxt-theme-root">
     <noscript>You need to enable JavaScript to run this app.</noscript>
 

package/webapp/public/tutorialtool.html

@@ -17,7 +17,7 @@
   <!-- <link rel="manifest" href="/tutorialtool-data/manifest.json" /> -->
   <title>MakeCode Tutorial Tool</title>
   <script>var pxtConfig=null</script>
-<script defer="defer" src="/blb/tutorialtool/js/main.a779a7fa.js"></script><link href="/blb/tutorialtool/css/main.02bb1797.css" rel="stylesheet"></head>
+<script defer="defer" src="/blb/tutorialtool/js/main.f9715395.js"></script><link href="/blb/tutorialtool/css/main.02bb1797.css" rel="stylesheet"></head>
 
 <body>
   <noscript>You need to enable JavaScript to run this app.</noscript>