@digital-ai/dot-components 1.16.1 → 1.17.0

package/CHANGE_LOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [1.17.0](https://github.com/digital-ai/dot-components/tree/1.17.0) (05/18/2022)
+
+[Full Changelog](https://github.com/digital-ai/dot-components/compare/1.16.1...1.17.0)
+
+**Features:**
+
+- `DotButtonToggle`: Add tooltip support [\#1164](https://github.com/digital-ai/dot-components/issues/1164)
+- S-84947: `DotButtonToggle`: Add tooltip support [\#1166](https://github.com/digital-ai/dot-components/pull/1166) ([dmiletic85](https://github.com/dmiletic85))
+
+**Fixed bugs:**
+
+- `helperText` on input fields shouldn't be bold [\#1165](https://github.com/digital-ai/dot-components/issues/1165)
+- `DotMenu` popup appears to be flickering on Safari [\#1123](https://github.com/digital-ai/dot-components/issues/1123)
+- D-21265: `helperText` on input fields shouldn't be bold [\#1167](https://github.com/digital-ai/dot-components/pull/1167) ([dmiletic85](https://github.com/dmiletic85))
+
+**Merged pull requests:**
+
+- update release template with task for marking stories as done [\#1161](https://github.com/digital-ai/dot-components/pull/1161) ([CWSites](https://github.com/CWSites))
+
 ## [1.16.1](https://github.com/digital-ai/dot-components/tree/1.16.1) (05/12/2022)
 
 [Full Changelog](https://github.com/digital-ai/dot-components/compare/1.16.0...1.16.1)

package/index.esm.js

@@ -2678,7 +2678,7 @@ const StyledTextField = styled(TextField).withConfig({
 })(["", ""], ({
   theme,
   InputProps
-}) => css(["&.", "{.MuiInputBase-root{background:", "}.MuiInputBase-input{box-sizing:content-box;}.MuiOutlinedInput-notchedOutline{border-color:", "}.MuiOutlinedInput-input{padding:", ";}.MuiOutlinedInput-inputMarginDense{padding-top:10.5px;padding-bottom:10.5px;}.MuiOutlinedInput-inputMultiline{padding:0;}}&.", ",&.", "{.dot-adornment-icon .dot-icon i{margin-top:-2px;}.MuiFormLabel-root.Mui-focused{color:", "}select.dot-select{background:", ";}.MuiSelect-select:focus{background-color:transparent;}.Mui-error .", "{color:", ";}.MuiSelect-icon{right:", ";}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.MuiInputLabel-outlined.MuiInputLabel-shrink{color:", ";}.", "{color:", ";}}.MuiOutlinedInput-adornedStart{padding-left:12px;}.MuiOutlinedInput-adornedEnd{padding-right:12px;}.MuiFormHelperText-root{font-size:", "px;margin:", ";display:flex;align-items:flex-end;&:not(.Mui-error){color:", ";}}.Mui-focused .MuiOutlinedInput-notchedOutline{border-color:", ";}"], rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n0, theme.palette.product === 'agility' && theme.palette.layer.n100, InputProps.startAdornment ? `18px 12px 18px 0px` : `18px 12px`, rootSelectClassName, rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n700, theme.palette.product === 'agility' && theme.palette.layer.n0, adornmentIconClassName, theme.palette.error[500], InputProps.endAdornment ? `44px` : `12px`, warningClassName, theme.palette.warning[500], theme.palette.grey[700], adornmentIconClassName, theme.palette.warning[500], theme.typography.body2.fontSize, theme.spacing(0, 0, 0, 2), theme.palette.grey[700], theme.palette.product === 'agility' && agilityGreen));
+}) => css(["&.", "{.MuiInputBase-root{background:", "}.MuiInputBase-input{box-sizing:content-box;}.MuiOutlinedInput-notchedOutline{border-color:", "}.MuiOutlinedInput-input{padding:", ";}.MuiOutlinedInput-inputMarginDense{padding-top:10.5px;padding-bottom:10.5px;}.MuiOutlinedInput-inputMultiline{padding:0;}}&.", ",&.", "{.dot-adornment-icon .dot-icon i{margin-top:-2px;}.MuiFormLabel-root.Mui-focused{color:", "}select.dot-select{background:", ";}.MuiSelect-select:focus{background-color:transparent;}.Mui-error .", "{color:", ";}.MuiSelect-icon{right:", ";}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.MuiInputLabel-outlined.MuiInputLabel-shrink{color:", ";}.", "{color:", ";}}.MuiOutlinedInput-adornedStart{padding-left:12px;}.MuiOutlinedInput-adornedEnd{padding-right:12px;}.MuiFormHelperText-root{font-family:", ";font-size:", "px;margin:", ";display:flex;align-items:flex-end;&:not(.Mui-error){color:", ";}}.Mui-focused .MuiOutlinedInput-notchedOutline{border-color:", ";}"], rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n0, theme.palette.product === 'agility' && theme.palette.layer.n100, InputProps.startAdornment ? `18px 12px 18px 0px` : `18px 12px`, rootSelectClassName, rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n700, theme.palette.product === 'agility' && theme.palette.layer.n0, adornmentIconClassName, theme.palette.error[500], InputProps.endAdornment ? `44px` : `12px`, warningClassName, theme.palette.warning[500], theme.palette.grey[700], adornmentIconClassName, theme.palette.warning[500], theme.typography.body2.fontFamily, theme.typography.body2.fontSize, theme.spacing(0, 0, 0, 2), theme.palette.grey[700], theme.palette.product === 'agility' && agilityGreen));
 
 const rootClassName$F = 'dot-button';
 const StyledButton = styled(Button).withConfig({
@@ -3516,7 +3516,7 @@ const StyledToggleButtonGroup = styled(ToggleButtonGroup).withConfig({
   componentId: "sc-1oh4ljv-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{.dot-icon{+ p{margin-left:", "px;}i{height:auto;}}.MuiToggleButton-label{color:", ";p{margin-bottom:0;}}.MuiToggleButtonGroup-groupedHorizontal{border:1px solid ", ";border-radius:0px;:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px;margin-left:0;}:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px;margin-right:0;}}}.MuiButtonBase-root{&.Mui-disabled p,&.Mui-disabled .dot-icon{color:", ";}}"], rootClassName$C, theme.spacing(1), theme.palette.layer.n700, theme.palette.layer.n300, theme.palette.grey[200]));
+}) => css(["&.", "{.MuiToggleButton-root{padding:0;}.toggle-button-children-wrapper{display:flex;padding:", "px;}.dot-icon{+ p{margin-left:", "px;}i{height:auto;}}.MuiToggleButton-label{color:", ";p{margin-bottom:0;}}.MuiToggleButtonGroup-groupedHorizontal{border:1px solid ", ";border-radius:0;:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px;margin-left:0;}:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px;margin-right:0;}}}.MuiButtonBase-root{&.Mui-disabled p,&.Mui-disabled .dot-icon{color:", ";}}"], rootClassName$C, theme.spacing(1.375), theme.spacing(1), theme.palette.layer.n700, theme.palette.layer.n300, theme.palette.grey[200]));
 
 const DotButtonToggle = ({
   ariaLabel,
@@ -3532,6 +3532,25 @@ const DotButtonToggle = ({
   value
 }) => {
   const rootClasses = useStylesWithRootClass(rootClassName$C, className);
+
+  const renderToggleButtonChildren = ({
+    iconId: optionIconId,
+    text: optionText,
+    tooltip: optionTooltip
+  }) => {
+    const children = /*#__PURE__*/React__default.createElement("div", {
+      "data-testid": dataTestId && `${dataTestId}-children-wrapper`,
+      className: "toggle-button-children-wrapper"
+    }, optionIconId && /*#__PURE__*/React__default.createElement(DotIcon, {
+      className: "dot-toggle-icon",
+      iconId: optionIconId
+    }), optionText && /*#__PURE__*/React__default.createElement(DotTypography, null, optionText));
+    return optionTooltip ? /*#__PURE__*/React__default.createElement(DotTooltip, {
+      className: "toggle-button-tooltip",
+      title: optionTooltip
+    }, children) : children;
+  };
+
   return /*#__PURE__*/React__default.createElement(StyledToggleButtonGroup, {
     "aria-label": ariaLabel,
     classes: {
@@ -3548,8 +3567,6 @@ const DotButtonToggle = ({
       ariaLabel: optionAriaLabel,
       className: optionClassName,
       disabled: optionDisabled,
-      iconId: optionIconId,
-      text: optionText,
       value: optionValue
     } = option;
     return /*#__PURE__*/React__default.createElement(ToggleButton, {
@@ -3560,10 +3577,7 @@ const DotButtonToggle = ({
       disabled: optionDisabled,
       key: key,
       value: optionValue
-    }, optionIconId && /*#__PURE__*/React__default.createElement(DotIcon, {
-      className: "dot-toggle-icon",
-      iconId: optionIconId
-    }), optionText && /*#__PURE__*/React__default.createElement(DotTypography, null, optionText));
+    }, renderToggleButtonChildren(option));
   }));
 };
 

package/index.umd.js

@@ -2917,7 +2917,7 @@
     })(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme,
           InputProps = _a.InputProps;
-      return styled.css(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n    &.", " {\n      .MuiInputBase-root {\n        background: ", "\n      }\n      .MuiInputBase-input {\n        box-sizing: content-box;\n      }\n      .MuiOutlinedInput-notchedOutline {\n        border-color: ", "\n      }\n      .MuiOutlinedInput-input {\n        padding: ", ";\n      }\n      .MuiOutlinedInput-inputMarginDense {\n        padding-top: 10.5px;\n        padding-bottom: 10.5px;\n      }\n      .MuiOutlinedInput-inputMultiline {\n        padding: 0;\n      }\n    }\n    &.", ", &.", " {\n      .dot-adornment-icon .dot-icon i {\n        margin-top: -2px;\n      }\n      .MuiFormLabel-root.Mui-focused {\n        color: ", "\n      }\n      select.dot-select {\n        background: ", ";\n      }\n      .MuiSelect-select:focus {\n        background-color: transparent;\n      }\n      .Mui-error .", " {\n          color: ", ";\n      }\n      .MuiSelect-icon {\n        right: ", ";\n      }\n      &.", " {\n        .MuiOutlinedInput-notchedOutline {\n          border-color: ", ";\n      }\n      .MuiInputLabel-outlined.MuiInputLabel-shrink {\n        color: ", ";\n      }\n      .", " {\n          color: ", ";\n        }\n      }\n      .MuiOutlinedInput-adornedStart {\n        padding-left: 12px;\n      }\n      .MuiOutlinedInput-adornedEnd {\n        padding-right: 12px;\n      }\n      .MuiFormHelperText-root {\n        font-size: ", "px;\n        margin: ", ";\n        display: flex;\n        align-items: flex-end;\n        &:not(.Mui-error) {\n          color: ", ";\n        }\n      }\n      .Mui-focused .MuiOutlinedInput-notchedOutline {\n        border-color: ", ";\n      }\n  "], ["\n    &.", " {\n      .MuiInputBase-root {\n        background: ", "\n      }\n      .MuiInputBase-input {\n        box-sizing: content-box;\n      }\n      .MuiOutlinedInput-notchedOutline {\n        border-color: ", "\n      }\n      .MuiOutlinedInput-input {\n        padding: ", ";\n      }\n      .MuiOutlinedInput-inputMarginDense {\n        padding-top: 10.5px;\n        padding-bottom: 10.5px;\n      }\n      .MuiOutlinedInput-inputMultiline {\n        padding: 0;\n      }\n    }\n    &.", ", &.", " {\n      .dot-adornment-icon .dot-icon i {\n        margin-top: -2px;\n      }\n      .MuiFormLabel-root.Mui-focused {\n        color: ", "\n      }\n      select.dot-select {\n        background: ", ";\n      }\n      .MuiSelect-select:focus {\n        background-color: transparent;\n      }\n      .Mui-error .", " {\n          color: ", ";\n      }\n      .MuiSelect-icon {\n        right: ", ";\n      }\n      &.", " {\n        .MuiOutlinedInput-notchedOutline {\n          border-color: ", ";\n      }\n      .MuiInputLabel-outlined.MuiInputLabel-shrink {\n        color: ", ";\n      }\n      .", " {\n          color: ", ";\n        }\n      }\n      .MuiOutlinedInput-adornedStart {\n        padding-left: 12px;\n      }\n      .MuiOutlinedInput-adornedEnd {\n        padding-right: 12px;\n      }\n      .MuiFormHelperText-root {\n        font-size: ", "px;\n        margin: ", ";\n        display: flex;\n        align-items: flex-end;\n        &:not(.Mui-error) {\n          color: ", ";\n        }\n      }\n      .Mui-focused .MuiOutlinedInput-notchedOutline {\n        border-color: ", ";\n      }\n  "])), rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n0, theme.palette.product === 'agility' && theme.palette.layer.n100, InputProps.startAdornment ? "18px 12px 18px 0px" : "18px 12px", rootSelectClassName, rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n700, theme.palette.product === 'agility' && theme.palette.layer.n0, adornmentIconClassName, theme.palette.error[500], InputProps.endAdornment ? "44px" : "12px", warningClassName, theme.palette.warning[500], theme.palette.grey[700], adornmentIconClassName, theme.palette.warning[500], theme.typography.body2.fontSize, theme.spacing(0, 0, 0, 2), theme.palette.grey[700], theme.palette.product === 'agility' && agilityGreen);
+      return styled.css(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n    &.", " {\n      .MuiInputBase-root {\n        background: ", "\n      }\n      .MuiInputBase-input {\n        box-sizing: content-box;\n      }\n      .MuiOutlinedInput-notchedOutline {\n        border-color: ", "\n      }\n      .MuiOutlinedInput-input {\n        padding: ", ";\n      }\n      .MuiOutlinedInput-inputMarginDense {\n        padding-top: 10.5px;\n        padding-bottom: 10.5px;\n      }\n      .MuiOutlinedInput-inputMultiline {\n        padding: 0;\n      }\n    }\n    &.", ", &.", " {\n      .dot-adornment-icon .dot-icon i {\n        margin-top: -2px;\n      }\n      .MuiFormLabel-root.Mui-focused {\n        color: ", "\n      }\n      select.dot-select {\n        background: ", ";\n      }\n      .MuiSelect-select:focus {\n        background-color: transparent;\n      }\n      .Mui-error .", " {\n          color: ", ";\n      }\n      .MuiSelect-icon {\n        right: ", ";\n      }\n      &.", " {\n        .MuiOutlinedInput-notchedOutline {\n          border-color: ", ";\n      }\n      .MuiInputLabel-outlined.MuiInputLabel-shrink {\n        color: ", ";\n      }\n      .", " {\n          color: ", ";\n        }\n      }\n      .MuiOutlinedInput-adornedStart {\n        padding-left: 12px;\n      }\n      .MuiOutlinedInput-adornedEnd {\n        padding-right: 12px;\n      }\n      .MuiFormHelperText-root {\n        font-family: ", ";\n        font-size: ", "px;\n        margin: ", ";\n        display: flex;\n        align-items: flex-end;\n        &:not(.Mui-error) {\n          color: ", ";\n        }\n      }\n      .Mui-focused .MuiOutlinedInput-notchedOutline {\n        border-color: ", ";\n      }\n  "], ["\n    &.", " {\n      .MuiInputBase-root {\n        background: ", "\n      }\n      .MuiInputBase-input {\n        box-sizing: content-box;\n      }\n      .MuiOutlinedInput-notchedOutline {\n        border-color: ", "\n      }\n      .MuiOutlinedInput-input {\n        padding: ", ";\n      }\n      .MuiOutlinedInput-inputMarginDense {\n        padding-top: 10.5px;\n        padding-bottom: 10.5px;\n      }\n      .MuiOutlinedInput-inputMultiline {\n        padding: 0;\n      }\n    }\n    &.", ", &.", " {\n      .dot-adornment-icon .dot-icon i {\n        margin-top: -2px;\n      }\n      .MuiFormLabel-root.Mui-focused {\n        color: ", "\n      }\n      select.dot-select {\n        background: ", ";\n      }\n      .MuiSelect-select:focus {\n        background-color: transparent;\n      }\n      .Mui-error .", " {\n          color: ", ";\n      }\n      .MuiSelect-icon {\n        right: ", ";\n      }\n      &.", " {\n        .MuiOutlinedInput-notchedOutline {\n          border-color: ", ";\n      }\n      .MuiInputLabel-outlined.MuiInputLabel-shrink {\n        color: ", ";\n      }\n      .", " {\n          color: ", ";\n        }\n      }\n      .MuiOutlinedInput-adornedStart {\n        padding-left: 12px;\n      }\n      .MuiOutlinedInput-adornedEnd {\n        padding-right: 12px;\n      }\n      .MuiFormHelperText-root {\n        font-family: ", ";\n        font-size: ", "px;\n        margin: ", ";\n        display: flex;\n        align-items: flex-end;\n        &:not(.Mui-error) {\n          color: ", ";\n        }\n      }\n      .Mui-focused .MuiOutlinedInput-notchedOutline {\n        border-color: ", ";\n      }\n  "])), rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n0, theme.palette.product === 'agility' && theme.palette.layer.n100, InputProps.startAdornment ? "18px 12px 18px 0px" : "18px 12px", rootSelectClassName, rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n700, theme.palette.product === 'agility' && theme.palette.layer.n0, adornmentIconClassName, theme.palette.error[500], InputProps.endAdornment ? "44px" : "12px", warningClassName, theme.palette.warning[500], theme.palette.grey[700], adornmentIconClassName, theme.palette.warning[500], theme.typography.body2.fontFamily, theme.typography.body2.fontSize, theme.spacing(0, 0, 0, 2), theme.palette.grey[700], theme.palette.product === 'agility' && agilityGreen);
     });
     var templateObject_1$J, templateObject_2$H, templateObject_3$7;
 
@@ -3840,7 +3840,7 @@
       componentId: "sc-1oh4ljv-0"
     })(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n    &.", " {\n      .dot-icon {\n        + p {\n          margin-left: ", "px;\n        }\n        i {\n          height: auto;\n        }\n      }\n      .MuiToggleButton-label {\n        color: ", ";\n        p {\n          margin-bottom: 0;\n        }\n      }\n      .MuiToggleButtonGroup-groupedHorizontal {\n        border: 1px solid ", ";\n        border-radius: 0px;\n\n        :first-child {\n          border-top-left-radius: 4px;\n          border-bottom-left-radius: 4px;\n          margin-left: 0;\n        }\n        :last-child {\n          border-top-right-radius: 4px;\n          border-bottom-right-radius: 4px;\n          margin-right: 0;\n        }\n      }\n    }\n\n    .MuiButtonBase-root {\n      &.Mui-disabled p,\n      &.Mui-disabled .dot-icon {\n        color: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      .dot-icon {\n        + p {\n          margin-left: ", "px;\n        }\n        i {\n          height: auto;\n        }\n      }\n      .MuiToggleButton-label {\n        color: ", ";\n        p {\n          margin-bottom: 0;\n        }\n      }\n      .MuiToggleButtonGroup-groupedHorizontal {\n        border: 1px solid ", ";\n        border-radius: 0px;\n\n        :first-child {\n          border-top-left-radius: 4px;\n          border-bottom-left-radius: 4px;\n          margin-left: 0;\n        }\n        :last-child {\n          border-top-right-radius: 4px;\n          border-bottom-right-radius: 4px;\n          margin-right: 0;\n        }\n      }\n    }\n\n    .MuiButtonBase-root {\n      &.Mui-disabled p,\n      &.Mui-disabled .dot-icon {\n        color: ", ";\n      }\n    }\n  "])), rootClassName$C, theme.spacing(1), theme.palette.layer.n700, theme.palette.layer.n300, theme.palette.grey[200]);
+      return styled.css(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n    &.", " {\n      .MuiToggleButton-root {\n        padding: 0;\n      }\n\n      .toggle-button-children-wrapper {\n        display: flex;\n        // This will replace default padding from MuiToggleButton-root\n        // so that tooltip works when hovering whole button area\n        // (instead of just text within the button)\n        padding: ", "px;\n      }\n\n      .dot-icon {\n        + p {\n          margin-left: ", "px;\n        }\n        i {\n          height: auto;\n        }\n      }\n      .MuiToggleButton-label {\n        color: ", ";\n        p {\n          margin-bottom: 0;\n        }\n      }\n      .MuiToggleButtonGroup-groupedHorizontal {\n        border: 1px solid ", ";\n        border-radius: 0;\n\n        :first-child {\n          border-top-left-radius: 4px;\n          border-bottom-left-radius: 4px;\n          margin-left: 0;\n        }\n        :last-child {\n          border-top-right-radius: 4px;\n          border-bottom-right-radius: 4px;\n          margin-right: 0;\n        }\n      }\n    }\n\n    .MuiButtonBase-root {\n      &.Mui-disabled p,\n      &.Mui-disabled .dot-icon {\n        color: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      .MuiToggleButton-root {\n        padding: 0;\n      }\n\n      .toggle-button-children-wrapper {\n        display: flex;\n        // This will replace default padding from MuiToggleButton-root\n        // so that tooltip works when hovering whole button area\n        // (instead of just text within the button)\n        padding: ", "px;\n      }\n\n      .dot-icon {\n        + p {\n          margin-left: ", "px;\n        }\n        i {\n          height: auto;\n        }\n      }\n      .MuiToggleButton-label {\n        color: ", ";\n        p {\n          margin-bottom: 0;\n        }\n      }\n      .MuiToggleButtonGroup-groupedHorizontal {\n        border: 1px solid ", ";\n        border-radius: 0;\n\n        :first-child {\n          border-top-left-radius: 4px;\n          border-bottom-left-radius: 4px;\n          margin-left: 0;\n        }\n        :last-child {\n          border-top-right-radius: 4px;\n          border-bottom-right-radius: 4px;\n          margin-right: 0;\n        }\n      }\n    }\n\n    .MuiButtonBase-root {\n      &.Mui-disabled p,\n      &.Mui-disabled .dot-icon {\n        color: ", ";\n      }\n    }\n  "])), rootClassName$C, theme.spacing(1.375), theme.spacing(1), theme.palette.layer.n700, theme.palette.layer.n300, theme.palette.grey[200]);
     });
     var templateObject_1$F, templateObject_2$D;
 
@@ -3863,6 +3863,24 @@
           size = _g === void 0 ? 'medium' : _g,
           value = _a.value;
       var rootClasses = useStylesWithRootClass(rootClassName$C, className);
+
+      var renderToggleButtonChildren = function renderToggleButtonChildren(_a) {
+        var optionIconId = _a.iconId,
+            optionText = _a.text,
+            optionTooltip = _a.tooltip;
+        var children = /*#__PURE__*/React__default["default"].createElement("div", {
+          "data-testid": dataTestId && dataTestId + "-children-wrapper",
+          className: "toggle-button-children-wrapper"
+        }, optionIconId && /*#__PURE__*/React__default["default"].createElement(DotIcon, {
+          className: "dot-toggle-icon",
+          iconId: optionIconId
+        }), optionText && /*#__PURE__*/React__default["default"].createElement(DotTypography, null, optionText));
+        return optionTooltip ? /*#__PURE__*/React__default["default"].createElement(DotTooltip, {
+          className: "toggle-button-tooltip",
+          title: optionTooltip
+        }, children) : children;
+      };
+
       return /*#__PURE__*/React__default["default"].createElement(StyledToggleButtonGroup, {
         "aria-label": ariaLabel,
         classes: {
@@ -3878,8 +3896,6 @@
         var optionAriaLabel = option.ariaLabel,
             optionClassName = option.className,
             optionDisabled = option.disabled,
-            optionIconId = option.iconId,
-            optionText = option.text,
             optionValue = option.value;
         return /*#__PURE__*/React__default["default"].createElement(lab.ToggleButton, {
           "aria-label": optionAriaLabel,
@@ -3889,10 +3905,7 @@
           disabled: optionDisabled,
           key: key,
           value: optionValue
-        }, optionIconId && /*#__PURE__*/React__default["default"].createElement(DotIcon, {
-          className: "dot-toggle-icon",
-          iconId: optionIconId
-        }), optionText && /*#__PURE__*/React__default["default"].createElement(DotTypography, null, optionText));
+        }, renderToggleButtonChildren(option));
       }));
     };
 

package/lib/components/button-toggle/utils/models.d.ts

@@ -8,5 +8,6 @@ export interface ButtonToggleOption extends CommonProps {
     disabled?: boolean;
     iconId?: string;
     text?: string;
+    tooltip?: string;
     value: ButtonToggleValue;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "1.16.1",
+  "version": "1.17.0",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [