Merge branch 'master' into Mil4n0r/tooltip-badge

dxc-technology · Jul 11, 2024 · ca9f68d · ca9f68d
2 parents 75f70ae + 4fe81f7
commit ca9f68d
Showing 1 changed file with 44 additions and 42 deletions.
diff --git a/packages/lib/src/toggle-group/ToggleGroup.tsx b/packages/lib/src/toggle-group/ToggleGroup.tsx
@@ -3,6 +3,7 @@ import styled, { ThemeProvider } from "styled-components";
 import { spaces } from "../common/variables";
 import DxcFlex from "../flex/Flex";
 import DxcIcon from "../icon/Icon";
+import DxcTooltip from "../tooltip/Tooltip";
 import useTheme from "../useTheme";
 import ToggleGroupPropsType, { OptionLabel } from "./types";
 
@@ -66,48 +67,49 @@ const DxcToggleGroup = ({
         <HelperText disabled={disabled}>{helperText}</HelperText>
         <OptionsContainer aria-labelledby={toggleGroupLabelId}>
           {options.map((option, i) => (
-            <ToggleButton
-              key={`toggle-${i}-${option.label}`}
-              aria-label={option.title}
-              aria-pressed={
-                multiple
-                  ? value
-                    ? Array.isArray(value) && value.includes(option.value)
-                    : Array.isArray(selectedValue) && selectedValue.includes(option.value)
-                  : value
-                    ? option.value === value
-                    : option.value === selectedValue
-              }
-              disabled={disabled}
-              onClick={() => {
-                handleToggleChange(option.value);
-              }}
-              onKeyDown={(event) => {
-                handleOnKeyDown(event, option.value);
-              }}
-              tabIndex={!disabled ? tabIndex : -1}
-              title={option.title}
-              hasIcon={option.icon}
-              optionLabel={option.label}
-              selected={
-                multiple
-                  ? value
-                    ? Array.isArray(value) && value.includes(option.value)
-                    : Array.isArray(selectedValue) && selectedValue.includes(option.value)
-                  : value
-                    ? option.value === value
-                    : option.value === selectedValue
-              }
-            >
-              <DxcFlex alignItems="center">
-                {option.icon && (
-                  <IconContainer optionLabel={option.label}>
-                    {typeof option.icon === "string" ? <DxcIcon icon={option.icon} /> : option.icon}
-                  </IconContainer>
-                )}
-                {option.label && <LabelContainer>{option.label}</LabelContainer>}
-              </DxcFlex>
-            </ToggleButton>
+            <DxcTooltip label={option.title}>
+              <ToggleButton
+                key={`toggle-${i}-${option.label}`}
+                aria-label={option.title}
+                aria-pressed={
+                  multiple
+                    ? value
+                      ? Array.isArray(value) && value.includes(option.value)
+                      : Array.isArray(selectedValue) && selectedValue.includes(option.value)
+                    : value
+                      ? option.value === value
+                      : option.value === selectedValue
+                }
+                disabled={disabled}
+                onClick={() => {
+                  handleToggleChange(option.value);
+                }}
+                onKeyDown={(event) => {
+                  handleOnKeyDown(event, option.value);
+                }}
+                tabIndex={!disabled ? tabIndex : -1}
+                hasIcon={option.icon}
+                optionLabel={option.label}
+                selected={
+                  multiple
+                    ? value
+                      ? Array.isArray(value) && value.includes(option.value)
+                      : Array.isArray(selectedValue) && selectedValue.includes(option.value)
+                    : value
+                      ? option.value === value
+                      : option.value === selectedValue
+                }
+              >
+                <DxcFlex alignItems="center">
+                  {option.icon && (
+                    <IconContainer optionLabel={option.label}>
+                      {typeof option.icon === "string" ? <DxcIcon icon={option.icon} /> : option.icon}
+                    </IconContainer>
+                  )}
+                  {option.label && <LabelContainer>{option.label}</LabelContainer>}
+                </DxcFlex>
+              </ToggleButton>
+            </DxcTooltip>
           ))}
         </OptionsContainer>
       </ToggleGroup>