diff --git a/src/components/HotspotEditorModal/HotspotTextStyleTab/HotspotTextStyleTab.jsx b/src/components/HotspotEditorModal/HotspotTextStyleTab/HotspotTextStyleTab.jsx
index fcfa2bddb4..08aab8a79d 100644
--- a/src/components/HotspotEditorModal/HotspotTextStyleTab/HotspotTextStyleTab.jsx
+++ b/src/components/HotspotEditorModal/HotspotTextStyleTab/HotspotTextStyleTab.jsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import merge from 'lodash/merge';
 import { NumberInput } from 'carbon-components-react';
@@ -20,7 +20,13 @@ const colorPropType = PropTypes.shape({
 });
 
 const propTypes = {
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+  /** True if the light theme is to be used, defaults to true */
   light: PropTypes.bool,
+  /** set of internationalized labels */
   i18n: PropTypes.shape({
     boldLabel: PropTypes.string,
     italicLabel: PropTypes.string,
@@ -37,7 +43,7 @@ const propTypes = {
   }),
   /** Callback for when any of the form element's value changes */
   onChange: PropTypes.func.isRequired,
-  /** The state values of the controlled form elements e.g. { title: 'My hotspot 1', description: 'Lorem ipsum' } */
+  /** The state values of the controlled form elements, see defaults for shape */
   formValues: PropTypes.objectOf(
     PropTypes.oneOfType([
       PropTypes.string,
@@ -46,47 +52,63 @@ const propTypes = {
       colorPropType,
     ])
   ),
+  /** Array of colors to be shown for the font colors dropdown */
   fontColors: PropTypes.arrayOf(colorPropType),
+  /** Array of colors to be shown for the background colors dropdown */
   backgroundColors: PropTypes.arrayOf(colorPropType),
+  /** Array of colors to be shown for the border colors dropdown */
   borderColors: PropTypes.arrayOf(colorPropType),
+  /** Minimum Font size */
+  minFontSize: PropTypes.number,
+  /** Maximum Font size */
+  maxFontSize: PropTypes.number,
+  /** Minimum Opacity Value */
+  minOpacity: PropTypes.number,
+  /** Maximum Opacity Value */
+  maxOpacity: PropTypes.number,
+  /** Minimum Border Width */
+  minBorderWidth: PropTypes.number,
+  /** Maximum Border Width */
+  maxBorderWidth: PropTypes.number,
 };
 
 const defaultProps = {
+  className: '',
   light: true,
   i18n: {
-    boldLabel: 'Text Bold',
-    italicLabel: 'Text Italic',
-    underlineLabel: 'Text Underline',
-    fontLabel: 'Font',
-    fontSizeLabel: 'Font Size',
-    fontSizeInvalid: 'Font Size is invalid',
-    backgroundLabel: 'Background',
-    fillOpacityLabel: 'Fill Opacity',
-    fillOpacityInvalid: 'Fill Opacity is invalid',
-    borderLabel: 'Border',
-    borderWidthLabel: 'Border Width',
-    borderWidthInvalid: 'Border Width is invalid',
+    boldLabelText: 'Text Bold',
+    italicLabelText: 'Text Italic',
+    underlineLabelText: 'Text Underline',
+    fontLabelText: 'Font',
+    fontSizeLabelText: 'Font Size',
+    fontSizeInvalidText: 'Font Size is invalid',
+    backgroundLabelText: 'Background',
+    fillOpacityLabelText: 'Fill Opacity',
+    fillOpacityInvalidText: 'Fill Opacity is invalid',
+    borderLabelText: 'Border',
+    borderWidthLabelText: 'Border Width',
+    borderWidthInvalidText: 'Border Width is invalid',
   },
   formValues: {
     bold: false,
     italic: false,
     underline: false,
-    font: {
-      color: undefined,
-      size: 12,
-    },
-    background: {
-      color: undefined,
-      opacity: 100,
-    },
-    border: {
-      color: undefined,
-      width: 1,
-    },
+    fontColor: undefined,
+    fontSize: undefined,
+    backgroundColor: undefined,
+    backgroundOpacity: undefined,
+    borderColor: undefined,
+    borderWidth: undefined,
   },
   fontColors: undefined,
   backgroundColors: undefined,
   borderColors: undefined,
+  minFontSize: 1,
+  maxFontSize: 50,
+  minOpacity: 0,
+  maxOpacity: 100,
+  minBorderWidth: 0,
+  maxBorderWidth: 15,
 };
 
 /* this component is only used internally where props are defined and set. */
@@ -99,31 +121,39 @@ const HotspotTextStyleTab = ({
   light,
   i18n,
   onChange,
+  minFontSize,
+  maxFontSize,
+  minOpacity,
+  maxOpacity,
+  minBorderWidth,
+  maxBorderWidth,
 }) => {
   const {
-    boldLabel,
-    italicLabel,
-    underlineLabel,
-    fontLabel,
-    fontSizeLabel,
-    fontSizeInvalid,
-    backgroundLabel,
-    fillOpacityLabel,
-    fillOpacityInvalid,
-    borderLabel,
-    borderWidthLabel,
-    borderWidthInvalid,
+    boldLabelText,
+    italicLabelText,
+    underlineLabelText,
+    fontLabelText,
+    fontSizeLabelText,
+    fontSizeInvalidText,
+    backgroundLabelText,
+    fillOpacityLabelText,
+    fillOpacityInvalidText,
+    borderLabelText,
+    borderWidthLabelText,
+    borderWidthInvalidText,
   } = merge({}, defaultProps.i18n, i18n);
 
-  const fontSizeRef = useRef(null);
-  const fillOpacityRef = useRef(null);
-  const borderWidthRef = useRef(null);
-
-  const { bold, italic, underline, font, background, border } = merge(
-    {},
-    defaultProps.formValues,
-    formValues
-  );
+  const {
+    bold,
+    italic,
+    underline,
+    fontSize,
+    fontColor,
+    backgroundColor,
+    backgroundOpacity,
+    borderColor,
+    borderWidth,
+  } = formValues;
 
   return (
     <div className={className}>
@@ -132,7 +162,7 @@ const HotspotTextStyleTab = ({
           onClick={() => onChange({ bold: !bold })}
           data-testid="hotspot-bold"
           selected={bold}
-          text={boldLabel}
+          text={boldLabelText}
           renderIcon={TextBold}
           index={0}
           light={light}
@@ -142,7 +172,7 @@ const HotspotTextStyleTab = ({
           onClick={() => onChange({ italic: !italic })}
           data-testid="hotspot-italic"
           selected={italic}
-          text={italicLabel}
+          text={italicLabelText}
           renderIcon={TextItalic}
           index={1}
           light={light}
@@ -152,7 +182,7 @@ const HotspotTextStyleTab = ({
           onClick={() => onChange({ underline: !underline })}
           data-testid="hotspot-underline"
           selected={underline}
-          text={underlineLabel}
+          text={underlineLabelText}
           renderIcon={TextUnderline}
           index={2}
           light={light}
@@ -162,27 +192,26 @@ const HotspotTextStyleTab = ({
       <div className={`${iotPrefix}--hotspot-text-style-tab__row`}>
         <ColorDropdown
           id={`${iotPrefix}--hotspot-text-style-tab__font-color`}
-          titleText={fontLabel}
+          titleText={fontLabelText}
           light={light}
-          selectedColor={font.color ?? fontColors?.[0]}
+          selectedColor={fontColor}
           colors={fontColors}
           onChange={(selected) => {
-            onChange({ font: selected });
+            onChange({ fontColor: selected.color });
           }}
         />
 
         <NumberInput
           id={`${iotPrefix}--hotspot-text-style-tab__font-size`}
-          min={0}
-          max={50}
-          value={font.size}
+          min={minFontSize}
+          max={maxFontSize}
+          value={fontSize}
           step={1}
           light={light}
-          label={fontSizeLabel}
-          invalidText={fontSizeInvalid}
-          ref={fontSizeRef}
-          onChange={() => {
-            onChange({ font: { size: fontSizeRef.current.value } });
+          label={fontSizeLabelText}
+          invalidText={fontSizeInvalidText}
+          onChange={(event) => {
+            onChange({ fontSize: event.imaginaryTarget.value });
           }}
         />
       </div>
@@ -190,30 +219,29 @@ const HotspotTextStyleTab = ({
       <div className={`${iotPrefix}--hotspot-text-style-tab__row`}>
         <ColorDropdown
           id={`${iotPrefix}--hotspot-text-style-tab__background-color`}
-          titleText={backgroundLabel}
+          titleText={backgroundLabelText}
           light={light}
-          selectedColor={background.color ?? backgroundColors?.[0]}
+          selectedColor={backgroundColor}
           colors={backgroundColors}
           onChange={(selected) => {
             onChange({
-              background: selected,
+              backgroundColor: selected.color,
             });
           }}
         />
 
         <NumberInput
           id={`${iotPrefix}--hotspot-text-style-tab__background`}
-          label={fillOpacityLabel}
-          min={0}
-          max={100}
-          value={background.opacity}
-          ref={fillOpacityRef}
+          label={fillOpacityLabelText}
+          min={minOpacity}
+          max={maxOpacity}
+          value={backgroundOpacity}
           step={1}
           light={light}
-          invalidText={fillOpacityInvalid}
-          onChange={() => {
+          invalidText={fillOpacityInvalidText}
+          onChange={(event) => {
             onChange({
-              background: { opacity: fillOpacityRef.current.value },
+              backgroundOpacity: event.imaginaryTarget.value,
             });
           }}
         />
@@ -222,27 +250,26 @@ const HotspotTextStyleTab = ({
       <div className={`${iotPrefix}--hotspot-text-style-tab__row`}>
         <ColorDropdown
           id={`${iotPrefix}--hotspot-text-style-tab__border-color`}
-          titleText={borderLabel}
+          titleText={borderLabelText}
           light={light}
           colors={borderColors}
           onChange={(selected) => {
-            onChange({ border: selected });
+            onChange({ borderColor: selected.color });
           }}
-          selectedColor={border.color ?? borderColors?.[0]}
+          selectedColor={borderColor}
         />
 
         <NumberInput
           id={`${iotPrefix}--hotspot-text-style-tab__border`}
-          label={borderWidthLabel}
-          min={0}
-          max={15}
-          value={border.width}
-          ref={borderWidthRef}
+          label={borderWidthLabelText}
+          min={minBorderWidth}
+          max={maxBorderWidth}
+          value={borderWidth}
           step={1}
           light={light}
-          invalidText={borderWidthInvalid}
-          onChange={() => {
-            onChange({ border: { width: borderWidthRef.current.value } });
+          invalidText={borderWidthInvalidText}
+          onChange={(event) => {
+            onChange({ borderWidth: event.imaginaryTarget.value });
           }}
         />
       </div>
diff --git a/src/components/HotspotEditorModal/HotspotTextStyleTab/HotspotTextStyleTab.test.jsx b/src/components/HotspotEditorModal/HotspotTextStyleTab/HotspotTextStyleTab.test.jsx
index 3b710bac47..ec86a075b4 100644
--- a/src/components/HotspotEditorModal/HotspotTextStyleTab/HotspotTextStyleTab.test.jsx
+++ b/src/components/HotspotEditorModal/HotspotTextStyleTab/HotspotTextStyleTab.test.jsx
@@ -41,7 +41,11 @@ describe('HotspotTextStyleTab', () => {
   });
 
   it('handles dropdown updates', () => {
-    let formValues = {};
+    let formValues = {
+      fontColor: colors[0],
+      backgroundColor: colors[0],
+      borderColor: colors[0],
+    };
 
     render(
       <HotspotTextStyleTab
@@ -66,13 +70,17 @@ describe('HotspotTextStyleTab', () => {
     fireEvent.click(dropdowns[2]);
     fireEvent.click(screen.getAllByText(colors[1].name)[0]);
 
-    expect(formValues.font.color).toEqual(colors[1]);
-    expect(formValues.background.color).toEqual(colors[1]);
-    expect(formValues.border.color).toEqual(colors[1]);
+    expect(formValues.fontColor).toEqual(colors[1]);
+    expect(formValues.backgroundColor).toEqual(colors[1]);
+    expect(formValues.borderColor).toEqual(colors[1]);
   });
 
   it('handles number input updates', () => {
-    let formValues = {};
+    let formValues = {
+      fontSize: '12',
+      backgroundOpacity: '99',
+      borderWidth: '1',
+    };
 
     render(
       <HotspotTextStyleTab
@@ -93,16 +101,16 @@ describe('HotspotTextStyleTab', () => {
     fireEvent.click(incrementButtons[1]);
     fireEvent.click(incrementButtons[2]);
 
-    expect(formValues.font.size).toEqual('13');
-    expect(formValues.background).toBeUndefined(); // Invalid update, will be undefined
-    expect(formValues.border.width).toEqual('2');
+    expect(formValues.fontSize).toEqual('13');
+    expect(formValues.backgroundOpacity).toEqual('100');
+    expect(formValues.borderWidth).toEqual('2');
 
     fireEvent.click(decrementButtons[0]);
     fireEvent.click(decrementButtons[1]);
     fireEvent.click(decrementButtons[2]);
 
-    expect(formValues.font.size).toEqual('12');
-    expect(formValues.background.opacity).toEqual('99');
-    expect(formValues.border.width).toEqual('1');
+    expect(formValues.fontSize).toEqual('12');
+    expect(formValues.backgroundOpacity).toEqual('99');
+    expect(formValues.borderWidth).toEqual('1');
   });
 });
diff --git a/src/components/HotspotEditorModal/HotspotTextStyleTab/__snapshots__/HotspotTextStyleTab.story.storyshot b/src/components/HotspotEditorModal/HotspotTextStyleTab/__snapshots__/HotspotTextStyleTab.story.storyshot
index d1744ec72b..b5184fae46 100644
--- a/src/components/HotspotEditorModal/HotspotTextStyleTab/__snapshots__/HotspotTextStyleTab.story.storyshot
+++ b/src/components/HotspotEditorModal/HotspotTextStyleTab/__snapshots__/HotspotTextStyleTab.story.storyshot
@@ -19,7 +19,9 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
         }
       }
     >
-      <div>
+      <div
+        className=""
+      >
         <div
           className="iot--hotspot-text-style-tab__text-style"
         >
@@ -154,29 +156,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
                 <span
                   className="bx--list-box__label"
                 >
-                  <div
-                    className="iot--color-dropdown__item"
-                    title="purple70"
-                  >
-                    <div
-                      className="iot--color-dropdown__item-border"
-                    >
-                      <div
-                        className="iot--color-dropdown__color-sample"
-                        style={
-                          Object {
-                            "backgroundColor": "#6929c4",
-                          }
-                        }
-                        title="#6929c4"
-                      />
-                      <div
-                        className="iot--color-dropdown__color-name"
-                      >
-                        purple70
-                      </div>
-                    </div>
-                  </div>
+                  Select a color
                 </span>
                 <div
                   className="bx--list-box__menu-icon"
@@ -235,12 +215,12 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
                   disabled={false}
                   id="iot--hotspot-text-style-tab__font-size"
                   max={50}
-                  min={0}
+                  min={1}
                   onChange={[Function]}
                   pattern="[0-9]*"
                   step={1}
                   type="number"
-                  value={12}
+                  value={1}
                 />
                 <div
                   className="bx--number__controls"
@@ -336,29 +316,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
                 <span
                   className="bx--list-box__label"
                 >
-                  <div
-                    className="iot--color-dropdown__item"
-                    title="purple70"
-                  >
-                    <div
-                      className="iot--color-dropdown__item-border"
-                    >
-                      <div
-                        className="iot--color-dropdown__color-sample"
-                        style={
-                          Object {
-                            "backgroundColor": "#6929c4",
-                          }
-                        }
-                        title="#6929c4"
-                      />
-                      <div
-                        className="iot--color-dropdown__color-name"
-                      >
-                        purple70
-                      </div>
-                    </div>
-                  </div>
+                  Select a color
                 </span>
                 <div
                   className="bx--list-box__menu-icon"
@@ -422,7 +380,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
                   pattern="[0-9]*"
                   step={1}
                   type="number"
-                  value={100}
+                  value={0}
                 />
                 <div
                   className="bx--number__controls"
@@ -518,29 +476,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
                 <span
                   className="bx--list-box__label"
                 >
-                  <div
-                    className="iot--color-dropdown__item"
-                    title="purple70"
-                  >
-                    <div
-                      className="iot--color-dropdown__item-border"
-                    >
-                      <div
-                        className="iot--color-dropdown__color-sample"
-                        style={
-                          Object {
-                            "backgroundColor": "#6929c4",
-                          }
-                        }
-                        title="#6929c4"
-                      />
-                      <div
-                        className="iot--color-dropdown__color-name"
-                      >
-                        purple70
-                      </div>
-                    </div>
-                  </div>
+                  Select a color
                 </span>
                 <div
                   className="bx--list-box__menu-icon"
@@ -604,7 +540,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
                   pattern="[0-9]*"
                   step={1}
                   type="number"
-                  value={1}
+                  value={0}
                 />
                 <div
                   className="bx--number__controls"
diff --git a/src/utils/__tests__/__snapshots__/publicAPI.test.js.snap b/src/utils/__tests__/__snapshots__/publicAPI.test.js.snap
index 52a99889bd..971756a01e 100644
--- a/src/utils/__tests__/__snapshots__/publicAPI.test.js.snap
+++ b/src/utils/__tests__/__snapshots__/publicAPI.test.js.snap
@@ -6185,39 +6185,40 @@ Map {
     "defaultProps": Object {
       "backgroundColors": undefined,
       "borderColors": undefined,
+      "className": "",
       "fontColors": undefined,
       "formValues": Object {
-        "background": Object {
-          "color": undefined,
-          "opacity": 100,
-        },
+        "backgroundColor": undefined,
+        "backgroundOpacity": undefined,
         "bold": false,
-        "border": Object {
-          "color": undefined,
-          "width": 1,
-        },
-        "font": Object {
-          "color": undefined,
-          "size": 12,
-        },
+        "borderColor": undefined,
+        "borderWidth": undefined,
+        "fontColor": undefined,
+        "fontSize": undefined,
         "italic": false,
         "underline": false,
       },
       "i18n": Object {
-        "backgroundLabel": "Background",
-        "boldLabel": "Text Bold",
-        "borderLabel": "Border",
-        "borderWidthInvalid": "Border Width is invalid",
-        "borderWidthLabel": "Border Width",
-        "fillOpacityInvalid": "Fill Opacity is invalid",
-        "fillOpacityLabel": "Fill Opacity",
-        "fontLabel": "Font",
-        "fontSizeInvalid": "Font Size is invalid",
-        "fontSizeLabel": "Font Size",
-        "italicLabel": "Text Italic",
-        "underlineLabel": "Text Underline",
+        "backgroundLabelText": "Background",
+        "boldLabelText": "Text Bold",
+        "borderLabelText": "Border",
+        "borderWidthInvalidText": "Border Width is invalid",
+        "borderWidthLabelText": "Border Width",
+        "fillOpacityInvalidText": "Fill Opacity is invalid",
+        "fillOpacityLabelText": "Fill Opacity",
+        "fontLabelText": "Font",
+        "fontSizeInvalidText": "Font Size is invalid",
+        "fontSizeLabelText": "Font Size",
+        "italicLabelText": "Text Italic",
+        "underlineLabelText": "Text Underline",
       },
       "light": true,
+      "maxBorderWidth": 15,
+      "maxFontSize": 50,
+      "maxOpacity": 100,
+      "minBorderWidth": 0,
+      "minFontSize": 1,
+      "minOpacity": 0,
     },
     "propTypes": Object {
       "backgroundColors": Object {
@@ -6256,6 +6257,9 @@ Map {
         ],
         "type": "arrayOf",
       },
+      "className": Object {
+        "type": "string",
+      },
       "fontColors": Object {
         "args": Array [
           Object {
@@ -6354,6 +6358,24 @@ Map {
       "light": Object {
         "type": "bool",
       },
+      "maxBorderWidth": Object {
+        "type": "number",
+      },
+      "maxFontSize": Object {
+        "type": "number",
+      },
+      "maxOpacity": Object {
+        "type": "number",
+      },
+      "minBorderWidth": Object {
+        "type": "number",
+      },
+      "minFontSize": Object {
+        "type": "number",
+      },
+      "minOpacity": Object {
+        "type": "number",
+      },
       "onChange": Object {
         "isRequired": true,
         "type": "func",