provide labelProps to configure automatically injected Label element

CHANGELOG.md

@@ -6,6 +6,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## [Unreleased]
 
+### Added
+
+-   `<PropertyName />`
+    -   provide `labelProps` to configure the automatically injected `Label` element when `PropertyName` is only a string
+
 ### Fixed
 
 -   `<Spacing />`

src/components/PropertyValuePair/PropertyName.tsx

@@ -1,26 +1,37 @@
 import React from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import Label from "../Label/Label";
+import Label, { LabelProps } from "../Label/Label";
 
 export interface PropertyNameProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Increase or decrease the width used for the property name.
      */
     size?: "small" | "medium" | "large";
+    /**
+     * Additonal label properties, e.g. `tooltip`.
+     * It is only used if the `PropertyName` has simple text input.
+     */
+    labelProps?: LabelProps;
 }
 
-export const PropertyName = ({ className = "", size, children, ...otherProps }: PropertyNameProps) => {
+export const PropertyName = ({ className = "", size, children, labelProps, ...otherDtProps }: PropertyNameProps) => {
     return (
         <dt
             className={
                 `${eccgui}-propertyvalue__property` +
                 (size ? ` ${eccgui}-propertyvalue__property--${size}` : "") +
                 (className ? " " + className : "")
             }
-            {...otherProps}
+            {...otherDtProps}
         >
-            <div>{typeof children === "string" ? <Label text={children} isLayoutForElement="span" /> : children}</div>
+            <div>
+                {typeof children === "string" ? (
+                    <Label text={children} isLayoutForElement="span" {...labelProps} />
+                ) : (
+                    children
+                )}
+            </div>
         </dt>
     );
 };