@basic-ui/material 0.1.15 → 0.1.16

package/src/TextField/OutlinedContainer.tsx

@@ -10,6 +10,11 @@ import { NotchedOutline } from '../NotchedOutline';
 import { Box, BoxProps } from '../Box';
 import { FloatingLabel } from '../FloatingLabel';
 import { Theme } from '../theme';
+import {
+  ICON_WIDTH,
+  PADDING_LEFT_WITHOUT_ICON,
+  PADDING_LEFT_WITH_ICON,
+} from './consts';
 
 const useEnhancedEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect;
@@ -61,9 +66,10 @@ export const OutlinedContainer = forwardRef<
   }, [label]);
 
   const color = error ? 'error' : colorProp;
+  const inputHeight = 56;
 
   return (
-    <Box position="relative" {...otherProps}>
+    <Box position="relative" lineHeight={0} {...otherProps}>
       <NotchedOutline
         ref={forwardedRef}
         borderRadius={4}
@@ -76,9 +82,17 @@ export const OutlinedContainer = forwardRef<
         label={
           label && (
             <FloatingLabel
-              height={56}
-              offsetX={leadingIcon ? 48 : 16}
-              translateX={leadingIcon ? -32 : 0}
+              height={inputHeight}
+              offsetX={
+                leadingIcon
+                  ? PADDING_LEFT_WITH_ICON +
+                    ICON_WIDTH +
+                    PADDING_LEFT_WITHOUT_ICON
+                  : PADDING_LEFT_WITHOUT_ICON
+              }
+              translateX={
+                leadingIcon ? -(PADDING_LEFT_WITH_ICON + ICON_WIDTH) : 0
+              }
               active={forceActive || labelIsFloating}
               ref={labelRef}
               htmlFor={inputId}

package/src/TextField/TextField.story.tsx

@@ -10,6 +10,19 @@ export default {
   title: 'components/TextField',
 };
 
+const SearchIcon = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={24}
+    width={24}
+    viewBox="0 0 48 48"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M39.8 41.95 26.65 28.8q-1.5 1.3-3.5 2.025-2 .725-4.25.725-5.4 0-9.15-3.75T6 18.75q0-5.3 3.75-9.05 3.75-3.75 9.1-3.75 5.3 0 9.025 3.75 3.725 3.75 3.725 9.05 0 2.15-.7 4.15-.7 2-2.1 3.75L42 39.75Zm-20.95-13.4q4.05 0 6.9-2.875Q28.6 22.8 28.6 18.75t-2.85-6.925Q22.9 8.95 18.85 8.95q-4.1 0-6.975 2.875T9 18.75q0 4.05 2.875 6.925t6.975 2.875Z" />
+  </svg>
+);
+
 const Example = ({ variant }) => {
   const [error, setError] = useState<boolean | string>(false);
   const [color, setColor] = useState<'primary' | 'secondary'>('primary');
@@ -159,7 +172,7 @@ const Example = ({ variant }) => {
             label="With icon"
             error={error}
             color={color}
-            leadingIcon={'O'}
+            leadingIcon={<SearchIcon />}
           />
         </Box>
         <Box m={2} width={230} display="inline-block">

package/src/TextField/consts.ts

@@ -0,0 +1,7 @@
+export const PADDING_LEFT_WITH_ICON = 14;
+export const PADDING_LEFT_WITHOUT_ICON = 16;
+
+export const ICON_WIDTH = 24;
+
+export const PADDING_RIGHT_WITH_ICON = 12;
+export const PADDING_RIGHT_WITHOUT_ICON = 16;