Skip to content

Commit

Permalink
fix: [M3-7149] - Fix textfield tooltip icon focus area (linode#10938)
Browse files Browse the repository at this point in the history
## Description 📝
Fixes the focus area for tooltips to be a circle rather than an oval as before.

## How to test 🧪
Verify textfield tooltips' focus areas render as a circle and otherwise work as before.
  • Loading branch information
hkhalil-akamai authored Sep 17, 2024
1 parent 3ce0721 commit 3758ec1
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 7 deletions.
5 changes: 5 additions & 0 deletions packages/manager/.changeset/pr-10938-fixed-1726262803311.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@linode/manager": Fixed
---

Textarea tooltip icon focus area ([#10938](https://github.com/linode/manager/pull/10938))
15 changes: 8 additions & 7 deletions packages/manager/src/components/TextField.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
import { Theme, useTheme } from '@mui/material/styles';
import {
default as _TextField,
StandardTextFieldProps,
} from '@mui/material/TextField';
import { useTheme } from '@mui/material/styles';
import { default as _TextField } from '@mui/material/TextField';
import { clamp } from 'ramda';
import * as React from 'react';
import { makeStyles } from 'tss-react/mui';
Expand All @@ -13,11 +10,13 @@ import { CircleProgress } from 'src/components/CircleProgress';
import { FormHelperText } from 'src/components/FormHelperText';
import { InputAdornment } from 'src/components/InputAdornment';
import { InputLabel } from 'src/components/InputLabel';
import { TooltipProps } from 'src/components/Tooltip';
import { TooltipIcon } from 'src/components/TooltipIcon';
import { convertToKebabCase } from 'src/utilities/convertToKebobCase';

import type { Theme } from '@mui/material/styles';
import type { StandardTextFieldProps } from '@mui/material/TextField';
import type { BoxProps } from 'src/components/Box';
import type { TooltipProps } from 'src/components/Tooltip';

const useStyles = makeStyles()((theme: Theme) => ({
absolute: {
Expand Down Expand Up @@ -480,8 +479,10 @@ export const TextField = (props: TextFieldProps) => {
{tooltipText && (
<TooltipIcon
sxTooltipIcon={{
height: '34px',
margin: '0px 0px 0px 4px',
padding: '6px',
padding: '17px',
width: '34px',
}}
classes={{ popper: tooltipClasses }}
onMouseEnter={tooltipOnMouseEnter}
Expand Down

0 comments on commit 3758ec1

Please sign in to comment.