feat(List): add radio filter reset button

apps/docs/src/content/04-components/overlays/modal/overview.mdx

@@ -22,9 +22,7 @@ Neben der klassischen Darstellung lässt sich das Modal auch als OffCanvas
 # Sizes
 
 Das Modal gibt es in zwei Standardgrößen: **S** und **M**. Beide Größen sind
-sowohl als klassisches Modal als auch in der OffCanvas-Variante verfügbar. In
-der OffCanvas-Darstellung kannst du außerdem eine individuelle Größe je nach
-Anwendungsfall festlegen.
+sowohl als klassisches Modal als auch in der OffCanvas-Variante verfügbar.
 
 <LiveCodeEditor example="size" editorCollapsed />
 

packages/components/src/components/List/components/Header/components/AllFiltersModal/FilterAccordion.tsx

@@ -7,6 +7,10 @@ import RadioView from "@/views/RadioView";
 import CheckboxGroupView from "@/views/CheckboxGroupView";
 import CheckboxView from "@/views/CheckboxView";
 import type { Filter } from "@/components/List/model/filter/Filter";
+import ButtonView from "@/views/ButtonView";
+import { Flex } from "@/components/Flex";
+import { useLocalizedStringFormatter } from "react-aria";
+import locales from "../../../../locales/*.locale.json";
 
 interface Props {
   filter: Filter<never, never, never>;
@@ -17,29 +21,50 @@ export const FilterAccordion: FC<Props> = (props) => {
 
   const activeKeys = filter.values.filter((v) => v.isActive).map((v) => v.id);
 
+  const name = filter.name ?? filter.property;
+
+  const stringFormatter = useLocalizedStringFormatter(locales);
+
   return (
     <AccordionView>
-      <HeadingView>{filter.name ?? filter.property}</HeadingView>
+      <HeadingView>{name}</HeadingView>
       <ContentView>
         {filter.mode === "one" && (
-          <RadioGroupView value={activeKeys[0]} m={[1, 1]}>
-            {filter.values.map((v) => (
-              <RadioView
-                key={v.id}
-                value={v.id}
-                onPress={() => {
-                  if (!v.isActive) {
-                    v.toggle();
-                  }
-                }}
+          <Flex direction="column" gap="m">
+            <RadioGroupView
+              value={activeKeys[0]}
+              m={[1, 1]}
+              key={activeKeys[0]}
+              aria-label={name}
+            >
+              {filter.values.map((v) => (
+                <RadioView
+                  key={v.id}
+                  value={v.id}
+                  onPress={() => {
+                    if (!v.isActive) {
+                      v.toggle();
+                    }
+                  }}
+                >
+                  {v.render()}
+                </RadioView>
+              ))}
+            </RadioGroupView>
+            {activeKeys.length > 0 && (
+              <ButtonView
+                size="s"
+                color="secondary"
+                variant="soft"
+                onPress={() => filter.clear()}
               >
-                {v.render()}
-              </RadioView>
-            ))}
-          </RadioGroupView>
+                {stringFormatter.format("list.filters.clearSelection")}
+              </ButtonView>
+            )}
+          </Flex>
         )}
         {filter.mode !== "one" && (
-          <CheckboxGroupView value={activeKeys} m={[1, 1]}>
+          <CheckboxGroupView value={activeKeys} m={[1, 1]} aria-label={name}>
             {filter.values.map((v) => (
               <CheckboxView key={v.id} value={v.id} onPress={() => v.toggle()}>
                 {v.render()}

packages/components/src/components/List/components/Header/components/FilterContextMenu/FilterContextMenu.tsx

@@ -17,8 +17,10 @@ export const FilterContextMenu: FC<Props> = (props) => {
 
   const { values, mode, name, property } = filter;
 
+  const selectionMode = mode === "one" ? "single" : "multiple";
+
   const filterItems = values.map((v) => (
-    <FilterMenuItem filterValue={v} key={v.id} />
+    <FilterMenuItem filterValue={v} key={v.id} selectionMode={selectionMode} />
   ));
 
   const activeFilterKeys = values.filter((v) => v.isActive).map((v) => v.id);
@@ -34,7 +36,7 @@ export const FilterContextMenu: FC<Props> = (props) => {
         <IconFilter />
       </ButtonView>
       <ContextMenuView
-        selectionMode={mode === "one" ? "single" : "multiple"}
+        selectionMode={selectionMode}
         selectedKeys={activeFilterKeys}
       >
         {filterItems}

packages/components/src/components/List/components/Header/components/FilterContextMenu/FilterMenuItem.tsx

@@ -1,19 +1,23 @@
 import MenuItemView from "@/views/MenuItemView";
 import { type FC } from "react";
 import type { FilterValue } from "@/components/List/model/filter/FilterValue";
+import type { ContextMenuSelectionMode } from "@/components/ContextMenu/lib";
 
 interface Props {
   filterValue: FilterValue;
+  selectionMode?: ContextMenuSelectionMode;
 }
 
 export const FilterMenuItem: FC<Props> = (props) => {
-  const { filterValue } = props;
+  const { filterValue, selectionMode } = props;
 
   return (
     <MenuItemView
       id={filterValue.id}
       onAction={() => {
-        filterValue.toggle();
+        if (selectionMode === "multiple" || !filterValue.isActive) {
+          filterValue.toggle();
+        }
       }}
     >
       {filterValue.render()}

packages/components/src/components/List/locales/de-DE.locale.json

@@ -2,6 +2,7 @@
   "list.filters": "Filter",
   "list.filters.all": "Alle Filter",
   "list.filters.clear": "Filter entfernen",
+  "list.filters.clearSelection": "Auswahl aufheben",
   "list.filters.reset": "Filter zurücksetzen",
   "list.filters.store": "Filter speichern",
   "list.noResult.heading": "Keine Suchergebnisse gefunden",

packages/components/src/components/List/locales/en-US.locale.json

@@ -2,6 +2,7 @@
   "list.filters": "Filters",
   "list.filters.all": "All filters",
   "list.filters.clear": "Clear filters",
+  "list.filters.clearSelection": "Clear selection",
   "list.filters.reset": "Reset filters",
   "list.filters.store": "Store filters",
   "list.noResult.heading": "No search results found",

packages/components/src/components/List/stories/Default.stories.tsx

@@ -84,7 +84,6 @@ const meta: Meta<typeof List> = {
             <DomainList.Filter
               values={availableTypes}
               property="type"
-              mode="all"
               name="Type"
               defaultSelected={["Domain"]}
             />