Skip to content

Commit 9f8a29c

Browse files
abailly-akamaiabailly-akamai
authored
Revert "refactor: [M3-9656] - [Akamai Design System] Label Component (linode#12005)" (linode#12196)
This reverts commit 0e4c884.
1 parent c204815 commit 9f8a29c

File tree

7 files changed

+19
-113
lines changed

7 files changed

+19
-113
lines changed

‎packages/shared/src/components/LinodeSelect/LinodeSelect.test.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ describe('LinodeSelect', () => {
2121
const options: Linode[] = []; // Assuming no options are available
2222
const onSelectionChange = vi.fn();
2323

24-
const { getByText, getByTestId } = renderWithWrappers(
24+
const screen = renderWithWrappers(
2525
<LinodeSelect
2626
multiple={false}
2727
noOptionsMessage={customNoOptionsMessage} // Pass the custom message via prop
@@ -32,14 +32,14 @@ describe('LinodeSelect', () => {
3232
[QueryClientWrapper(), ThemeWrapper()],
3333
);
3434

35-
const input = getByTestId(TEXTFIELD_ID);
35+
const input = screen.getByTestId(TEXTFIELD_ID);
3636

3737
// Open the dropdown
3838
await userEvent.click(input);
3939

4040
await waitFor(() => {
4141
// The custom no options message should be displayed when there are no options available
42-
expect(getByText(customNoOptionsMessage)).toBeInTheDocument();
42+
expect(screen.getByText(customNoOptionsMessage)).toBeInTheDocument();
4343
});
4444
});
4545

‎packages/ui/src/components/TextField/TextField.stories.tsx‎

Lines changed: 0 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -98,36 +98,6 @@ export const WithTooltip: Story = {
9898
},
9999
};
100100

101-
export const WithTooltipIconLeft: Story = {
102-
args: {
103-
label: 'Label',
104-
labelTooltipText: 'Tooltip Text',
105-
noMarginTop: true,
106-
placeholder: 'Placeholder',
107-
labelTooltipIconPosition: 'left',
108-
},
109-
};
110-
111-
export const WithTooltipSmall: Story = {
112-
args: {
113-
label: 'Label',
114-
labelTooltipText: 'Tooltip Text',
115-
noMarginTop: true,
116-
placeholder: 'Placeholder',
117-
labelTooltipIconSize: 'small',
118-
},
119-
};
120-
121-
export const WithTooltipLarge: Story = {
122-
args: {
123-
label: 'Label',
124-
labelTooltipText: 'Tooltip Text',
125-
noMarginTop: true,
126-
placeholder: 'Placeholder',
127-
labelTooltipIconSize: 'large',
128-
},
129-
};
130-
131101
export const WithAdornment: Story = {
132102
args: {
133103
InputProps: {

‎packages/ui/src/components/TextField/TextField.tsx‎

Lines changed: 10 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -103,16 +103,6 @@ interface BaseProps {
103103
type Value = null | number | string | undefined;
104104

105105
interface LabelToolTipProps {
106-
/**
107-
* Position of the tooltip icon
108-
* @default right
109-
*/
110-
labelTooltipIconPosition?: 'left' | 'right';
111-
/**
112-
* Size of the tooltip icon
113-
* @default small
114-
*/
115-
labelTooltipIconSize?: 'large' | 'small';
116106
labelTooltipText?: JSX.Element | string;
117107
}
118108

@@ -156,8 +146,6 @@ export const TextField = (props: TextFieldProps) => {
156146
inputId,
157147
inputProps,
158148
label,
159-
labelTooltipIconPosition = 'right',
160-
labelTooltipIconSize = 'small',
161149
labelTooltipText,
162150
loading,
163151
max,
@@ -182,19 +170,6 @@ export const TextField = (props: TextFieldProps) => {
182170
const [_value, setValue] = React.useState<Value>(value ?? '');
183171
const theme = useTheme();
184172

185-
const sxTooltipIconLeft = {
186-
marginRight: `${theme.spacingFunction(4)}`,
187-
padding: `${theme.spacingFunction(4)} ${theme.spacingFunction(4)} ${theme.spacingFunction(4)} ${theme.spacingFunction(2)}`,
188-
'& svg': {
189-
color: `${theme.tokens.component.Label.Icon}`,
190-
},
191-
};
192-
193-
const sxTooltipIconRight = {
194-
marginLeft: `${theme.spacingFunction(4)}`,
195-
padding: `${theme.spacingFunction(4)}`,
196-
};
197-
198173
const { errorScrollClassName, errorTextId, helperTextId, validInputId } =
199174
useFieldIds({ errorGroup, hasError: Boolean(errorText), inputId, label });
200175

@@ -279,7 +254,9 @@ export const TextField = (props: TextFieldProps) => {
279254
return (
280255
<Box
281256
{...containerProps}
282-
className={`${errorText ? errorScrollClassName : ''} ${containerProps?.className || ''}`}
257+
className={`${errorText ? errorScrollClassName : ''} ${
258+
containerProps?.className || ''
259+
}`}
283260
sx={{
284261
...(Boolean(tooltipText) && {
285262
alignItems: 'flex-end',
@@ -299,27 +276,14 @@ export const TextField = (props: TextFieldProps) => {
299276
...(!noMarginTop && { marginTop: theme.spacing(2) }),
300277
}}
301278
>
302-
{labelTooltipText && labelTooltipIconPosition === 'left' && (
303-
<TooltipIcon
304-
labelTooltipIconSize={labelTooltipIconSize}
305-
status="help"
306-
sxTooltipIcon={sxTooltipIconLeft}
307-
text={labelTooltipText}
308-
width={tooltipWidth}
309-
/>
310-
)}
311279
<InputLabel
312280
data-qa-textfield-label={label}
313281
htmlFor={validInputId}
314-
{...InputLabelProps} // We should change this name so that it's not conflicting with the deprecated prop
315282
sx={{
316283
marginBottom: 0,
317284
transform: 'none',
318-
fontSize:
319-
labelTooltipIconSize === 'large'
320-
? theme.tokens.font.FontSize.S
321-
: theme.tokens.font.FontSize.Xs,
322285
}}
286+
{...InputLabelProps} // We should change this name so that it's not conflicting with the deprecated prop
323287
>
324288
{label}
325289
{labelSuffixText && (
@@ -329,16 +293,19 @@ export const TextField = (props: TextFieldProps) => {
329293
</Box>
330294
)}
331295
</InputLabel>
332-
{labelTooltipText && labelTooltipIconPosition === 'right' && (
296+
{labelTooltipText && (
333297
<TooltipIcon
334-
labelTooltipIconSize={labelTooltipIconSize}
335298
status="help"
336-
sxTooltipIcon={sxTooltipIconRight}
299+
sxTooltipIcon={{
300+
marginLeft: `${theme.spacing(0.5)}`,
301+
padding: `${theme.spacing(0.5)}`,
302+
}}
337303
text={labelTooltipText}
338304
width={tooltipWidth}
339305
/>
340306
)}
341307
</Box>
308+
342309
{helperText && helperTextPosition === 'top' && (
343310
<FormHelperText
344311
data-qa-textfield-helper-text

‎packages/ui/src/components/TooltipIcon/TooltipIcon.stories.tsx‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -28,22 +28,4 @@ export const VariableWidth: Story = {
2828
render: (args) => <TooltipIcon {...args} />,
2929
};
3030

31-
export const SmallTooltipIcon: Story = {
32-
args: {
33-
status: 'help',
34-
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
35-
labelTooltipIconSize: 'small',
36-
},
37-
render: (args) => <TooltipIcon {...args} />,
38-
};
39-
40-
export const LargeTooltipIcon: Story = {
41-
args: {
42-
status: 'help',
43-
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
44-
labelTooltipIconSize: 'large',
45-
},
46-
render: (args) => <TooltipIcon {...args} />,
47-
};
48-
4931
export default meta;

‎packages/ui/src/components/TooltipIcon/TooltipIcon.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,6 @@ export interface TooltipIconProps
4040
* @todo this seems like a flaw... passing an icon should not require `status` to be `other`
4141
*/
4242
icon?: JSX.Element;
43-
/**
44-
* Size of the tooltip icon
45-
* * @default small
46-
*/
47-
labelTooltipIconSize?: 'large' | 'small';
4843
/**
4944
* Enables a leaveDelay of 3000ms
5045
* @default false
@@ -105,7 +100,6 @@ export const TooltipIcon = (props: TooltipIconProps) => {
105100
tooltipAnalyticsEvent,
106101
tooltipPosition,
107102
width,
108-
labelTooltipIconSize,
109103
} = props;
110104

111105
const handleOpenTooltip = () => {
@@ -127,8 +121,9 @@ export const TooltipIcon = (props: TooltipIconProps) => {
127121
fill: theme.palette.primary.main,
128122
stroke: theme.palette.primary.main,
129123
},
130-
height: labelTooltipIconSize === 'small' ? 16 : 20,
131-
width: labelTooltipIconSize === 'small' ? 16 : 20,
124+
color: theme.tokens.color.Neutrals[50],
125+
height: 20,
126+
width: 20,
132127
};
133128

134129
switch (status) {

‎packages/ui/src/foundations/themes/dark.ts‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -533,6 +533,7 @@ export const darkTheme: ThemeOptions = {
533533
'&.Mui-disabled': {
534534
color: `${Color.Neutrals[50]} !important`,
535535
},
536+
color: Content.Text.Primary.Default,
536537
},
537538
root: {},
538539
},
@@ -560,7 +561,7 @@ export const darkTheme: ThemeOptions = {
560561
'&.Mui-focused': {
561562
color: Color.Neutrals[40],
562563
},
563-
color: Component.Label.Text,
564+
color: Color.Neutrals[40],
564565
},
565566
},
566567
},
@@ -805,14 +806,6 @@ export const darkTheme: ThemeOptions = {
805806
},
806807
},
807808
},
808-
MuiSvgIcon: {
809-
styleOverrides: {
810-
root: {
811-
fontSize: 20,
812-
color: Component.Label.InfoIcon,
813-
},
814-
},
815-
},
816809
MuiSwitch: {
817810
styleOverrides: {
818811
root: {

‎packages/ui/src/foundations/themes/light.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -886,7 +886,7 @@ export const lightTheme: ThemeOptions = {
886886
'&.Mui-focused': {
887887
color: Color.Neutrals[70],
888888
},
889-
color: Component.Label.Text,
889+
color: Color.Neutrals[70],
890890
font: Typography.Body.Bold,
891891
marginBottom: 8,
892892
},
@@ -1285,7 +1285,6 @@ export const lightTheme: ThemeOptions = {
12851285
styleOverrides: {
12861286
root: {
12871287
fontSize: 20,
1288-
color: Component.Label.InfoIcon,
12891288
},
12901289
},
12911290
},

0 commit comments

Comments
 (0)