@charcoal-ui/react 1.0.0 → 2.0.0-alpha.0

package/src/components/TextField/index.tsx

@@ -32,6 +32,8 @@ export interface SingleLineTextFieldProps extends TextFieldBaseProps {
   readonly multiline?: false
   readonly rows?: never
   readonly type?: string
+  readonly prefix?: string
+  readonly suffix?: string
 }
 
 export interface MultiLineTextFieldProps extends TextFieldBaseProps {
@@ -39,6 +41,8 @@ export interface MultiLineTextFieldProps extends TextFieldBaseProps {
   readonly multiline: true
   readonly rows?: number
   readonly type?: never
+  readonly prefix?: never
+  readonly suffix?: never
 }
 
 export type TextFieldProps = SingleLineTextFieldProps | MultiLineTextFieldProps
@@ -88,11 +92,17 @@ const SingleLineTextField = React.forwardRef<
     invalid = false,
     assistiveText,
     maxLength,
+    prefix = '',
+    suffix = '',
   } = props
 
   const { visuallyHiddenProps } = useVisuallyHidden()
   const ariaRef = useRef<HTMLInputElement>(null)
+  const prefixRef = useRef<HTMLSpanElement>(null)
+  const suffixRef = useRef<HTMLSpanElement>(null)
   const [count, setCount] = useState(countStringInCodePoints(props.value ?? ''))
+  const [prefixWidth, setPrefixWidth] = useState(0)
+  const [suffixWidth, setSuffixWidth] = useState(0)
 
   const handleChange = useCallback(
     (value: string) => {
@@ -121,6 +131,27 @@ const SingleLineTextField = React.forwardRef<
       ariaRef
     )
 
+  useEffect(() => {
+    const prefixObserver = new ResizeObserver((entries) => {
+      setPrefixWidth(entries[0].contentRect.width)
+    })
+    const suffixObserver = new ResizeObserver((entries) => {
+      setSuffixWidth(entries[0].contentRect.width)
+    })
+
+    if (prefixRef.current !== null) {
+      prefixObserver.observe(prefixRef.current)
+    }
+    if (suffixRef.current !== null) {
+      suffixObserver.observe(suffixRef.current)
+    }
+
+    return () => {
+      suffixObserver.disconnect()
+      prefixObserver.disconnect()
+    }
+  }, [])
+
   return (
     <TextFieldRoot className={className} isDisabled={disabled}>
       <TextFieldLabel
@@ -132,16 +163,24 @@ const SingleLineTextField = React.forwardRef<
         {...(!showLabel ? visuallyHiddenProps : {})}
       />
       <StyledInputContainer>
+        <PrefixContainer ref={prefixRef}>
+          <Affix>{prefix}</Affix>
+        </PrefixContainer>
         <StyledInput
           ref={mergeRefs(forwardRef, ariaRef)}
           invalid={invalid}
+          extraLeftPadding={prefixWidth}
+          extraRightPadding={suffixWidth}
           {...inputProps}
         />
-        {showCount && maxLength && (
-          <SingleLineCounter>
-            {count}/{maxLength}
-          </SingleLineCounter>
-        )}
+        <SuffixContainer ref={suffixRef}>
+          <Affix>{suffix}</Affix>
+          {showCount && maxLength && (
+            <SingleLineCounter>
+              {count}/{maxLength}
+            </SingleLineCounter>
+          )}
+        </SuffixContainer>
       </StyledInputContainer>
       {assistiveText != null && assistiveText.length !== 0 && (
         <AssistiveText
@@ -275,19 +314,50 @@ const StyledInputContainer = styled.div`
   position: relative;
 `
 
-const StyledInput = styled.input<{ invalid: boolean }>`
+const PrefixContainer = styled.span`
+  position: absolute;
+  top: 50%;
+  left: 8px;
+  transform: translateY(-50%);
+`
+
+const SuffixContainer = styled.span`
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  transform: translateY(-50%);
+
+  display: flex;
+  gap: 8px;
+`
+
+const Affix = styled.span`
+  user-select: none;
+
+  ${theme((o) => [o.typography(14).preserveHalfLeading, o.font.text2])}
+`
+
+const StyledInput = styled.input<{
+  invalid: boolean
+  extraLeftPadding: number
+  extraRightPadding: number
+}>`
   border: none;
   box-sizing: border-box;
   outline: none;
+  font-family: inherit;
 
   /* Prevent zooming for iOS Safari */
   transform-origin: top left;
   transform: scale(0.875);
   width: calc(100% / 0.875);
-  height: calc(40px / 0.875);
+  height: calc(100% / 0.875);
   font-size: calc(14px / 0.875);
   line-height: calc(22px / 0.875);
-  padding: calc(9px / 0.875) calc(8px / 0.875);
+  padding-top: calc(9px / 0.875);
+  padding-bottom: calc(9px / 0.875);
+  padding-left: calc((8px + ${(p) => p.extraLeftPadding}px) / 0.875);
+  padding-right: calc((8px + ${(p) => p.extraRightPadding}px) / 0.875);
   border-radius: calc(4px / 0.875);
 
   /* Display box-shadow for iOS Safari */
@@ -320,6 +390,7 @@ const StyledTextarea = styled.textarea<{ invalid: boolean }>`
   box-sizing: border-box;
   outline: none;
   resize: none;
+  font-family: inherit;
 
   /* Prevent zooming for iOS Safari */
   transform-origin: top left;
@@ -359,11 +430,6 @@ const StyledTextarea = styled.textarea<{ invalid: boolean }>`
 `
 
 const SingleLineCounter = styled.span`
-  position: absolute;
-  top: 50%;
-  right: 8px;
-  transform: translateY(-50%);
-
   ${theme((o) => [o.typography(14).preserveHalfLeading, o.font.text3])}
 `
 

package/src/components/a11y.test.tsx

@@ -10,26 +10,38 @@ import { light, dark } from '@charcoal-ui/theme'
 
 expect.extend(toHaveNoViolations)
 
-const stories = glob
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+interface StoryWithMetadata<ArgsType = any> {
+  filename: string
+  name: string
+  story: Story<ArgsType>
+  args: ArgsType
+}
+
+const stories: StoryWithMetadata[] = glob
   .sync(path.resolve(__dirname, '**/*.story.tsx'))
-  .flatMap((filename) =>
-    Object.entries(
-      // eslint-disable-next-line @typescript-eslint/no-var-requires
-      require(`./${path.relative(__dirname, filename)}`) as Record<
-        string,
-        Story<any>
-      >
-    )
+  .flatMap((filePath) => {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const exports = require(`./${path.relative(
+      __dirname,
+      filePath
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    )}`) as Record<string, any>
+
+    return Object.entries(exports)
       .filter(
-        ([exportName, story]) =>
-          exportName !== 'default' && typeof story === 'function'
+        ([exportName, exportValue]) =>
+          exportName !== 'default' && typeof exportValue === 'function'
       )
-      .map<[string, string, Story<any>]>(([exportName, story]) => [
-        path.relative(__dirname, filename),
-        exportName,
-        story,
-      ])
-  )
+      .map(([exportName, exportValue]) => ({
+        filename: path.relative(__dirname, filePath),
+        name: exportName,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        story: exportValue as Story<any>,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+        args: { ...exports.default.args, ...exportValue.args },
+      }))
+  })
 
 const themes = Object.entries({
   light,
@@ -43,10 +55,6 @@ const links = Object.entries({
 const div = document.body.appendChild(document.createElement('div'))
 
 beforeEach(() => {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-expect-error
-  global.__DEV__ = {}
-
   global.IntersectionObserver = jest.fn().mockImplementation(() => ({
     observe() {
       return null
@@ -60,14 +68,14 @@ beforeEach(() => {
 describe.each(themes)('using %s theme', (_name, theme) => {
   describe.each(links)('using %s component', (_name, link) => {
     describe.each(stories)(
-      'storiesOf(%s).add(%s)',
-      (_filename, _exportName, story) => {
+      'storiesOf($filename).add($name)',
+      ({ story, args }) => {
         it('has no accessibility violations', async () => {
           expect(() => {
             render(
               <ThemeProvider theme={theme}>
                 <ComponentAbstraction components={{ Link: link }}>
-                  {story(story.args)}
+                  {story(args)}
                 </ComponentAbstraction>
               </ThemeProvider>
             )

package/src/type.d.ts

@@ -10,7 +10,3 @@ declare module 'react' {
     css?: CSSProp<DefaultTheme>
   }
 }
-
-declare global {
-  const __DEV__: object | undefined // actually object|false, but using undefined allows ! assertion
-}