@primer/components 30.3.0-rc.2010c7d4 → 31.0.0-rc.15aa0a10

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

@@ -472,13 +472,21 @@ exports[`ButtonInvisible renders correct disabled styles 1`] = `
 }
 
 .c0:disabled {
-  color: #57606a;
+  color: #8c959f;
 }
 
 .c0:focus {
   box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
 }
 
+.c0:hover {
+  background-color: #f3f4f6;
+}
+
+.c0:active {
+  background-color: hsla(220,14%,94%,1);
+}
+
 <button
   className="c0"
   disabled={true}

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

@@ -75,7 +75,7 @@ exports[`ConfirmationDialog renders consistently 1`] = `
 
 <div
   className="c0"
-  color="text.primary"
+  color="fg.default"
   data-portal-root={true}
   fontFamily="normal"
 >

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

@@ -79,7 +79,7 @@ exports[`SelectPanel renders consistently 1`] = `
 
 <div
   className="c0"
-  color="text.primary"
+  color="fg.default"
   data-portal-root={true}
   fontFamily="normal"
 >

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

@@ -19,11 +19,8 @@ exports[`StateLabel renders children 1`] = `
   color: #ffffff;
   text-align: center;
   border-radius: 100px;
-  border-width: 1px;
-  border-style: solid;
   background-color: #2da44e;
   color: #ffffff;
-  border-color: rgba(0,0,0,0);
   padding-left: 12px;
   padding-right: 12px;
   padding-top: 8px;
@@ -78,11 +75,8 @@ exports[`StateLabel renders consistently 1`] = `
   color: #ffffff;
   text-align: center;
   border-radius: 100px;
-  border-width: 1px;
-  border-style: solid;
   background-color: #2da44e;
   color: #ffffff;
-  border-color: rgba(0,0,0,0);
   padding-left: 12px;
   padding-right: 12px;
   padding-top: 8px;
@@ -137,11 +131,8 @@ exports[`StateLabel respects the status prop 1`] = `
   color: #ffffff;
   text-align: center;
   border-radius: 100px;
-  border-width: 1px;
-  border-style: solid;
   background-color: #2da44e;
   color: #ffffff;
-  border-color: rgba(0,0,0,0);
   padding-left: 12px;
   padding-right: 12px;
   padding-top: 8px;
@@ -195,11 +186,8 @@ exports[`StateLabel respects the status prop 2`] = `
   color: #ffffff;
   text-align: center;
   border-radius: 100px;
-  border-width: 1px;
-  border-style: solid;
   background-color: #cf222e;
   color: #ffffff;
-  border-color: rgba(0,0,0,0);
   padding-left: 12px;
   padding-right: 12px;
   padding-top: 8px;
@@ -253,11 +241,8 @@ exports[`StateLabel respects the status prop 3`] = `
   color: #ffffff;
   text-align: center;
   border-radius: 100px;
-  border-width: 1px;
-  border-style: solid;
   background-color: #8250df;
   color: #ffffff;
-  border-color: rgba(0,0,0,0);
   padding-left: 12px;
   padding-right: 12px;
   padding-top: 8px;
@@ -311,11 +296,8 @@ exports[`StateLabel respects the variant prop 1`] = `
   color: #ffffff;
   text-align: center;
   border-radius: 100px;
-  border-width: 1px;
-  border-style: solid;
   background-color: #2da44e;
   color: #ffffff;
-  border-color: rgba(0,0,0,0);
   padding-left: 8px;
   padding-right: 8px;
   padding-top: 4px;
@@ -369,11 +351,8 @@ exports[`StateLabel respects the variant prop 2`] = `
   color: #ffffff;
   text-align: center;
   border-radius: 100px;
-  border-width: 1px;
-  border-style: solid;
   background-color: #2da44e;
   color: #ffffff;
-  border-color: rgba(0,0,0,0);
   padding-left: 12px;
   padding-right: 12px;
   padding-top: 8px;

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

@@ -232,11 +232,11 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 
 .c5:hover,
 .c5:focus {
-  background-color: rgba(27,31,36,0.1);
+  background-color: rgba(175,184,193,0.2);
 }
 
 .c5:active {
-  background-color: rgba(27,31,36,0.15);
+  background-color: rgba(234,238,242,0.5);
 }
 
 .c4 {
@@ -829,11 +829,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 
 .c5:hover,
 .c5:focus {
-  background-color: rgba(27,31,36,0.1);
+  background-color: rgba(175,184,193,0.2);
 }
 
 .c5:active {
-  background-color: rgba(27,31,36,0.15);
+  background-color: rgba(234,238,242,0.5);
 }
 
 .c4 {
@@ -1426,11 +1426,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 
 .c5:hover,
 .c5:focus {
-  background-color: rgba(27,31,36,0.1);
+  background-color: rgba(175,184,193,0.2);
 }
 
 .c5:active {
-  background-color: rgba(27,31,36,0.15);
+  background-color: rgba(234,238,242,0.5);
 }
 
 .c4 {
@@ -2023,11 +2023,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 
 .c5:hover,
 .c5:focus {
-  background-color: rgba(27,31,36,0.1);
+  background-color: rgba(175,184,193,0.2);
 }
 
 .c5:active {
-  background-color: rgba(27,31,36,0.15);
+  background-color: rgba(234,238,242,0.5);
 }
 
 .c4 {
@@ -2620,11 +2620,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 
 .c5:hover,
 .c5:focus {
-  background-color: rgba(27,31,36,0.1);
+  background-color: rgba(175,184,193,0.2);
 }
 
 .c5:active {
-  background-color: rgba(27,31,36,0.15);
+  background-color: rgba(234,238,242,0.5);
 }
 
 .c4 {
@@ -3218,11 +3218,11 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 
 .c5:hover,
 .c5:focus {
-  background-color: rgba(27,31,36,0.1);
+  background-color: rgba(175,184,193,0.2);
 }
 
 .c5:active {
-  background-color: rgba(27,31,36,0.15);
+  background-color: rgba(234,238,242,0.5);
 }
 
 .c4 {
@@ -4129,11 +4129,11 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 
 .c5:hover,
 .c5:focus {
-  background-color: rgba(27,31,36,0.1);
+  background-color: rgba(175,184,193,0.2);
 }
 
 .c5:active {
-  background-color: rgba(27,31,36,0.15);
+  background-color: rgba(234,238,242,0.5);
 }
 
 .c4 {
@@ -4770,11 +4770,11 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
 
 .c5:hover,
 .c5:focus {
-  background-color: rgba(27,31,36,0.1);
+  background-color: rgba(175,184,193,0.2);
 }
 
 .c5:active {
-  background-color: rgba(27,31,36,0.15);
+  background-color: rgba(234,238,242,0.5);
 }
 
 .c4 {

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

@@ -52,11 +52,11 @@ exports[`Token components AvatarToken renders all sizes 1`] = `
 
 .c5:hover,
 .c5:focus {
-  background-color: rgba(27,31,36,0.1);
+  background-color: rgba(175,184,193,0.2);
 }
 
 .c5:active {
-  background-color: rgba(27,31,36,0.15);
+  background-color: rgba(234,238,242,0.5);
 }
 
 .c4 {
@@ -260,11 +260,11 @@ exports[`Token components AvatarToken renders all sizes 2`] = `
 
 .c5:hover,
 .c5:focus {
-  background-color: rgba(27,31,36,0.1);
+  background-color: rgba(175,184,193,0.2);
 }
 
 .c5:active {
-  background-color: rgba(27,31,36,0.15);
+  background-color: rgba(234,238,242,0.5);
 }
 
 .c4 {
@@ -468,11 +468,11 @@ exports[`Token components AvatarToken renders all sizes 3`] = `
 
 .c5:hover,
 .c5:focus {
-  background-color: rgba(27,31,36,0.1);
+  background-color: rgba(175,184,193,0.2);
 }
 
 .c5:active {
-  background-color: rgba(27,31,36,0.15);
+  background-color: rgba(234,238,242,0.5);
 }
 
 .c4 {
@@ -676,11 +676,11 @@ exports[`Token components AvatarToken renders all sizes 4`] = `
 
 .c5:hover,
 .c5:focus {
-  background-color: rgba(27,31,36,0.1);
+  background-color: rgba(175,184,193,0.2);
 }
 
 .c5:active {
-  background-color: rgba(27,31,36,0.15);
+  background-color: rgba(234,238,242,0.5);
 }
 
 .c4 {
@@ -1096,11 +1096,11 @@ exports[`Token components AvatarToken renders with a remove button 1`] = `
 
 .c5:hover,
 .c5:focus {
-  background-color: rgba(27,31,36,0.1);
+  background-color: rgba(175,184,193,0.2);
 }
 
 .c5:active {
-  background-color: rgba(27,31,36,0.15);
+  background-color: rgba(234,238,242,0.5);
 }
 
 .c4 {
@@ -1338,11 +1338,11 @@ exports[`Token components IssueLabelToken renders all sizes 1`] = `
 
 .c2:hover,
 .c2:focus {
-  background-color: rgba(27,31,36,0.1);
+  background-color: rgba(175,184,193,0.2);
 }
 
 .c2:active {
-  background-color: rgba(27,31,36,0.15);
+  background-color: rgba(234,238,242,0.5);
 }
 
 .c1 {
@@ -1514,11 +1514,11 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = `
 
 .c2:hover,
 .c2:focus {
-  background-color: rgba(27,31,36,0.1);
+  background-color: rgba(175,184,193,0.2);
 }
 
 .c2:active {
-  background-color: rgba(27,31,36,0.15);
+  background-color: rgba(234,238,242,0.5);
 }
 
 .c1 {
@@ -1690,11 +1690,11 @@ exports[`Token components IssueLabelToken renders all sizes 3`] = `
 
 .c2:hover,
 .c2:focus {
-  background-color: rgba(27,31,36,0.1);
+  background-color: rgba(175,184,193,0.2);
 }
 
 .c2:active {
-  background-color: rgba(27,31,36,0.15);
+  background-color: rgba(234,238,242,0.5);
 }
 
 .c1 {
@@ -1866,11 +1866,11 @@ exports[`Token components IssueLabelToken renders all sizes 4`] = `
 
 .c2:hover,
 .c2:focus {
-  background-color: rgba(27,31,36,0.1);
+  background-color: rgba(175,184,193,0.2);
 }
 
 .c2:active {
-  background-color: rgba(27,31,36,0.15);
+  background-color: rgba(234,238,242,0.5);
 }
 
 .c1 {
@@ -2126,11 +2126,11 @@ exports[`Token components IssueLabelToken renders custom fill color 1`] = `
 
 .c2:hover,
 .c2:focus {
-  background-color: rgba(27,31,36,0.1);
+  background-color: rgba(175,184,193,0.2);
 }
 
 .c2:active {
-  background-color: rgba(27,31,36,0.15);
+  background-color: rgba(234,238,242,0.5);
 }
 
 .c1 {
@@ -2302,11 +2302,11 @@ exports[`Token components IssueLabelToken renders default fill color 1`] = `
 
 .c2:hover,
 .c2:focus {
-  background-color: rgba(27,31,36,0.1);
+  background-color: rgba(175,184,193,0.2);
 }
 
 .c2:active {
-  background-color: rgba(27,31,36,0.15);
+  background-color: rgba(234,238,242,0.5);
 }
 
 .c1 {
@@ -2592,11 +2592,11 @@ exports[`Token components IssueLabelToken renders with a remove button 1`] = `
 
 .c2:hover,
 .c2:focus {
-  background-color: rgba(27,31,36,0.1);
+  background-color: rgba(175,184,193,0.2);
 }
 
 .c2:active {
-  background-color: rgba(27,31,36,0.15);
+  background-color: rgba(234,238,242,0.5);
 }
 
 .c1 {
@@ -2724,11 +2724,11 @@ exports[`Token components Token renders all sizes 1`] = `
 
 .c2:hover,
 .c2:focus {
-  background-color: rgba(27,31,36,0.1);
+  background-color: rgba(175,184,193,0.2);
 }
 
 .c2:active {
-  background-color: rgba(27,31,36,0.15);
+  background-color: rgba(234,238,242,0.5);
 }
 
 .c1 {
@@ -2890,11 +2890,11 @@ exports[`Token components Token renders all sizes 2`] = `
 
 .c2:hover,
 .c2:focus {
-  background-color: rgba(27,31,36,0.1);
+  background-color: rgba(175,184,193,0.2);
 }
 
 .c2:active {
-  background-color: rgba(27,31,36,0.15);
+  background-color: rgba(234,238,242,0.5);
 }
 
 .c1 {
@@ -3056,11 +3056,11 @@ exports[`Token components Token renders all sizes 3`] = `
 
 .c2:hover,
 .c2:focus {
-  background-color: rgba(27,31,36,0.1);
+  background-color: rgba(175,184,193,0.2);
 }
 
 .c2:active {
-  background-color: rgba(27,31,36,0.15);
+  background-color: rgba(234,238,242,0.5);
 }
 
 .c1 {
@@ -3222,11 +3222,11 @@ exports[`Token components Token renders all sizes 4`] = `
 
 .c2:hover,
 .c2:focus {
-  background-color: rgba(27,31,36,0.1);
+  background-color: rgba(175,184,193,0.2);
 }
 
 .c2:active {
-  background-color: rgba(27,31,36,0.15);
+  background-color: rgba(234,238,242,0.5);
 }
 
 .c1 {
@@ -3662,11 +3662,11 @@ exports[`Token components Token renders with a remove button 1`] = `
 
 .c2:hover,
 .c2:focus {
-  background-color: rgba(27,31,36,0.1);
+  background-color: rgba(175,184,193,0.2);
 }
 
 .c2:active {
-  background-color: rgba(27,31,36,0.15);
+  background-color: rgba(234,238,242,0.5);
 }
 
 .c1 {

package/src/__tests__/behaviors/scrollIntoViewingArea.test.ts

@@ -0,0 +1,195 @@
+import {scrollIntoViewingArea} from '../../behaviors/scrollIntoViewingArea'
+
+function scrollPositionFormula(
+  positionData: {viewingAreaEdgePosition: number; childEdgePosition: number; margin: number},
+  isChildAboveViewingArea: boolean
+) {
+  const {viewingAreaEdgePosition, childEdgePosition, margin} = positionData
+  const marginOffset = margin * (isChildAboveViewingArea ? -1 : 1)
+
+  return childEdgePosition - viewingAreaEdgePosition + marginOffset
+}
+
+// The DOMRect constructor isn't available in JSDOM, so we improvise here.
+function makeDOMRect(x: number, y: number, width: number, height: number): DOMRect {
+  return {
+    x,
+    y,
+    width,
+    height,
+    top: y,
+    left: x,
+    right: x + width,
+    bottom: y + height,
+    toJSON() {
+      return this
+    }
+  }
+}
+
+// Since Jest/JSDOM doesn't support layout, we can stub out getBoundingClientRect if we know the
+// correct dimensions. JSDOM will handle the rest of the DOM API used by getAnchoredPosition.
+function createVirtualDOM(viewingAreaRect: DOMRect, childRect: DOMRect) {
+  const viewingArea = document.createElement('div')
+  viewingArea.style.overflow = 'auto'
+  viewingArea.id = 'viewingArea'
+  // eslint-disable-next-line github/unescaped-html-literal
+  viewingArea.innerHTML = '<div id="child"></div>'
+  const child = viewingArea.querySelector('#child')!
+  child.getBoundingClientRect = () => childRect
+  viewingArea.getBoundingClientRect = () => viewingAreaRect
+  return {viewingArea, child}
+}
+
+describe('scrollIntoViewingArea', () => {
+  it('scrolls the expected amount when only the viewingArea element and child element are passed to the function', () => {
+    const scrollToMock = jest.fn()
+    Object.defineProperty(window.Element.prototype, 'scrollTo', {
+      writable: true,
+      value: scrollToMock
+    })
+    const childHeight = 50
+    const viewAreaHeight = 100
+    const childStart = viewAreaHeight + 10
+    const expectedScrollPosition = scrollPositionFormula(
+      {viewingAreaEdgePosition: viewAreaHeight, childEdgePosition: childStart + childHeight, margin: 8},
+      false
+    )
+
+    const viewingAreaRect = makeDOMRect(0, 0, 100, viewAreaHeight)
+    const childRect = makeDOMRect(0, childStart, 100, childHeight)
+    const {viewingArea, child} = createVirtualDOM(viewingAreaRect, childRect)
+
+    viewingArea.getBoundingClientRect = () => viewingAreaRect
+    viewingArea.scrollTop = 0
+    child.getBoundingClientRect = () => childRect
+
+    scrollIntoViewingArea(child as HTMLDivElement, viewingArea)
+    expect(scrollToMock).toHaveBeenCalledWith({
+      behavior: 'smooth',
+      top: expectedScrollPosition
+    })
+  })
+
+  describe('y-axis', () => {
+    it('scrolls the child into the viewing area when it is AFTER the overflow cutoff point', () => {
+      const scrollToMock = jest.fn()
+      Object.defineProperty(window.Element.prototype, 'scrollTo', {
+        writable: true,
+        value: scrollToMock
+      })
+      const childHeight = 50
+      const viewAreaHeight = 100
+      const childStart = viewAreaHeight + 10
+      const scrollMargin = 10
+      const expectedScrollPosition = scrollPositionFormula(
+        {viewingAreaEdgePosition: viewAreaHeight, childEdgePosition: childStart + childHeight, margin: scrollMargin},
+        false
+      )
+
+      const viewingAreaRect = makeDOMRect(0, 0, 100, viewAreaHeight)
+      const childRect = makeDOMRect(0, childStart, 100, childHeight)
+      const {viewingArea, child} = createVirtualDOM(viewingAreaRect, childRect)
+
+      viewingArea.getBoundingClientRect = () => viewingAreaRect
+      viewingArea.scrollTop = 0
+      child.getBoundingClientRect = () => childRect
+
+      scrollIntoViewingArea(child as HTMLDivElement, viewingArea, 'vertical', scrollMargin, scrollMargin, 'auto')
+      expect(scrollToMock).toHaveBeenCalledWith({
+        behavior: 'auto',
+        top: expectedScrollPosition
+      })
+    })
+
+    it('scrolls the child into the viewing area when it is BEFORE the overflow cutoff point', () => {
+      const scrollToMock = jest.fn()
+      Object.defineProperty(window.Element.prototype, 'scrollTo', {
+        writable: true,
+        value: scrollToMock
+      })
+      const childHeight = 50
+      const childStart = childHeight * -1 - 10
+      const scrollMargin = 10
+      const expectedScrollPosition = scrollPositionFormula(
+        {viewingAreaEdgePosition: 0, childEdgePosition: childStart, margin: scrollMargin},
+        true
+      )
+
+      const viewingAreaRect = makeDOMRect(0, 0, 100, 100)
+      const childRect = makeDOMRect(0, childStart, 100, childHeight)
+      const {viewingArea, child} = createVirtualDOM(viewingAreaRect, childRect)
+
+      viewingArea.getBoundingClientRect = () => viewingAreaRect
+      viewingArea.scrollTop = 0
+      child.getBoundingClientRect = () => childRect
+
+      scrollIntoViewingArea(child as HTMLDivElement, viewingArea, 'vertical', scrollMargin, scrollMargin, 'auto')
+      expect(scrollToMock).toHaveBeenCalledWith({
+        behavior: 'auto',
+        top: expectedScrollPosition
+      })
+    })
+  })
+
+  describe('x-axis', () => {
+    it('scrolls the child into the viewing area when it is AFTER the overflow cutoff point', () => {
+      const scrollToMock = jest.fn()
+      Object.defineProperty(window.Element.prototype, 'scrollTo', {
+        writable: true,
+        value: scrollToMock
+      })
+      const childWidth = 50
+      const viewAreaWidth = 100
+      const childStart = viewAreaWidth + 10
+      const scrollMargin = 10
+      const expectedScrollPosition = scrollPositionFormula(
+        {viewingAreaEdgePosition: viewAreaWidth, childEdgePosition: childStart + childWidth, margin: scrollMargin},
+        false
+      )
+
+      const viewingAreaRect = makeDOMRect(0, 0, 100, viewAreaWidth)
+      const childRect = makeDOMRect(childStart, 0, childWidth, 100)
+      const {viewingArea, child} = createVirtualDOM(viewingAreaRect, childRect)
+
+      viewingArea.getBoundingClientRect = () => viewingAreaRect
+      viewingArea.scrollLeft = 0
+      child.getBoundingClientRect = () => childRect
+
+      scrollIntoViewingArea(child as HTMLDivElement, viewingArea, 'horizontal', scrollMargin, scrollMargin, 'auto')
+      expect(scrollToMock).toHaveBeenCalledWith({
+        behavior: 'auto',
+        left: expectedScrollPosition
+      })
+    })
+
+    it('scrolls the child into the viewing area when it is BEFORE the overflow cutoff point', () => {
+      const scrollToMock = jest.fn()
+      Object.defineProperty(window.Element.prototype, 'scrollTo', {
+        writable: true,
+        value: scrollToMock
+      })
+      const childWidth = 50
+      const childStart = childWidth * -1 - 10
+      const scrollMargin = 10
+      const expectedScrollPosition = scrollPositionFormula(
+        {viewingAreaEdgePosition: 0, childEdgePosition: childStart, margin: scrollMargin},
+        true
+      )
+
+      const viewingAreaRect = makeDOMRect(0, 0, 100, 100)
+      const childRect = makeDOMRect(childStart, 0, childWidth, 100)
+      const {viewingArea, child} = createVirtualDOM(viewingAreaRect, childRect)
+
+      viewingArea.getBoundingClientRect = () => viewingAreaRect
+      viewingArea.scrollTop = 0
+      child.getBoundingClientRect = () => childRect
+
+      scrollIntoViewingArea(child as HTMLDivElement, viewingArea, 'horizontal', scrollMargin, scrollMargin, 'auto')
+      expect(scrollToMock).toHaveBeenCalledWith({
+        behavior: 'auto',
+        left: expectedScrollPosition
+      })
+    })
+  })
+})

package/src/behaviors/scrollIntoViewingArea.ts

@@ -0,0 +1,27 @@
+export const scrollIntoViewingArea = (
+  child: HTMLElement,
+  viewingArea: HTMLElement,
+  direction: 'horizontal' | 'vertical' = 'vertical',
+  startMargin = 8,
+  endMargin = 0,
+  behavior: ScrollBehavior = 'smooth'
+) => {
+  const startSide = direction === 'vertical' ? 'top' : 'left'
+  const endSide = direction === 'vertical' ? 'bottom' : 'right'
+  const scrollSide = direction === 'vertical' ? 'scrollTop' : 'scrollLeft'
+  const {[startSide]: childStart, [endSide]: childEnd} = child.getBoundingClientRect()
+  const {[startSide]: viewingAreaStart, [endSide]: viewingAreaEnd} = viewingArea.getBoundingClientRect()
+
+  const isChildStartAboveViewingArea = childStart < viewingAreaStart + endMargin
+  const isChildBottomBelowViewingArea = childEnd > viewingAreaEnd - startMargin
+
+  if (isChildStartAboveViewingArea) {
+    const scrollHeightToChildStart = childStart - viewingAreaStart + viewingArea[scrollSide]
+    viewingArea.scrollTo({behavior, [startSide]: scrollHeightToChildStart - endMargin})
+  } else if (isChildBottomBelowViewingArea) {
+    const scrollHeightToChildBottom = childEnd - viewingAreaEnd + viewingArea[scrollSide]
+    viewingArea.scrollTo({behavior, [startSide]: scrollHeightToChildBottom + startMargin})
+  }
+
+  // either completely in view or outside viewing area on both ends, don't scroll
+}