@primer/components 31.2.0-rc.6afeaa37 → 31.2.0-rc.76ed571d

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

@@ -199,6 +199,7 @@ exports[`Token components AvatarToken renders all sizes 1`] = `
       style={
         Object {
           "display": "inline-block",
+          "overflow": "visible",
           "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
@@ -409,6 +410,7 @@ exports[`Token components AvatarToken renders all sizes 2`] = `
       style={
         Object {
           "display": "inline-block",
+          "overflow": "visible",
           "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
@@ -619,6 +621,7 @@ exports[`Token components AvatarToken renders all sizes 3`] = `
       style={
         Object {
           "display": "inline-block",
+          "overflow": "visible",
           "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
@@ -829,6 +832,7 @@ exports[`Token components AvatarToken renders all sizes 4`] = `
       style={
         Object {
           "display": "inline-block",
+          "overflow": "visible",
           "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
@@ -1251,6 +1255,7 @@ exports[`Token components AvatarToken renders with a remove button 1`] = `
       style={
         Object {
           "display": "inline-block",
+          "overflow": "visible",
           "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
@@ -1427,6 +1432,7 @@ exports[`Token components IssueLabelToken renders all sizes 1`] = `
       style={
         Object {
           "display": "inline-block",
+          "overflow": "visible",
           "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
@@ -1603,6 +1609,7 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = `
       style={
         Object {
           "display": "inline-block",
+          "overflow": "visible",
           "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
@@ -1779,6 +1786,7 @@ exports[`Token components IssueLabelToken renders all sizes 3`] = `
       style={
         Object {
           "display": "inline-block",
+          "overflow": "visible",
           "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
@@ -1955,6 +1963,7 @@ exports[`Token components IssueLabelToken renders all sizes 4`] = `
       style={
         Object {
           "display": "inline-block",
+          "overflow": "visible",
           "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
@@ -2214,6 +2223,7 @@ exports[`Token components IssueLabelToken renders custom fill color 1`] = `
       style={
         Object {
           "display": "inline-block",
+          "overflow": "visible",
           "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
@@ -2390,6 +2400,7 @@ exports[`Token components IssueLabelToken renders default fill color 1`] = `
       style={
         Object {
           "display": "inline-block",
+          "overflow": "visible",
           "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
@@ -2679,6 +2690,7 @@ exports[`Token components IssueLabelToken renders with a remove button 1`] = `
       style={
         Object {
           "display": "inline-block",
+          "overflow": "visible",
           "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
@@ -2845,6 +2857,7 @@ exports[`Token components Token renders all sizes 1`] = `
       style={
         Object {
           "display": "inline-block",
+          "overflow": "visible",
           "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
@@ -3011,6 +3024,7 @@ exports[`Token components Token renders all sizes 2`] = `
       style={
         Object {
           "display": "inline-block",
+          "overflow": "visible",
           "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
@@ -3177,6 +3191,7 @@ exports[`Token components Token renders all sizes 3`] = `
       style={
         Object {
           "display": "inline-block",
+          "overflow": "visible",
           "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
@@ -3343,6 +3358,7 @@ exports[`Token components Token renders all sizes 4`] = `
       style={
         Object {
           "display": "inline-block",
+          "overflow": "visible",
           "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
@@ -3782,6 +3798,7 @@ exports[`Token components Token renders with a remove button 1`] = `
       style={
         Object {
           "display": "inline-block",
+          "overflow": "visible",
           "userSelect": "none",
           "verticalAlign": "text-bottom",
         }

package/src/{unreleased.ts → drafts.ts}

@@ -2,8 +2,9 @@
  *  api yet (not in main bundle). We don't recommend using it in production.
  *
  *  But, they are published on npm and you can import them for experimentation/feedback.
- *  example: import {ActionList} from '@primer/components/unreleased
+ *  example: import {ActionList} from '@primer/components/drafts
  */
 
 // Components
 export * from './ActionList2'
+export * from './NewButton'

package/src/index.ts

@@ -52,6 +52,8 @@ export {
   ButtonClose,
   ButtonGroup
 } from './Button'
+export {NewButton} from './NewButton'
+export type {NewButtonProps} from './NewButton'
 export type {
   ButtonProps,
   ButtonDangerProps,

package/src/stories/ActionList2.stories.tsx

@@ -13,7 +13,7 @@ import {
   LinkIcon,
   LawIcon,
   StarIcon,
-  GitForkIcon,
+  RepoForkedIcon,
   AlertIcon,
   TableIcon,
   PeopleIcon,
@@ -112,7 +112,7 @@ export function WithIcon(): JSX.Element {
         </ActionList.Item>
         <ActionList.Item>
           <ActionList.LeadingVisual>
-            <GitForkIcon />
+            <RepoForkedIcon />
           </ActionList.LeadingVisual>
           3 forks
         </ActionList.Item>
@@ -241,7 +241,7 @@ SingleSelectListStory.storyName = 'Single Select'
 export function MultiSelectListStory(): JSX.Element {
   const [assignees, setAssignees] = React.useState(users.slice(0, 2))
 
-  const toggleAssignee = assignee => {
+  const toggleAssignee = (assignee: typeof users[number]) => {
     const assigneeIndex = assignees.findIndex(a => a.login === assignee.login)
 
     if (assigneeIndex === -1) setAssignees([...assignees, assignee])
@@ -307,7 +307,7 @@ DisabledStory.storyName = 'Disabled Items'
 export function GroupsStory(): JSX.Element {
   const [assignees, setAssignees] = React.useState(users.slice(0, 1))
 
-  const toggleAssignee = assignee => {
+  const toggleAssignee = (assignee: typeof users[number]) => {
     const assigneeIndex = assignees.findIndex(a => a.login === assignee.login)
 
     if (assigneeIndex === -1) setAssignees([...assignees, assignee])
@@ -635,7 +635,8 @@ export function DOMPropsStory(): JSX.Element {
       <h1>Simple List</h1>
       <ErsatzOverlay>
         <ActionList>
-          <ActionList.Item id="something" onClick={event => alert(`Id is '${event.target.id}'`)}>
+          {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+          <ActionList.Item id="something" onClick={(event: any) => alert(`Id is '${event.target.id}'`)}>
             Has an id
           </ActionList.Item>
         </ActionList>
@@ -901,7 +902,7 @@ export function NestedChildren(): JSX.Element {
 }
 NestedChildren.storyName = 'Nested Children'
 
-const ReviewerDescription = ({user}) => {
+const ReviewerDescription = ({user}: {user: typeof users[number]}) => {
   const usersRecentlyEditedFile = users.slice(0, 2)
 
   if (usersRecentlyEditedFile.find(u => u.login === user.login)) {
@@ -938,7 +939,7 @@ export function ChildWithInternalState(): JSX.Element {
 }
 ChildWithInternalState.storyName = 'Child with internal state'
 
-const StatefulChild = props => {
+const StatefulChild: React.FC = props => {
   const [nameVisible, setNameVisibility] = React.useState(false)
   const toggle = () => {
     setNameVisibility(!nameVisible)
@@ -1206,7 +1207,9 @@ const repos = [
 export function AsyncListStory(): JSX.Element {
   const [results, setResults] = React.useState(repos.slice(0, 6))
   const [loading, setLoading] = React.useState(false)
-  const filter = async event => {
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const filter = async (event: any) => {
     setLoading(true)
     const filteredResults = await filterSlowly(event.target.value)
     setResults(filteredResults)
@@ -1244,7 +1247,7 @@ export function AsyncListStory(): JSX.Element {
 }
 AsyncListStory.storyName = 'Async List Options'
 
-const filterSlowly = async query => {
+const filterSlowly = async (query: string) => {
   // sleep for 1s before returning results
   await new Promise(resolve => setTimeout(resolve, 1000))
   return await repos.filter(name => name.includes(query))

package/src/stories/NewButton.stories.tsx

@@ -0,0 +1,201 @@
+import React, {useState} from 'react'
+import {NewButton as Button, NewButtonProps as ButtonProps} from '../NewButton'
+import {BaseStyles, ThemeProvider} from '..'
+import {Meta} from '@storybook/react'
+import {XIcon, SearchIcon, EyeIcon, EyeClosedIcon, TriangleDownIcon} from '@primer/octicons-react'
+import Box from '../Box'
+
+export default {
+  title: 'Composite components/New Button',
+
+  decorators: [
+    Story => {
+      return (
+        <ThemeProvider>
+          <BaseStyles>
+            <Story />
+          </BaseStyles>
+        </ThemeProvider>
+      )
+    }
+  ],
+  argTypes: {
+    size: {
+      control: {
+        type: 'radio',
+        options: ['small', 'medium', 'large']
+      }
+    }
+  }
+} as Meta
+
+export const defaultButton = ({size = 'medium', ...args}: ButtonProps) => {
+  return (
+    <Button size={size} {...args}>
+      Default
+    </Button>
+  )
+}
+
+export const primaryButton = (args: ButtonProps) => {
+  return (
+    <Button {...args} variant="primary">
+      Primary
+    </Button>
+  )
+}
+
+export const dangerButton = (args: ButtonProps) => {
+  return (
+    <Button {...args} variant="danger">
+      Danger
+    </Button>
+  )
+}
+
+export const invisibleButton = (args: ButtonProps) => {
+  return (
+    <Button {...args} variant="invisible">
+      Invisible
+    </Button>
+  )
+}
+
+export const iconBeforeButton = (args: ButtonProps) => {
+  return (
+    <Button leadingIcon={SearchIcon} {...args}>
+      Before
+    </Button>
+  )
+}
+
+export const iconButton = ({...args}: ButtonProps) => {
+  return (
+    <>
+      <Box mb={2}>
+        <Button icon={XIcon} {...args}>
+          Close
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button icon={XIcon} {...args} variant="invisible">
+          Close
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button icon={XIcon} {...args} variant="danger">
+          Close
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button icon={XIcon} {...args} variant="primary">
+          Close
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button icon={XIcon} {...args} variant="outline">
+          Close
+        </Button>
+      </Box>
+    </>
+  )
+}
+
+export const WatchCounterButton = ({...args}: ButtonProps) => {
+  const [count, setCount] = useState(0)
+  return (
+    <>
+      <Box mb={2}>
+        <Button onClick={() => setCount(count + 1)} {...args}>
+          Watch
+          <Button.Counter>{count}</Button.Counter>
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button onClick={() => setCount(count + 1)} {...args} variant="primary">
+          Watch
+          <Button.Counter>{count}</Button.Counter>
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button onClick={() => setCount(count + 1)} {...args} variant="invisible">
+          Watch
+          <Button.Counter>{count}</Button.Counter>
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button onClick={() => setCount(count + 1)} {...args} variant="danger">
+          Watch
+          <Button.Counter>{count}</Button.Counter>
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button onClick={() => setCount(count + 1)} {...args} variant="outline">
+          Watch
+          <Button.Counter>{count}</Button.Counter>
+        </Button>
+      </Box>
+    </>
+  )
+}
+
+export const WatchIconButton = ({...args}: ButtonProps) => {
+  const [watching, setWatching] = useState(false)
+  const icon = watching ? EyeClosedIcon : () => <EyeIcon />
+  return (
+    <Button onClick={() => setWatching(!watching)} trailingIcon={icon} {...args}>
+      Watch
+    </Button>
+  )
+}
+
+export const caretButton = ({...args}: ButtonProps) => {
+  return (
+    <Button trailingIcon={TriangleDownIcon} {...args}>
+      Dropdown
+    </Button>
+  )
+}
+
+export const blockButton = ({...args}: ButtonProps) => {
+  return (
+    <Button {...args} sx={{width: '100%'}}>
+      Block
+    </Button>
+  )
+}
+
+export const disabledButton = ({...args}: ButtonProps) => {
+  return (
+    <>
+      <Box mb={2}>
+        <Button disabled {...args}>
+          Disabled
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button disabled variant="danger" {...args}>
+          Disabled
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button disabled variant="invisible" {...args}>
+          Disabled
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button disabled variant="primary" {...args}>
+          Disabled
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button disabled variant="outline" {...args}>
+          Disabled
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button disabled icon={() => <XIcon />} {...args}></Button>
+      </Box>
+    </>
+  )
+}