ECHOES-1362 Implement FilterDropdown component

design-tokens/tokens/component/base.json

@@ -23,6 +23,22 @@
       }
     },
     "filter": {
+      "dropdown": {
+        "sizes": {
+          "leftPanelWidth": {
+            "default": {
+              "$type": "sizing",
+              "$value": "277px"
+            }
+          },
+          "minHeight": {
+            "default": {
+              "$type": "sizing",
+              "$value": "350px"
+            }
+          }
+        }
+      },
       "tag": {
         "sizes": {
           "maxWidth": {

i18n/keys.json

@@ -19,6 +19,26 @@
     "defaultMessage": "Warning banner:",
     "description": "Screen reader only text that expresses the type of the Warning banner"
   },
+  "filter.dropdown.apply": {
+    "defaultMessage": "Apply filters",
+    "description": "Label for the button that applies the pending filter selection"
+  },
+  "filter.dropdown.categories.label": {
+    "defaultMessage": "Categories",
+    "description": "Accessible label for the filter categories listbox"
+  },
+  "filter.dropdown.clear": {
+    "defaultMessage": "Clear filters",
+    "description": "Label for the button that clears all active filters"
+  },
+  "filter.dropdown.label": {
+    "defaultMessage": "Filters",
+    "description": "Accessible label for the filter popover dialog"
+  },
+  "filter.dropdown.search": {
+    "defaultMessage": "Search",
+    "description": "Placeholder text for the filter search input"
+  },
   "filter.tag.dismiss": {
     "defaultMessage": "Remove {filter} filter",
     "description": "Accessible label for the dismiss button of a filter tag, where {filter} is the name of the filter to be removed"

src/common/helpers/constants.ts

@@ -0,0 +1,22 @@
+/*
+ * Echoes React
+ * Copyright (C) 2023-2025 SonarSource Sàrl
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+export const EMPTY_ARRAY: readonly never[] = Object.freeze([]);
+
+export const KEYBOARD_THROTTLE_MS = 100;

src/components/badges/BadgeCounter.tsx

@@ -54,7 +54,9 @@ export function BadgeCounter(props: Readonly<BadgeCounterProps>) {
 BadgeCounter.displayName = 'BadgeCounter';
 
 const BadgeCounterStyled = styled.span`
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   box-sizing: border-box;
   height: ${cssVar('line-height-10')};
   min-width: ${cssVar('dimension-width-200')};
@@ -64,7 +66,6 @@ const BadgeCounterStyled = styled.span`
 
   font: ${cssVar('typography-text-small-semi-bold')};
   color: var(--badge-counter-color);
-  text-align: center;
 
   background-color: var(--badge-counter-background-color);
 `;

src/components/checkbox/Checkbox.tsx

@@ -18,16 +18,19 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-import styled from '@emotion/styled';
-import * as RadixCheckbox from '@radix-ui/react-checkbox';
 import { forwardRef, useCallback, useId } from 'react';
 import { PropsWithLabelsAndHelpText } from '~types/utils';
-import { FormFieldLabel } from '../form/FormFieldLabel';
-import { Spinner } from '../spinner';
 import { HelperText } from '../typography';
 import { CheckboxIcon } from './CheckboxIcon';
-
-import { cssVar } from '~utils/design-tokens';
+import {
+  CheckboxContainer,
+  CheckboxIndicator,
+  CheckboxInnerContainer,
+  CheckboxLabel,
+  CheckboxLabelWrapper,
+  CheckboxRoot,
+  CheckboxSpinner,
+} from './CheckboxStyles';
 
 interface CheckboxPropsBase {
   /**
@@ -159,102 +162,3 @@ export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>((props, ref
   );
 });
 Checkbox.displayName = 'Checkbox';
-
-const CheckboxContainer = styled.span`
-  display: inline-flex;
-  vertical-align: top;
-
-  &[data-disabled] {
-    pointer-events: none;
-  }
-`;
-CheckboxContainer.displayName = 'CheckboxContainer';
-
-const CheckboxInnerContainer = styled.span`
-  display: flex;
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 0.833rem;
-`;
-CheckboxInnerContainer.displayName = 'CheckboxInnerContainer';
-
-const CheckboxRoot = styled(RadixCheckbox.Root)`
-  color: ${cssVar('color-text-on-color')};
-  background-color: ${cssVar('color-surface-default')};
-  border: ${cssVar('border-width-default')} solid ${cssVar('color-border-bolder')};
-
-  height: ${cssVar('dimension-height-400')};
-  width: ${cssVar('dimension-width-200')};
-  border-radius: ${cssVar('border-radius-100')};
-  margin: ${cssVar('dimension-space-25')} 0;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-
-  &:focus,
-  &:focus-visible {
-    outline: ${cssVar('color-focus-default')} solid ${cssVar('focus-border-width-default')};
-    outline-offset: ${cssVar('focus-border-offset-default')};
-  }
-
-  &[aria-disabled='true'] {
-    color: ${cssVar('color-icon-disabled')};
-    background-color: ${cssVar('color-surface-disabled')};
-    border-color: ${cssVar('color-border-disabled')};
-
-    &[aria-checked='true'],
-    &[aria-checked='mixed'] {
-      background-color: ${cssVar('color-surface-disabled')};
-      border-color: ${cssVar('color-border-disabled')};
-    }
-  }
-
-  &:not([aria-disabled='true']) {
-    &:hover {
-      background-color: ${cssVar('color-surface-hover')};
-    }
-
-    &[aria-checked='true'],
-    &[aria-checked='mixed'] {
-      background-color: ${cssVar('color-background-selected-bold-default')};
-      border-color: ${cssVar('color-background-selected-bold-default')};
-
-      &:hover {
-        background-color: ${cssVar('color-background-selected-bold-hover')};
-        border: ${cssVar('color-background-selected-bold-hover')};
-      }
-    }
-
-    &[data-error] {
-      border-color: ${cssVar('color-border-danger-default')};
-    }
-  }
-`;
-CheckboxRoot.displayName = 'CheckboxRoot';
-
-const CheckboxSpinner = styled(Spinner)`
-  margin: ${cssVar('dimension-space-25')} 0;
-`;
-CheckboxSpinner.displayName = 'CheckboxSpinner';
-
-const CheckboxIndicator = styled(RadixCheckbox.Indicator)`
-  height: ${cssVar('dimension-height-400')};
-  width: ${cssVar('dimension-width-200')};
-`;
-CheckboxIndicator.displayName = 'CheckboxIndicator';
-
-const CheckboxLabelWrapper = styled.span`
-  display: inline-flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  margin-left: ${cssVar('dimension-space-100')};
-`;
-CheckboxLabelWrapper.displayName = 'CheckboxLabelWrapper';
-
-const CheckboxLabel = styled(FormFieldLabel)`
-  color: ${cssVar('color-text-default')};
-  font: ${cssVar('typography-others-label-medium')};
-`;
-CheckboxLabel.displayName = 'CheckboxLabel';

src/components/checkbox/CheckboxStyles.tsx

@@ -0,0 +1,124 @@
+/*
+ * Echoes React
+ * Copyright (C) 2023-2025 SonarSource Sàrl
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+import styled from '@emotion/styled';
+import * as RadixCheckbox from '@radix-ui/react-checkbox';
+import { cssVar } from '~utils/design-tokens';
+import { FormFieldLabel } from '../form/FormFieldLabel';
+import { Spinner } from '../spinner';
+
+export const CheckboxContainer = styled.span`
+  display: inline-flex;
+  vertical-align: top;
+
+  &[data-disabled] {
+    pointer-events: none;
+  }
+`;
+CheckboxContainer.displayName = 'CheckboxContainer';
+
+export const CheckboxInnerContainer = styled.span`
+  display: flex;
+`;
+CheckboxInnerContainer.displayName = 'CheckboxInnerContainer';
+
+export const CheckboxSpinner = styled(Spinner)`
+  margin: ${cssVar('dimension-space-25')} 0;
+`;
+CheckboxSpinner.displayName = 'CheckboxSpinner';
+
+export const CheckboxLabelWrapper = styled.span`
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  margin-left: ${cssVar('dimension-space-100')};
+`;
+CheckboxLabelWrapper.displayName = 'CheckboxLabelWrapper';
+
+export const CheckboxLabel = styled(FormFieldLabel)`
+  color: ${cssVar('color-text-default')};
+  font: ${cssVar('typography-others-label-medium')};
+`;
+CheckboxLabel.displayName = 'CheckboxLabel';
+
+export const CheckboxIndicator = styled(RadixCheckbox.Indicator)`
+  height: ${cssVar('dimension-height-400')};
+  width: ${cssVar('dimension-width-200')};
+`;
+CheckboxIndicator.displayName = 'CheckboxIndicator';
+
+export const styleCheckboxRootBase = styled.div`
+  color: ${cssVar('color-text-on-color')};
+  background-color: ${cssVar('color-surface-default')};
+  border: ${cssVar('border-width-default')} solid ${cssVar('color-border-bolder')};
+
+  height: ${cssVar('dimension-height-400')};
+  width: ${cssVar('dimension-width-200')};
+  border-radius: ${cssVar('border-radius-100')};
+  margin: ${cssVar('dimension-space-25')} 0;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+`.withComponent;
+
+export const CheckboxRoot = styled(styleCheckboxRootBase(RadixCheckbox.Root))`
+  &:focus,
+  &:focus-visible {
+    outline: ${cssVar('color-focus-default')} solid ${cssVar('focus-border-width-default')};
+    outline-offset: ${cssVar('focus-border-offset-default')};
+  }
+
+  &[aria-disabled='true'] {
+    color: ${cssVar('color-icon-disabled')};
+    background-color: ${cssVar('color-surface-disabled')};
+    border-color: ${cssVar('color-border-disabled')};
+
+    &[aria-checked='true'],
+    &[aria-checked='mixed'] {
+      background-color: ${cssVar('color-surface-disabled')};
+      border-color: ${cssVar('color-border-disabled')};
+    }
+  }
+
+  &:not([aria-disabled='true']) {
+    &:hover {
+      background-color: ${cssVar('color-surface-hover')};
+    }
+
+    &[aria-checked='true'],
+    &[aria-checked='mixed'] {
+      background-color: ${cssVar('color-background-selected-bold-default')};
+      border-color: ${cssVar('color-background-selected-bold-default')};
+
+      &:hover {
+        background-color: ${cssVar('color-background-selected-bold-hover')};
+        border: ${cssVar('color-background-selected-bold-hover')};
+      }
+    }
+
+    &[data-error] {
+      border-color: ${cssVar('color-border-danger-default')};
+    }
+  }
+`;
+CheckboxRoot.displayName = 'CheckboxRoot';

src/components/dropdown-menu/DropdownMenu.tsx

@@ -28,8 +28,8 @@ import { cssVar } from '~utils/design-tokens';
 import { THEME_DATA_ATTRIBUTE, ThemeContext } from '~utils/theme';
 import { PortalContext } from '../../common/components/PortalContext';
 import { HelperText, Label } from '../typography';
-import { styleDropdownMenuOverlay } from './DropdownMenuCommons';
 import { DropdownMenuSeparator } from './DropdownMenuSeparator';
+import { styleDropdownMenuOverlay } from './DropdownMenuStyles';
 
 export enum DropdownMenuAlign {
   Center = 'center',