@primer/components 31.0.0-rc.f601fc1f → 31.0.2-rc.1e80de40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "31.0.0-rc.f601fc1f",
+  "version": "31.0.2-rc.1e80de40",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -76,11 +76,11 @@
     "@rollup/plugin-commonjs": "19.0.2",
     "@rollup/plugin-node-resolve": "13.0.5",
     "@size-limit/preset-big-lib": "5.0.2",
-    "@storybook/addon-a11y": "6.3.4",
-    "@storybook/addon-actions": "^6.2.9",
-    "@storybook/addon-essentials": "6.2.9",
-    "@storybook/addon-links": "^6.2.9",
-    "@storybook/react": "6.3.8",
+    "@storybook/addon-a11y": "6.3.12",
+    "@storybook/addon-actions": "^6.3.12",
+    "@storybook/addon-essentials": "6.3.12",
+    "@storybook/addon-links": "^6.3.12",
+    "@storybook/react": "6.3.12",
     "@testing-library/dom": "7.31.2",
     "@testing-library/react": "11.2.7",
     "@testing-library/react-hooks": "7.0.2",

package/src/ActionList/Item.tsx

@@ -153,9 +153,9 @@ export interface ItemProps extends SxProp {
 const getItemVariant = (variant = 'default', disabled?: boolean) => {
   if (disabled) {
     return {
-      color: get('colors.fg.muted'),
-      iconColor: get('colors.fg.muted'),
-      annotationColor: get('colors.fg.muted'),
+      color: get('colors.primer.fg.disabled'),
+      iconColor: get('colors.primer.fg.disabled'),
+      annotationColor: get('colors.primer.fg.disabled'),
       hoverCursor: 'default'
     }
   }

package/src/Button/Button.tsx

@@ -27,7 +27,7 @@ const Button = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
   }
 
   &:disabled {
-    color: ${get('colors.fg.muted')};
+    color: ${get('colors.primer.fg.disabled')};
     background-color: ${get('colors.btn.bg')};
     border-color: ${get('colors.btn.border')};
   }

package/src/Button/ButtonTableList.tsx

@@ -33,7 +33,7 @@ const ButtonTableList = styled.summary<StyledButtonTableListProps>`
   &:disabled {
     &,
     &:hover {
-      color: rgba(${get('colors.fg.muted')}, 0.5);
+      color: ${get('colors.primer.fg.disabled')};
       cursor: default;
     }
   }

package/src/Pagination/Pagination.tsx

@@ -55,7 +55,7 @@ const Page = styled.a`
 
   &[aria-disabled],
   &[aria-disabled]:hover {
-    color: ${get('colors.fg.muted')}; // check
+    color: ${get('colors.primer.fg.disabled')}; // check
     cursor: default;
     border-color: transparent;
   }

package/src/TextInputWithTokens.tsx

@@ -1,4 +1,4 @@
-import React, {FocusEventHandler, KeyboardEventHandler, useRef, useState} from 'react'
+import React, {FocusEventHandler, KeyboardEventHandler, RefObject, useRef, useState} from 'react'
 import {omit} from '@styled-system/props'
 import {FocusKeys} from './behaviors/focusZone'
 import {useCombinedRefs} from './hooks/useCombinedRefs'
@@ -184,16 +184,7 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
       minWidth={minWidthProp}
       maxWidth={maxWidthProp}
       variant={variantProp}
-      ref={containerRef}
       sx={{
-        alignItems: 'center',
-        flexWrap: preventTokenWrapping ? 'nowrap' : 'wrap',
-        gap: '0.25rem',
-
-        '> *': {
-          flexShrink: 0
-        },
-
         ...(block
           ? {
               display: 'flex',
@@ -218,40 +209,58 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
       }}
     >
       <Box
+        ref={containerRef as RefObject<HTMLDivElement>}
+        display="flex"
         sx={{
-          order: 1,
-          flexGrow: 1
+          alignItems: 'center',
+          flexWrap: preventTokenWrapping ? 'nowrap' : 'wrap',
+          marginLeft: '-0.25rem',
+          marginBottom: '-0.25rem',
+          flexGrow: 1,
+
+          '> *': {
+            flexShrink: 0,
+            marginLeft: '0.25rem',
+            marginBottom: '0.25rem'
+          }
         }}
       >
-        {IconComponent && <IconComponent className="TextInput-icon" />}
-        <UnstyledTextInput
-          ref={combinedInputRef}
-          disabled={disabled}
-          onFocus={handleInputFocus}
-          onKeyDown={handleInputKeyDown}
-          type="text"
-          sx={{height: '100%'}}
-          {...inputPropsRest}
-        />
+        <Box
+          sx={{
+            order: 1,
+            flexGrow: 1
+          }}
+        >
+          {IconComponent && <IconComponent className="TextInput-icon" />}
+          <UnstyledTextInput
+            ref={combinedInputRef}
+            disabled={disabled}
+            onFocus={handleInputFocus}
+            onKeyDown={handleInputKeyDown}
+            type="text"
+            sx={{height: '100%'}}
+            {...inputPropsRest}
+          />
+        </Box>
+        {tokens.length && TokenComponent
+          ? tokens.map(({id, ...tokenRest}, i) => (
+              <TokenComponent
+                key={id}
+                onFocus={handleTokenFocus(i)}
+                onBlur={handleTokenBlur}
+                onKeyUp={handleTokenKeyUp}
+                isSelected={selectedTokenIndex === i}
+                onRemove={() => {
+                  handleTokenRemove(id)
+                }}
+                hideRemoveButton={hideTokenRemoveButtons}
+                size={size}
+                tabIndex={0}
+                {...tokenRest}
+              />
+            ))
+          : null}
       </Box>
-      {tokens.length && TokenComponent
-        ? tokens.map(({id, ...tokenRest}, i) => (
-            <TokenComponent
-              key={id}
-              onFocus={handleTokenFocus(i)}
-              onBlur={handleTokenBlur}
-              onKeyUp={handleTokenKeyUp}
-              isSelected={selectedTokenIndex === i}
-              onRemove={() => {
-                handleTokenRemove(id)
-              }}
-              hideRemoveButton={hideTokenRemoveButtons}
-              size={size}
-              tabIndex={0}
-              {...tokenRest}
-            />
-          ))
-        : null}
     </TextInputWrapper>
   )
 }

package/src/Token/Token.tsx

@@ -44,9 +44,23 @@ const DefaultTokenStyled = styled(TokenBase)<TokenProps & {isTokenInteractive: b
   }}
 `
 
-const LeadingVisualContainer = styled('span')`
+const LeadingVisualContainer = styled('span')<Pick<TokenBaseProps, 'size'>>`
   flex-shrink: 0;
   line-height: 0;
+
+  ${props => {
+    switch (props.size) {
+      case 'large':
+      case 'extralarge':
+        return css`
+          margin-right: ${get('space.2')};
+        `
+      default:
+        return css`
+          margin-right: ${get('space.1')};
+        `
+    }
+  }}
 `
 
 const Token = forwardRef<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement, TokenProps & SxProp>(
@@ -76,7 +90,7 @@ const Token = forwardRef<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement
         ref={forwardedRef}
       >
         {LeadingVisual ? (
-          <LeadingVisualContainer>
+          <LeadingVisualContainer size={size}>
             <LeadingVisual />
           </LeadingVisualContainer>
         ) : null}

package/src/Token/TokenBase.tsx

@@ -48,7 +48,6 @@ const variants = variant<
     fontSize: number
     height: string
     lineHeight: string
-    gap: number
     paddingLeft: number
     paddingRight: number
     paddingTop: number
@@ -60,7 +59,6 @@ const variants = variant<
   variants: {
     small: {
       fontSize: 0,
-      gap: 1,
       height: tokenSizes.small,
       // without setting lineHeight to match height, the "x" appears vertically mis-aligned
       lineHeight: tokenSizes.small,
@@ -73,7 +71,6 @@ const variants = variant<
     },
     medium: {
       fontSize: 0,
-      gap: 1,
       height: tokenSizes.medium,
       lineHeight: tokenSizes.medium,
       paddingLeft: 2,
@@ -83,7 +80,6 @@ const variants = variant<
     },
     large: {
       fontSize: 0,
-      gap: 2,
       height: tokenSizes.large,
       lineHeight: tokenSizes.large,
       paddingLeft: 2,
@@ -93,7 +89,6 @@ const variants = variant<
     },
     extralarge: {
       fontSize: 1,
-      gap: 2,
       height: tokenSizes.extralarge,
       lineHeight: tokenSizes.extralarge,
       paddingLeft: 3,

package/src/Token/_RemoveTokenButton.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import {XIcon} from '@primer/octicons-react'
-import styled from 'styled-components'
+import styled, {css} from 'styled-components'
 import {variant} from 'styled-system'
 import {get} from '../constants'
 import sx, {SxProp} from '../sx'
@@ -50,11 +50,24 @@ const StyledTokenButton = styled.span<TokenButtonProps & SxProp>`
   text-decoration: none;
   padding: 0;
   transform: ${props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`};
-
   align-self: baseline;
   border: 0;
   border-radius: 999px;
 
+  ${props => {
+    switch (props.size) {
+      case 'large':
+      case 'extralarge':
+        return css`
+          margin-left: ${get('space.2')};
+        `
+      default:
+        return css`
+          margin-left: ${get('space.1')};
+        `
+    }
+  }}
+
   &:hover,
   &:focus {
     // TODO: choose a better functional color variable for this

package/src/_TextInputWrapper.tsx

@@ -79,7 +79,7 @@ const TextInputWrapper = styled.span<StyledWrapperProps>`
   ${props =>
     props.disabled &&
     css`
-      color: ${get('colors.fg.muted')};
+      color: ${get('colors.primer.fg.disabled')};
       background-color: ${get('colors.input.disabledBg')};
       border-color: ${get('colors.border.default')};
     `}

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

@@ -61,7 +61,7 @@ exports[`Pagination renders consistently 1`] = `
 
 .c2[aria-disabled],
 .c2[aria-disabled]:hover {
-  color: #57606a;
+  color: #8c959f;
   cursor: default;
   border-color: transparent;
 }

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

@@ -62,7 +62,7 @@ exports[`ActionMenu renders consistently 1`] = `
 }
 
 .c0:disabled {
-  color: #57606a;
+  color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }

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

@@ -68,7 +68,7 @@ exports[`AnchoredOverlay renders consistently 1`] = `
 }
 
 .c1:disabled {
-  color: #57606a;
+  color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }
@@ -163,7 +163,7 @@ Object {
 }
 
 .c1:disabled {
-  color: #57606a;
+  color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }
@@ -243,7 +243,7 @@ Object {
       <button
         aria-haspopup="true"
         aria-labelledby="react-aria-1"
-        class="ButtonBase-sc-181ps9o-0 Button-xjtz72-0 jPURef"
+        class="ButtonBase-sc-181ps9o-0 Button-xjtz72-0 iRqJHc"
         id="react-aria-1"
         tabindex="0"
       >

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

@@ -62,7 +62,7 @@ exports[`Button renders consistently 1`] = `
 }
 
 .c0:disabled {
-  color: #57606a;
+  color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }
@@ -134,7 +134,7 @@ exports[`Button respects the "disabled" prop 1`] = `
 }
 
 .c0:disabled {
-  color: #57606a;
+  color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }
@@ -819,7 +819,7 @@ exports[`ButtonTableList renders consistently 1`] = `
 
 .c0:disabled,
 .c0:disabled:hover {
-  color: rgba(#57606a,0.5);
+  color: #8c959f;
   cursor: default;
 }
 

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

@@ -68,7 +68,7 @@ exports[`ConfirmationDialog renders consistently 1`] = `
 }
 
 .c1:disabled {
-  color: #57606a;
+  color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }

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

@@ -84,7 +84,7 @@ exports[`Dropdown.Button renders consistently 1`] = `
 }
 
 .c0:disabled {
-  color: #57606a;
+  color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }

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

@@ -62,7 +62,7 @@ exports[`DropdownMenu renders consistently 1`] = `
 }
 
 .c0:disabled {
-  color: #57606a;
+  color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }

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

@@ -62,7 +62,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
 }
 
 .c1:disabled {
-  color: #57606a;
+  color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }

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

@@ -68,7 +68,7 @@ exports[`SelectPanel renders consistently 1`] = `
 }
 
 .c1:disabled {
-  color: #57606a;
+  color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }