cleanup Label styles

CartoDB · Jan 3, 2024 · 0283cb5 · 0283cb5
1 parent 1279f16
commit 0283cb5
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 14 deletions.
diff --git a/packages/react-ui/src/components/atoms/LabelWithIndicator.js b/packages/react-ui/src/components/atoms/LabelWithIndicator.js
@@ -1,9 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
+import { Box, styled } from '@mui/material';
 
 import Typography from './Typography';
 
+const Root = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(0.5)
+}));
+
 const LabelIndicator = styled(Typography)(({ theme }) => ({
   '.Mui-disabled &': {
     color: theme.palette.text.disabled
@@ -14,7 +20,7 @@ const LabelWithIndicator = ({ label, type }) => {
   const isRequired = type === 'required';
 
   return (
-    <>
+    <Root>
       {label}
       <LabelIndicator
         component='span'
@@ -24,7 +30,7 @@ const LabelWithIndicator = ({ label, type }) => {
       >
         {isRequired ? '(required)' : '(optional)'}
       </LabelIndicator>
-    </>
+    </Root>
   );
 };
 

diff --git a/packages/react-ui/src/components/atoms/SelectField.js b/packages/react-ui/src/components/atoms/SelectField.js
@@ -11,16 +11,6 @@ import {
 import Typography from './Typography';
 import uniqueId from 'lodash/uniqueId';
 
-const Label = styled(InputLabel)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  gap: theme.spacing(0.5),
-
-  '& .MuiFormLabel-asterisk::after': {
-    marginLeft: theme.spacing(-1)
-  }
-}));
-
 const StyledSelect = styled(Select)(({ theme }) => ({
   '& .MuiInputAdornment-positionStart': {
     paddingLeft: theme.spacing(2),
@@ -82,7 +72,7 @@ const SelectField = forwardRef(
         fullWidth={fullWidth}
         required={required}
       >
-        {label && <Label id={ariaLabelledBy}>{label}</Label>}
+        {label && <InputLabel id={ariaLabelledBy}>{label}</InputLabel>}
 
         <StyledSelect
           {...otherProps}