diff --git a/.changeset/silver-beds-refuse.md b/.changeset/silver-beds-refuse.md
new file mode 100644
index 00000000..f384ac50
--- /dev/null
+++ 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:
+
+``
diff --git a/src/packages/geolocation/Geolocation.tsx b/src/packages/geolocation/Geolocation.tsx
index 033f62f7..5197704f 100644
--- 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,
MapModelProps {
+ /**
+ * Additional properties for the `Button` element.
+ *
+ * Note that the ToolButton also defines some of these props.
+ */
+ buttonProps?: Partial;
/**
* The default maximal zoom level
*/
@@ -61,7 +68,7 @@ const GeolocationImpl = forwardRef(function GeolocationImpl(
props: GeolocationProps & { controller: GeolocationController },
ref: ForwardedRef
) {
- 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 (
}
onClick={() => toggleActiveState()}
diff --git a/src/packages/map-navigation/History.tsx b/src/packages/map-navigation/History.tsx
index 80ae92e0..1dcf7b09 100644
--- 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;
@@ -43,6 +44,13 @@ export interface HistoryProps
extends CommonComponentProps,
RefAttributes,
MapModelProps {
+ /**
+ * Additional properties for the `Button` element.
+ *
+ * Note that the ToolButton also defines some of these props.
+ */
+ buttonProps?: Partial;
+
/**
* The view direction.
*
@@ -59,7 +67,7 @@ export const History: FC = forwardRef(function History(
ref: ForwardedRef
) {
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 = forwardRef(function History(
,
- MapModelProps {}
+ MapModelProps {
+ /**
+ * Additional properties for the `Button` element.
+ *
+ * Note that the ToolButton also defines some of these props.
+ */
+ buttonProps?: Partial;
+}
/**
* Provides a simple button that switches the view to its initial viewpoint.
@@ -23,6 +31,7 @@ export const InitialExtent: FC = 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 = forwardRef(function Initial
return (
}
onClick={setInitExtent}
diff --git a/src/packages/map-navigation/Zoom.tsx b/src/packages/map-navigation/Zoom.tsx
index a9b2976e..0bf44d96 100644
--- 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,
MapModelProps {
+ /**
+ * Additional properties for the `Button` element.
+ *
+ * Note that the ToolButton also defines some of these props.
+ */
+ buttonProps?: Partial;
+
/**
* The zoom direction.
*
@@ -50,7 +58,7 @@ export const Zoom: FC = forwardRef(function Zoom(
props: ZoomProps,
ref: ForwardedRef
) {
- const { zoomDirection } = props;
+ const { buttonProps, zoomDirection } = props;
const { map } = useMapModel(props);
const intl = useIntl();
const [disabled, setDisabled] = useState(false);
@@ -82,6 +90,7 @@ export const Zoom: FC = forwardRef(function Zoom(
return (