@primer/components 31.2.0-rc.b718ff50 → 31.2.0-rc.decfca99

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/__tests__/utils/__snapshots__/createSlots.test.tsx.snap

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ComponentWithSlots renders all slots 1`] = `
+<div>
+  <div>
+    first
+    <span>
+      free form
+       
+      second
+       
+    </span>
+  </div>
+</div>
+`;
+
+exports[`ComponentWithSlots renders with context passed to children 1`] = `
+<div>
+  <div>
+    <span>
+      free form
+       
+       
+      hi
+       
+      third
+    </span>
+  </div>
+</div>
+`;
+
+exports[`ComponentWithSlots renders with just one slot 1`] = `
+<div>
+  <div>
+    first
+    <span>
+      free form
+       
+       
+    </span>
+  </div>
+</div>
+`;
+
+exports[`ComponentWithSlots renders without any slots 1`] = `
+<div>
+  <div>
+    <span>
+      free form
+       
+       
+    </span>
+  </div>
+</div>
+`;

package/src/__tests__/utils/createSlots.test.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+import 'babel-polyfill'
+import {render, waitFor} from '@testing-library/react'
+import createSlots from '../../utils/create-slots'
+
+// setup a component with slots
+const {Slots, Slot} = createSlots(['One', 'Two', 'Three'])
+type ContextTypes = {salutation?: string}
+
+const ComponentWithSlots: React.FC<ContextTypes> = ({salutation, children}) => {
+  return (
+    <Slots context={{salutation}}>
+      {slots => (
+        <div>
+          {slots.One}
+          <span>
+            {children} {slots.Two} {slots.Three}
+          </span>
+        </div>
+      )}
+    </Slots>
+  )
+}
+const SlotItem1: React.FC = ({children}) => <Slot name="One">{children}</Slot>
+const SlotItem2: React.FC = ({children}) => <Slot name="Two">{children}</Slot>
+const SlotItem3: React.FC = ({children}) => (
+  <Slot name="Three">
+    {(context: ContextTypes) => (
+      <>
+        {context.salutation} {children}
+      </>
+    )}
+  </Slot>
+)
+
+describe('ComponentWithSlots', () => {
+  it('renders all slots', async () => {
+    const component = render(
+      <ComponentWithSlots>
+        <SlotItem1>first</SlotItem1>
+        <SlotItem2>second</SlotItem2>
+        free form
+      </ComponentWithSlots>
+    )
+
+    await waitFor(() => component.getByText('first'))
+    expect(component.container).toMatchSnapshot()
+  })
+
+  it('renders without any slots', async () => {
+    const component = render(<ComponentWithSlots>free form</ComponentWithSlots>)
+    expect(component.container).toMatchSnapshot()
+  })
+
+  it('renders with just one slot', async () => {
+    const component = render(
+      <ComponentWithSlots>
+        <SlotItem1>first</SlotItem1>
+        free form
+      </ComponentWithSlots>
+    )
+    expect(component.container).toMatchSnapshot()
+  })
+
+  it('renders with context passed to children', async () => {
+    const component = render(
+      <ComponentWithSlots salutation="hi">
+        <SlotItem3>third</SlotItem3>
+        free form
+      </ComponentWithSlots>
+    )
+    expect(component.container).toMatchSnapshot()
+  })
+})

package/src/drafts.ts

@@ -0,0 +1,9 @@
+/** This is the place where we keep components that are not part of the public
+ *  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/drafts
+ */
+
+// Components
+export * from './ActionList2'