@primer/components 31.2.0-rc.a2a8604e → 31.2.0-rc.c7f73427

package/lib-esm/stories/TextInput.stories.js

@@ -0,0 +1,117 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useState } from 'react';
+import { BaseStyles, Box, ThemeProvider, Text } from '..';
+import TextInput from '../TextInput';
+import { CheckIcon } from '@primer/octicons-react';
+export default {
+  title: 'Forms/Text Input',
+  component: TextInput,
+  decorators: [Story => {
+    return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Box, {
+      paddingTop: 5
+    }, Story())));
+  }],
+  argTypes: {
+    sx: {
+      table: {
+        disable: true
+      }
+    },
+    block: {
+      name: 'Block',
+      defaultValue: false,
+      control: {
+        type: 'boolean'
+      }
+    },
+    disabled: {
+      name: 'Disabled',
+      defaultValue: false,
+      control: {
+        type: 'boolean'
+      }
+    },
+    variant: {
+      name: 'Variants',
+      options: ['small', 'medium', 'large'],
+      control: {
+        type: 'radio'
+      }
+    }
+  }
+};
+
+const Label = ({
+  htmlFor,
+  children
+}) => /*#__PURE__*/React.createElement(Text, {
+  as: "label",
+  htmlFor: htmlFor,
+  sx: {
+    fontWeight: 600,
+    fontSize: 14
+  }
+}, children);
+
+Label.displayName = "Label";
+export const Default = args => {
+  const [value, setValue] = useState('');
+
+  const handleChange = event => {
+    setValue(event.target.value);
+  };
+
+  const inputId = 'basic-text-input';
+  return /*#__PURE__*/React.createElement("form", null, /*#__PURE__*/React.createElement("div", {
+    className: "form-group"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "form-group-header"
+  }, /*#__PURE__*/React.createElement(Label, {
+    htmlFor: inputId
+  }, "Example label")), /*#__PURE__*/React.createElement("div", {
+    className: "form-group-body"
+  }, /*#__PURE__*/React.createElement(TextInput, _extends({
+    id: inputId,
+    value: value,
+    onChange: handleChange
+  }, args)))));
+};
+Default.displayName = "Default";
+export const WithLeadingIcon = args => {
+  const [value, setValue] = useState('');
+
+  const handleChange = event => {
+    setValue(event.target.value);
+  };
+
+  const inputId = 'basic-text-input-with-leading-icon';
+  return /*#__PURE__*/React.createElement("form", null, /*#__PURE__*/React.createElement(Label, {
+    htmlFor: inputId
+  }, "Example label"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(TextInput, _extends({
+    icon: CheckIcon,
+    id: inputId,
+    value: value,
+    onChange: handleChange,
+    type: "password"
+  }, args)));
+};
+WithLeadingIcon.displayName = "WithLeadingIcon";
+export const Password = args => {
+  const [value, setValue] = useState('');
+
+  const handleChange = event => {
+    setValue(event.target.value);
+  };
+
+  const inputId = 'basic-text-input-as-password';
+  return /*#__PURE__*/React.createElement("form", null, /*#__PURE__*/React.createElement(Label, {
+    htmlFor: inputId
+  }, "Password"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(TextInput, _extends({
+    type: "password",
+    id: inputId,
+    value: value,
+    onChange: handleChange
+  }, args)));
+};
+Password.displayName = "Password";

package/lib-esm/stories/Token.stories.js

@@ -7,6 +7,7 @@ import { BaseStyles, ThemeProvider } from '..';
 import Box from '../Box';
 import Token from '../Token/Token';
 import Text from '../Text';
+import { GitBranchIcon } from '@primer/octicons-react';
 export default {
   title: 'Tokens/Default',
   component: Token,
@@ -19,7 +20,7 @@ export default {
     return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Story, null)));
   }]
 };
-const excludedControlKeys = ['id', 'as', 'tabIndex', 'onRemove'];
+const excludedControlKeys = ['id', 'as', 'tabIndex', 'onRemove', 'leadingVisual'];
 
 const SingleExampleContainer = ({
   children,
@@ -91,6 +92,18 @@ Interactive.parameters = {
     exclude: [...excludedControlKeys, 'hideRemoveButton', 'text']
   }
 };
+export const WithLeadingVisual = args => {
+  return /*#__PURE__*/React.createElement(ExampleCollectionContainer, null, /*#__PURE__*/React.createElement(Token, _extends({}, args, {
+    leadingVisual: () => /*#__PURE__*/React.createElement(GitBranchIcon, null)
+  })));
+};
+WithLeadingVisual.displayName = "WithLeadingVisual";
+WithLeadingVisual.storyName = 'with leadingVisual';
+WithLeadingVisual.parameters = {
+  controls: {
+    exclude: [...excludedControlKeys, 'hideRemoveButton']
+  }
+};
 export const WithOnRemoveFn = args => {
   return /*#__PURE__*/React.createElement(ExampleCollectionContainer, null, /*#__PURE__*/React.createElement(SingleExampleContainer, {
     label: "w/ onRemove passed"

package/lib-esm/utils/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,3 @@
+import { useEffect } from 'react';
+declare const useIsomorphicLayoutEffect: typeof useEffect;
+export default useIsomorphicLayoutEffect;

package/lib-esm/utils/useIsomorphicLayoutEffect.js

@@ -0,0 +1,3 @@
+import { useEffect, useLayoutEffect } from 'react';
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? useLayoutEffect : useEffect;
+export default useIsomorphicLayoutEffect;

package/migrating.md

@@ -110,7 +110,7 @@ There are two ways to change the theme of @primer/components components:
 
    export default () => (
      <ThemeProvider theme={theme}>
-       <Block color="bodytext" p={4}>
+       <Block sx={{color: 'bodytext', p: 4}}>
          <Text fontSize={4}>Hello, world!</Text>
        </Block>
      </ThemeProvider>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "31.2.0-rc.a2a8604e",
+  "version": "31.2.0-rc.c7f73427",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -15,7 +15,7 @@
     "start": "concurrently npm:start:*",
     "start:docs": "cd docs && npm run develop",
     "start:storybook": "start-storybook -p 6006",
-    "lint": "eslint '**/*.{js,ts,tsx,md,mdx}'",
+    "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0",
     "lint:fix": "npm run lint -- --fix",
     "test": "jest",
     "test:update": "npm run test -- --updateSnapshot",

package/src/Overlay.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components'
-import React, {ReactElement, useEffect, useLayoutEffect, useRef} from 'react'
+import React, {ReactElement, useEffect, useRef} from 'react'
 import {get, COMMON, SystemPositionProps, SystemCommonProps} from './constants'
 import {ComponentProps} from './utils/types'
+import useLayoutEffect from './utils/useIsomorphicLayoutEffect'
 import {useOverlay, TouchOrMouseEvent} from './hooks'
 import Portal from './Portal'
 import sx, {SxProp} from './sx'

package/src/Portal/Portal.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import {createPortal} from 'react-dom'
+import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 
 const PRIMER_PORTAL_ROOT_ID = '__primerPortalRoot__'
 const DEFAULT_PORTAL_CONTAINER_NAME = '__default__'
@@ -69,7 +70,7 @@ export const Portal: React.FC<PortalProps> = ({children, onMount, containerName:
   hostElement.style.zIndex = '1'
   const elementRef = React.useRef(hostElement)
 
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     let containerName = _containerName
     if (containerName === undefined) {
       containerName = DEFAULT_PORTAL_CONTAINER_NAME

package/src/_TextInputWrapper.tsx

@@ -91,6 +91,13 @@ const TextInputWrapper = styled.span<StyledWrapperProps>`
       display: block;
       width: 100%;
     `}
+
+    ${props =>
+    props.block &&
+    props.hasIcon &&
+    css`
+      display: flex;
+    `}
   
     // Ensures inputs don't zoom on mobile but are body-font size on desktop
     @media (min-width: ${get('breakpoints.1')}) {

package/src/__tests__/AnchoredOverlay.test.tsx

@@ -144,7 +144,7 @@ describe('AnchoredOverlay', () => {
   })
 
   it('should render consistently when open', () => {
-    const anchoredOverlay = HTMLRender(<AnchoredOverlayTestComponent initiallyOpen={true} />)
-    expect(anchoredOverlay).toMatchSnapshot()
+    const {container} = HTMLRender(<AnchoredOverlayTestComponent initiallyOpen={true} />)
+    expect(container).toMatchSnapshot()
   })
 })

package/src/__tests__/TextInputWithTokens.test.tsx

@@ -29,16 +29,6 @@ const LabelledTextInputWithTokens: React.FC<TextInputWithTokensProps> = ({onToke
   </>
 )
 
-// describe('axe test', () => {
-//   it('should have no axe violations', async () => {
-//     const onRemoveMock = jest.fn()
-//     const {container} = HTMLRender(<LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} />)
-//     const results = await axe(container)
-//     expect(results).toHaveNoViolations()
-//     cleanup()
-//   })
-// })
-
 jest.useFakeTimers()
 
 describe('TextInputWithTokens', () => {

package/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap

@@ -94,9 +94,7 @@ exports[`AnchoredOverlay renders consistently 1`] = `
 `;
 
 exports[`AnchoredOverlay should render consistently when open 1`] = `
-Object {
-  "asFragment": [Function],
-  "baseElement": .c0 {
+.c0 {
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
   line-height: 1.5;
   color: #24292f;
@@ -187,146 +185,48 @@ Object {
   outline: none;
 }
 
-<body>
-    <div>
-      <div
-        class="c0"
-        color="fg.default"
-        data-portal-root="true"
-        font-family="normal"
-      >
-        <button
-          aria-haspopup="true"
-          aria-labelledby="react-aria-1"
-          class="c1"
-          id="react-aria-1"
-          tabindex="0"
-        >
-          Anchor Button
-        </button>
-        <div
-          id="__primerPortalRoot__"
-          style="position: absolute; top: 0px; left: 0px;"
-        >
-          <div
-            style="position: relative; z-index: 1;"
-          >
-            <div
-              class="c2"
-              data-focus-trap="active"
-              height="auto"
-              role="none"
-              style="top: 4px; left: 0px; --styled-overlay-visibility: visible;"
-              width="auto"
-            >
-              <button
-                class="focus-visible"
-                data-focus-visible-added=""
-                tabindex="0"
-                type="button"
-              >
-                Focusable Child
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
+<div>
+  <div
+    class="c0"
+    color="fg.default"
+    data-portal-root="true"
+    font-family="normal"
+  >
+    <button
+      aria-haspopup="true"
+      aria-labelledby="react-aria-1"
+      class="c1"
+      id="react-aria-1"
+      tabindex="0"
+    >
+      Anchor Button
+    </button>
     <div
-      class="BaseStyles__Base-qvuaww-0 ihFkAM"
-      color="fg.default"
-      data-portal-root="true"
-      font-family="normal"
+      id="__primerPortalRoot__"
+      style="position: absolute; top: 0px; left: 0px;"
     >
-      <button
-        aria-haspopup="true"
-        aria-labelledby="react-aria-1"
-        class="ButtonBase-sc-181ps9o-0 Button-xjtz72-0 iRqJHc"
-        id="react-aria-1"
-        tabindex="0"
-      >
-        Anchor Button
-      </button>
       <div
-        id="__primerPortalRoot__"
-        style="position: absolute; top: 0px; left: 0px;"
+        style="position: relative; z-index: 1;"
       >
         <div
-          style="position: relative; z-index: 1;"
+          class="c2"
+          data-focus-trap="active"
+          height="auto"
+          role="none"
+          style="top: 4px; left: 0px; --styled-overlay-visibility: visible;"
+          width="auto"
         >
-          <div
-            class="Overlay__StyledOverlay-jhwkzw-0 jFTKwM"
-            data-focus-trap="active"
-            height="auto"
-            role="none"
-            style="top: 4px; left: 0px; --styled-overlay-visibility: visible;"
-            width="auto"
+          <button
+            class="focus-visible"
+            data-focus-visible-added=""
+            tabindex="0"
+            type="button"
           >
-            <button
-              class="focus-visible"
-              data-focus-visible-added=""
-              tabindex="0"
-              type="button"
-            >
-              Focusable Child
-            </button>
-          </div>
+            Focusable Child
+          </button>
         </div>
       </div>
     </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
+  </div>
+</div>
 `;

package/src/hooks/useAnchoredPosition.ts

@@ -2,6 +2,7 @@ import React from 'react'
 import {PositionSettings, getAnchoredPosition, AnchorPosition} from '../behaviors/anchoredPosition'
 import {useProvidedRefOrCreate} from './useProvidedRefOrCreate'
 import {useResizeObserver} from './useResizeObserver'
+import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 
 export interface AnchoredPositionHookSettings extends Partial<PositionSettings> {
   floatingElementRef?: React.RefObject<Element>
@@ -41,7 +42,7 @@ export function useAnchoredPosition(
     [floatingElementRef, anchorElementRef, ...dependencies]
   )
 
-  React.useLayoutEffect(updatePosition, [updatePosition])
+  useLayoutEffect(updatePosition, [updatePosition])
 
   useResizeObserver(updatePosition)
 

package/src/hooks/useCombinedRefs.ts

@@ -1,4 +1,5 @@
-import React, {ForwardedRef, useRef} from 'react'
+import {ForwardedRef, useRef} from 'react'
+import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 
 /**
  * Creates a ref by combining multiple constituent refs. The ref returned by this hook
@@ -11,7 +12,7 @@ import React, {ForwardedRef, useRef} from 'react'
 export function useCombinedRefs<T>(...refs: (ForwardedRef<T> | null | undefined)[]) {
   const combinedRef = useRef<T | null>(null)
 
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     function setRefs(current: T | null = null) {
       for (const ref of refs) {
         if (!ref) {
@@ -32,7 +33,6 @@ export function useCombinedRefs<T>(...refs: (ForwardedRef<T> | null | undefined)
       // eslint-disable-next-line react-hooks/exhaustive-deps
       setRefs(combinedRef.current)
     }
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [...refs, combinedRef.current])
 

package/src/hooks/useResizeObserver.ts

@@ -1,7 +1,7 @@
-import React from 'react'
+import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 
 export function useResizeObserver(callback: () => void) {
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     const observer = new window.ResizeObserver(() => callback())
     observer.observe(document.documentElement)
     return () => {

package/src/stories/TextInput.stories.tsx

@@ -0,0 +1,113 @@
+import React, {useState, ReactNode} from 'react'
+import {Meta} from '@storybook/react'
+
+import {BaseStyles, Box, ThemeProvider, Text} from '..'
+import TextInput, {TextInputProps} from '../TextInput'
+import {CheckIcon} from '@primer/octicons-react'
+
+export default {
+  title: 'Forms/Text Input',
+  component: TextInput,
+  decorators: [
+    Story => {
+      return (
+        <ThemeProvider>
+          <BaseStyles>
+            <Box paddingTop={5}>{Story()}</Box>
+          </BaseStyles>
+        </ThemeProvider>
+      )
+    }
+  ],
+  argTypes: {
+    sx: {
+      table: {
+        disable: true
+      }
+    },
+    block: {
+      name: 'Block',
+      defaultValue: false,
+      control: {
+        type: 'boolean'
+      }
+    },
+    disabled: {
+      name: 'Disabled',
+      defaultValue: false,
+      control: {
+        type: 'boolean'
+      }
+    },
+    variant: {
+      name: 'Variants',
+      options: ['small', 'medium', 'large'],
+      control: {type: 'radio'}
+    }
+  }
+} as Meta
+
+const Label = ({htmlFor, children}: {htmlFor: string; children: ReactNode}) => (
+  <Text as="label" htmlFor={htmlFor} sx={{fontWeight: 600, fontSize: 14}}>
+    {children}
+  </Text>
+)
+
+export const Default = (args: TextInputProps) => {
+  const [value, setValue] = useState('')
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value)
+  }
+
+  const inputId = 'basic-text-input'
+
+  return (
+    <form>
+      <div className="form-group">
+        <div className="form-group-header">
+          <Label htmlFor={inputId}>Example label</Label>
+        </div>
+        <div className="form-group-body">
+          <TextInput id={inputId} value={value} onChange={handleChange} {...args} />
+        </div>
+      </div>
+    </form>
+  )
+}
+
+export const WithLeadingIcon = (args: TextInputProps) => {
+  const [value, setValue] = useState('')
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value)
+  }
+
+  const inputId = 'basic-text-input-with-leading-icon'
+
+  return (
+    <form>
+      <Label htmlFor={inputId}>Example label</Label>
+      <br />
+      <TextInput icon={CheckIcon} id={inputId} value={value} onChange={handleChange} type="password" {...args} />
+    </form>
+  )
+}
+
+export const Password = (args: TextInputProps) => {
+  const [value, setValue] = useState('')
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value)
+  }
+
+  const inputId = 'basic-text-input-as-password'
+
+  return (
+    <form>
+      <Label htmlFor={inputId}>Password</Label>
+      <br />
+      <TextInput type="password" id={inputId} value={value} onChange={handleChange} {...args} />
+    </form>
+  )
+}

package/src/stories/Token.stories.tsx

@@ -7,6 +7,7 @@ import {BaseStyles, ThemeProvider} from '..'
 import Box from '../Box'
 import Token, {TokenProps} from '../Token/Token'
 import Text from '../Text'
+import {GitBranchIcon} from '@primer/octicons-react'
 
 export default {
   title: 'Tokens/Default',
@@ -29,7 +30,7 @@ export default {
   ]
 } as Meta
 
-const excludedControlKeys = ['id', 'as', 'tabIndex', 'onRemove']
+const excludedControlKeys = ['id', 'as', 'tabIndex', 'onRemove', 'leadingVisual']
 
 const SingleExampleContainer: React.FC<{label?: string}> = ({children, label}) => (
   <Box
@@ -94,6 +95,16 @@ export const Interactive = (args: Omit<TokenProps, 'ref' | 'text'>) => {
 }
 Interactive.parameters = {controls: {exclude: [...excludedControlKeys, 'hideRemoveButton', 'text']}}
 
+export const WithLeadingVisual = (args: Omit<TokenProps, 'ref'>) => {
+  return (
+    <ExampleCollectionContainer>
+      <Token {...args} leadingVisual={() => <GitBranchIcon />} />
+    </ExampleCollectionContainer>
+  )
+}
+WithLeadingVisual.storyName = 'with leadingVisual'
+WithLeadingVisual.parameters = {controls: {exclude: [...excludedControlKeys, 'hideRemoveButton']}}
+
 export const WithOnRemoveFn = (args: Omit<TokenProps, 'ref'>) => {
   return (
     <ExampleCollectionContainer>

package/src/utils/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,10 @@
+import {useEffect, useLayoutEffect} from 'react'
+
+const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' &&
+  typeof window.document !== 'undefined' &&
+  typeof window.document.createElement !== 'undefined'
+    ? useLayoutEffect
+    : useEffect
+
+export default useIsomorphicLayoutEffect