fix(react-components): Change help panel again and bump to 0.73.9 (#4941

) * fix(react-components): Change help panel again * chore: bump react-components to 0.73.9 * chore: update help button with placement option * chore: reorder ?? * chore: redefine placement option * chore: extend type
cognitedata · Dec 12, 2024 · 6e9251b · 6e9251b
1 parent c7a7033
commit 6e9251b
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 9 deletions.
diff --git a/react-components/package.json b/react-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cognite/reveal-react-components",
-  "version": "0.73.8",
+  "version": "0.73.9",
   "exports": {
     ".": {
       "import": "./dist/index.js",

diff --git a/react-components/src/components/Architecture/types.ts b/react-components/src/components/Architecture/types.ts
@@ -4,6 +4,10 @@
 
 export type ButtonType = 'ghost' | 'ghost-destructive' | 'primary';
 
-export type PlacementType = 'top' | 'right' | 'left' | 'bottom';
+type Side = 'top' | 'right' | 'bottom' | 'left';
+
+type Alignment = 'start' | 'end';
+
+export type PlacementType = Side | `${Side}-${Alignment}`;
 
 export type FlexDirection = 'row' | 'column';
diff --git a/react-components/src/components/RevealToolbar/Help/elements.ts b/react-components/src/components/RevealToolbar/Help/elements.ts
@@ -86,7 +86,7 @@ export const KeyboardNavigationInstructionGrid = styled.div`
 
 export const ArrowKeyboardNavigationInstructionGrid = styled.div`
   display: grid;
-  grid-template-columns: 2fr 1fr 1.5fr;
+  grid-template-columns: 1fr 1fr 1fr;
   gap: 8px;
   padding-left: 12px;
   width: fit-content;

diff --git a/react-components/src/components/RevealToolbar/HelpButton.tsx b/react-components/src/components/RevealToolbar/HelpButton.tsx
@@ -11,12 +11,14 @@ import { MouseNavigation } from './Help/MouseNavigation';
 import { TouchNavigation } from './Help/TouchNavigation';
 import { KeyboardNavigation } from './Help/KeyboardNavigation';
 import { useTranslation } from '../i18n/I18n';
+import { type PlacementType } from '../Architecture';
 
 export type HelpButtonProps = {
   fallbackLanguage?: string;
+  placement?: PlacementType;
 };
 
-export const HelpButton = ({ fallbackLanguage }: HelpButtonProps): ReactElement => {
+export const HelpButton = ({ fallbackLanguage, placement }: HelpButtonProps): ReactElement => {
   const { t } = useTranslation(fallbackLanguage);
   const [helpActive, setHelpActive] = useState<boolean>(false);
 
@@ -26,15 +28,18 @@ export const HelpButton = ({ fallbackLanguage }: HelpButtonProps): ReactElement
       onClickOutside={() => {
         setHelpActive(false);
       }}
-      placement="right"
+      placement={placement ?? 'right'}
       content={
         <StyledContainer>
           <MouseNavigation fallbackLanguage={fallbackLanguage} />
           <KeyboardNavigation fallbackLanguage={fallbackLanguage} />
           <TouchNavigation fallbackLanguage={fallbackLanguage} />
         </StyledContainer>
       }>
-      <CogsTooltip content={t({ key: 'HELP_TOOLTIP' })} placement="right" appendTo={document.body}>
+      <CogsTooltip
+        content={t({ key: 'HELP_TOOLTIP' })}
+        placement={'right'}
+        appendTo={document.body}>
         <Button
           type="ghost"
           icon={<HelpIcon />}
@@ -53,9 +58,10 @@ const StyledContainer = styled.div`
   background-color: #516efa;
   border-radius: 4px;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   gap: 24px;
   padding: 16px;
-  // Width of help panel content sums to 1000. Would probably be better if it scaled to screen size
-  max-width: 1000px;
+  width: fit-content;
+  max-height: 20vw;
+  overflow-y: auto;
 `;