Allow configuration of buttonProps on tool button components (#384)

open-pioneer · Dec 12, 2024 · 8dc793e · 8dc793e
1 parent 911ccf6
commit 8dc793e
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 4 deletions.
diff --git a/.changeset/silver-beds-refuse.md b/.changeset/silver-beds-refuse.md
@@ -0,0 +1,10 @@
+---
+"@open-pioneer/map-navigation": minor
+"@open-pioneer/geolocation": minor
+---
+
+Add `ButtonProps` to `ToolButton` in `@open-pioneer/geolocation` and `@open-pioneer/map-navigation`
+
+Example:
+
+`<Geolocation buttonProps={{ variant: "outline" }} />`
diff --git a/src/packages/geolocation/Geolocation.tsx b/src/packages/geolocation/Geolocation.tsx
@@ -10,6 +10,7 @@ import { useIntl, useService } from "open-pioneer:react-hooks";
 import { FC, ForwardedRef, RefAttributes, forwardRef, useEffect, useState } from "react";
 import { MdMyLocation } from "react-icons/md";
 import { GeolocationController, OnErrorCallback } from "./GeolocationController";
+import { ButtonProps } from "@open-pioneer/chakra-integration";
 
 /**
  * These are properties supported by the {@link Geolocation} component.
@@ -18,6 +19,12 @@ export interface GeolocationProps
     extends CommonComponentProps,
         RefAttributes<HTMLButtonElement>,
         MapModelProps {
+    /**
+     * Additional properties for the `Button` element.
+     *
+     * Note that the ToolButton also defines some of these props.
+     */
+    buttonProps?: Partial<ButtonProps>;
     /**
      * The default maximal zoom level
      */
@@ -61,7 +68,7 @@ const GeolocationImpl = forwardRef(function GeolocationImpl(
     props: GeolocationProps & { controller: GeolocationController },
     ref: ForwardedRef<HTMLButtonElement>
 ) {
-    const { controller } = props;
+    const { controller, buttonProps } = props;
     const { containerProps } = useCommonComponentProps("geolocation", props);
     const { isLoading, isActive } = useReactiveSnapshot(() => {
         return {
@@ -94,6 +101,7 @@ const GeolocationImpl = forwardRef(function GeolocationImpl(
     return (
         <ToolButton
             ref={ref}
+            buttonProps={buttonProps}
             label={label}
             icon={<MdMyLocation />}
             onClick={() => toggleActiveState()}

diff --git a/src/packages/map-navigation/History.tsx b/src/packages/map-navigation/History.tsx
@@ -10,6 +10,7 @@ import { useIntl } from "open-pioneer:react-hooks";
 import { FC, ForwardedRef, forwardRef, RefAttributes } from "react";
 import { FiCornerUpLeft, FiCornerUpRight } from "react-icons/fi";
 import { useHistoryViewModel } from "./ViewHistoryModel";
+import { ButtonProps } from "@open-pioneer/chakra-integration";
 
 export type HistoryForwardProps = Omit<HistoryProps, "viewDirection">;
 
@@ -43,6 +44,13 @@ export interface HistoryProps
     extends CommonComponentProps,
         RefAttributes<HTMLButtonElement>,
         MapModelProps {
+    /**
+     * Additional properties for the `Button` element.
+     *
+     * Note that the ToolButton also defines some of these props.
+     */
+    buttonProps?: Partial<ButtonProps>;
+
     /**
      * The view direction.
      *
@@ -59,7 +67,7 @@ export const History: FC<HistoryProps> = forwardRef(function History(
     ref: ForwardedRef<HTMLButtonElement>
 ) {
     const intl = useIntl();
-    const { viewDirection } = props;
+    const { buttonProps, viewDirection } = props;
     const { map } = useMapModel(props);
     const viewModel = useHistoryViewModel(map);
     const { defaultClassName, buttonLabel, buttonIcon } = getDirectionProps(intl, viewDirection);
@@ -93,6 +101,7 @@ export const History: FC<HistoryProps> = forwardRef(function History(
             <ToolButton
                 ref={ref}
                 {...containerProps}
+                buttonProps={buttonProps}
                 label={buttonLabel}
                 icon={buttonIcon}
                 onClick={navigate}

diff --git a/src/packages/map-navigation/InitialExtent.tsx b/src/packages/map-navigation/InitialExtent.tsx
@@ -1,5 +1,6 @@
 // SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
 // SPDX-License-Identifier: Apache-2.0
+import { ButtonProps } from "@open-pioneer/chakra-integration";
 import { MapModelProps, useMapModel } from "@open-pioneer/map";
 import { ToolButton } from "@open-pioneer/map-ui-components";
 import { CommonComponentProps, useCommonComponentProps } from "@open-pioneer/react-utils";
@@ -11,7 +12,14 @@ import { FiHome } from "react-icons/fi";
 export interface InitialExtentProps
     extends CommonComponentProps,
         RefAttributes<HTMLButtonElement>,
-        MapModelProps {}
+        MapModelProps {
+    /**
+     * Additional properties for the `Button` element.
+     *
+     * Note that the ToolButton also defines some of these props.
+     */
+    buttonProps?: Partial<ButtonProps>;
+}
 
 /**
  * Provides a simple button that switches the view to its initial viewpoint.
@@ -23,6 +31,7 @@ export const InitialExtent: FC<InitialExtentProps> = forwardRef(function Initial
     const { containerProps } = useCommonComponentProps("initial-extent", props);
     const { map } = useMapModel(props);
     const intl = useIntl();
+    const { buttonProps } = props;
 
     function setInitExtent() {
         const initialExtent = map?.initialExtent;
@@ -41,6 +50,7 @@ export const InitialExtent: FC<InitialExtentProps> = forwardRef(function Initial
     return (
         <ToolButton
             ref={ref}
+            buttonProps={buttonProps}
             label={intl.formatMessage({ id: "initial-extent.title" })}
             icon={<FiHome />}
             onClick={setInitExtent}

diff --git a/src/packages/map-navigation/Zoom.tsx b/src/packages/map-navigation/Zoom.tsx
@@ -1,5 +1,6 @@
 // SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
 // SPDX-License-Identifier: Apache-2.0
+import { ButtonProps } from "@open-pioneer/chakra-integration";
 import { MapModelProps, useMapModel } from "@open-pioneer/map";
 import { ToolButton } from "@open-pioneer/map-ui-components";
 import { CommonComponentProps, useCommonComponentProps } from "@open-pioneer/react-utils";
@@ -35,6 +36,13 @@ export interface ZoomProps
     extends CommonComponentProps,
         RefAttributes<HTMLButtonElement>,
         MapModelProps {
+    /**
+     * Additional properties for the `Button` element.
+     *
+     * Note that the ToolButton also defines some of these props.
+     */
+    buttonProps?: Partial<ButtonProps>;
+
     /**
      * The zoom direction.
      *
@@ -50,7 +58,7 @@ export const Zoom: FC<ZoomProps> = forwardRef(function Zoom(
     props: ZoomProps,
     ref: ForwardedRef<HTMLButtonElement>
 ) {
-    const { zoomDirection } = props;
+    const { buttonProps, zoomDirection } = props;
     const { map } = useMapModel(props);
     const intl = useIntl();
     const [disabled, setDisabled] = useState<boolean>(false);
@@ -82,6 +90,7 @@ export const Zoom: FC<ZoomProps> = forwardRef(function Zoom(
     return (
         <ToolButton
             ref={ref}
+            buttonProps={buttonProps}
             label={buttonLabel}
             icon={buttonIcon}
             onClick={zoom}