fix(react-components): Fix layout of filter drop down menu (#4825)

* Update MockFilterCommand.ts * Update FilterButton.tsx * Move button * fixed filter select panel UI overflow issue * add height value for inner panel coponent to fit the parent element and hide the overflow for parent * Smaller fixes * Update MockFilterCommand.ts * Move the mockes --------- Co-authored-by: Pramod S <[email protected]>
cognitedata · Oct 24, 2024 · acb73d1 · acb73d1
1 parent a0defb0
commit acb73d1
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 21 deletions.
diff --git a/react-components/src/architecture/base/commands/mocks/MockFilterCommand.ts b/react-components/src/architecture/base/commands/mocks/MockFilterCommand.ts
@@ -12,7 +12,7 @@ export class MockFilterCommand extends BaseFilterCommand {
   // ==================================================
 
   public override get tooltip(): TranslateKey {
-    return { fallback: 'Filter' };
+    return { fallback: 'Mock Filter' };
   }
 
   protected override createChildren(): FilterItemCommand[] {
@@ -23,6 +23,13 @@ export class MockFilterCommand extends BaseFilterCommand {
       new FilterItemCommand('Yellow', new Color(Color.NAMES.yellow)),
       new FilterItemCommand('Cyan', new Color(Color.NAMES.cyan)),
       new FilterItemCommand('Magenta', new Color(Color.NAMES.magenta)),
+      new FilterItemCommand('Light green', new Color(Color.NAMES.lightgreen)),
+      new FilterItemCommand('Blue violet', new Color(Color.NAMES.blueviolet)),
+      new FilterItemCommand('Salmon', new Color(Color.NAMES.salmon)),
+      new FilterItemCommand('Pink', new Color(Color.NAMES.pink)),
+      new FilterItemCommand('Gold', new Color(Color.NAMES.gold)),
+      new FilterItemCommand('Silver', new Color(Color.NAMES.silver)),
+      new FilterItemCommand('Goral', new Color(Color.NAMES.coral)),
       new FilterItemCommand('No color')
     ];
   }

diff --git a/react-components/src/architecture/concrete/config/StoryBookConfig.ts b/react-components/src/architecture/concrete/config/StoryBookConfig.ts
@@ -58,17 +58,17 @@ export class StoryBookConfig extends BaseRevealConfig {
       new ClipTool(),
       new PointsOfInterestTool<DmsUniqueIdentifier>(),
       undefined,
+      new MockSettingsCommand(),
+      new MockFilterCommand(),
+      undefined,
       new AnnotationsSelectTool(),
       new AnnotationsCreateTool(),
       new AnnotationsShowCommand(),
       new AnnotationsShowOnTopCommand(),
       undefined,
       new ExampleTool(),
       new SetTerrainVisibleCommand(),
-      new UpdateTerrainCommand(),
-      undefined,
-      new MockSettingsCommand(),
-      new MockFilterCommand()
+      new UpdateTerrainCommand()
     ];
   }
 

diff --git a/react-components/src/components/Architecture/FilterButton.tsx b/react-components/src/components/Architecture/FilterButton.tsx
@@ -212,7 +212,9 @@ const FilterDropdown = ({
             )}
           </Button>
         </SelectPanel.Trigger>
-        <SelectPanel.Body>{PanelContent}</SelectPanel.Body>
+        <SelectPanel.Body style={{ overflow: 'hidden', zindex: 2000 }}>
+          {PanelContent}
+        </SelectPanel.Body>
       </StyledSelectPanel>
     </StyledDropdownRow>
   );
@@ -235,21 +237,20 @@ const FilterSelectPanelContent = ({
 
   return (
     <>
-      <SelectPanel.Header title={label} />
-      <SelectPanel.Body label={label}>
-        <SelectPanel.Section>
-          <SelectPanel.Item
-            key={-1}
-            variant="checkbox"
-            checked={isAllChecked}
-            indeterminate={!isAllChecked && isSomeChecked}
-            onClick={() => {
-              command.toggleAllChecked();
-            }}
-            label={BaseFilterCommand.getAllString(t)}>
-            {BaseFilterCommand.getAllString(t)}
-          </SelectPanel.Item>
-        </SelectPanel.Section>
+      <SelectPanel.Section>
+        <SelectPanel.Item
+          key={-1}
+          variant="checkbox"
+          checked={isAllChecked}
+          indeterminate={!isAllChecked && isSomeChecked}
+          onClick={() => {
+            command.toggleAllChecked();
+          }}
+          label={BaseFilterCommand.getAllString(t)}>
+          {BaseFilterCommand.getAllString(t)}
+        </SelectPanel.Item>
+      </SelectPanel.Section>
+      <SelectPanel.Body label={label} style={{ maxHeight: '300px' }}>
         <SelectPanel.Section>
           {children?.map((child, _index): ReactElement => {
             return <FilterItem key={child.uniqueId} command={child} />;