Redesign filter checkbox (#634)

- Add new ContentMenuButton, which is MenuButton with only custom content, such as Checkbox. - Add new FilterCheckbox component, which is a row with checkbox designed for the filter. - Add common focus outline CSS property to theme. - Add common focus outline to checkbox. This should be applied to all focusable elements, but we are starting with checkbox.
StenaIT · Oct 23, 2023 · eb8e14b · eb8e14b
1 parent 5032fbf
commit eb8e14b
Show file tree

Hide file tree

Showing 15 changed files with 149 additions and 61 deletions.
diff --git a/packages/core/src/types/ElementProps.tsx b/packages/core/src/types/ElementProps.tsx
@@ -21,6 +21,8 @@ export type H1Props = ComponentPropsWithoutRef<"h1">;
 
 export type ButtonElementProps = ComponentPropsWithoutRef<"button">;
 
+export type LabelElementProps = ComponentPropsWithoutRef<"label">;
+
 export type InputElementProps = ComponentPropsWithoutRef<"input">;
 
 export type AnchorElementProps = ComponentPropsWithoutRef<"a">;

diff --git a/packages/elements/src/components/ui/action-menu/ActionMenuItemContent.tsx b/packages/elements/src/components/ui/action-menu/ActionMenuItemContent.tsx
@@ -7,7 +7,7 @@ import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import {
   MenuButtonContent,
   MenuButtonContentProps,
-} from "../buttons/menu-button/MenuButtonContent";
+} from "../buttons/menu-button/internal/MenuButtonContent";
 
 export interface ActionMenuItemContentProps
   extends DivProps,

diff --git a/packages/elements/src/components/ui/buttons/menu-button/ContentMenuButton.module.css b/packages/elements/src/components/ui/buttons/menu-button/ContentMenuButton.module.css
@@ -0,0 +1,25 @@
+.contentMenuButton {
+  --current-outline: none;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+
+  border-radius: var(--swui-max-border-radius);
+  min-height: 40px;
+  padding: 4px 0;
+  outline: none;
+
+  &:hover {
+    background: var(--lhds-color-ui-400);
+  }
+
+  &:focus {
+    background: var(--lhds-color-ui-500);
+  }
+
+  &:active {
+    background: var(--lhds-color-ui-500);
+  }
+}
diff --git a/packages/elements/src/components/ui/buttons/menu-button/ContentMenuButton.tsx b/packages/elements/src/components/ui/buttons/menu-button/ContentMenuButton.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+import { forwardRef, ReactNode } from "react";
+import { LabelElementProps, Row } from "@stenajs-webui/core";
+import styles from "./ContentMenuButton.module.css";
+
+export interface ContentMenuButtonProps extends LabelElementProps {
+  children?: ReactNode;
+}
+
+export const ContentMenuButton = forwardRef<
+  HTMLLabelElement,
+  ContentMenuButtonProps
+>(({ children, ...labelProps }, ref) => {
+  return (
+    <label className={styles.contentMenuButton} ref={ref} {...labelProps}>
+      <Row justifyContent={"flex-start"} alignItems={"center"} indent={2}>
+        {children}
+      </Row>
+    </label>
+  );
+});
diff --git a/packages/elements/src/components/ui/buttons/menu-button/IconMenuButton.tsx b/packages/elements/src/components/ui/buttons/menu-button/IconMenuButton.tsx
@@ -21,37 +21,35 @@ export const IconMenuButton = forwardRef<
   ref
 ) {
   return (
-    <Box>
-      <Box
-        className={cx(styles.menuButton)}
-        width={"100%"}
-        borderRadius={"99rem"}
-        overflow={"hidden"}
+    <Box
+      className={cx(styles.menuButton)}
+      width={"100%"}
+      borderRadius={"99rem"}
+      overflow={"hidden"}
+    >
+      <button
+        className={cx(
+          styles.button,
+          selected && styles.selected,
+          disabled && styles.disabled,
+          styles[variant],
+          className
+        )}
+        disabled={disabled}
+        ref={ref}
+        {...buttonProps}
       >
-        <button
-          className={cx(
-            styles.button,
-            selected && styles.selected,
-            disabled && styles.disabled,
-            styles[variant],
-            className
-          )}
-          disabled={disabled}
-          ref={ref}
-          {...buttonProps}
-        >
-          <Row justifyContent={"center"} alignItems={"center"} indent={1}>
-            <Box alignItems={"center"} justifyContent={"center"} width={"20px"}>
-              <Icon
-                icon={icon}
-                size={20}
-                color={"var(--current-text-color)"}
-                data-hover={true}
-              />
-            </Box>
-          </Row>
-        </button>
-      </Box>
+        <Row justifyContent={"center"} alignItems={"center"} indent={1}>
+          <Box alignItems={"center"} justifyContent={"center"} width={"20px"}>
+            <Icon
+              icon={icon}
+              size={20}
+              color={"var(--current-text-color)"}
+              data-hover={true}
+            />
+          </Box>
+        </Row>
+      </button>
     </Box>
   );
 });
diff --git a/packages/elements/src/components/ui/buttons/menu-button/MenuButton.tsx b/packages/elements/src/components/ui/buttons/menu-button/MenuButton.tsx
@@ -13,7 +13,7 @@ import { cssColor } from "@stenajs-webui/theme";
 import { MenuButtonGroupBox } from "./MenuButtonGroupBox";
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { Icon } from "../../icon/Icon";
-import { MenuButtonContent } from "./MenuButtonContent";
+import { MenuButtonContent } from "./internal/MenuButtonContent";
 import {
   stenaAngleDown,
   stenaAngleUp,

diff --git a/packages/elements/src/components/ui/buttons/menu-button/MenuButtonLink.tsx b/packages/elements/src/components/ui/buttons/menu-button/MenuButtonLink.tsx
@@ -4,7 +4,7 @@ import { AnchorElementProps, Box, Row } from "@stenajs-webui/core";
 import cx from "classnames";
 import styles from "./MenuButton.module.css";
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-import { MenuButtonContent } from "./MenuButtonContent";
+import { MenuButtonContent } from "./internal/MenuButtonContent";
 import { MenuButtonVariant } from "./MenuButton";
 
 export type MenuButtonLinkRenderer = (

diff --git a/...buttons/menu-button/MenuButtonContent.tsx → ...enu-button/internal/MenuButtonContent.tsx b/...buttons/menu-button/MenuButtonContent.tsx → ...enu-button/internal/MenuButtonContent.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Box, Row, Text } from "@stenajs-webui/core";
-import { Icon } from "../../icon/Icon";
-import styles from "./MenuButton.module.css";
+import { Icon } from "../../../icon/Icon";
+import styles from "../MenuButton.module.css";
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { ReactNode } from "react";
 

diff --git a/packages/elements/src/index.ts b/packages/elements/src/index.ts
@@ -19,6 +19,7 @@ export * from "./components/ui/buttons/SecondaryButton";
 export * from "./components/ui/buttons/common/ButtonCommon";
 export * from "./components/ui/buttons/common/ButtonContent";
 export * from "./components/ui/buttons/menu-button/MenuButton";
+export * from "./components/ui/buttons/menu-button/ContentMenuButton";
 export * from "./components/ui/buttons/menu-button/IconMenuButton";
 export * from "./components/ui/buttons/menu-button/MenuButtonLink";
 export * from "./components/ui/buttons/menu-button/IconMenuButtonLink";

diff --git a/packages/filter/src/features/search-filter/features/filter-checkbox/FilterCheckbox.tsx b/packages/filter/src/features/search-filter/features/filter-checkbox/FilterCheckbox.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+import { Row, Text } from "@stenajs-webui/core";
+import { ContentMenuButton } from "@stenajs-webui/elements";
+import { Checkbox, CheckboxProps } from "@stenajs-webui/forms";
+
+export interface FilterCheckboxProps extends CheckboxProps {
+  label: string;
+}
+
+export const FilterCheckbox: React.FC<FilterCheckboxProps> = ({
+  label,
+  ...checkboxProps
+}) => {
+  return (
+    <ContentMenuButton>
+      <Row gap={2} alignItems={"center"} justifyContent={"flex-start"}>
+        <Checkbox {...checkboxProps} />
+        <Text>{label}</Text>
+      </Row>
+    </ContentMenuButton>
+  );
+};
diff --git a/packages/filter/src/features/search-filter/features/filter-checkbox/FilterCheckboxList.tsx b/packages/filter/src/features/search-filter/features/filter-checkbox/FilterCheckboxList.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+import { PropsWithChildren } from "react";
+import { Column } from "@stenajs-webui/core";
+
+export interface FilterCheckboxListProps extends PropsWithChildren {
+  maxHeight?: string;
+}
+
+export const FilterCheckboxList: React.FC<FilterCheckboxListProps> = ({
+  children,
+  maxHeight,
+}) => {
+  return (
+    <Column
+      maxHeight={maxHeight}
+      overflowY={maxHeight ? "auto" : undefined}
+      gap={1}
+      spacing={1}
+    >
+      {children}
+    </Column>
+  );
+};
diff --git a/...s/search-filter/section-factories/boolean-record/components/SimpleCheckboxListSection.tsx b/...s/search-filter/section-factories/boolean-record/components/SimpleCheckboxListSection.tsx
@@ -3,12 +3,10 @@ import {
   SearchFilterSection,
   SearchFilterSectionProps,
 } from "../../../components/SearchFilterSection";
-import { Column, Row } from "@stenajs-webui/core";
-import {
-  CheckboxWithLabel,
-  ValueAndOnValueChangeProps,
-} from "@stenajs-webui/forms";
+import { ValueAndOnValueChangeProps } from "@stenajs-webui/forms";
 import { BooleanRecord, BooleanRecordOptions } from "../BooleanRecordTypes";
+import { FilterCheckbox } from "../../../features/filter-checkbox/FilterCheckbox";
+import { FilterCheckboxList } from "../../../features/filter-checkbox/FilterCheckboxList";
 
 export interface SimpleCheckboxSectionProps<TSectionKey extends string>
   extends SearchFilterSectionProps<TSectionKey>,
@@ -23,22 +21,20 @@ export const SimpleCheckboxListSection = <TSectionKey extends string>({
   ...sectionProps
 }: SimpleCheckboxSectionProps<TSectionKey>): React.ReactElement => (
   <SearchFilterSection disableContentPadding {...sectionProps}>
-    <Column maxHeight={"400px"} overflowY={"auto"} flex={1} gap={1} spacing={1}>
+    <FilterCheckboxList maxHeight={"400px"}>
       {options?.map((d) => (
-        <Row key={d.value} alignItems={"center"}>
-          <CheckboxWithLabel
-            tabIndex={-1}
-            value={value?.[d.value]}
-            label={d.label}
-            onValueChange={(v) =>
-              onValueChange?.({
-                ...value,
-                [d.value]: v,
-              })
-            }
-          />
-        </Row>
+        <FilterCheckbox
+          key={d.value}
+          value={value?.[d.value]}
+          label={d.label}
+          onValueChange={(v) =>
+            onValueChange?.({
+              ...value,
+              [d.value]: v,
+            })
+          }
+        />
       ))}
-    </Column>
+    </FilterCheckboxList>
   </SearchFilterSection>
 );
diff --git a/packages/filter/src/index.ts b/packages/filter/src/index.ts
@@ -17,6 +17,8 @@ export * from "./features/search-filter/context/SearchFilterDispatchContext";
 export * from "./features/search-filter/hooks/UseLocalSearchFilterState";
 export * from "./features/search-filter/redux/SearchFilterRedux";
 export * from "./features/search-filter/types/FilterEntity";
+export * from "./features/search-filter/features/filter-checkbox/FilterCheckbox";
+export * from "./features/search-filter/features/filter-checkbox/FilterCheckboxList";
 export * from "./features/search-filter/features/chips/SearchFilterChips";
 export * from "./features/search-filter/features/chips/SectionChips";
 export * from "./features/search-filter/features/chips/SearchFilterChip";

diff --git a/packages/forms/src/components/ui/checkbox/Checkbox.module.css b/packages/forms/src/components/ui/checkbox/Checkbox.module.css
@@ -163,12 +163,7 @@
   }
 
   &:focus-visible {
-    &:checked {
-      box-shadow: var(--swui-checkbox-checked-focus-shadow);
-    }
-    &:not(:checked) {
-      box-shadow: var(--swui-checkbox-unchecked-focus-shadow);
-    }
+    outline: var(--swui-focus-outline);
   }
 
   & + label {

diff --git a/packages/theme/src/styles/default-theme.css b/packages/theme/src/styles/default-theme.css
@@ -109,4 +109,7 @@
   --swui-metrics-space: 8px;
 
   --swui-default-item-height: 40px;
+
+  /* Focus outline */
+  --swui-focus-outline: 2px solid var(--modern-blue);
 }