1.13.1 release

karamem0 · Jul 30, 2024 · afdeb6b · afdeb6b
1 parent 6ec6667
commit afdeb6b
Show file tree

Hide file tree

Showing 43 changed files with 1,043 additions and 705 deletions.
diff --git a/.github/workflows/workflow.yml b/.github/workflows/workflow.yml
@@ -5,7 +5,7 @@ on:
       - develop
 
 env:
-  BUILD_VERSION: '1.13.0'
+  BUILD_VERSION: '1.13.1'
 
 jobs:
   select-environment:

diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -12,6 +12,7 @@
       ],
       "rules": {
         "at-rule-empty-line-before": "never",
+        "declaration-empty-line-before": "never",
         "rule-empty-line-before": "never"
       }
     }

diff --git a/src/common/components/ScrollPanel.presenter.tsx b/src/common/components/ScrollPanel.presenter.tsx
@@ -53,7 +53,6 @@ function ScrollPanel(props: Readonly<React.PropsWithChildren<ScrollPanelProps>>,
         ::-webkit-scrollbar-thumb {
           background-color: ${scrollBarThumbColor};
         }
-
         overflow: hidden auto;
         &:focus {
           outline: none;

diff --git a/src/common/components/SidePanel.presenter.tsx b/src/common/components/SidePanel.presenter.tsx
@@ -8,18 +8,20 @@
 
 import React from 'react';
 
-import { Button, Text } from '@fluentui/react-components';
+import {
+  Button,
+  DrawerBody,
+  DrawerHeader,
+  DrawerHeaderTitle
+} from '@fluentui/react-components';
+import { DrawerOverlay } from '@fluentui/react-components/unstable';
 import { CancelIcon } from '@fluentui/react-icons-mdl2';
 
 import { css } from '@emotion/react';
 
-import { useTheme } from '../../providers/ThemeProvider';
-import { layouts } from '../../themes/Layout';
 import { EventHandler } from '../../types/Event';
 
 interface SidePanelProps {
-  className?: string,
-  content?: React.ReactNode,
   open?: boolean,
   title?: React.ReactNode,
   onOpenChange?: EventHandler<boolean>
@@ -29,89 +31,48 @@ function SidePanel(props: Readonly<React.PropsWithChildren<SidePanelProps>>) {
 
   const {
     children,
-    className,
-    content,
     open,
     title,
     onOpenChange
   } = props;
 
-  const { theme } = useTheme();
-
   return (
-    <React.Fragment>
-      <div
-        role="button"
-        tabIndex={-1}
-        onClick={(event) => onOpenChange?.(event, true)}>
-        {children}
-      </div>
-      {
-        open ? (
-          <div
-            css={css`
-              position: fixed;
-              inset: 0;
-              z-index: 1000;
-              display: grid;
-              grid-template-rows: auto;
-              grid-template-columns: 1fr auto;
-              background-color: ${theme.colorNeutralBackgroundAlpha};
-            `}>
-            <div
-              role="button"
-              tabIndex={-1}
-              css={css`
-                cursor: pointer;
-              `}
-              onClick={(event) => onOpenChange?.(event, false)} />
-            <div
-              className={className}
-              css={css`
-                width: ${layouts.sidePanel.width};
-                max-width: ${layouts.sidePanel.maxWidth};
-                background-color: ${theme.colorNeutralBackground1};
-                box-shadow: rgb(0 0 0 / 35%) 0 0 2rem 0;
-              `}>
-              <div
-                css={css`
-                  display: grid;
-                  grid-template-rows: auto;
-                  grid-template-columns: 1fr auto;
-                  grid-gap: 0.5rem;
-                  align-items: center;
-                  height: ${layouts.sidePanelHeader.height};
-                  margin: 1rem;
-                `}>
-                <Text
+    <DrawerOverlay
+      as="aside"
+      open={open}
+      position="end"
+      size="medium"
+      css={css`
+        height: 100vh;
+      `}
+      onOpenChange={(event, data) => onOpenChange?.(event, data.open)}>
+      <DrawerHeader>
+        <DrawerHeaderTitle
+          action={(
+            <Button
+              appearance="subtle"
+              aria-label="Close"
+              icon={(
+                <CancelIcon
                   css={css`
-                    font-weight: bold;
-                  `}>
-                  {title}
-                </Text>
-                <Button
-                  appearance="transparent"
-                  icon={(
-                    <CancelIcon
-                      css={css`
-                        font-size: 1rem;
-                        line-height: 1rem;
-                      `}
-                      onClick={(event) => onOpenChange?.(event, false)} />
-                  )} />
-              </div>
-              <div
-                css={css`
-                  height: ${layouts.sidePanelBody.height};
-                  margin: 1rem;
-                `}>
-                {content}
-              </div>
-            </div>
-          </div>
-        ) : null
-      }
-    </React.Fragment>
+                    font-size: 1rem;
+                    line-height: 1rem;
+                  `} />
+              )}
+              onClick={(event) => onOpenChange?.(event, false)} />
+          )}>
+          {title}
+        </DrawerHeaderTitle>
+      </DrawerHeader>
+      <DrawerBody
+        role="group"
+        tabIndex={0}
+        css={css`
+          margin-bottom: 1rem;
+        `}>
+        {children}
+      </DrawerBody>
+    </DrawerOverlay>
   );
 
 }

diff --git a/src/common/components/SidePanel.tsx b/src/common/components/SidePanel.tsx
@@ -16,18 +16,14 @@ import { Event } from '../../types/Event';
 import Presenter from './SidePanel.presenter';
 
 interface SidePanelProps {
-  className?: string,
-  content?: React.ReactNode,
   title?: React.ReactNode,
   width?: string
 }
 
 function SidePanel(props: Readonly<React.PropsWithChildren<SidePanelProps>>) {
 
   const {
-    className,
     children,
-    content,
     title
   } = props;
 
@@ -49,8 +45,6 @@ function SidePanel(props: Readonly<React.PropsWithChildren<SidePanelProps>>) {
 
   return (
     <Presenter
-      className={className}
-      content={content}
       open={open}
       title={title}
       onOpenChange={handleOpenChange}>

diff --git a/src/common/components/TreeHeader.presenter.tsx b/src/common/components/TreeHeader.presenter.tsx
@@ -11,6 +11,7 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 
 import {
+  Button,
   Menu,
   MenuPopover,
   MenuTrigger,
@@ -48,40 +49,59 @@ function TreeHeader(props: Readonly<TreeHeaderProps>) {
         display: grid;
         grid-template-rows: auto;
         grid-template-columns: auto 1fr auto;
-        grid-gap: 0.5rem;
+        grid-gap: 0.25rem;
         align-items: center;
         justify-content: start;
         padding: 0 0.5rem;
+        margin: 1px;
         font-weight: bold;
         user-select: none;
-        & > div:nth-of-type(3) {
+        border: 1px solid transparent;
+        & > button:last-of-type {
           display: none;
         }
         &:hover {
-          & > div:nth-of-type(3) {
+          & > button:last-of-type {
             display: inherit;
           }
         }
       `}>
-      <div
-        aria-disabled={root}
-        aria-label={intl.formatMessage(messages.Back)}
-        role="button"
-        tabIndex={-1}
-        title={intl.formatMessage(messages.Back)}
-        css={css`
-          font-size: 1rem;
-          line-height: 1rem;
-        `}
-        onClick={(event) => !root && onClick?.(event)}>
-        {
-          root ? (
-            <OneDriveLogoIcon />
-          ) : (
-            <ChevronLeftIcon />
-          )
-        }
-      </div>
+      {
+        root ? (
+          <div
+            css={css`
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              width: 2rem;
+              height: 2rem;
+            `}>
+            <OneDriveLogoIcon
+              css={css`
+                font-size: 1rem;
+                line-height: 1rem;
+              `} />
+          </div>
+        ) : (
+          <Button
+            appearance="transparent"
+            aria-label={intl.formatMessage(messages.Back)}
+            tabIndex={0}
+            title={intl.formatMessage(messages.Back)}
+            css={css`
+              max-width: 2rem;
+              height: 2rem;
+            `}
+            icon={(
+              <ChevronLeftIcon
+                css={css`
+                  font-size: 1rem;
+                  line-height: 1rem;
+                `} />
+            )}
+            onClick={(event) => !root && onClick?.(event)} />
+        )
+      }
       <div
         css={css`
           overflow: hidden;
@@ -90,6 +110,7 @@ function TreeHeader(props: Readonly<TreeHeaderProps>) {
         `}>
         <Text
           aria-label={name}
+          as="h3"
           title={name}
           css={css`
             font-weight: bold;
@@ -99,17 +120,23 @@ function TreeHeader(props: Readonly<TreeHeaderProps>) {
       </div>
       <Menu>
         <MenuTrigger>
-          <div
+          <Button
+            appearance="transparent"
             aria-label={intl.formatMessage(messages.MoreOption)}
             role="button"
-            tabIndex={-1}
+            tabIndex={0}
             title={intl.formatMessage(messages.MoreOption)}
             css={css`
-              font-size: 1rem;
-              line-height: 1rem;
-            `}>
-            <MoreVerticalIcon />
-          </div>
+              max-width: 2rem;
+              height: 2rem;
+            `}
+            icon={(
+              <MoreVerticalIcon
+                css={css`
+                  font-size: 1rem;
+                  line-height: 1rem;
+                `} />
+            )} />
         </MenuTrigger>
         <MenuPopover>
           {menu}