From 4a6a9f7326d5bf1e476a040d7f2f4f61e4d5bd05 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Thu, 30 Mar 2023 13:27:02 -0400 Subject: [PATCH 01/20] Add option to exclude spacer from flat tree views (#3089) * adds option to exclude spacer from flat lists * Update generated/components.json * adds changeset * chagnes prop name to 'flat' --------- Co-authored-by: mperrotti --- .changeset/six-lemons-tap.md | 5 +++ generated/components.json | 5 +++ src/TreeView/TreeView.docs.json | 5 +++ src/TreeView/TreeView.features.stories.tsx | 40 ++++++++++++++++++++++ src/TreeView/TreeView.tsx | 20 +++++++++-- 5 files changed, 73 insertions(+), 2 deletions(-) create mode 100644 .changeset/six-lemons-tap.md diff --git a/.changeset/six-lemons-tap.md b/.changeset/six-lemons-tap.md new file mode 100644 index 00000000000..758cd5dbbd0 --- /dev/null +++ b/.changeset/six-lemons-tap.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +Adds the ability to exclose indentation for flat tree views. diff --git a/generated/components.json b/generated/components.json index a4ce8d3884f..4ad46a809a2 100644 --- a/generated/components.json +++ b/generated/components.json @@ -4654,6 +4654,11 @@ "name": "children", "type": "React.ReactNode", "required": true + }, + { + "name": "preventIndents", + "type": "boolean", + "description": "Prevents the tree from indenting items. This should only be used when the tree is used to display a flat list of items." } ], "subcomponents": [ diff --git a/src/TreeView/TreeView.docs.json b/src/TreeView/TreeView.docs.json index 17e2cbd5235..5ae7aa81bdd 100644 --- a/src/TreeView/TreeView.docs.json +++ b/src/TreeView/TreeView.docs.json @@ -16,6 +16,11 @@ "name": "children", "type": "React.ReactNode", "required": true + }, + { + "name": "preventIndents", + "type": "boolean", + "description": "Prevents the tree from indenting items. This should only be used when the tree is used to display a flat list of items." } ], "subcomponents": [ diff --git a/src/TreeView/TreeView.features.stories.tsx b/src/TreeView/TreeView.features.stories.tsx index 4f037bc508a..19ca6b8f362 100644 --- a/src/TreeView/TreeView.features.stories.tsx +++ b/src/TreeView/TreeView.features.stories.tsx @@ -791,4 +791,44 @@ ContainIntrinsicSize.parameters = { chromatic: {disableSnapshot: true}, } +export const WithoutIndentation: Story = () => ( + +) + export default meta diff --git a/src/TreeView/TreeView.tsx b/src/TreeView/TreeView.tsx index d70195cfa90..b2644deff60 100644 --- a/src/TreeView/TreeView.tsx +++ b/src/TreeView/TreeView.tsx @@ -62,6 +62,7 @@ export type TreeViewProps = { 'aria-label'?: React.AriaAttributes['aria-label'] 'aria-labelledby'?: React.AriaAttributes['aria-labelledby'] children: React.ReactNode + flat?: boolean } const UlBox = styled.ul` @@ -134,6 +135,10 @@ const UlBox = styled.ul` } } + &[data-omit-spacer='true'] .PRIVATE_TreeView-item-container { + grid-template-columns: 0 0 1fr; + } + .PRIVATE_TreeView-item[aria-current='true'] > .PRIVATE_TreeView-item-container { background-color: ${get('colors.actionListItem.default.selectedBg')}; @@ -244,7 +249,12 @@ const UlBox = styled.ul` ${sx} ` -const Root: React.FC = ({'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, children}) => { +const Root: React.FC = ({ + 'aria-label': ariaLabel, + 'aria-labelledby': ariaLabelledby, + children, + flat, +}) => { const containerRef = React.useRef(null) const [ariaLiveMessage, setAriaLiveMessage] = React.useState('') const announceUpdate = React.useCallback((message: string) => { @@ -278,7 +288,13 @@ const Root: React.FC = ({'aria-label': ariaLabel, 'aria-labelledb {ariaLiveMessage} - + {children} From 681e2271ecc90bde2920887c50c0d44b121005f1 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Thu, 30 Mar 2023 13:51:57 -0400 Subject: [PATCH 02/20] Add a component to render placeholder text in empty cells (#3071) * adds a component to render placeholder text in empty cells * adds changeset * Update src/DataTable/Table.tsx Co-authored-by: Josh Black * Update src/DataTable/Table.tsx Co-authored-by: Josh Black * Update generated/components.json * fixes linting error --------- Co-authored-by: Josh Black Co-authored-by: mperrotti --- .changeset/olive-beds-train.md | 5 ++ generated/components.json | 2 +- src/DataTable/DataTable.features.stories.tsx | 67 ++++++++++++++++++++ src/DataTable/Table.tsx | 8 +++ src/DataTable/index.ts | 2 + 5 files changed, 83 insertions(+), 1 deletion(-) create mode 100644 .changeset/olive-beds-train.md diff --git a/.changeset/olive-beds-train.md b/.changeset/olive-beds-train.md new file mode 100644 index 00000000000..c1e9d4fc195 --- /dev/null +++ b/.changeset/olive-beds-train.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +Adds a helper component for rendering placeholder text to explain why a DataTable cell has no content. diff --git a/generated/components.json b/generated/components.json index 4ad46a809a2..794e773a400 100644 --- a/generated/components.json +++ b/generated/components.json @@ -5126,4 +5126,4 @@ "subcomponents": [] } } -} +} \ No newline at end of file diff --git a/src/DataTable/DataTable.features.stories.tsx b/src/DataTable/DataTable.features.stories.tsx index 6f8e64c4686..b03d27260aa 100644 --- a/src/DataTable/DataTable.features.stories.tsx +++ b/src/DataTable/DataTable.features.stories.tsx @@ -1132,6 +1132,73 @@ export const WithOverflow = () => ( ) +export const WithPlaceholderCells = () => ( + + + Repositories + + + A subtitle could appear here to give extra context to the data. + + { + return + }, + }, + { + header: 'Updated', + field: 'updatedAt', + renderCell: row => { + return + }, + }, + { + header: 'Dependabot', + field: 'securityFeatures.dependabot', + renderCell: row => { + return row.securityFeatures.dependabot.length > 0 ? ( + + {row.securityFeatures.dependabot.map(feature => { + return + })} + + ) : ( + Not configured + ) + }, + }, + { + header: 'Code scanning', + field: 'securityFeatures.codeScanning', + renderCell: row => { + return row.securityFeatures.codeScanning.length > 0 ? ( + + {row.securityFeatures.codeScanning.map(feature => { + return + })} + + ) : ( + Not configured + ) + }, + }, + ]} + /> + +) + export const WithRightAlignedColumns = () => { const rows = Array.from(data).sort((a, b) => { return b.updatedAt - a.updatedAt diff --git a/src/DataTable/Table.tsx b/src/DataTable/Table.tsx index ea51d16f77b..8bb1e4fbcb5 100644 --- a/src/DataTable/Table.tsx +++ b/src/DataTable/Table.tsx @@ -2,6 +2,7 @@ import {SortAscIcon, SortDescIcon} from '@primer/octicons-react' import React from 'react' import styled from 'styled-components' import Box from '../Box' +import Text from '../Text' import {get} from '../constants' import sx, {SxProp} from '../sx' import {SortDirection} from './sorting' @@ -342,6 +343,12 @@ function TableCell({align, children, scope, ...rest}: TableCellProps) { ) } +type TableCellPlaceholderProps = React.PropsWithChildren + +function TableCellPlaceholder({children}: TableCellPlaceholderProps) { + return {children} +} + // ---------------------------------------------------------------------------- // TableContainer // ---------------------------------------------------------------------------- @@ -559,4 +566,5 @@ export { TableHeader, TableSortHeader, TableCell, + TableCellPlaceholder, } diff --git a/src/DataTable/index.ts b/src/DataTable/index.ts index ffaf48290ec..b98a280cfb8 100644 --- a/src/DataTable/index.ts +++ b/src/DataTable/index.ts @@ -6,6 +6,7 @@ import { TableRow, TableHeader, TableCell, + TableCellPlaceholder, TableContainer, TableTitle, TableSubtitle, @@ -24,6 +25,7 @@ const Table = Object.assign(TableImpl, { Header: TableHeader, Row: TableRow, Cell: TableCell, + CellPlaceholder: TableCellPlaceholder, }) export {DataTable, Table} From 16c5c0c8b6896eaaa13ab509c0d867cb6ad601b7 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Thu, 30 Mar 2023 14:56:41 -0400 Subject: [PATCH 03/20] 'preventIndents' => 'flat' (#3099) * 'preventIndents' => 'flat' * Update generated/components.json --------- Co-authored-by: mperrotti --- generated/components.json | 2 +- src/TreeView/TreeView.docs.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/generated/components.json b/generated/components.json index 794e773a400..6ce0fdbd86a 100644 --- a/generated/components.json +++ b/generated/components.json @@ -4656,7 +4656,7 @@ "required": true }, { - "name": "preventIndents", + "name": "flat", "type": "boolean", "description": "Prevents the tree from indenting items. This should only be used when the tree is used to display a flat list of items." } diff --git a/src/TreeView/TreeView.docs.json b/src/TreeView/TreeView.docs.json index 5ae7aa81bdd..9c7305ef032 100644 --- a/src/TreeView/TreeView.docs.json +++ b/src/TreeView/TreeView.docs.json @@ -18,7 +18,7 @@ "required": true }, { - "name": "preventIndents", + "name": "flat", "type": "boolean", "description": "Prevents the tree from indenting items. This should only be used when the tree is used to display a flat list of items." } From d6b85839ea56d1a5f0784f71b4adf541297781fb Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Thu, 30 Mar 2023 15:35:30 -0600 Subject: [PATCH 04/20] Update `IssueLabelToken` colors (#2966) * Update IssueLabelToken colors * Add isSelected control for storybook * Respect fillColor saturation * Update snapshots * Provide fallback color * Create .changeset/gold-actors-fry.md * test(vrt): update snapshots --------- Co-authored-by: colebemis --- .changeset/gold-actors-fry.md | 5 + ...-Default-Issue-Label-Token-light-linux.png | Bin 7147 -> 7239 bytes ...el-Token-With-On-Remove-Fn-light-linux.png | Bin 9156 -> 9267 bytes package-lock.json | 11 + package.json | 1 + src/Token/IssueLabelToken.tsx | 158 +++++++++------ .../__snapshots__/Token.test.tsx.snap | 189 ++++-------------- .../TextInputWithTokens.test.tsx.snap | 21 +- 8 files changed, 151 insertions(+), 234 deletions(-) create mode 100644 .changeset/gold-actors-fry.md diff --git a/.changeset/gold-actors-fry.md b/.changeset/gold-actors-fry.md new file mode 100644 index 00000000000..9a155393dfb --- /dev/null +++ b/.changeset/gold-actors-fry.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Update `IssueLabelToken` colors to improve color contrast with all possible user-provided colors diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Default-Issue-Label-Token-light-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Default-Issue-Label-Token-light-linux.png index 50802ad3393ed8066f65fa9940d87b2739f84955..bb46b22adc41fd21a5555f8193bd57efa3aa983d 100644 GIT binary patch literal 7239 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 Ip7b;S1t&cKo&W#< diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-linux.png index af776f930e7ad804bbbfbaf016649fb4d43e7352..8647a2b76a5e9db8fd98bfebe7c88515e4460ce0 100644 GIT binary patch literal 9267 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 literal 9156 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 { +const IssueLabelToken = React.forwardRef((props, forwardedRef) => { const { as, fillColor = '#999', @@ -54,42 +32,52 @@ const IssueLabelToken = forwardRef((props, forwardedRef) => { onClick, ...rest } = props - const interactiveTokenProps = { - as, - href, - onClick, - } - const {colorScheme} = useTheme() + + const interactiveTokenProps = {as, href, onClick} + + const colorMode = useColorMode() + const hasMultipleActionTargets = isTokenInteractive(props) && Boolean(onRemove) && !hideRemoveButton - const onRemoveClick: MouseEventHandler = e => { - e.stopPropagation() - onRemove && onRemove() + + const onRemoveClick: React.MouseEventHandler = event => { + event.stopPropagation() + onRemove?.() } - const labelStyles: CSSObject = useMemo(() => { - const [r, g, b] = parseToRgba(fillColor) - const [h, s, l] = parseToHsla(fillColor) - // label hack taken from https://github.com/github/github/blob/master/app/assets/stylesheets/hacks/hx_primer-labels.scss#L43-L108 - // this logic should eventually live in primer/components. Also worthy of note is that the dotcom hack code will be moving to primer/css soon. + const labelStyles: CSSObject = React.useMemo(() => { + // Parse label color into hue, saturation, lightness using HSLUV + const {h, s} = hexToHsluv(fillColor) + + // Initialize color variables + let bgColor = '' + let textColor = '' + let borderColor = '' + + // Set color variables based on current color mode + switch (colorMode) { + case 'light': { + bgColor = hsluvToHex({h, s: Math.min(s, 90), l: 97}) + textColor = minContrast(hsluvToHex({h, s: Math.min(s, 85), l: 45}), bgColor, 4.5) + borderColor = hsluvToHex({h, s: Math.min(s, 70), l: 82}) + break + } + + case 'dark': { + bgColor = hsluvToHex({h, s: Math.min(s, 90), l: 8}) + textColor = minContrast(hsluvToHex({h, s: Math.min(s, 50), l: 70}), bgColor, 4.5) + borderColor = hsluvToHex({h, s: Math.min(s, 80), l: 20}) + break + } + } + return { - '--label-r': String(r), - '--label-g': String(g), - '--label-b': String(b), - '--label-h': String(Math.round(h)), - '--label-s': String(Math.round(s * 100)), - '--label-l': String(Math.round(l * 100)), - '--perceived-lightness': - 'calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255)', - '--lightness-switch': 'max(0, min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000), 1))', - paddingRight: hideRemoveButton || !onRemove ? undefined : 0, position: 'relative', - ...(colorScheme === 'light' ? lightModeStyles : darkModeStyles), + color: textColor, + background: bgColor, + border: `${tokenBorderWidthPx}px solid ${borderColor}`, + paddingRight: onRemove && !hideRemoveButton ? 0 : undefined, ...(isSelected ? { - background: - colorScheme === 'light' - ? 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 5) * 1%))' - : darkModeStyles.background, ':focus': { outline: 'none', }, @@ -103,17 +91,13 @@ const IssueLabelToken = forwardRef((props, forwardedRef) => { left: `-${tokenBorderWidthPx * 2}px`, display: 'block', pointerEvents: 'none', - boxShadow: `0 0 0 ${tokenBorderWidthPx * 2}px ${ - colorScheme === 'light' - ? 'rgb(var(--label-r), var(--label-g), var(--label-b))' - : 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%))' - }`, + boxShadow: `0 0 0 ${tokenBorderWidthPx * 2}px ${textColor}`, borderRadius: '999px', }, } : {}), } - }, [colorScheme, fillColor, isSelected, hideRemoveButton, onRemove]) + }, [colorMode, fillColor, isSelected, hideRemoveButton, onRemove]) return ( { IssueLabelToken.displayName = 'IssueLabelToken' export default IssueLabelToken + +// Helper functions + +function useColorMode(): 'light' | 'dark' { + const {theme} = useTheme() + // Determine color mode by luminance + const colorMode = getLuminance(get('colors.canvas.default')({theme}) || '#fff') > 0.5 ? 'light' : 'dark' + return colorMode +} + +function hexToHsluv(hex: string) { + const color = new Hsluv() + color.hex = toHex(hex) // Ensure hex is actually a hex color + color.hexToHsluv() + return {h: color.hsluv_h, s: color.hsluv_s, l: color.hsluv_l} +} + +function hsluvToHex({h, s, l}: {h: number; s: number; l: number}) { + const color = new Hsluv() + // eslint-disable-next-line camelcase + color.hsluv_h = h + // eslint-disable-next-line camelcase + color.hsluv_s = s + // eslint-disable-next-line camelcase + color.hsluv_l = l + color.hsluvToHex() + return color.hex +} + +/** Returns a foreground color that has a given minimum contrast ratio against the given background color */ +function minContrast(fg: string, bg: string, minRatio: number) { + // eslint-disable-next-line prefer-const + let {h, s, l} = hexToHsluv(fg) + + // While foreground color doesn't meet the contrast ratio, + // increase or decrease the lightness until it does + while (getContrast(hsluvToHex({h, s, l}), bg) < minRatio && l <= 100 && l >= 0) { + if (getLuminance(bg) > getLuminance(fg)) { + l -= 1 + } else { + l += 1 + } + } + + return hsluvToHex({h, s, l}) +} diff --git a/src/Token/__tests__/__snapshots__/Token.test.tsx.snap b/src/Token/__tests__/__snapshots__/Token.test.tsx.snap index 410fcaeef94..c7c594cb38c 100644 --- a/src/Token/__tests__/__snapshots__/Token.test.tsx.snap +++ b/src/Token/__tests__/__snapshots__/Token.test.tsx.snap @@ -1570,24 +1570,11 @@ exports[`Token components IssueLabelToken renders all sizes 1`] = ` line-height: 16px; padding-left: 4px; padding-right: 4px; - --label-r: 153; - --label-g: 153; - --label-b: 153; - --label-h: 0; - --label-s: 0; - --label-l: 60; - --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255); - --lightness-switch: max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1)); - padding-right: 0; position: relative; - --lightness-threshold: 0.453; - --border-threshold: 0.96; - --border-alpha: max(0,min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100),1)); - background: rgb(var(--label-r),var(--label-g),var(--label-b)); - color: hsl(0,0%,calc(var(--lightness-switch) * 100%)); - border-width: 1px; - border-style: solid; - border-color: hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha)); + color: #6a6a6a; + background: #f6f6f6; + border: 1px solid #cccccc; + padding-right: 0; } .c2 { @@ -1743,24 +1730,11 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = ` line-height: 20px; padding-left: 8px; padding-right: 8px; - --label-r: 153; - --label-g: 153; - --label-b: 153; - --label-h: 0; - --label-s: 0; - --label-l: 60; - --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255); - --lightness-switch: max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1)); - padding-right: 0; position: relative; - --lightness-threshold: 0.453; - --border-threshold: 0.96; - --border-alpha: max(0,min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100),1)); - background: rgb(var(--label-r),var(--label-g),var(--label-b)); - color: hsl(0,0%,calc(var(--lightness-switch) * 100%)); - border-width: 1px; - border-style: solid; - border-color: hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha)); + color: #6a6a6a; + background: #f6f6f6; + border: 1px solid #cccccc; + padding-right: 0; } .c2 { @@ -1916,24 +1890,11 @@ exports[`Token components IssueLabelToken renders all sizes 3`] = ` line-height: 24px; padding-left: 8px; padding-right: 8px; - --label-r: 153; - --label-g: 153; - --label-b: 153; - --label-h: 0; - --label-s: 0; - --label-l: 60; - --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255); - --lightness-switch: max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1)); - padding-right: 0; position: relative; - --lightness-threshold: 0.453; - --border-threshold: 0.96; - --border-alpha: max(0,min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100),1)); - background: rgb(var(--label-r),var(--label-g),var(--label-b)); - color: hsl(0,0%,calc(var(--lightness-switch) * 100%)); - border-width: 1px; - border-style: solid; - border-color: hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha)); + color: #6a6a6a; + background: #f6f6f6; + border: 1px solid #cccccc; + padding-right: 0; } .c2 { @@ -2091,24 +2052,11 @@ exports[`Token components IssueLabelToken renders all sizes 4`] = ` padding-right: 16px; padding-top: 0; padding-bottom: 0; - --label-r: 153; - --label-g: 153; - --label-b: 153; - --label-h: 0; - --label-s: 0; - --label-l: 60; - --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255); - --lightness-switch: max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1)); - padding-right: 0; position: relative; - --lightness-threshold: 0.453; - --border-threshold: 0.96; - --border-alpha: max(0,min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100),1)); - background: rgb(var(--label-r),var(--label-g),var(--label-b)); - color: hsl(0,0%,calc(var(--lightness-switch) * 100%)); - border-width: 1px; - border-style: solid; - border-color: hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha)); + color: #6a6a6a; + background: #f6f6f6; + border: 1px solid #cccccc; + padding-right: 0; } .c2 { @@ -2266,24 +2214,11 @@ exports[`Token components IssueLabelToken renders all sizes 5`] = ` padding-right: 16px; padding-top: 0; padding-bottom: 0; - --label-r: 153; - --label-g: 153; - --label-b: 153; - --label-h: 0; - --label-s: 0; - --label-l: 60; - --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255); - --lightness-switch: max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1)); - padding-right: 0; position: relative; - --lightness-threshold: 0.453; - --border-threshold: 0.96; - --border-alpha: max(0,min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100),1)); - background: rgb(var(--label-r),var(--label-g),var(--label-b)); - color: hsl(0,0%,calc(var(--lightness-switch) * 100%)); - border-width: 1px; - border-style: solid; - border-color: hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha)); + color: #6a6a6a; + background: #f6f6f6; + border: 1px solid #cccccc; + padding-right: 0; } .c2 { @@ -2519,24 +2454,11 @@ exports[`Token components IssueLabelToken renders custom fill color 1`] = ` line-height: 20px; padding-left: 8px; padding-right: 8px; - --label-r: 3; - --label-g: 102; - --label-b: 214; - --label-h: 212; - --label-s: 97; - --label-l: 43; - --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255); - --lightness-switch: max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1)); - padding-right: 0; position: relative; - --lightness-threshold: 0.453; - --border-threshold: 0.96; - --border-alpha: max(0,min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100),1)); - background: rgb(var(--label-r),var(--label-g),var(--label-b)); - color: hsl(0,0%,calc(var(--lightness-switch) * 100%)); - border-width: 1px; - border-style: solid; - border-color: hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha)); + color: #3267c6; + background: #f4f6fe; + border: 1px solid #c0cbf0; + padding-right: 0; } .c2 { @@ -2692,24 +2614,11 @@ exports[`Token components IssueLabelToken renders default fill color 1`] = ` line-height: 20px; padding-left: 8px; padding-right: 8px; - --label-r: 153; - --label-g: 153; - --label-b: 153; - --label-h: 0; - --label-s: 0; - --label-l: 60; - --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255); - --lightness-switch: max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1)); - padding-right: 0; position: relative; - --lightness-threshold: 0.453; - --border-threshold: 0.96; - --border-alpha: max(0,min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100),1)); - background: rgb(var(--label-r),var(--label-g),var(--label-b)); - color: hsl(0,0%,calc(var(--lightness-switch) * 100%)); - border-width: 1px; - border-style: solid; - border-color: hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha)); + color: #6a6a6a; + background: #f6f6f6; + border: 1px solid #cccccc; + padding-right: 0; } .c2 { @@ -2865,23 +2774,10 @@ exports[`Token components IssueLabelToken renders isSelected 1`] = ` line-height: 20px; padding-left: 8px; padding-right: 8px; - --label-r: 153; - --label-g: 153; - --label-b: 153; - --label-h: 0; - --label-s: 0; - --label-l: 60; - --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255); - --lightness-switch: max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1)); position: relative; - --lightness-threshold: 0.453; - --border-threshold: 0.96; - --border-alpha: max(0,min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100),1)); - background: hsl(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 5) * 1%)); - color: hsl(0,0%,calc(var(--lightness-switch) * 100%)); - border-width: 1px; - border-style: solid; - border-color: hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha)); + color: #6a6a6a; + background: #f6f6f6; + border: 1px solid #cccccc; } .c0:focus { @@ -2898,7 +2794,7 @@ exports[`Token components IssueLabelToken renders isSelected 1`] = ` left: -2px; display: block; pointer-events: none; - box-shadow: 0 0 0 2px rgb(var(--label-r),var(--label-g),var(--label-b)); + box-shadow: 0 0 0 2px #6a6a6a; border-radius: 999px; } @@ -2976,24 +2872,11 @@ exports[`Token components IssueLabelToken renders with a remove button 1`] = ` line-height: 20px; padding-left: 8px; padding-right: 8px; - --label-r: 153; - --label-g: 153; - --label-b: 153; - --label-h: 0; - --label-s: 0; - --label-l: 60; - --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255); - --lightness-switch: max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1)); - padding-right: 0; position: relative; - --lightness-threshold: 0.453; - --border-threshold: 0.96; - --border-alpha: max(0,min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100),1)); - background: rgb(var(--label-r),var(--label-g),var(--label-b)); - color: hsl(0,0%,calc(var(--lightness-switch) * 100%)); - border-width: 1px; - border-style: solid; - border-color: hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha)); + color: #6a6a6a; + background: #f6f6f6; + border: 1px solid #cccccc; + padding-right: 0; } .c2 { diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap index dfd5e6076bd..90d7738e209 100644 --- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap @@ -17828,24 +17828,11 @@ exports[`TextInputWithTokens renders with tokens using a custom token component padding-right: 16px; padding-top: 0; padding-bottom: 0; - --label-r: 153; - --label-g: 153; - --label-b: 153; - --label-h: 0; - --label-s: 0; - --label-l: 60; - --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255); - --lightness-switch: max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1)); - padding-right: 0; position: relative; - --lightness-threshold: 0.453; - --border-threshold: 0.96; - --border-alpha: max(0,min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100),1)); - background: rgb(var(--label-r),var(--label-g),var(--label-b)); - color: hsl(0,0%,calc(var(--lightness-switch) * 100%)); - border-width: 1px; - border-style: solid; - border-color: hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha)); + color: #6a6a6a; + background: #f6f6f6; + border: 1px solid #cccccc; + padding-right: 0; } .c6 { From 81967be09e78136f656f434d2cfe989be553b2b6 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Thu, 30 Mar 2023 17:16:09 -0600 Subject: [PATCH 05/20] Use camelCase for tooltipDirection prop (#3101) * Use camelCase for tooltipDirection prop * Update generated/components.json --------- Co-authored-by: colebemis --- .changeset/wild-fishes-carry.md | 2 +- docs/content/TextInput.mdx | 2 +- generated/components.json | 2 +- src/TextInput/TextInput.docs.json | 2 +- src/TextInput/TextInput.features.stories.tsx | 2 +- src/_TextInputInnerAction.tsx | 10 +++++----- 6 files changed, 10 insertions(+), 10 deletions(-) diff --git a/.changeset/wild-fishes-carry.md b/.changeset/wild-fishes-carry.md index 5b6288bab94..060266135cb 100644 --- a/.changeset/wild-fishes-carry.md +++ b/.changeset/wild-fishes-carry.md @@ -1,4 +1,4 @@ --- '@primer/react': minor --- -Add the `tooltip-direction` property to the `TextInput.Action` component to make the tooltip position flexible. +Add the `tooltipDirection` property to the `TextInput.Action` component to make the tooltip position flexible. diff --git a/docs/content/TextInput.mdx b/docs/content/TextInput.mdx index fcc5af8ef47..61b59d0f7e6 100644 --- a/docs/content/TextInput.mdx +++ b/docs/content/TextInput.mdx @@ -144,7 +144,7 @@ render() }} icon={XIcon} aria-label="Clear input" - tooltip-direction="nw" + tooltipDirection="nw" sx={{color: 'fg.subtle'}} /> } diff --git a/generated/components.json b/generated/components.json index 6ce0fdbd86a..4ccda03af29 100644 --- a/generated/components.json +++ b/generated/components.json @@ -4134,7 +4134,7 @@ "description": "Text that appears in a tooltip. If an icon is passed, this is also used as the label used by assistive technologies." }, { - "name": "tooltip-direction", + "name": "tooltipDirection", "type": "'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'", "defaultValue": "n", "description": "Sets where the tooltip renders in relation to the target." diff --git a/src/TextInput/TextInput.docs.json b/src/TextInput/TextInput.docs.json index d01cade0ed1..6e1b4c8e7d2 100644 --- a/src/TextInput/TextInput.docs.json +++ b/src/TextInput/TextInput.docs.json @@ -126,7 +126,7 @@ "description": "Text that appears in a tooltip. If an icon is passed, this is also used as the label used by assistive technologies." }, { - "name": "tooltip-direction", + "name": "tooltipDirection", "type": "'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'", "defaultValue": "n", "description": "Sets where the tooltip renders in relation to the target." diff --git a/src/TextInput/TextInput.features.stories.tsx b/src/TextInput/TextInput.features.stories.tsx index bd7d679cfee..12eff8b85fe 100644 --- a/src/TextInput/TextInput.features.stories.tsx +++ b/src/TextInput/TextInput.features.stories.tsx @@ -166,7 +166,7 @@ export const WithTooltipDirection = () => { }} icon={XCircleFillIcon} aria-label="Clear input" - tooltip-direction="nw" + tooltipDirection="nw" sx={{color: 'fg.subtle'}} /> } diff --git a/src/_TextInputInnerAction.tsx b/src/_TextInputInnerAction.tsx index 39e26e54942..956d660edb6 100644 --- a/src/_TextInputInnerAction.tsx +++ b/src/_TextInputInnerAction.tsx @@ -7,14 +7,14 @@ import {BetterSystemStyleObject, merge, SxProp} from './sx' type TextInputActionProps = Omit< React.ButtonHTMLAttributes, - 'aria-label' | 'size' | 'tooltip-direction' + 'aria-label' | 'size' | 'tooltipDirection' > & { /** @deprecated Text input action buttons should only use icon buttons */ children?: React.ReactNode /** Text that appears in a tooltip. If an icon is passed, this is also used as the label used by assistive technologies. */ ['aria-label']?: string /** Position of tooltip. If no position is passed or defaults to "n" */ - ['tooltip-direction']?: 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw' + tooltipDirection?: 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw' /** The icon to render inside the button */ icon?: React.FunctionComponent> /** @@ -52,10 +52,10 @@ const invisibleButtonStyleOverrides = { const ConditionalTooltip: React.FC< React.PropsWithChildren<{ ['aria-label']?: string - ['tooltip-direction']?: 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw' + ['tooltipDirection']?: 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw' children: React.ReactNode }> -> = ({'aria-label': ariaLabel, children, 'tooltip-direction': tooltipDirection}) => ( +> = ({'aria-label': ariaLabel, children, tooltipDirection: tooltipDirection}) => ( <> {ariaLabel ? ( ( ( { 'aria-label': ariaLabel, - 'tooltip-direction': tooltipDirection, + tooltipDirection: tooltipDirection, children, icon, sx: sxProp, From bd907b7cf52f2a826de0b0ea7c84e3b552935090 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Thu, 30 Mar 2023 18:07:45 -0600 Subject: [PATCH 06/20] Revert "Update `IssueLabelToken` colors (#2966)" (#3102) This reverts commit d6b85839ea56d1a5f0784f71b4adf541297781fb. --- .changeset/gold-actors-fry.md | 5 - ...-Default-Issue-Label-Token-light-linux.png | Bin 7239 -> 7147 bytes ...el-Token-With-On-Remove-Fn-light-linux.png | Bin 9267 -> 9156 bytes package-lock.json | 11 - package.json | 1 - src/Token/IssueLabelToken.tsx | 158 ++++++--------- .../__snapshots__/Token.test.tsx.snap | 189 ++++++++++++++---- .../TextInputWithTokens.test.tsx.snap | 21 +- 8 files changed, 234 insertions(+), 151 deletions(-) delete mode 100644 .changeset/gold-actors-fry.md diff --git a/.changeset/gold-actors-fry.md b/.changeset/gold-actors-fry.md deleted file mode 100644 index 9a155393dfb..00000000000 --- a/.changeset/gold-actors-fry.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/react": minor ---- - -Update `IssueLabelToken` colors to improve color contrast with all possible user-provided colors diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Default-Issue-Label-Token-light-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Default-Issue-Label-Token-light-linux.png index bb46b22adc41fd21a5555f8193bd57efa3aa983d..50802ad3393ed8066f65fa9940d87b2739f84955 100644 GIT binary patch literal 7147 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 Ip7b;S1t&cKo&W#< literal 7239 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 diff --git a/package-lock.json b/package-lock.json index 8b3b9f46360..1a916f62d04 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,7 +31,6 @@ "focus-visible": "^5.2.0", "fzy.js": "0.4.1", "history": "^5.0.0", - "hsluv": "1.0.0", "react-intersection-observer": "9.4.1", "styled-system": "^5.1.5" }, @@ -37006,11 +37005,6 @@ "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==", "dev": true }, - "node_modules/hsluv": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/hsluv/-/hsluv-1.0.0.tgz", - "integrity": "sha512-RqZkmiAbUnQ5JkjDFB81iaAC62fkL7BtQultslKzb7Sqs6wzPljY0YPDEhA9pdsVdGQ6ksfMBp9rJB9JyRlQFQ==" - }, "node_modules/html-encoding-sniffer": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz", @@ -83552,11 +83546,6 @@ "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==", "dev": true }, - "hsluv": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/hsluv/-/hsluv-1.0.0.tgz", - "integrity": "sha512-RqZkmiAbUnQ5JkjDFB81iaAC62fkL7BtQultslKzb7Sqs6wzPljY0YPDEhA9pdsVdGQ6ksfMBp9rJB9JyRlQFQ==" - }, "html-encoding-sniffer": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz", diff --git a/package.json b/package.json index 138b02a2179..ef4925b6285 100644 --- a/package.json +++ b/package.json @@ -109,7 +109,6 @@ "focus-visible": "^5.2.0", "fzy.js": "0.4.1", "history": "^5.0.0", - "hsluv": "1.0.0", "react-intersection-observer": "9.4.1", "styled-system": "^5.1.5" }, diff --git a/src/Token/IssueLabelToken.tsx b/src/Token/IssueLabelToken.tsx index 69d897bac43..e433dcb233c 100644 --- a/src/Token/IssueLabelToken.tsx +++ b/src/Token/IssueLabelToken.tsx @@ -1,13 +1,11 @@ +import React, {forwardRef, MouseEventHandler, useMemo} from 'react' import {CSSObject} from '@styled-system/css' -import {getContrast, getLuminance, toHex} from 'color2k' -import {Hsluv} from 'hsluv' -import React from 'react' -import {get} from '../constants' -import {useTheme} from '../ThemeProvider' -import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' import TokenBase, {defaultTokenSize, isTokenInteractive, TokenBaseProps} from './TokenBase' import RemoveTokenButton from './_RemoveTokenButton' +import {parseToHsla, parseToRgba} from 'color2k' +import {useTheme} from '../ThemeProvider' import TokenTextContainer from './_TokenTextContainer' +import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' export interface IssueLabelTokenProps extends TokenBaseProps { /** @@ -18,7 +16,31 @@ export interface IssueLabelTokenProps extends TokenBaseProps { const tokenBorderWidthPx = 1 -const IssueLabelToken = React.forwardRef((props, forwardedRef) => { +const lightModeStyles = { + '--lightness-threshold': '0.453', + '--border-threshold': '0.96', + '--border-alpha': 'max(0, min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100), 1))', + background: 'rgb(var(--label-r), var(--label-g), var(--label-b))', + color: 'hsl(0, 0%, calc(var(--lightness-switch) * 100%))', + borderWidth: tokenBorderWidthPx, + borderStyle: 'solid', + borderColor: 'hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha))', +} + +const darkModeStyles = { + '--lightness-threshold': '0.6', + '--background-alpha': '0.18', + '--border-alpha': '0.3', + '--lighten-by': 'calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch))', + borderWidth: tokenBorderWidthPx, + borderStyle: 'solid', + background: 'rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha))', + color: 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%))', + borderColor: + 'hsla(var(--label-h), calc(var(--label-s) * 1%),calc((var(--label-l) + var(--lighten-by)) * 1%),var(--border-alpha))', +} + +const IssueLabelToken = forwardRef((props, forwardedRef) => { const { as, fillColor = '#999', @@ -32,52 +54,42 @@ const IssueLabelToken = React.forwardRef((props, forwardedRef) => { onClick, ...rest } = props - - const interactiveTokenProps = {as, href, onClick} - - const colorMode = useColorMode() - + const interactiveTokenProps = { + as, + href, + onClick, + } + const {colorScheme} = useTheme() const hasMultipleActionTargets = isTokenInteractive(props) && Boolean(onRemove) && !hideRemoveButton - - const onRemoveClick: React.MouseEventHandler = event => { - event.stopPropagation() - onRemove?.() + const onRemoveClick: MouseEventHandler = e => { + e.stopPropagation() + onRemove && onRemove() } + const labelStyles: CSSObject = useMemo(() => { + const [r, g, b] = parseToRgba(fillColor) + const [h, s, l] = parseToHsla(fillColor) - const labelStyles: CSSObject = React.useMemo(() => { - // Parse label color into hue, saturation, lightness using HSLUV - const {h, s} = hexToHsluv(fillColor) - - // Initialize color variables - let bgColor = '' - let textColor = '' - let borderColor = '' - - // Set color variables based on current color mode - switch (colorMode) { - case 'light': { - bgColor = hsluvToHex({h, s: Math.min(s, 90), l: 97}) - textColor = minContrast(hsluvToHex({h, s: Math.min(s, 85), l: 45}), bgColor, 4.5) - borderColor = hsluvToHex({h, s: Math.min(s, 70), l: 82}) - break - } - - case 'dark': { - bgColor = hsluvToHex({h, s: Math.min(s, 90), l: 8}) - textColor = minContrast(hsluvToHex({h, s: Math.min(s, 50), l: 70}), bgColor, 4.5) - borderColor = hsluvToHex({h, s: Math.min(s, 80), l: 20}) - break - } - } - + // label hack taken from https://github.com/github/github/blob/master/app/assets/stylesheets/hacks/hx_primer-labels.scss#L43-L108 + // this logic should eventually live in primer/components. Also worthy of note is that the dotcom hack code will be moving to primer/css soon. return { + '--label-r': String(r), + '--label-g': String(g), + '--label-b': String(b), + '--label-h': String(Math.round(h)), + '--label-s': String(Math.round(s * 100)), + '--label-l': String(Math.round(l * 100)), + '--perceived-lightness': + 'calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255)', + '--lightness-switch': 'max(0, min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000), 1))', + paddingRight: hideRemoveButton || !onRemove ? undefined : 0, position: 'relative', - color: textColor, - background: bgColor, - border: `${tokenBorderWidthPx}px solid ${borderColor}`, - paddingRight: onRemove && !hideRemoveButton ? 0 : undefined, + ...(colorScheme === 'light' ? lightModeStyles : darkModeStyles), ...(isSelected ? { + background: + colorScheme === 'light' + ? 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 5) * 1%))' + : darkModeStyles.background, ':focus': { outline: 'none', }, @@ -91,13 +103,17 @@ const IssueLabelToken = React.forwardRef((props, forwardedRef) => { left: `-${tokenBorderWidthPx * 2}px`, display: 'block', pointerEvents: 'none', - boxShadow: `0 0 0 ${tokenBorderWidthPx * 2}px ${textColor}`, + boxShadow: `0 0 0 ${tokenBorderWidthPx * 2}px ${ + colorScheme === 'light' + ? 'rgb(var(--label-r), var(--label-g), var(--label-b))' + : 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%))' + }`, borderRadius: '999px', }, } : {}), } - }, [colorMode, fillColor, isSelected, hideRemoveButton, onRemove]) + }, [colorScheme, fillColor, isSelected, hideRemoveButton, onRemove]) return ( { IssueLabelToken.displayName = 'IssueLabelToken' export default IssueLabelToken - -// Helper functions - -function useColorMode(): 'light' | 'dark' { - const {theme} = useTheme() - // Determine color mode by luminance - const colorMode = getLuminance(get('colors.canvas.default')({theme}) || '#fff') > 0.5 ? 'light' : 'dark' - return colorMode -} - -function hexToHsluv(hex: string) { - const color = new Hsluv() - color.hex = toHex(hex) // Ensure hex is actually a hex color - color.hexToHsluv() - return {h: color.hsluv_h, s: color.hsluv_s, l: color.hsluv_l} -} - -function hsluvToHex({h, s, l}: {h: number; s: number; l: number}) { - const color = new Hsluv() - // eslint-disable-next-line camelcase - color.hsluv_h = h - // eslint-disable-next-line camelcase - color.hsluv_s = s - // eslint-disable-next-line camelcase - color.hsluv_l = l - color.hsluvToHex() - return color.hex -} - -/** Returns a foreground color that has a given minimum contrast ratio against the given background color */ -function minContrast(fg: string, bg: string, minRatio: number) { - // eslint-disable-next-line prefer-const - let {h, s, l} = hexToHsluv(fg) - - // While foreground color doesn't meet the contrast ratio, - // increase or decrease the lightness until it does - while (getContrast(hsluvToHex({h, s, l}), bg) < minRatio && l <= 100 && l >= 0) { - if (getLuminance(bg) > getLuminance(fg)) { - l -= 1 - } else { - l += 1 - } - } - - return hsluvToHex({h, s, l}) -} diff --git a/src/Token/__tests__/__snapshots__/Token.test.tsx.snap b/src/Token/__tests__/__snapshots__/Token.test.tsx.snap index c7c594cb38c..410fcaeef94 100644 --- a/src/Token/__tests__/__snapshots__/Token.test.tsx.snap +++ b/src/Token/__tests__/__snapshots__/Token.test.tsx.snap @@ -1570,11 +1570,24 @@ exports[`Token components IssueLabelToken renders all sizes 1`] = ` line-height: 16px; padding-left: 4px; padding-right: 4px; - position: relative; - color: #6a6a6a; - background: #f6f6f6; - border: 1px solid #cccccc; + --label-r: 153; + --label-g: 153; + --label-b: 153; + --label-h: 0; + --label-s: 0; + --label-l: 60; + --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255); + --lightness-switch: max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1)); padding-right: 0; + position: relative; + --lightness-threshold: 0.453; + --border-threshold: 0.96; + --border-alpha: max(0,min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100),1)); + background: rgb(var(--label-r),var(--label-g),var(--label-b)); + color: hsl(0,0%,calc(var(--lightness-switch) * 100%)); + border-width: 1px; + border-style: solid; + border-color: hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha)); } .c2 { @@ -1730,11 +1743,24 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = ` line-height: 20px; padding-left: 8px; padding-right: 8px; - position: relative; - color: #6a6a6a; - background: #f6f6f6; - border: 1px solid #cccccc; + --label-r: 153; + --label-g: 153; + --label-b: 153; + --label-h: 0; + --label-s: 0; + --label-l: 60; + --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255); + --lightness-switch: max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1)); padding-right: 0; + position: relative; + --lightness-threshold: 0.453; + --border-threshold: 0.96; + --border-alpha: max(0,min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100),1)); + background: rgb(var(--label-r),var(--label-g),var(--label-b)); + color: hsl(0,0%,calc(var(--lightness-switch) * 100%)); + border-width: 1px; + border-style: solid; + border-color: hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha)); } .c2 { @@ -1890,11 +1916,24 @@ exports[`Token components IssueLabelToken renders all sizes 3`] = ` line-height: 24px; padding-left: 8px; padding-right: 8px; - position: relative; - color: #6a6a6a; - background: #f6f6f6; - border: 1px solid #cccccc; + --label-r: 153; + --label-g: 153; + --label-b: 153; + --label-h: 0; + --label-s: 0; + --label-l: 60; + --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255); + --lightness-switch: max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1)); padding-right: 0; + position: relative; + --lightness-threshold: 0.453; + --border-threshold: 0.96; + --border-alpha: max(0,min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100),1)); + background: rgb(var(--label-r),var(--label-g),var(--label-b)); + color: hsl(0,0%,calc(var(--lightness-switch) * 100%)); + border-width: 1px; + border-style: solid; + border-color: hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha)); } .c2 { @@ -2052,11 +2091,24 @@ exports[`Token components IssueLabelToken renders all sizes 4`] = ` padding-right: 16px; padding-top: 0; padding-bottom: 0; - position: relative; - color: #6a6a6a; - background: #f6f6f6; - border: 1px solid #cccccc; + --label-r: 153; + --label-g: 153; + --label-b: 153; + --label-h: 0; + --label-s: 0; + --label-l: 60; + --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255); + --lightness-switch: max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1)); padding-right: 0; + position: relative; + --lightness-threshold: 0.453; + --border-threshold: 0.96; + --border-alpha: max(0,min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100),1)); + background: rgb(var(--label-r),var(--label-g),var(--label-b)); + color: hsl(0,0%,calc(var(--lightness-switch) * 100%)); + border-width: 1px; + border-style: solid; + border-color: hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha)); } .c2 { @@ -2214,11 +2266,24 @@ exports[`Token components IssueLabelToken renders all sizes 5`] = ` padding-right: 16px; padding-top: 0; padding-bottom: 0; - position: relative; - color: #6a6a6a; - background: #f6f6f6; - border: 1px solid #cccccc; + --label-r: 153; + --label-g: 153; + --label-b: 153; + --label-h: 0; + --label-s: 0; + --label-l: 60; + --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255); + --lightness-switch: max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1)); padding-right: 0; + position: relative; + --lightness-threshold: 0.453; + --border-threshold: 0.96; + --border-alpha: max(0,min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100),1)); + background: rgb(var(--label-r),var(--label-g),var(--label-b)); + color: hsl(0,0%,calc(var(--lightness-switch) * 100%)); + border-width: 1px; + border-style: solid; + border-color: hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha)); } .c2 { @@ -2454,11 +2519,24 @@ exports[`Token components IssueLabelToken renders custom fill color 1`] = ` line-height: 20px; padding-left: 8px; padding-right: 8px; - position: relative; - color: #3267c6; - background: #f4f6fe; - border: 1px solid #c0cbf0; + --label-r: 3; + --label-g: 102; + --label-b: 214; + --label-h: 212; + --label-s: 97; + --label-l: 43; + --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255); + --lightness-switch: max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1)); padding-right: 0; + position: relative; + --lightness-threshold: 0.453; + --border-threshold: 0.96; + --border-alpha: max(0,min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100),1)); + background: rgb(var(--label-r),var(--label-g),var(--label-b)); + color: hsl(0,0%,calc(var(--lightness-switch) * 100%)); + border-width: 1px; + border-style: solid; + border-color: hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha)); } .c2 { @@ -2614,11 +2692,24 @@ exports[`Token components IssueLabelToken renders default fill color 1`] = ` line-height: 20px; padding-left: 8px; padding-right: 8px; - position: relative; - color: #6a6a6a; - background: #f6f6f6; - border: 1px solid #cccccc; + --label-r: 153; + --label-g: 153; + --label-b: 153; + --label-h: 0; + --label-s: 0; + --label-l: 60; + --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255); + --lightness-switch: max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1)); padding-right: 0; + position: relative; + --lightness-threshold: 0.453; + --border-threshold: 0.96; + --border-alpha: max(0,min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100),1)); + background: rgb(var(--label-r),var(--label-g),var(--label-b)); + color: hsl(0,0%,calc(var(--lightness-switch) * 100%)); + border-width: 1px; + border-style: solid; + border-color: hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha)); } .c2 { @@ -2774,10 +2865,23 @@ exports[`Token components IssueLabelToken renders isSelected 1`] = ` line-height: 20px; padding-left: 8px; padding-right: 8px; + --label-r: 153; + --label-g: 153; + --label-b: 153; + --label-h: 0; + --label-s: 0; + --label-l: 60; + --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255); + --lightness-switch: max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1)); position: relative; - color: #6a6a6a; - background: #f6f6f6; - border: 1px solid #cccccc; + --lightness-threshold: 0.453; + --border-threshold: 0.96; + --border-alpha: max(0,min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100),1)); + background: hsl(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 5) * 1%)); + color: hsl(0,0%,calc(var(--lightness-switch) * 100%)); + border-width: 1px; + border-style: solid; + border-color: hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha)); } .c0:focus { @@ -2794,7 +2898,7 @@ exports[`Token components IssueLabelToken renders isSelected 1`] = ` left: -2px; display: block; pointer-events: none; - box-shadow: 0 0 0 2px #6a6a6a; + box-shadow: 0 0 0 2px rgb(var(--label-r),var(--label-g),var(--label-b)); border-radius: 999px; } @@ -2872,11 +2976,24 @@ exports[`Token components IssueLabelToken renders with a remove button 1`] = ` line-height: 20px; padding-left: 8px; padding-right: 8px; - position: relative; - color: #6a6a6a; - background: #f6f6f6; - border: 1px solid #cccccc; + --label-r: 153; + --label-g: 153; + --label-b: 153; + --label-h: 0; + --label-s: 0; + --label-l: 60; + --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255); + --lightness-switch: max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1)); padding-right: 0; + position: relative; + --lightness-threshold: 0.453; + --border-threshold: 0.96; + --border-alpha: max(0,min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100),1)); + background: rgb(var(--label-r),var(--label-g),var(--label-b)); + color: hsl(0,0%,calc(var(--lightness-switch) * 100%)); + border-width: 1px; + border-style: solid; + border-color: hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha)); } .c2 { diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap index 90d7738e209..dfd5e6076bd 100644 --- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap @@ -17828,11 +17828,24 @@ exports[`TextInputWithTokens renders with tokens using a custom token component padding-right: 16px; padding-top: 0; padding-bottom: 0; - position: relative; - color: #6a6a6a; - background: #f6f6f6; - border: 1px solid #cccccc; + --label-r: 153; + --label-g: 153; + --label-b: 153; + --label-h: 0; + --label-s: 0; + --label-l: 60; + --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255); + --lightness-switch: max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1)); padding-right: 0; + position: relative; + --lightness-threshold: 0.453; + --border-threshold: 0.96; + --border-alpha: max(0,min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100),1)); + background: rgb(var(--label-r),var(--label-g),var(--label-b)); + color: hsl(0,0%,calc(var(--lightness-switch) * 100%)); + border-width: 1px; + border-style: solid; + border-color: hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha)); } .c6 { From e46e33b8be0d553b838887d70893734923bb27d8 Mon Sep 17 00:00:00 2001 From: Ian Sanders Date: Thu, 30 Mar 2023 21:21:40 -0400 Subject: [PATCH 07/20] Fix `IssueLabelToken` treating alternative light schemes as dark (#3104) * Fix `IssueLabelToken` treating alternative light schemes as dark * Use `resolvedColorMode` insetead of `colorScheme` * Fix dependencies * Use `resolvedColorScheme.startsWith` instead of `resolvedColorMode` which is not guaranteed to be accurate * Create .changeset/thick-cheetahs-fry.md * test(vrt): update snapshots --------- Co-authored-by: colebemis --- .changeset/thick-cheetahs-fry.md | 5 +++++ ...sue-Label-Token-light-colorblind-linux.png | Bin 7101 -> 7147 bytes ...-Label-Token-light-high-contrast-linux.png | Bin 7101 -> 7147 bytes ...sue-Label-Token-light-tritanopia-linux.png | Bin 7101 -> 7147 bytes ...th-On-Remove-Fn-light-colorblind-linux.png | Bin 9016 -> 9156 bytes ...On-Remove-Fn-light-high-contrast-linux.png | Bin 9016 -> 9156 bytes ...th-On-Remove-Fn-light-tritanopia-linux.png | Bin 9016 -> 9156 bytes package-lock.json | 4 ++-- src/Token/IssueLabelToken.tsx | 16 ++++++++-------- 9 files changed, 15 insertions(+), 10 deletions(-) create mode 100644 .changeset/thick-cheetahs-fry.md diff --git a/.changeset/thick-cheetahs-fry.md b/.changeset/thick-cheetahs-fry.md new file mode 100644 index 00000000000..be68640cd6e --- /dev/null +++ b/.changeset/thick-cheetahs-fry.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Fix `IssueLabelToken` treating alternative light schemes as dark diff --git a/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Default-Issue-Label-Token-light-colorblind-linux.png b/.playwright/snapshots/components/Token.test.ts-snapshots/Token-Default-Issue-Label-Token-light-colorblind-linux.png index 4de38b33d51436f0c7245f135982a078d7324246..50802ad3393ed8066f65fa9940d87b2739f84955 100644 GIT binary patch literal 7147 zcmeHM`CC(08cxSnrd8qTSj!-m^cfITENf+vkQA+AMkTG(V#*R~fM^3m5+Q_yq_v}Y ziVHSWArb-WD8nO44aJB^f~D+`pokDz!jc69vIi2f&AI(){(!MR<%cBq=G^<8?|Z-Z zeb33w51%E(Z+K_(J1`h*1Ny+HM_{luM(~3DbuIX&#D8ZF_;`bIBz_O`1fv}c>43c z=9!YfAmi6yzL4JiiW`M&54iaD;Yw&Yd+7GzXogvP7P%e_@0Uiq*#U?V*`r!g9@ma@ z=*#Oa}@u(NK;m zY=sfUv=xFNmp^BI@fQ%+a}>lC7F&1td`s0%J;|PUv}**%Dh4T5rQ~&NYPPCd!s*M4 zg4hL5k$GQL@v<~>q9BMODQ~5(WXXiZo~t1s%HQ{?Y@`Kogpz&koL*jr@kb*~br{7o z8!qN-J;*;j|7^?d)7ywI>U-7&KfZh)-=(}pyw{^w^cmDtQ4E@&H`@v7*ce@?P0teZ zxML(yY*HF6ljBT#mt}k!A08D|0Xn8TykcJwIb(6wmm?fMl+z+H==*|Ic)0Z#(|8lE z5L(rJQ&Z_e`x1$uo9UoAEGmlKG@?>glEl|`5&1b|54OY>eO#VabW;7;AVw^Y;w_3` z7S|8kOwJTK?Ha=P!#rQ>O8`grcr!(%+5uUFoTFBQ() zwkO`sQ1o8mqF79!_H3{pTHT@%_E*Km;OwuG%KRhZ1k+E6dv1YmPI#I&=H;Urw_EOB{htQ_t%cX4;;e*jUs2a53xdwS|50!2%4B6v zSpZ?;Q9fFK)gZ}OcySji$W6TmW`}Z1evsX>YFdz(g^ke|P`lBL!rp*H15{@C0mJx5 zQfmIuwQJY%@m-gGToDtjC~XXY zo7>#TBdOGjDfy>ne*ZzhW9_btB#A3R@#L`_K_=jjWiB3dO;yc8p7#t!E?GC{o(IKF zEncS#R+qdOiYChsa57#!uS0WA4&A<(9dml_Gmg`JDe?9pE(cVuFpc0OPri2x4+*)9 zF7vk!Ex7w2qVzQa0Ijp{0`>T+ao$%XE1bP3ZKYFRG~lXhtBU^Uy9($5Y9Jw2(++o> z%57PCuzte^g+OG_flw{f&FsYTt?$!^eb)K36v_3<6NFN4pqEr zv{@u9UP{n0GUndeYAkAA^utV(uB_dek=ALotRLDmEL*2ig93tDyx-HRUzcT;B zz2B{I+doPDrpfwzJaKHYE-}!A4rAKPkV(at`V8DlZQ&Ozy|jVG(30b-{i+?t+D2du z5ULoYCBuhh)9w7~*AwzIOJpSrC`AF(5YLg1-p5rXX9WyGY7d9BmZg zXILyOu-{Ka6d~J@y+_CI3p&U_*o{Nd2RUQi?K+Np=6tXiD7lelP(se;9g*D)cWBu= zkNxr?F#Vo0Z>{6_5l8L~0Pz_{@ug7znwMV^DHcU}02)GfX-uH1tF78SQW`!3xml#h zGVs`@@AE=28J(qYl)mHlhk3K)skZNIz{&c6vrUpal>?QAD-DdT$%5Pgz>Khy&;GrB z{dxeK_E!U8;Mx^P%U~U_%wt%qm}w+w@-YuV3xjw>Y-qj8_9@y15{;Twy$hCem=i0G zo+I>EfkI;Af(pKkdDeW5~<;!Cv z42L22h4++f3e?x4?AtvM+D{UAQ9lN=EPXT$T~>*0%*vGVGiiYKhQYlanZTyd`&D{< z$9Ycz&A6l>_xCSnrQRcHZvb}%@0WP-95h;E<@ z<;V;5fWfqIB`;|X1L%_sOxApLOpq<*bir8&H}@^w#`z(LuPKy)T{rI&6Yx*YyhXCc zF+q!LR_~@73C(N8l7ECiU}?xZ;A687d{aEZuaYJeOzu;FpoH9XB* z+0QLY&TY<=*IA&8R9>bUlw$D4UYg=c(thS8AT4CUUJfvVOffH-8%r;MZm3JFO`F>b z7VjxU3@Hwz4dbCywx8(WV9Hrl^QUdA{*0}gYYx!W*S0Zsq3c5Tb^PFR@yf+37q9-5 zXB#f5xuoWjnoDZ0^#Q8OWLzfWG8vc2xJ>4?{6F=-_G-i-8`1eKhreC`mIFiYOZfEO Ip7b;S1t&cKo&W#< literal 7101 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 Ip7b;S1t&cKo&W#< literal 7101 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 Ip7b;S1t&cKo&W#< literal 7101 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 { href, onClick, } - const {colorScheme} = useTheme() + const {resolvedColorScheme} = useTheme() const hasMultipleActionTargets = isTokenInteractive(props) && Boolean(onRemove) && !hideRemoveButton const onRemoveClick: MouseEventHandler = e => { e.stopPropagation() @@ -68,6 +68,7 @@ const IssueLabelToken = forwardRef((props, forwardedRef) => { const labelStyles: CSSObject = useMemo(() => { const [r, g, b] = parseToRgba(fillColor) const [h, s, l] = parseToHsla(fillColor) + const isLightScheme = !resolvedColorScheme?.startsWith('dark') // fall back to light colors for unknown schemes // label hack taken from https://github.com/github/github/blob/master/app/assets/stylesheets/hacks/hx_primer-labels.scss#L43-L108 // this logic should eventually live in primer/components. Also worthy of note is that the dotcom hack code will be moving to primer/css soon. @@ -83,13 +84,12 @@ const IssueLabelToken = forwardRef((props, forwardedRef) => { '--lightness-switch': 'max(0, min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000), 1))', paddingRight: hideRemoveButton || !onRemove ? undefined : 0, position: 'relative', - ...(colorScheme === 'light' ? lightModeStyles : darkModeStyles), + ...(isLightScheme ? lightModeStyles : darkModeStyles), ...(isSelected ? { - background: - colorScheme === 'light' - ? 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 5) * 1%))' - : darkModeStyles.background, + background: isLightScheme + ? 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 5) * 1%))' + : darkModeStyles.background, ':focus': { outline: 'none', }, @@ -104,7 +104,7 @@ const IssueLabelToken = forwardRef((props, forwardedRef) => { display: 'block', pointerEvents: 'none', boxShadow: `0 0 0 ${tokenBorderWidthPx * 2}px ${ - colorScheme === 'light' + isLightScheme ? 'rgb(var(--label-r), var(--label-g), var(--label-b))' : 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%))' }`, @@ -113,7 +113,7 @@ const IssueLabelToken = forwardRef((props, forwardedRef) => { } : {}), } - }, [colorScheme, fillColor, isSelected, hideRemoveButton, onRemove]) + }, [fillColor, resolvedColorScheme, hideRemoveButton, onRemove, isSelected]) return ( Date: Thu, 30 Mar 2023 22:33:57 -0300 Subject: [PATCH 08/20] refactor(TextInputInnerAction): tooltipDirection prop (#3105) * refactor(TextInputInnerAction): tooltipDirection prop * fix: lint --- src/_TextInputInnerAction.tsx | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/src/_TextInputInnerAction.tsx b/src/_TextInputInnerAction.tsx index 956d660edb6..492ceb8a96a 100644 --- a/src/_TextInputInnerAction.tsx +++ b/src/_TextInputInnerAction.tsx @@ -52,10 +52,10 @@ const invisibleButtonStyleOverrides = { const ConditionalTooltip: React.FC< React.PropsWithChildren<{ ['aria-label']?: string - ['tooltipDirection']?: 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw' + tooltipDirection?: 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw' children: React.ReactNode }> -> = ({'aria-label': ariaLabel, children, tooltipDirection: tooltipDirection}) => ( +> = ({'aria-label': ariaLabel, children, tooltipDirection}) => ( <> {ariaLabel ? ( ( ( - { - 'aria-label': ariaLabel, - tooltipDirection: tooltipDirection, - children, - icon, - sx: sxProp, - variant = 'invisible', - ...rest - }, + {'aria-label': ariaLabel, tooltipDirection, children, icon, sx: sxProp, variant = 'invisible', ...rest}, forwardedRef, ) => { const sx = From d88b14f245c9a7d106362ef24e103ac4151c8385 Mon Sep 17 00:00:00 2001 From: GitHub Design Systems Bot <30705008+primer-css@users.noreply.github.com> Date: Fri, 31 Mar 2023 04:01:22 +0200 Subject: [PATCH 09/20] Version Packages (#3091) Co-authored-by: github-actions[bot] --- .changeset/itchy-balloons-decide.md | 5 ----- .changeset/olive-beds-train.md | 5 ----- .changeset/six-lemons-tap.md | 5 ----- .changeset/thick-cheetahs-fry.md | 5 ----- .changeset/wild-fishes-carry.md | 4 ---- CHANGELOG.md | 16 ++++++++++++++++ package.json | 2 +- 7 files changed, 17 insertions(+), 25 deletions(-) delete mode 100644 .changeset/itchy-balloons-decide.md delete mode 100644 .changeset/olive-beds-train.md delete mode 100644 .changeset/six-lemons-tap.md delete mode 100644 .changeset/thick-cheetahs-fry.md delete mode 100644 .changeset/wild-fishes-carry.md diff --git a/.changeset/itchy-balloons-decide.md b/.changeset/itchy-balloons-decide.md deleted file mode 100644 index 86b282e31cd..00000000000 --- a/.changeset/itchy-balloons-decide.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@primer/react': patch ---- - -Renames DataTable 'shrink' column width to 'growCollapse' diff --git a/.changeset/olive-beds-train.md b/.changeset/olive-beds-train.md deleted file mode 100644 index c1e9d4fc195..00000000000 --- a/.changeset/olive-beds-train.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@primer/react': minor ---- - -Adds a helper component for rendering placeholder text to explain why a DataTable cell has no content. diff --git a/.changeset/six-lemons-tap.md b/.changeset/six-lemons-tap.md deleted file mode 100644 index 758cd5dbbd0..00000000000 --- a/.changeset/six-lemons-tap.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@primer/react': minor ---- - -Adds the ability to exclose indentation for flat tree views. diff --git a/.changeset/thick-cheetahs-fry.md b/.changeset/thick-cheetahs-fry.md deleted file mode 100644 index be68640cd6e..00000000000 --- a/.changeset/thick-cheetahs-fry.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/react": patch ---- - -Fix `IssueLabelToken` treating alternative light schemes as dark diff --git a/.changeset/wild-fishes-carry.md b/.changeset/wild-fishes-carry.md deleted file mode 100644 index 060266135cb..00000000000 --- a/.changeset/wild-fishes-carry.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -'@primer/react': minor ---- -Add the `tooltipDirection` property to the `TextInput.Action` component to make the tooltip position flexible. diff --git a/CHANGELOG.md b/CHANGELOG.md index 550b55d5c86..aa4bd367196 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,21 @@ # @primer/components +## 35.24.0 + +### Minor Changes + +- [#3071](https://github.com/primer/react/pull/3071) [`681e2271`](https://github.com/primer/react/commit/681e2271ecc90bde2920887c50c0d44b121005f1) Thanks [@mperrotti](https://github.com/mperrotti)! - Adds a helper component for rendering placeholder text to explain why a DataTable cell has no content. + +- [#3089](https://github.com/primer/react/pull/3089) [`4a6a9f73`](https://github.com/primer/react/commit/4a6a9f7326d5bf1e476a040d7f2f4f61e4d5bd05) Thanks [@mperrotti](https://github.com/mperrotti)! - Adds the ability to exclose indentation for flat tree views. + +- [#3011](https://github.com/primer/react/pull/3011) [`f8132d8e`](https://github.com/primer/react/commit/f8132d8ef653e1bd5a16203ab47f6006a871f662) Thanks [@edersonlucas](https://github.com/edersonlucas)! - Add the `tooltipDirection` property to the `TextInput.Action` component to make the tooltip position flexible. + +### Patch Changes + +- [#3085](https://github.com/primer/react/pull/3085) [`bf8c73b4`](https://github.com/primer/react/commit/bf8c73b4c36422fdd70b56f9ba677b6d6b961e87) Thanks [@mperrotti](https://github.com/mperrotti)! - Renames DataTable 'shrink' column width to 'growCollapse' + +- [#3104](https://github.com/primer/react/pull/3104) [`e46e33b8`](https://github.com/primer/react/commit/e46e33b8be0d553b838887d70893734923bb27d8) Thanks [@iansan5653](https://github.com/iansan5653)! - Fix `IssueLabelToken` treating alternative light schemes as dark + ## 35.23.0 ### Minor Changes diff --git a/package.json b/package.json index ef4925b6285..43a98f29a47 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@primer/react", - "version": "35.23.0", + "version": "35.24.0", "description": "An implementation of GitHub's Primer Design System using React", "main": "lib/index.js", "module": "lib-esm/index.js", From a38c00e6722373599e6be83b857c7f22c2014459 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 31 Mar 2023 13:22:45 -0600 Subject: [PATCH 10/20] Use SSR-compatible slot implementation in TreeView (#3097) * Use SSR-compatible slot implementation in TreeView * Update generated/components.json * Create .changeset/sharp-eggs-crash.md * Disable no-explicit-any lint rule * Update .changeset/sharp-eggs-crash.md --------- Co-authored-by: colebemis --- .changeset/sharp-eggs-crash.md | 7 +++++++ src/TreeView/TreeView.tsx | 35 ++++++++++++++-------------------- src/hooks/useSlots.ts | 3 ++- 3 files changed, 23 insertions(+), 22 deletions(-) create mode 100644 .changeset/sharp-eggs-crash.md diff --git a/.changeset/sharp-eggs-crash.md b/.changeset/sharp-eggs-crash.md new file mode 100644 index 00000000000..3e64d1a28c1 --- /dev/null +++ b/.changeset/sharp-eggs-crash.md @@ -0,0 +1,7 @@ +--- +"@primer/react": patch +--- + +`TreeView` is now SSR-compatible. + +Warning: In this new implementation, `TreeView.LeadingVisual` and `TreeView.TrailingView` must be direct children of `TreeView.Item`. diff --git a/src/TreeView/TreeView.tsx b/src/TreeView/TreeView.tsx index b2644deff60..15c36120e31 100644 --- a/src/TreeView/TreeView.tsx +++ b/src/TreeView/TreeView.tsx @@ -7,16 +7,16 @@ import { import classnames from 'classnames' import React from 'react' import styled, {keyframes} from 'styled-components' -import {get} from '../constants' import {ConfirmationDialog} from '../Dialog/ConfirmationDialog' +import Spinner from '../Spinner' +import Text from '../Text' +import VisuallyHidden from '../_VisuallyHidden' +import {get} from '../constants' import {useControllableState} from '../hooks/useControllableState' import {useId} from '../hooks/useId' import useSafeTimeout from '../hooks/useSafeTimeout' -import Spinner from '../Spinner' +import {useSlots} from '../hooks/useSlots' import sx, {SxProp} from '../sx' -import Text from '../Text' -import createSlots from '../utils/create-slots' -import VisuallyHidden from '../_VisuallyHidden' import {getAccessibleName} from './shared' import {getFirstChildElement, useRovingTabIndex} from './useRovingTabIndex' import {useTypeahead} from './useTypeahead' @@ -318,8 +318,6 @@ export type TreeViewItemProps = { onSelect?: (event: React.MouseEvent | React.KeyboardEvent) => void } -const {Slots, Slot} = createSlots(['LeadingVisual', 'TrailingVisual']) - const Item = React.forwardRef( ( { @@ -334,6 +332,7 @@ const Item = React.forwardRef( }, ref, ) => { + const [slots, rest] = useSlots(children, {leadingVisual: LeadingVisual, trailingVisual: TrailingVisual}) const {expandedStateCache} = React.useContext(RootContext) const labelId = useId() const leadingVisualId = useId() @@ -349,7 +348,7 @@ const Item = React.forwardRef( onChange: onExpandedChange, }) const {level} = React.useContext(ItemContext) - const {hasSubTree, subTree, childrenWithoutSubTree} = useSubTree(children) + const {hasSubTree, subTree, childrenWithoutSubTree} = useSubTree(rest) const [isSubTreeEmpty, setIsSubTreeEmpty] = React.useState(!hasSubTree) const [isFocused, setIsFocused] = React.useState(false) @@ -478,15 +477,9 @@ const Item = React.forwardRef( ) : null}
- - {slots => ( - <> - {slots.LeadingVisual} - {childrenWithoutSubTree} - {slots.TrailingVisual} - - )} - + {slots.leadingVisual} + {childrenWithoutSubTree} + {slots.trailingVisual}
{subTree} @@ -773,14 +766,14 @@ const LeadingVisual: React.FC = props => { const {isExpanded, leadingVisualId} = React.useContext(ItemContext) const children = typeof props.children === 'function' ? props.children({isExpanded}) : props.children return ( - + <>
{props.label}
{children}
- + ) } @@ -790,14 +783,14 @@ const TrailingVisual: React.FC = props => { const {isExpanded, trailingVisualId} = React.useContext(ItemContext) const children = typeof props.children === 'function' ? props.children({isExpanded}) : props.children return ( - + <>
{props.label}
{children}
- + ) } diff --git a/src/hooks/useSlots.ts b/src/hooks/useSlots.ts index 6c1de73a3dd..e9df43bc449 100644 --- a/src/hooks/useSlots.ts +++ b/src/hooks/useSlots.ts @@ -1,7 +1,8 @@ import React from 'react' import {warning} from '../utils/warning' -export type SlotConfig = Record +// eslint-disable-next-line @typescript-eslint/no-explicit-any +export type SlotConfig = Record> type SlotElements = { [Property in keyof Type]: React.ReactElement From 1b8bb16f9d874738bae02f88e458495c39052134 Mon Sep 17 00:00:00 2001 From: Kendall Gassner Date: Fri, 31 Mar 2023 13:55:05 -0700 Subject: [PATCH 11/20] Export useResponsiveValue in index.ts (#3090) * Export useResponsiveValue in index.ts * update snapshot --- .changeset/itchy-years-retire.md | 6 + docs/package-lock.json | 173 ++++-------------- examples/nextjs/package-lock.json | 18 +- .../__snapshots__/exports.test.ts.snap | 1 + src/hooks/useResponsiveValue.ts | 2 +- src/index.ts | 1 + 6 files changed, 52 insertions(+), 149 deletions(-) create mode 100644 .changeset/itchy-years-retire.md diff --git a/.changeset/itchy-years-retire.md b/.changeset/itchy-years-retire.md new file mode 100644 index 00000000000..8f971bab0fa --- /dev/null +++ b/.changeset/itchy-years-retire.md @@ -0,0 +1,6 @@ +--- +'@primer/react': minor +--- + +Experimental Support: exporting useResponsiveValue + diff --git a/docs/package-lock.json b/docs/package-lock.json index b48a7af3372..8f8080996f9 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -4848,36 +4848,6 @@ "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==" }, - "node_modules/babel-eslint": { - "version": "10.1.0", - "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz", - "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==", - "deprecated": "babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.", - "peer": true, - "dependencies": { - "@babel/code-frame": "^7.0.0", - "@babel/parser": "^7.7.0", - "@babel/traverse": "^7.7.0", - "@babel/types": "^7.7.0", - "eslint-visitor-keys": "^1.0.0", - "resolve": "^1.12.0" - }, - "engines": { - "node": ">=6" - }, - "peerDependencies": { - "eslint": ">= 4.12.1" - } - }, - "node_modules/babel-eslint/node_modules/eslint-visitor-keys": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz", - "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==", - "peer": true, - "engines": { - "node": ">=4" - } - }, "node_modules/babel-jest": { "version": "24.9.0", "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-24.9.0.tgz", @@ -23962,19 +23932,6 @@ "is-typedarray": "^1.0.0" } }, - "node_modules/typescript": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.2.tgz", - "integrity": "sha512-wVORMBGO/FAs/++blGNeAVdbNKtIh1rbBL2EyQ1+J9lClJ93KiiKe8PmFIVdXhHcyv44SL9oglmfeSsndo0jRw==", - "peer": true, - "bin": { - "tsc": "bin/tsc", - "tsserver": "bin/tsserver" - }, - "engines": { - "node": ">=12.20" - } - }, "node_modules/unbox-primitive": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz", @@ -27489,8 +27446,7 @@ "ws": { "version": "7.4.5", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.5.tgz", - "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==", - "requires": {} + "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==" } } }, @@ -27909,8 +27865,7 @@ "@mdx-js/react": { "version": "1.6.22", "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.22.tgz", - "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==", - "requires": {} + "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==" }, "@mdx-js/util": { "version": "1.6.22", @@ -28124,8 +28079,7 @@ "@primer/octicons-react": { "version": "17.7.0", "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-17.7.0.tgz", - "integrity": "sha512-rxJiArra+q7lorhzQH223btMcRR8di9TUei9DhQG18jmVEI+wQTY+MypI5FZqU8UyehBOtcnD4TWx+i4Zwpz5Q==", - "requires": {} + "integrity": "sha512-rxJiArra+q7lorhzQH223btMcRR8di9TUei9DhQG18jmVEI+wQTY+MypI5FZqU8UyehBOtcnD4TWx+i4Zwpz5Q==" }, "@primer/primitives": { "version": "4.1.0", @@ -28160,8 +28114,7 @@ "@primer/octicons-react": { "version": "16.1.1", "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-16.1.1.tgz", - "integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw==", - "requires": {} + "integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw==" }, "@primer/primitives": { "version": "7.6.0", @@ -28173,8 +28126,7 @@ "@radix-ui/react-polymorphic": { "version": "0.0.14", "resolved": "https://registry.npmjs.org/@radix-ui/react-polymorphic/-/react-polymorphic-0.0.14.tgz", - "integrity": "sha512-9nsMZEDU3LeIUeHJrpkkhZVxu/9Fc7P2g2I3WR+uA9mTbNC3hGaabi0dV6wg0CfHb+m4nSs1pejbE/5no3MJTA==", - "requires": {} + "integrity": "sha512-9nsMZEDU3LeIUeHJrpkkhZVxu/9Fc7P2g2I3WR+uA9mTbNC3hGaabi0dV6wg0CfHb+m4nSs1pejbE/5no3MJTA==" }, "@react-aria/ssr": { "version": "3.1.0", @@ -29308,8 +29260,7 @@ "acorn-jsx": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz", - "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==", - "requires": {} + "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==" }, "acorn-walk": { "version": "6.2.0", @@ -29344,14 +29295,12 @@ "ajv-errors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz", - "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==", - "requires": {} + "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==" }, "ajv-keywords": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", - "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "requires": {} + "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==" }, "alphanum-sort": { "version": "1.0.2", @@ -29707,28 +29656,6 @@ "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==" }, - "babel-eslint": { - "version": "10.1.0", - "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz", - "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==", - "peer": true, - "requires": { - "@babel/code-frame": "^7.0.0", - "@babel/parser": "^7.7.0", - "@babel/traverse": "^7.7.0", - "@babel/types": "^7.7.0", - "eslint-visitor-keys": "^1.0.0", - "resolve": "^1.12.0" - }, - "dependencies": { - "eslint-visitor-keys": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz", - "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==", - "peer": true - } - } - }, "babel-jest": { "version": "24.9.0", "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-24.9.0.tgz", @@ -29900,8 +29827,7 @@ "babel-plugin-remove-graphql-queries": { "version": "2.16.1", "resolved": "https://registry.npmjs.org/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-2.16.1.tgz", - "integrity": "sha512-PkHJuRodMp4p617a/ZVhV8elBhRoFpOTpdu2DaApXJFIsDJWhjZ8d4BGbbFCT/yKJrhRDTdqg1r5AhWEaEUKkw==", - "requires": {} + "integrity": "sha512-PkHJuRodMp4p617a/ZVhV8elBhRoFpOTpdu2DaApXJFIsDJWhjZ8d4BGbbFCT/yKJrhRDTdqg1r5AhWEaEUKkw==" }, "babel-plugin-styled-components": { "version": "2.0.2", @@ -31834,8 +31760,7 @@ "cssnano-utils": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-2.0.1.tgz", - "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==", - "requires": {} + "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==" }, "csso": { "version": "4.2.0", @@ -32466,8 +32391,7 @@ "ws": { "version": "7.4.6", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", - "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", - "requires": {} + "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==" } } }, @@ -32491,8 +32415,7 @@ "ws": { "version": "7.4.6", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", - "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", - "requires": {} + "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==" } } }, @@ -33214,8 +33137,7 @@ "eslint-plugin-react-hooks": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz", - "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==", - "requires": {} + "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==" }, "eslint-scope": { "version": "5.1.1", @@ -34515,8 +34437,7 @@ "babel-plugin-remove-graphql-queries": { "version": "3.7.1", "resolved": "https://registry.npmjs.org/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-3.7.1.tgz", - "integrity": "sha512-9fANNkzCZJ0i65FXGnoeg/knDPC3riazCDyRrcH/2DVovxChAMSN2mqh/7eohJ8IrB/0e6cwLO4VirqanSk1Hw==", - "requires": {} + "integrity": "sha512-9fANNkzCZJ0i65FXGnoeg/knDPC3riazCDyRrcH/2DVovxChAMSN2mqh/7eohJ8IrB/0e6cwLO4VirqanSk1Hw==" }, "braces": { "version": "3.0.2", @@ -35889,8 +35810,7 @@ "ws": { "version": "7.5.0", "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.0.tgz", - "integrity": "sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw==", - "requires": {} + "integrity": "sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw==" } } }, @@ -36350,14 +36270,12 @@ "graphql-type-json": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/graphql-type-json/-/graphql-type-json-0.3.2.tgz", - "integrity": "sha512-J+vjof74oMlCWXSvt0DOf2APEdZOCdubEvGDUAlqH//VBYcOYsGgRW7Xzorr44LvkjiuvecWc8fChxuZZbChtg==", - "requires": {} + "integrity": "sha512-J+vjof74oMlCWXSvt0DOf2APEdZOCdubEvGDUAlqH//VBYcOYsGgRW7Xzorr44LvkjiuvecWc8fChxuZZbChtg==" }, "graphql-ws": { "version": "4.9.0", "resolved": "https://registry.npmjs.org/graphql-ws/-/graphql-ws-4.9.0.tgz", - "integrity": "sha512-sHkK9+lUm20/BGawNEWNtVAeJzhZeBg21VmvmLoT5NdGVeZWv5PdIhkcayQIAgjSyyQ17WMKmbDijIPG2On+Ag==", - "requires": {} + "integrity": "sha512-sHkK9+lUm20/BGawNEWNtVAeJzhZeBg21VmvmLoT5NdGVeZWv5PdIhkcayQIAgjSyyQ17WMKmbDijIPG2On+Ag==" }, "gray-matter": { "version": "4.0.3", @@ -36886,8 +36804,7 @@ "icss-utils": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", - "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", - "requires": {} + "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==" }, "ieee754": { "version": "1.2.1", @@ -37633,8 +37550,7 @@ "isomorphic-ws": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-4.0.1.tgz", - "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==", - "requires": {} + "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==" }, "isstream": { "version": "0.1.2", @@ -38059,8 +37975,7 @@ "jest-pnp-resolver": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz", - "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==", - "requires": {} + "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==" }, "jest-regex-util": { "version": "24.9.0", @@ -39129,8 +39044,7 @@ "meros": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/meros/-/meros-1.1.4.tgz", - "integrity": "sha512-E9ZXfK9iQfG9s73ars9qvvvbSIkJZF5yOo9j4tcwM5tN8mUKfj/EKN5PzOr3ZH0y5wL7dLAHw3RVEfpQV9Q7VQ==", - "requires": {} + "integrity": "sha512-E9ZXfK9iQfG9s73ars9qvvvbSIkJZF5yOo9j4tcwM5tN8mUKfj/EKN5PzOr3ZH0y5wL7dLAHw3RVEfpQV9Q7VQ==" }, "methods": { "version": "1.1.2", @@ -40434,32 +40348,27 @@ "postcss-discard-comments": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.0.1.tgz", - "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==", - "requires": {} + "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==" }, "postcss-discard-duplicates": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.1.tgz", - "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==", - "requires": {} + "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==" }, "postcss-discard-empty": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.0.1.tgz", - "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==", - "requires": {} + "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==" }, "postcss-discard-overridden": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.0.1.tgz", - "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==", - "requires": {} + "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==" }, "postcss-flexbugs-fixes": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz", - "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==", - "requires": {} + "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==" }, "postcss-loader": { "version": "5.3.0", @@ -40585,8 +40494,7 @@ "postcss-modules-extract-imports": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", - "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", - "requires": {} + "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==" }, "postcss-modules-local-by-default": { "version": "4.0.0", @@ -40624,8 +40532,7 @@ "postcss-normalize-charset": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.1.tgz", - "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==", - "requires": {} + "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==" }, "postcss-normalize-display-values": { "version": "5.0.1", @@ -40996,8 +40903,7 @@ "prism-react-renderer": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-1.2.1.tgz", - "integrity": "sha512-w23ch4f75V1Tnz8DajsYKvY5lF7H1+WvzvLUcF0paFxkTHSp42RS0H5CttdN2Q8RR3DRGZ9v5xD/h3n8C8kGmg==", - "requires": {} + "integrity": "sha512-w23ch4f75V1Tnz8DajsYKvY5lF7H1+WvzvLUcF0paFxkTHSp42RS0H5CttdN2Q8RR3DRGZ9v5xD/h3n8C8kGmg==" }, "prismjs": { "version": "1.28.0", @@ -41382,8 +41288,7 @@ "react-docgen-typescript": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-2.0.0.tgz", - "integrity": "sha512-lPf+KJKAo6a9klKyK4y8WwgaX+6t5/HkVjHOpJDMbmaXfXcV7zP0QgWtnEOc3ccEUXKvlHMGUMIS9f6Zgo1BSw==", - "requires": {} + "integrity": "sha512-lPf+KJKAo6a9klKyK4y8WwgaX+6t5/HkVjHOpJDMbmaXfXcV7zP0QgWtnEOc3ccEUXKvlHMGUMIS9f6Zgo1BSw==" }, "react-dom": { "version": "17.0.1", @@ -41556,14 +41461,12 @@ "react-side-effect": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz", - "integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==", - "requires": {} + "integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==" }, "react-simple-code-editor": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-simple-code-editor/-/react-simple-code-editor-0.11.0.tgz", - "integrity": "sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw==", - "requires": {} + "integrity": "sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw==" }, "react-style-singleton": { "version": "2.1.1", @@ -43745,8 +43648,7 @@ "stylis-rule-sheet": { "version": "0.0.10", "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz", - "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==", - "requires": {} + "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==" }, "subscriptions-transport-ws": { "version": "0.9.19", @@ -44442,12 +44344,6 @@ "is-typedarray": "^1.0.0" } }, - "typescript": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.2.tgz", - "integrity": "sha512-wVORMBGO/FAs/++blGNeAVdbNKtIh1rbBL2EyQ1+J9lClJ93KiiKe8PmFIVdXhHcyv44SL9oglmfeSsndo0jRw==", - "peer": true - }, "unbox-primitive": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz", @@ -44981,8 +44877,7 @@ "use-callback-ref": { "version": "1.2.5", "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.2.5.tgz", - "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==", - "requires": {} + "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==" }, "use-sidecar": { "version": "1.0.5", diff --git a/examples/nextjs/package-lock.json b/examples/nextjs/package-lock.json index f986cdca0cd..d6bc9328517 100644 --- a/examples/nextjs/package-lock.json +++ b/examples/nextjs/package-lock.json @@ -18,7 +18,7 @@ }, "../..": { "name": "@primer/react", - "version": "35.22.0", + "version": "35.23.0", "license": "MIT", "dependencies": { "@github/combobox-nav": "^2.1.5", @@ -50,7 +50,7 @@ "@actions/core": "1.10.0", "@babel/cli": "7.21.0", "@babel/core": "7.21.0", - "@babel/eslint-parser": "7.19.1", + "@babel/eslint-parser": "7.21.3", "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6", "@babel/plugin-proposal-optional-chaining": "7.21.0", "@babel/plugin-transform-modules-commonjs": "7.21.2", @@ -130,6 +130,7 @@ "eslint-plugin-react": "7.32.2", "eslint-plugin-react-hooks": "4.6.0", "eslint-plugin-storybook": "0.6.11", + "eslint-plugin-testing-library": "5.10.2", "fast-glob": "3.2.12", "filesize": "10.0.6", "front-matter": "4.0.2", @@ -141,7 +142,7 @@ "jest-fail-on-console": "3.0.2", "jest-matchmedia-mock": "1.1.0", "jest-styled-components": "6.3.4", - "jest-watch-typeahead": "2.1.1", + "jest-watch-typeahead": "2.2.2", "jscodeshift": "0.14.0", "lint-staged": "13.1.0", "lodash.groupby": "4.6.0", @@ -1365,8 +1366,7 @@ "@primer/octicons-react": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-18.2.0.tgz", - "integrity": "sha512-taT0l99qztqU9NnNo0HCutm3mEjBmXcaqWlmCLvU2MrKVrMZF3HuwaguPhNl/rNk8+mpgtDSTTDPBlpI0MtPPA==", - "requires": {} + "integrity": "sha512-taT0l99qztqU9NnNo0HCutm3mEjBmXcaqWlmCLvU2MrKVrMZF3HuwaguPhNl/rNk8+mpgtDSTTDPBlpI0MtPPA==" }, "@primer/react": { "version": "file:../..", @@ -1374,7 +1374,7 @@ "@actions/core": "1.10.0", "@babel/cli": "7.21.0", "@babel/core": "7.21.0", - "@babel/eslint-parser": "7.19.1", + "@babel/eslint-parser": "7.21.3", "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6", "@babel/plugin-proposal-optional-chaining": "7.21.0", "@babel/plugin-transform-modules-commonjs": "7.21.2", @@ -1473,6 +1473,7 @@ "eslint-plugin-react": "7.32.2", "eslint-plugin-react-hooks": "4.6.0", "eslint-plugin-storybook": "0.6.11", + "eslint-plugin-testing-library": "5.10.2", "fast-glob": "3.2.12", "filesize": "10.0.6", "focus-visible": "^5.2.0", @@ -1487,7 +1488,7 @@ "jest-fail-on-console": "3.0.2", "jest-matchmedia-mock": "1.1.0", "jest-styled-components": "6.3.4", - "jest-watch-typeahead": "2.1.1", + "jest-watch-typeahead": "2.2.2", "jscodeshift": "0.14.0", "lint-staged": "13.1.0", "lodash.groupby": "4.6.0", @@ -1825,8 +1826,7 @@ "stylis-rule-sheet": { "version": "0.0.10", "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz", - "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==", - "requires": {} + "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==" }, "supports-color": { "version": "5.5.0", diff --git a/src/__tests__/__snapshots__/exports.test.ts.snap b/src/__tests__/__snapshots__/exports.test.ts.snap index 461edba6579..517df570e80 100644 --- a/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/src/__tests__/__snapshots__/exports.test.ts.snap @@ -90,6 +90,7 @@ exports[`@primer/react should not update exports without a semver change 1`] = ` "useOverlay", "useRefObjectAsForwardedRef", "useResizeObserver", + "useResponsiveValue", "useSSRSafeId", "useSafeTimeout", "useTheme", diff --git a/src/hooks/useResponsiveValue.ts b/src/hooks/useResponsiveValue.ts index 8813abd72d2..7a712117b54 100644 --- a/src/hooks/useResponsiveValue.ts +++ b/src/hooks/useResponsiveValue.ts @@ -45,7 +45,7 @@ export function isResponsiveValue(value: any): value is ResponsiveValue { * const value = useResponsiveValue({regular: 'foo', narrow: 'bar'}) * console.log(value) // 'bar' */ -// TODO: Improve SRR support +// TODO: Improve SSR support export function useResponsiveValue(value: T, fallback: F): FlattenResponsiveValue | F { // Check viewport size // TODO: What is the performance cost of creating media query listeners in this hook? diff --git a/src/index.ts b/src/index.ts index e6b83b39a2a..f8db192ecec 100644 --- a/src/index.ts +++ b/src/index.ts @@ -41,6 +41,7 @@ export {useFocusZone} from './hooks/useFocusZone' export type {FocusZoneHookSettings} from './hooks/useFocusZone' export {useRefObjectAsForwardedRef} from './hooks/useRefObjectAsForwardedRef' export {useResizeObserver} from './hooks/useResizeObserver' +export {useResponsiveValue} from './hooks/useResponsiveValue' // Components export {default as Radio} from './Radio' From 16cae51a243a66707ddd1f027d9429ee3e0f45b6 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Mon, 3 Apr 2023 10:20:08 -0400 Subject: [PATCH 12/20] Fixes transparent bg PointerBox and adds stories (#3094) * fixes transparent bg pointerbox and adds stories * Update generated/components.json * adds changeset * Update generated/components.json * fixes linting errors * updates path to docs data --------- Co-authored-by: mperrotti --- .changeset/violet-cobras-sparkle.md | 5 ++ docs/content/PointerBox.mdx | 2 +- generated/components.json | 37 +++++++----- src/Caret.tsx | 2 + src/{ => PointerBox}/PointerBox.docs.json | 0 src/PointerBox/PointerBox.stories.tsx | 48 +++++++++++++++ src/{ => PointerBox}/PointerBox.tsx | 27 +++++++-- src/PointerBox/index.ts | 1 + src/__tests__/PointerBox.test.tsx | 12 +++- .../__snapshots__/Caret.test.tsx.snap | 60 +++++++++++++++++++ .../__snapshots__/PointerBox.test.tsx.snap | 35 ++++++++++- 11 files changed, 204 insertions(+), 25 deletions(-) create mode 100644 .changeset/violet-cobras-sparkle.md rename src/{ => PointerBox}/PointerBox.docs.json (100%) create mode 100644 src/PointerBox/PointerBox.stories.tsx rename src/{ => PointerBox}/PointerBox.tsx (51%) create mode 100644 src/PointerBox/index.ts diff --git a/.changeset/violet-cobras-sparkle.md b/.changeset/violet-cobras-sparkle.md new file mode 100644 index 00000000000..506e99078a8 --- /dev/null +++ b/.changeset/violet-cobras-sparkle.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Fixes styling issue where PointerBox would show a border between the caret and the box if the background color was transparent. diff --git a/docs/content/PointerBox.mdx b/docs/content/PointerBox.mdx index 48b169a2be9..42f069d809d 100644 --- a/docs/content/PointerBox.mdx +++ b/docs/content/PointerBox.mdx @@ -6,7 +6,7 @@ status: Alpha source: https://github.com/primer/react/blob/main/src/PointerBox.tsx --- -import data from '../../src/PointerBox.docs.json' +import data from '../../src/PointerBox/PointerBox.docs.json' ## Examples diff --git a/generated/components.json b/generated/components.json index 4ccda03af29..5840bfae98e 100644 --- a/generated/components.json +++ b/generated/components.json @@ -342,22 +342,6 @@ ], "subcomponents": [] }, - "pointer_box": { - "id": "pointer_box", - "name": "PointerBox", - "status": "alpha", - "a11yReviewed": false, - "stories": [], - "props": [ - { - "name": "caret", - "type": "| 'top' | 'top-left' | 'top-right' | 'right' | 'right-top' | 'right-bottom' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-top' | 'left-bottom'", - "defaultValue": "'bottom'", - "description": "Sets the location of the caret. The format is [edge]-[position on edge]. For example, right-top will position the caret on the top of the right edge of the box. Use top" - } - ], - "subcomponents": [] - }, "popover": { "id": "popover", "name": "Popover", @@ -3136,6 +3120,27 @@ ], "subcomponents": [] }, + "pointer_box": { + "id": "pointer_box", + "name": "PointerBox", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-pointerbox--default", + "code": "() => Pointer box content" + } + ], + "props": [ + { + "name": "caret", + "type": "| 'top' | 'top-left' | 'top-right' | 'right' | 'right-top' | 'right-bottom' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-top' | 'left-bottom'", + "defaultValue": "'bottom'", + "description": "Sets the location of the caret. The format is [edge]-[position on edge]. For example, right-top will position the caret on the top of the right edge of the box. Use top" + } + ], + "subcomponents": [] + }, "portal": { "id": "portal", "name": "Portal", diff --git a/src/Caret.tsx b/src/Caret.tsx index b4e0a4d446f..ed58fc4da8b 100644 --- a/src/Caret.tsx +++ b/src/Caret.tsx @@ -106,8 +106,10 @@ function Caret(props: CaretProps) { // then we don't need an offset margin [`margin${perp}`]: align ? null : -size, }} + role="presentation" > + diff --git a/src/PointerBox.docs.json b/src/PointerBox/PointerBox.docs.json similarity index 100% rename from src/PointerBox.docs.json rename to src/PointerBox/PointerBox.docs.json diff --git a/src/PointerBox/PointerBox.stories.tsx b/src/PointerBox/PointerBox.stories.tsx new file mode 100644 index 00000000000..b76c37feac1 --- /dev/null +++ b/src/PointerBox/PointerBox.stories.tsx @@ -0,0 +1,48 @@ +import React from 'react' +import {Story, Meta} from '@storybook/react' +import PointerBox from './PointerBox' +import {ComponentProps} from '../utils/types' + +export default { + title: 'Components/PointerBox', + component: PointerBox, +} as Meta + +export const Default = () => Pointer box content + +export const Playground: Story> = args => ( + Pointer box content +) +Playground.args = { + caret: 'top', +} +Playground.argTypes = { + caret: { + control: { + type: 'radio', + }, + options: [ + 'top', + 'top-left', + 'top-right', + 'right', + 'right-top', + 'right-bottom', + 'bottom', + 'bottom-left', + 'bottom-right', + 'left', + 'left-top', + 'left-bottom', + ], + }, + bg: { + control: 'color', + }, + borderColor: { + control: 'color', + }, + border: { + control: 'number', + }, +} diff --git a/src/PointerBox.tsx b/src/PointerBox/PointerBox.tsx similarity index 51% rename from src/PointerBox.tsx rename to src/PointerBox/PointerBox.tsx index 45ebf065171..1ee7ef1e064 100644 --- a/src/PointerBox.tsx +++ b/src/PointerBox/PointerBox.tsx @@ -1,7 +1,9 @@ import React from 'react' -import Box, {BoxProps} from './Box' -import Caret, {CaretProps} from './Caret' -import {SxProp} from './sx' +import {ThemeContext} from 'styled-components' +import Box, {BoxProps} from '../Box' +import Caret, {CaretProps} from '../Caret' +import {get} from '../constants' +import {SxProp} from '../sx' // FIXME: Make this work with BetterStyledSystem types type MutatedSxProps = { @@ -22,8 +24,12 @@ export type PointerBoxProps = { function PointerBox(props: PointerBoxProps) { // don't destructure these, just grab them - const {bg, border, borderColor, theme, sx} = props + const themeContext = React.useContext(ThemeContext) + const {bg, border, borderColor, theme: themeProp, sx} = props const {caret, children, ...boxProps} = props + const {bg: sxBg, backgroundColor, ...sxRest} = sx || {} + const theme = themeProp || themeContext + const customBackground = bg || sxBg || backgroundColor const caretProps = { bg: bg || sx?.bg || sx?.backgroundColor, @@ -36,7 +42,18 @@ function PointerBox(props: PointerBoxProps) { const defaultBoxProps = {borderWidth: '1px', borderStyle: 'solid', borderColor: 'border.default', borderRadius: 2} return ( - + {children} diff --git a/src/PointerBox/index.ts b/src/PointerBox/index.ts new file mode 100644 index 00000000000..2fe24d0940f --- /dev/null +++ b/src/PointerBox/index.ts @@ -0,0 +1 @@ +export {default, PointerBoxProps} from './PointerBox' diff --git a/src/__tests__/PointerBox.test.tsx b/src/__tests__/PointerBox.test.tsx index 41fcc693b68..4b5c6f99aa1 100644 --- a/src/__tests__/PointerBox.test.tsx +++ b/src/__tests__/PointerBox.test.tsx @@ -43,7 +43,15 @@ describe('PointerBox', () => { const mockBg = 'red' const viaStyledSystem = renderStyles() const viaSxProp = renderStyles() - expect(viaStyledSystem).toEqual(expect.objectContaining({'background-color': mockBg})) - expect(viaSxProp).toEqual(expect.objectContaining({'background-color': mockBg})) + expect(viaStyledSystem).toEqual( + expect.objectContaining({ + 'background-image': 'linear-gradient(var(--custom-bg),var(--custom-bg)),linear-gradient(#ffffff,#ffffff)', + }), + ) + expect(viaSxProp).toEqual( + expect.objectContaining({ + 'background-image': 'linear-gradient(var(--custom-bg),var(--custom-bg)),linear-gradient(#ffffff,#ffffff)', + }), + ) }) }) diff --git a/src/__tests__/__snapshots__/Caret.test.tsx.snap b/src/__tests__/__snapshots__/Caret.test.tsx.snap index 4111e94915d..c7af9d5eddb 100644 --- a/src/__tests__/__snapshots__/Caret.test.tsx.snap +++ b/src/__tests__/__snapshots__/Caret.test.tsx.snap @@ -3,6 +3,7 @@ exports[`Caret renders cardinal directions 1`] = ` + + + + + + + + + + + + + + + + in with relative positioning 1`] = ` > in with relative positioning 1`] = ` + + Date: Mon, 3 Apr 2023 13:10:25 -0500 Subject: [PATCH 13/20] chore(deps-dev): bump jest-axe from 7.0.0 to 7.0.1 (#3110) Bumps [jest-axe](https://github.com/nickcolley/jest-axe) from 7.0.0 to 7.0.1. - [Release notes](https://github.com/nickcolley/jest-axe/releases) - [Changelog](https://github.com/NickColley/jest-axe/blob/main/CHANGELOG.md) - [Commits](https://github.com/nickcolley/jest-axe/compare/v7.0.0...v7.0.1) --- updated-dependencies: - dependency-name: jest-axe dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 18 +++++++++--------- package.json | 2 +- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4588747fd65..9841a1f3f70 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@primer/react", - "version": "35.23.0", + "version": "35.24.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@primer/react", - "version": "35.23.0", + "version": "35.24.0", "license": "MIT", "dependencies": { "@github/combobox-nav": "^2.1.5", @@ -125,7 +125,7 @@ "gzip-size": "6.0.0", "husky": "8.0.2", "jest": "29.4.2", - "jest-axe": "7.0.0", + "jest-axe": "7.0.1", "jest-environment-jsdom": "29.4.3", "jest-fail-on-console": "3.0.2", "jest-matchmedia-mock": "1.1.0", @@ -38534,9 +38534,9 @@ } }, "node_modules/jest-axe": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/jest-axe/-/jest-axe-7.0.0.tgz", - "integrity": "sha512-y+TH+GGH7zOYABWv5IrtGx4ove1dYcVg9Nv9pJZcqKQ+2goJCkAYoHAqergPaV/y9hh1Q9vZykjSXC/2U0Mjyg==", + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/jest-axe/-/jest-axe-7.0.1.tgz", + "integrity": "sha512-1JoEla6gL4rcsTxEWm+VBcWMwOhP3f9w4dH7/YW3H41nU08Dds3gUFqxgdAq/pzBNPpauC3QPr/BuO+0W8eamg==", "dev": true, "dependencies": { "axe-core": "4.5.1", @@ -84740,9 +84740,9 @@ } }, "jest-axe": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/jest-axe/-/jest-axe-7.0.0.tgz", - "integrity": "sha512-y+TH+GGH7zOYABWv5IrtGx4ove1dYcVg9Nv9pJZcqKQ+2goJCkAYoHAqergPaV/y9hh1Q9vZykjSXC/2U0Mjyg==", + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/jest-axe/-/jest-axe-7.0.1.tgz", + "integrity": "sha512-1JoEla6gL4rcsTxEWm+VBcWMwOhP3f9w4dH7/YW3H41nU08Dds3gUFqxgdAq/pzBNPpauC3QPr/BuO+0W8eamg==", "dev": true, "requires": { "axe-core": "4.5.1", diff --git a/package.json b/package.json index 43a98f29a47..9e23cf7fb4e 100644 --- a/package.json +++ b/package.json @@ -203,7 +203,7 @@ "gzip-size": "6.0.0", "husky": "8.0.2", "jest": "29.4.2", - "jest-axe": "7.0.0", + "jest-axe": "7.0.1", "jest-environment-jsdom": "29.4.3", "jest-fail-on-console": "3.0.2", "jest-matchmedia-mock": "1.1.0", From fceb28b4dcec21e9f05ea73644cd4499db223309 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 3 Apr 2023 13:11:00 -0500 Subject: [PATCH 14/20] chore(deps-dev): bump rollup from 3.12.1 to 3.20.2 (#3109) Bumps [rollup](https://github.com/rollup/rollup) from 3.12.1 to 3.20.2. - [Release notes](https://github.com/rollup/rollup/releases) - [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md) - [Commits](https://github.com/rollup/rollup/compare/v3.12.1...v3.20.2) --- updated-dependencies: - dependency-name: rollup dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 14 +++++++------- package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9841a1f3f70..c3dd7036d2c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -153,7 +153,7 @@ "react-test-renderer": "18.2.0", "recast": "0.22.0", "rimraf": "4.1.2", - "rollup": "3.12.1", + "rollup": "3.20.2", "rollup-plugin-visualizer": "5.9.0", "semver": "7.3.8", "size-limit": "8.2.4", @@ -50993,9 +50993,9 @@ } }, "node_modules/rollup": { - "version": "3.12.1", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.12.1.tgz", - "integrity": "sha512-t9elERrz2i4UU9z7AwISj3CQcXP39cWxgRWLdf4Tm6aKm1eYrqHIgjzXBgb67GNY1sZckTFFi0oMozh3/S++Ig==", + "version": "3.20.2", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.20.2.tgz", + "integrity": "sha512-3zwkBQl7Ai7MFYQE0y1MeQ15+9jsi7XxfrqwTb/9EK8D9C9+//EBR4M+CuA1KODRaNbFez/lWxA5vhEGZp4MUg==", "dev": true, "bin": { "rollup": "dist/bin/rollup" @@ -94043,9 +94043,9 @@ } }, "rollup": { - "version": "3.12.1", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.12.1.tgz", - "integrity": "sha512-t9elERrz2i4UU9z7AwISj3CQcXP39cWxgRWLdf4Tm6aKm1eYrqHIgjzXBgb67GNY1sZckTFFi0oMozh3/S++Ig==", + "version": "3.20.2", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.20.2.tgz", + "integrity": "sha512-3zwkBQl7Ai7MFYQE0y1MeQ15+9jsi7XxfrqwTb/9EK8D9C9+//EBR4M+CuA1KODRaNbFez/lWxA5vhEGZp4MUg==", "dev": true, "requires": { "fsevents": "~2.3.2" diff --git a/package.json b/package.json index 9e23cf7fb4e..c416e512e42 100644 --- a/package.json +++ b/package.json @@ -231,7 +231,7 @@ "react-test-renderer": "18.2.0", "recast": "0.22.0", "rimraf": "4.1.2", - "rollup": "3.12.1", + "rollup": "3.20.2", "rollup-plugin-visualizer": "5.9.0", "semver": "7.3.8", "size-limit": "8.2.4", From 2cc8cbcb04fa0e5490c528ab2e51146850d8e8d0 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 3 Apr 2023 13:11:34 -0500 Subject: [PATCH 15/20] chore(deps-dev): bump webpack from 5.76.0 to 5.77.0 (#3108) Bumps [webpack](https://github.com/webpack/webpack) from 5.76.0 to 5.77.0. - [Release notes](https://github.com/webpack/webpack/releases) - [Commits](https://github.com/webpack/webpack/compare/v5.76.0...v5.77.0) --- updated-dependencies: - dependency-name: webpack dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 14 +++++++------- package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index c3dd7036d2c..a773b288a3f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -166,7 +166,7 @@ "unist-util-find": "1.0.2", "unist-util-find-before": "3.0.0", "unist-util-flat-filter": "2.0.0", - "webpack": "5.76.0", + "webpack": "5.77.0", "yaml": "2.2.1" }, "engines": { @@ -54994,9 +54994,9 @@ } }, "node_modules/webpack": { - "version": "5.76.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.76.0.tgz", - "integrity": "sha512-l5sOdYBDunyf72HW8dF23rFtWq/7Zgvt/9ftMof71E/yUb1YLOBmTgA2K4vQthB3kotMrSj609txVE0dnr2fjA==", + "version": "5.77.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.77.0.tgz", + "integrity": "sha512-sbGNjBr5Ya5ss91yzjeJTLKyfiwo5C628AFjEa6WSXcZa4E+F57om3Cc8xLb1Jh0b243AWuSYRf3dn7HVeFQ9Q==", "dev": true, "dependencies": { "@types/eslint-scope": "^3.7.3", @@ -97114,9 +97114,9 @@ "dev": true }, "webpack": { - "version": "5.76.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.76.0.tgz", - "integrity": "sha512-l5sOdYBDunyf72HW8dF23rFtWq/7Zgvt/9ftMof71E/yUb1YLOBmTgA2K4vQthB3kotMrSj609txVE0dnr2fjA==", + "version": "5.77.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.77.0.tgz", + "integrity": "sha512-sbGNjBr5Ya5ss91yzjeJTLKyfiwo5C628AFjEa6WSXcZa4E+F57om3Cc8xLb1Jh0b243AWuSYRf3dn7HVeFQ9Q==", "dev": true, "requires": { "@types/eslint-scope": "^3.7.3", diff --git a/package.json b/package.json index c416e512e42..cb5a417880e 100644 --- a/package.json +++ b/package.json @@ -244,7 +244,7 @@ "unist-util-find": "1.0.2", "unist-util-find-before": "3.0.0", "unist-util-flat-filter": "2.0.0", - "webpack": "5.76.0", + "webpack": "5.77.0", "yaml": "2.2.1" }, "peerDependencies": { From 6488987025cf76bc9158001044098f1cda8c00cd Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 3 Apr 2023 13:11:58 -0500 Subject: [PATCH 16/20] chore(deps-dev): bump @storybook/addon-a11y from 6.5.14 to 6.5.16 (#3111) Bumps [@storybook/addon-a11y](https://github.com/storybookjs/storybook/tree/HEAD/addons/a11y) from 6.5.14 to 6.5.16. - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/v6.5.16/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v6.5.16/addons/a11y) --- updated-dependencies: - dependency-name: "@storybook/addon-a11y" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 280 +++++++++++++++++++++++++++++++++++++++++----- package.json | 2 +- 2 files changed, 250 insertions(+), 32 deletions(-) diff --git a/package-lock.json b/package-lock.json index a773b288a3f..a6bf4407a02 100644 --- a/package-lock.json +++ b/package-lock.json @@ -57,7 +57,7 @@ "@rollup/plugin-typescript": "11.0.0", "@rollup/plugin-virtual": "3.0.1", "@size-limit/preset-big-lib": "8.2.4", - "@storybook/addon-a11y": "6.5.14", + "@storybook/addon-a11y": "6.5.16", "@storybook/addon-actions": "6.5.16", "@storybook/addon-essentials": "6.5.16", "@storybook/addon-interactions": "6.5.14", @@ -6924,19 +6924,19 @@ } }, "node_modules/@storybook/addon-a11y": { - "version": "6.5.14", - "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-6.5.14.tgz", - "integrity": "sha512-nQf+pTcIXZr4dnrn4eDQoIeR62P6aHFFLoNBTcKFsESmHO3KYMC709j6uU1N+GNFMj9SEZYMav3iQC1Ue9BUnw==", + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-6.5.16.tgz", + "integrity": "sha512-/e9s34o+TmEhy+Q3/YzbRJ5AJ/Sy0gjZXlvsCrcRpiQLdt5JRbN8s+Lbn/FWxy8U1Tb1wlLYlqjJ+fYi5RrS3A==", "dev": true, "dependencies": { - "@storybook/addons": "6.5.14", - "@storybook/api": "6.5.14", - "@storybook/channels": "6.5.14", - "@storybook/client-logger": "6.5.14", - "@storybook/components": "6.5.14", - "@storybook/core-events": "6.5.14", + "@storybook/addons": "6.5.16", + "@storybook/api": "6.5.16", + "@storybook/channels": "6.5.16", + "@storybook/client-logger": "6.5.16", + "@storybook/components": "6.5.16", + "@storybook/core-events": "6.5.16", "@storybook/csf": "0.0.2--canary.4566f4d.1", - "@storybook/theming": "6.5.14", + "@storybook/theming": "6.5.16", "axe-core": "^4.2.0", "core-js": "^3.8.2", "global": "^4.4.0", @@ -6963,15 +6963,142 @@ } } }, - "node_modules/@storybook/addon-a11y/node_modules/@storybook/theming": { - "version": "6.5.14", - "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.5.14.tgz", - "integrity": "sha512-3ff6RLZGaIil/AFJ0/BRlE2hhdPrC5v6wGbRfroZVmGldRCxio/7+KAA3LH6cuHnjK5MeBcCBaHuxzXqGmbEFw==", + "node_modules/@storybook/addon-a11y/node_modules/@storybook/addons": { + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.5.16.tgz", + "integrity": "sha512-p3DqQi+8QRL5k7jXhXmJZLsE/GqHqyY6PcoA1oNTJr0try48uhTGUOYkgzmqtDaa/qPFO5LP+xCPzZXckGtquQ==", "dev": true, "dependencies": { - "@storybook/client-logger": "6.5.14", + "@storybook/api": "6.5.16", + "@storybook/channels": "6.5.16", + "@storybook/client-logger": "6.5.16", + "@storybook/core-events": "6.5.16", + "@storybook/csf": "0.0.2--canary.4566f4d.1", + "@storybook/router": "6.5.16", + "@storybook/theming": "6.5.16", + "@types/webpack-env": "^1.16.0", + "core-js": "^3.8.2", + "global": "^4.4.0", + "regenerator-runtime": "^0.13.7" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@storybook/addon-a11y/node_modules/@storybook/api": { + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.5.16.tgz", + "integrity": "sha512-HOsuT8iomqeTMQJrRx5U8nsC7lJTwRr1DhdD0SzlqL4c80S/7uuCy4IZvOt4sYQjOzW5fOo/kamcoBXyLproTA==", + "dev": true, + "dependencies": { + "@storybook/channels": "6.5.16", + "@storybook/client-logger": "6.5.16", + "@storybook/core-events": "6.5.16", + "@storybook/csf": "0.0.2--canary.4566f4d.1", + "@storybook/router": "6.5.16", + "@storybook/semver": "^7.3.2", + "@storybook/theming": "6.5.16", + "core-js": "^3.8.2", + "fast-deep-equal": "^3.1.3", + "global": "^4.4.0", + "lodash": "^4.17.21", + "memoizerific": "^1.11.3", + "regenerator-runtime": "^0.13.7", + "store2": "^2.12.0", + "telejson": "^6.0.8", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@storybook/addon-a11y/node_modules/@storybook/channels": { + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.5.16.tgz", + "integrity": "sha512-VylzaWQZaMozEwZPJdyJoz+0jpDa8GRyaqu9TGG6QGv+KU5POoZaGLDkRE7TzWkyyP0KQLo80K99MssZCpgSeg==", + "dev": true, + "dependencies": { + "core-js": "^3.8.2", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/addon-a11y/node_modules/@storybook/client-logger": { + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.5.16.tgz", + "integrity": "sha512-pxcNaCj3ItDdicPTXTtmYJE3YC1SjxFrBmHcyrN+nffeNyiMuViJdOOZzzzucTUG0wcOOX8jaSyak+nnHg5H1Q==", + "dev": true, + "dependencies": { + "core-js": "^3.8.2", + "global": "^4.4.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/addon-a11y/node_modules/@storybook/components": { + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.5.16.tgz", + "integrity": "sha512-LzBOFJKITLtDcbW9jXl0/PaG+4xAz25PK8JxPZpIALbmOpYWOAPcO6V9C2heX6e6NgWFMUxjplkULEk9RCQMNA==", + "dev": true, + "dependencies": { + "@storybook/client-logger": "6.5.16", + "@storybook/csf": "0.0.2--canary.4566f4d.1", + "@storybook/theming": "6.5.16", + "core-js": "^3.8.2", + "memoizerific": "^1.11.3", + "qs": "^6.10.0", + "regenerator-runtime": "^0.13.7", + "util-deprecate": "^1.0.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@storybook/addon-a11y/node_modules/@storybook/core-events": { + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.5.16.tgz", + "integrity": "sha512-qMZQwmvzpH5F2uwNUllTPg6eZXr2OaYZQRRN8VZJiuorZzDNdAFmiVWMWdkThwmyLEJuQKXxqCL8lMj/7PPM+g==", + "dev": true, + "dependencies": { + "core-js": "^3.8.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/addon-a11y/node_modules/@storybook/router": { + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.5.16.tgz", + "integrity": "sha512-ZgeP8a5YV/iuKbv31V8DjPxlV4AzorRiR8OuSt/KqaiYXNXlOoQDz/qMmiNcrshrfLpmkzoq7fSo4T8lWo2UwQ==", + "dev": true, + "dependencies": { + "@storybook/client-logger": "6.5.16", "core-js": "^3.8.2", "memoizerific": "^1.11.3", + "qs": "^6.10.0", "regenerator-runtime": "^0.13.7" }, "funding": { @@ -60835,19 +60962,19 @@ } }, "@storybook/addon-a11y": { - "version": "6.5.14", - "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-6.5.14.tgz", - "integrity": "sha512-nQf+pTcIXZr4dnrn4eDQoIeR62P6aHFFLoNBTcKFsESmHO3KYMC709j6uU1N+GNFMj9SEZYMav3iQC1Ue9BUnw==", + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-6.5.16.tgz", + "integrity": "sha512-/e9s34o+TmEhy+Q3/YzbRJ5AJ/Sy0gjZXlvsCrcRpiQLdt5JRbN8s+Lbn/FWxy8U1Tb1wlLYlqjJ+fYi5RrS3A==", "dev": true, "requires": { - "@storybook/addons": "6.5.14", - "@storybook/api": "6.5.14", - "@storybook/channels": "6.5.14", - "@storybook/client-logger": "6.5.14", - "@storybook/components": "6.5.14", - "@storybook/core-events": "6.5.14", + "@storybook/addons": "6.5.16", + "@storybook/api": "6.5.16", + "@storybook/channels": "6.5.16", + "@storybook/client-logger": "6.5.16", + "@storybook/components": "6.5.16", + "@storybook/core-events": "6.5.16", "@storybook/csf": "0.0.2--canary.4566f4d.1", - "@storybook/theming": "6.5.14", + "@storybook/theming": "6.5.16", "axe-core": "^4.2.0", "core-js": "^3.8.2", "global": "^4.4.0", @@ -60858,15 +60985,106 @@ "util-deprecate": "^1.0.2" }, "dependencies": { - "@storybook/theming": { - "version": "6.5.14", - "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.5.14.tgz", - "integrity": "sha512-3ff6RLZGaIil/AFJ0/BRlE2hhdPrC5v6wGbRfroZVmGldRCxio/7+KAA3LH6cuHnjK5MeBcCBaHuxzXqGmbEFw==", + "@storybook/addons": { + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.5.16.tgz", + "integrity": "sha512-p3DqQi+8QRL5k7jXhXmJZLsE/GqHqyY6PcoA1oNTJr0try48uhTGUOYkgzmqtDaa/qPFO5LP+xCPzZXckGtquQ==", "dev": true, "requires": { - "@storybook/client-logger": "6.5.14", + "@storybook/api": "6.5.16", + "@storybook/channels": "6.5.16", + "@storybook/client-logger": "6.5.16", + "@storybook/core-events": "6.5.16", + "@storybook/csf": "0.0.2--canary.4566f4d.1", + "@storybook/router": "6.5.16", + "@storybook/theming": "6.5.16", + "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", + "global": "^4.4.0", + "regenerator-runtime": "^0.13.7" + } + }, + "@storybook/api": { + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.5.16.tgz", + "integrity": "sha512-HOsuT8iomqeTMQJrRx5U8nsC7lJTwRr1DhdD0SzlqL4c80S/7uuCy4IZvOt4sYQjOzW5fOo/kamcoBXyLproTA==", + "dev": true, + "requires": { + "@storybook/channels": "6.5.16", + "@storybook/client-logger": "6.5.16", + "@storybook/core-events": "6.5.16", + "@storybook/csf": "0.0.2--canary.4566f4d.1", + "@storybook/router": "6.5.16", + "@storybook/semver": "^7.3.2", + "@storybook/theming": "6.5.16", + "core-js": "^3.8.2", + "fast-deep-equal": "^3.1.3", + "global": "^4.4.0", + "lodash": "^4.17.21", "memoizerific": "^1.11.3", + "regenerator-runtime": "^0.13.7", + "store2": "^2.12.0", + "telejson": "^6.0.8", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + } + }, + "@storybook/channels": { + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.5.16.tgz", + "integrity": "sha512-VylzaWQZaMozEwZPJdyJoz+0jpDa8GRyaqu9TGG6QGv+KU5POoZaGLDkRE7TzWkyyP0KQLo80K99MssZCpgSeg==", + "dev": true, + "requires": { + "core-js": "^3.8.2", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + } + }, + "@storybook/client-logger": { + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.5.16.tgz", + "integrity": "sha512-pxcNaCj3ItDdicPTXTtmYJE3YC1SjxFrBmHcyrN+nffeNyiMuViJdOOZzzzucTUG0wcOOX8jaSyak+nnHg5H1Q==", + "dev": true, + "requires": { + "core-js": "^3.8.2", + "global": "^4.4.0" + } + }, + "@storybook/components": { + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.5.16.tgz", + "integrity": "sha512-LzBOFJKITLtDcbW9jXl0/PaG+4xAz25PK8JxPZpIALbmOpYWOAPcO6V9C2heX6e6NgWFMUxjplkULEk9RCQMNA==", + "dev": true, + "requires": { + "@storybook/client-logger": "6.5.16", + "@storybook/csf": "0.0.2--canary.4566f4d.1", + "@storybook/theming": "6.5.16", + "core-js": "^3.8.2", + "memoizerific": "^1.11.3", + "qs": "^6.10.0", + "regenerator-runtime": "^0.13.7", + "util-deprecate": "^1.0.2" + } + }, + "@storybook/core-events": { + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.5.16.tgz", + "integrity": "sha512-qMZQwmvzpH5F2uwNUllTPg6eZXr2OaYZQRRN8VZJiuorZzDNdAFmiVWMWdkThwmyLEJuQKXxqCL8lMj/7PPM+g==", + "dev": true, + "requires": { + "core-js": "^3.8.2" + } + }, + "@storybook/router": { + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.5.16.tgz", + "integrity": "sha512-ZgeP8a5YV/iuKbv31V8DjPxlV4AzorRiR8OuSt/KqaiYXNXlOoQDz/qMmiNcrshrfLpmkzoq7fSo4T8lWo2UwQ==", + "dev": true, + "requires": { + "@storybook/client-logger": "6.5.16", + "core-js": "^3.8.2", + "memoizerific": "^1.11.3", + "qs": "^6.10.0", "regenerator-runtime": "^0.13.7" } } diff --git a/package.json b/package.json index cb5a417880e..797af242309 100644 --- a/package.json +++ b/package.json @@ -135,7 +135,7 @@ "@rollup/plugin-typescript": "11.0.0", "@rollup/plugin-virtual": "3.0.1", "@size-limit/preset-big-lib": "8.2.4", - "@storybook/addon-a11y": "6.5.14", + "@storybook/addon-a11y": "6.5.16", "@storybook/addon-actions": "6.5.16", "@storybook/addon-essentials": "6.5.16", "@storybook/addon-interactions": "6.5.14", From 1d55bdff3dc1c786652acbfbb923f2f1df39e834 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 3 Apr 2023 18:12:42 +0000 Subject: [PATCH 17/20] chore(deps): bump @primer/gatsby-theme-doctocat in /docs (#3107) Bumps @primer/gatsby-theme-doctocat from 4.4.1 to 4.4.2. --- updated-dependencies: - dependency-name: "@primer/gatsby-theme-doctocat" dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- docs/package-lock.json | 187 ++++++++++++++++++++++++++++++++--------- docs/package.json | 2 +- 2 files changed, 147 insertions(+), 42 deletions(-) diff --git a/docs/package-lock.json b/docs/package-lock.json index 8f8080996f9..5e942a14295 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -8,7 +8,7 @@ "name": "docs", "version": "1.0.0", "dependencies": { - "@primer/gatsby-theme-doctocat": "^4.4.1", + "@primer/gatsby-theme-doctocat": "^4.4.2", "@primer/octicons-react": "^17.7.0", "@primer/primitives": "4.1.0", "@styled-system/prop-types": "^5.1.0", @@ -2766,9 +2766,9 @@ "integrity": "sha512-+3tuJScHWRifOAyMV+cn1I533j+PcprvPXbKnH1W7N+vhaGyaaHTao8Dkyyhxbhklmumcf8XR+Lz6dK1ojDrCg==" }, "node_modules/@primer/gatsby-theme-doctocat": { - "version": "4.4.1", - "resolved": "https://registry.npmjs.org/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-4.4.1.tgz", - "integrity": "sha512-wiPGsSLDv6J+svY8N7o7QHSsIT2YsV5YpaLAT8XtOa9yNPfqzfjR/OHM3M+siH2E2vI9Sv4I322nUpxYIcPBIw==", + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-4.4.2.tgz", + "integrity": "sha512-SVl7Zxwhse3lJUIfs+DKYyzayCD8aJjeT4i+F/vJLJ/yTg13WKKkIaHis+IbLs9mXO2Calots7Xodj8tLheYLA==", "dependencies": { "@babel/preset-env": "^7.5.5", "@babel/preset-react": "^7.0.0", @@ -4848,6 +4848,36 @@ "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==" }, + "node_modules/babel-eslint": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz", + "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==", + "deprecated": "babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.", + "peer": true, + "dependencies": { + "@babel/code-frame": "^7.0.0", + "@babel/parser": "^7.7.0", + "@babel/traverse": "^7.7.0", + "@babel/types": "^7.7.0", + "eslint-visitor-keys": "^1.0.0", + "resolve": "^1.12.0" + }, + "engines": { + "node": ">=6" + }, + "peerDependencies": { + "eslint": ">= 4.12.1" + } + }, + "node_modules/babel-eslint/node_modules/eslint-visitor-keys": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz", + "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==", + "peer": true, + "engines": { + "node": ">=4" + } + }, "node_modules/babel-jest": { "version": "24.9.0", "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-24.9.0.tgz", @@ -23932,6 +23962,19 @@ "is-typedarray": "^1.0.0" } }, + "node_modules/typescript": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.3.tgz", + "integrity": "sha512-xv8mOEDnigb/tN9PSMTwSEqAnUvkoXMQlicOb0IUVDBSQCgBSaAAROUZYy2IcUy5qU6XajK5jjjO7TMWqBTKZA==", + "peer": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=12.20" + } + }, "node_modules/unbox-primitive": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz", @@ -27446,7 +27489,8 @@ "ws": { "version": "7.4.5", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.5.tgz", - "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==" + "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==", + "requires": {} } } }, @@ -27865,7 +27909,8 @@ "@mdx-js/react": { "version": "1.6.22", "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.22.tgz", - "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==" + "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==", + "requires": {} }, "@mdx-js/util": { "version": "1.6.22", @@ -27975,9 +28020,9 @@ "integrity": "sha512-+3tuJScHWRifOAyMV+cn1I533j+PcprvPXbKnH1W7N+vhaGyaaHTao8Dkyyhxbhklmumcf8XR+Lz6dK1ojDrCg==" }, "@primer/gatsby-theme-doctocat": { - "version": "4.4.1", - "resolved": "https://registry.npmjs.org/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-4.4.1.tgz", - "integrity": "sha512-wiPGsSLDv6J+svY8N7o7QHSsIT2YsV5YpaLAT8XtOa9yNPfqzfjR/OHM3M+siH2E2vI9Sv4I322nUpxYIcPBIw==", + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-4.4.2.tgz", + "integrity": "sha512-SVl7Zxwhse3lJUIfs+DKYyzayCD8aJjeT4i+F/vJLJ/yTg13WKKkIaHis+IbLs9mXO2Calots7Xodj8tLheYLA==", "requires": { "@babel/preset-env": "^7.5.5", "@babel/preset-react": "^7.0.0", @@ -28079,7 +28124,8 @@ "@primer/octicons-react": { "version": "17.7.0", "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-17.7.0.tgz", - "integrity": "sha512-rxJiArra+q7lorhzQH223btMcRR8di9TUei9DhQG18jmVEI+wQTY+MypI5FZqU8UyehBOtcnD4TWx+i4Zwpz5Q==" + "integrity": "sha512-rxJiArra+q7lorhzQH223btMcRR8di9TUei9DhQG18jmVEI+wQTY+MypI5FZqU8UyehBOtcnD4TWx+i4Zwpz5Q==", + "requires": {} }, "@primer/primitives": { "version": "4.1.0", @@ -28114,7 +28160,8 @@ "@primer/octicons-react": { "version": "16.1.1", "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-16.1.1.tgz", - "integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw==" + "integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw==", + "requires": {} }, "@primer/primitives": { "version": "7.6.0", @@ -28126,7 +28173,8 @@ "@radix-ui/react-polymorphic": { "version": "0.0.14", "resolved": "https://registry.npmjs.org/@radix-ui/react-polymorphic/-/react-polymorphic-0.0.14.tgz", - "integrity": "sha512-9nsMZEDU3LeIUeHJrpkkhZVxu/9Fc7P2g2I3WR+uA9mTbNC3hGaabi0dV6wg0CfHb+m4nSs1pejbE/5no3MJTA==" + "integrity": "sha512-9nsMZEDU3LeIUeHJrpkkhZVxu/9Fc7P2g2I3WR+uA9mTbNC3hGaabi0dV6wg0CfHb+m4nSs1pejbE/5no3MJTA==", + "requires": {} }, "@react-aria/ssr": { "version": "3.1.0", @@ -29260,7 +29308,8 @@ "acorn-jsx": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz", - "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==" + "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==", + "requires": {} }, "acorn-walk": { "version": "6.2.0", @@ -29295,12 +29344,14 @@ "ajv-errors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz", - "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==" + "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==", + "requires": {} }, "ajv-keywords": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", - "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==" + "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", + "requires": {} }, "alphanum-sort": { "version": "1.0.2", @@ -29656,6 +29707,28 @@ "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==" }, + "babel-eslint": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz", + "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==", + "peer": true, + "requires": { + "@babel/code-frame": "^7.0.0", + "@babel/parser": "^7.7.0", + "@babel/traverse": "^7.7.0", + "@babel/types": "^7.7.0", + "eslint-visitor-keys": "^1.0.0", + "resolve": "^1.12.0" + }, + "dependencies": { + "eslint-visitor-keys": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz", + "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==", + "peer": true + } + } + }, "babel-jest": { "version": "24.9.0", "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-24.9.0.tgz", @@ -29827,7 +29900,8 @@ "babel-plugin-remove-graphql-queries": { "version": "2.16.1", "resolved": "https://registry.npmjs.org/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-2.16.1.tgz", - "integrity": "sha512-PkHJuRodMp4p617a/ZVhV8elBhRoFpOTpdu2DaApXJFIsDJWhjZ8d4BGbbFCT/yKJrhRDTdqg1r5AhWEaEUKkw==" + "integrity": "sha512-PkHJuRodMp4p617a/ZVhV8elBhRoFpOTpdu2DaApXJFIsDJWhjZ8d4BGbbFCT/yKJrhRDTdqg1r5AhWEaEUKkw==", + "requires": {} }, "babel-plugin-styled-components": { "version": "2.0.2", @@ -31760,7 +31834,8 @@ "cssnano-utils": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-2.0.1.tgz", - "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==" + "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==", + "requires": {} }, "csso": { "version": "4.2.0", @@ -32391,7 +32466,8 @@ "ws": { "version": "7.4.6", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", - "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==" + "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", + "requires": {} } } }, @@ -32415,7 +32491,8 @@ "ws": { "version": "7.4.6", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", - "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==" + "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", + "requires": {} } } }, @@ -33137,7 +33214,8 @@ "eslint-plugin-react-hooks": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz", - "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==" + "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==", + "requires": {} }, "eslint-scope": { "version": "5.1.1", @@ -34437,7 +34515,8 @@ "babel-plugin-remove-graphql-queries": { "version": "3.7.1", "resolved": "https://registry.npmjs.org/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-3.7.1.tgz", - "integrity": "sha512-9fANNkzCZJ0i65FXGnoeg/knDPC3riazCDyRrcH/2DVovxChAMSN2mqh/7eohJ8IrB/0e6cwLO4VirqanSk1Hw==" + "integrity": "sha512-9fANNkzCZJ0i65FXGnoeg/knDPC3riazCDyRrcH/2DVovxChAMSN2mqh/7eohJ8IrB/0e6cwLO4VirqanSk1Hw==", + "requires": {} }, "braces": { "version": "3.0.2", @@ -35810,7 +35889,8 @@ "ws": { "version": "7.5.0", "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.0.tgz", - "integrity": "sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw==" + "integrity": "sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw==", + "requires": {} } } }, @@ -36270,12 +36350,14 @@ "graphql-type-json": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/graphql-type-json/-/graphql-type-json-0.3.2.tgz", - "integrity": "sha512-J+vjof74oMlCWXSvt0DOf2APEdZOCdubEvGDUAlqH//VBYcOYsGgRW7Xzorr44LvkjiuvecWc8fChxuZZbChtg==" + "integrity": "sha512-J+vjof74oMlCWXSvt0DOf2APEdZOCdubEvGDUAlqH//VBYcOYsGgRW7Xzorr44LvkjiuvecWc8fChxuZZbChtg==", + "requires": {} }, "graphql-ws": { "version": "4.9.0", "resolved": "https://registry.npmjs.org/graphql-ws/-/graphql-ws-4.9.0.tgz", - "integrity": "sha512-sHkK9+lUm20/BGawNEWNtVAeJzhZeBg21VmvmLoT5NdGVeZWv5PdIhkcayQIAgjSyyQ17WMKmbDijIPG2On+Ag==" + "integrity": "sha512-sHkK9+lUm20/BGawNEWNtVAeJzhZeBg21VmvmLoT5NdGVeZWv5PdIhkcayQIAgjSyyQ17WMKmbDijIPG2On+Ag==", + "requires": {} }, "gray-matter": { "version": "4.0.3", @@ -36804,7 +36886,8 @@ "icss-utils": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", - "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==" + "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", + "requires": {} }, "ieee754": { "version": "1.2.1", @@ -37550,7 +37633,8 @@ "isomorphic-ws": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-4.0.1.tgz", - "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==" + "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==", + "requires": {} }, "isstream": { "version": "0.1.2", @@ -37975,7 +38059,8 @@ "jest-pnp-resolver": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz", - "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==" + "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==", + "requires": {} }, "jest-regex-util": { "version": "24.9.0", @@ -39044,7 +39129,8 @@ "meros": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/meros/-/meros-1.1.4.tgz", - "integrity": "sha512-E9ZXfK9iQfG9s73ars9qvvvbSIkJZF5yOo9j4tcwM5tN8mUKfj/EKN5PzOr3ZH0y5wL7dLAHw3RVEfpQV9Q7VQ==" + "integrity": "sha512-E9ZXfK9iQfG9s73ars9qvvvbSIkJZF5yOo9j4tcwM5tN8mUKfj/EKN5PzOr3ZH0y5wL7dLAHw3RVEfpQV9Q7VQ==", + "requires": {} }, "methods": { "version": "1.1.2", @@ -40348,27 +40434,32 @@ "postcss-discard-comments": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.0.1.tgz", - "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==" + "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==", + "requires": {} }, "postcss-discard-duplicates": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.1.tgz", - "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==" + "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==", + "requires": {} }, "postcss-discard-empty": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.0.1.tgz", - "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==" + "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==", + "requires": {} }, "postcss-discard-overridden": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.0.1.tgz", - "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==" + "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==", + "requires": {} }, "postcss-flexbugs-fixes": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz", - "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==" + "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==", + "requires": {} }, "postcss-loader": { "version": "5.3.0", @@ -40494,7 +40585,8 @@ "postcss-modules-extract-imports": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", - "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==" + "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", + "requires": {} }, "postcss-modules-local-by-default": { "version": "4.0.0", @@ -40532,7 +40624,8 @@ "postcss-normalize-charset": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.1.tgz", - "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==" + "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==", + "requires": {} }, "postcss-normalize-display-values": { "version": "5.0.1", @@ -40903,7 +40996,8 @@ "prism-react-renderer": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-1.2.1.tgz", - "integrity": "sha512-w23ch4f75V1Tnz8DajsYKvY5lF7H1+WvzvLUcF0paFxkTHSp42RS0H5CttdN2Q8RR3DRGZ9v5xD/h3n8C8kGmg==" + "integrity": "sha512-w23ch4f75V1Tnz8DajsYKvY5lF7H1+WvzvLUcF0paFxkTHSp42RS0H5CttdN2Q8RR3DRGZ9v5xD/h3n8C8kGmg==", + "requires": {} }, "prismjs": { "version": "1.28.0", @@ -41288,7 +41382,8 @@ "react-docgen-typescript": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-2.0.0.tgz", - "integrity": "sha512-lPf+KJKAo6a9klKyK4y8WwgaX+6t5/HkVjHOpJDMbmaXfXcV7zP0QgWtnEOc3ccEUXKvlHMGUMIS9f6Zgo1BSw==" + "integrity": "sha512-lPf+KJKAo6a9klKyK4y8WwgaX+6t5/HkVjHOpJDMbmaXfXcV7zP0QgWtnEOc3ccEUXKvlHMGUMIS9f6Zgo1BSw==", + "requires": {} }, "react-dom": { "version": "17.0.1", @@ -41461,12 +41556,14 @@ "react-side-effect": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz", - "integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==" + "integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==", + "requires": {} }, "react-simple-code-editor": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-simple-code-editor/-/react-simple-code-editor-0.11.0.tgz", - "integrity": "sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw==" + "integrity": "sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw==", + "requires": {} }, "react-style-singleton": { "version": "2.1.1", @@ -43648,7 +43745,8 @@ "stylis-rule-sheet": { "version": "0.0.10", "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz", - "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==" + "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==", + "requires": {} }, "subscriptions-transport-ws": { "version": "0.9.19", @@ -44344,6 +44442,12 @@ "is-typedarray": "^1.0.0" } }, + "typescript": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.3.tgz", + "integrity": "sha512-xv8mOEDnigb/tN9PSMTwSEqAnUvkoXMQlicOb0IUVDBSQCgBSaAAROUZYy2IcUy5qU6XajK5jjjO7TMWqBTKZA==", + "peer": true + }, "unbox-primitive": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz", @@ -44877,7 +44981,8 @@ "use-callback-ref": { "version": "1.2.5", "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.2.5.tgz", - "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==" + "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==", + "requires": {} }, "use-sidecar": { "version": "1.0.5", diff --git a/docs/package.json b/docs/package.json index 5ce6f177662..e92496e1921 100644 --- a/docs/package.json +++ b/docs/package.json @@ -13,7 +13,7 @@ "npm": ">=7" }, "dependencies": { - "@primer/gatsby-theme-doctocat": "^4.4.1", + "@primer/gatsby-theme-doctocat": "^4.4.2", "@primer/octicons-react": "^17.7.0", "@primer/primitives": "4.1.0", "@styled-system/prop-types": "^5.1.0", From 3b512006a402b627b79cbf629c182b05ed78b3f4 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Mon, 3 Apr 2023 13:13:14 -0500 Subject: [PATCH 18/20] chore(project): update @playwright/test dependency (#3070) Co-authored-by: Josh Black --- package-lock.json | 30 +++++++++++++++--------------- package.json | 2 +- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/package-lock.json b/package-lock.json index a6bf4407a02..ad03f51d67c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -48,7 +48,7 @@ "@changesets/cli": "2.26.0", "@github/markdownlint-github": "^0.3.0", "@github/prettier-config": "0.0.6", - "@playwright/test": "1.31.2", + "@playwright/test": "1.32.0", "@rollup/plugin-babel": "6.0.3", "@rollup/plugin-commonjs": "24.0.1", "@rollup/plugin-node-resolve": "15.0.1", @@ -6456,13 +6456,13 @@ } }, "node_modules/@playwright/test": { - "version": "1.31.2", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.31.2.tgz", - "integrity": "sha512-BYVutxDI4JeZKV1+ups6dt5WiqKhjBtIYowyZIJ3kBDmJgsuPKsqqKNIMFbUePLSCmp2cZu+BDL427RcNKTRYw==", + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.32.0.tgz", + "integrity": "sha512-zOdGloaF0jeec7hqoLqM5S3L2rR4WxMJs6lgiAeR70JlH7Ml54ZPoIIf3X7cvnKde3Q9jJ/gaxkFh8fYI9s1rg==", "dev": true, "dependencies": { "@types/node": "*", - "playwright-core": "1.31.2" + "playwright-core": "1.32.0" }, "bin": { "playwright": "cli.js" @@ -6475,9 +6475,9 @@ } }, "node_modules/@playwright/test/node_modules/playwright-core": { - "version": "1.31.2", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.31.2.tgz", - "integrity": "sha512-a1dFgCNQw4vCsG7bnojZjDnPewZcw7tZUNFN0ZkcLYKj+mPmXvg4MpaaKZ5SgqPsOmqIf2YsVRkgqiRDxD+fDQ==", + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.32.0.tgz", + "integrity": "sha512-Z9Ij17X5Z3bjpp6XKujGBp9Gv4eViESac9aDmwgQFUEJBW0K80T21m/Z+XJQlu4cNsvPygw33b6V1Va6Bda5zQ==", "dev": true, "bin": { "playwright": "cli.js" @@ -60647,20 +60647,20 @@ } }, "@playwright/test": { - "version": "1.31.2", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.31.2.tgz", - "integrity": "sha512-BYVutxDI4JeZKV1+ups6dt5WiqKhjBtIYowyZIJ3kBDmJgsuPKsqqKNIMFbUePLSCmp2cZu+BDL427RcNKTRYw==", + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.32.0.tgz", + "integrity": "sha512-zOdGloaF0jeec7hqoLqM5S3L2rR4WxMJs6lgiAeR70JlH7Ml54ZPoIIf3X7cvnKde3Q9jJ/gaxkFh8fYI9s1rg==", "dev": true, "requires": { "@types/node": "*", "fsevents": "2.3.2", - "playwright-core": "1.31.2" + "playwright-core": "1.32.0" }, "dependencies": { "playwright-core": { - "version": "1.31.2", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.31.2.tgz", - "integrity": "sha512-a1dFgCNQw4vCsG7bnojZjDnPewZcw7tZUNFN0ZkcLYKj+mPmXvg4MpaaKZ5SgqPsOmqIf2YsVRkgqiRDxD+fDQ==", + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.32.0.tgz", + "integrity": "sha512-Z9Ij17X5Z3bjpp6XKujGBp9Gv4eViESac9aDmwgQFUEJBW0K80T21m/Z+XJQlu4cNsvPygw33b6V1Va6Bda5zQ==", "dev": true } } diff --git a/package.json b/package.json index 797af242309..2da1ff99e5e 100644 --- a/package.json +++ b/package.json @@ -126,7 +126,7 @@ "@changesets/cli": "2.26.0", "@github/markdownlint-github": "^0.3.0", "@github/prettier-config": "0.0.6", - "@playwright/test": "1.31.2", + "@playwright/test": "1.32.0", "@rollup/plugin-babel": "6.0.3", "@rollup/plugin-commonjs": "24.0.1", "@rollup/plugin-node-resolve": "15.0.1", From 0ca1becc9a3c1e49774afb93bdc2c2c1e16aa495 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Mon, 3 Apr 2023 15:10:28 -0500 Subject: [PATCH 19/20] chore(dev-deps): bump @testing-library/dom and @testing-library/react (#3083) * chore(dev-deps): updating @testing-library/dom and @testing-library/react * chore: update react version script * chore: update testing-library/dom dependency for React 17 --------- Co-authored-by: Josh Black Co-authored-by: Mike Perrotti --- package-lock.json | 206 +++++++++++++++++++++++++++++++----- package.json | 4 +- script/set-react-version.js | 6 +- 3 files changed, 187 insertions(+), 29 deletions(-) diff --git a/package-lock.json b/package-lock.json index ad03f51d67c..359407c1794 100644 --- a/package-lock.json +++ b/package-lock.json @@ -70,9 +70,9 @@ "@storybook/test-runner": "0.9.1", "@storybook/testing-library": "0.0.13", "@storybook/theming": "6.5.16", - "@testing-library/dom": "8.19.1", + "@testing-library/dom": "9.2.0", "@testing-library/jest-dom": "5.16.5", - "@testing-library/react": "13.4.0", + "@testing-library/react": "14.0.0", "@testing-library/react-hooks": "7.0.2", "@testing-library/user-event": "^14.3.0", "@types/chroma-js": "2.1.4", @@ -24493,6 +24493,25 @@ "ts-dedent": "^2.2.0" } }, + "node_modules/@storybook/testing-library/node_modules/@testing-library/dom": { + "version": "8.20.0", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.0.tgz", + "integrity": "sha512-d9ULIT+a4EXLX3UU8FBjauG9NnsZHkHztXoIcTsOKoOw030fyjheN9svkTULjJxtYag9DZz5Jz5qkWZDPxTFwA==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^5.0.1", + "aria-query": "^5.0.0", + "chalk": "^4.1.0", + "dom-accessibility-api": "^0.5.9", + "lz-string": "^1.4.4", + "pretty-format": "^27.0.2" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/@storybook/testing-library/node_modules/@testing-library/user-event": { "version": "13.5.0", "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.5.0.tgz", @@ -24509,6 +24528,76 @@ "@testing-library/dom": ">=7.21.4" } }, + "node_modules/@storybook/testing-library/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/@storybook/testing-library/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/@storybook/testing-library/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/@storybook/testing-library/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "node_modules/@storybook/testing-library/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@storybook/testing-library/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/@storybook/theming": { "version": "6.5.16", "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.5.16.tgz", @@ -24720,9 +24809,9 @@ } }, "node_modules/@testing-library/dom": { - "version": "8.19.1", - "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.19.1.tgz", - "integrity": "sha512-P6iIPyYQ+qH8CvGauAqanhVnjrnRe0IZFSYCeGkSRW9q3u8bdVn2NPI+lasFyVsEQn1J/IFmp5Aax41+dAP9wg==", + "version": "9.2.0", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.2.0.tgz", + "integrity": "sha512-xTEnpUKiV/bMyEsE5bT4oYA0x0Z/colMtxzUY8bKyPXBNLn/e0V4ZjBZkEhms0xE4pv9QsPfSRu9AWS4y5wGvA==", "dev": true, "dependencies": { "@babel/code-frame": "^7.10.4", @@ -24731,11 +24820,11 @@ "aria-query": "^5.0.0", "chalk": "^4.1.0", "dom-accessibility-api": "^0.5.9", - "lz-string": "^1.4.4", + "lz-string": "^1.5.0", "pretty-format": "^27.0.2" }, "engines": { - "node": ">=12" + "node": ">=14" } }, "node_modules/@testing-library/dom/node_modules/ansi-styles": { @@ -24898,17 +24987,17 @@ } }, "node_modules/@testing-library/react": { - "version": "13.4.0", - "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-13.4.0.tgz", - "integrity": "sha512-sXOGON+WNTh3MLE9rve97ftaZukN3oNf2KjDy7YTx6hcTO2uuLHuCGynMDhFwGw/jYf4OJ2Qk0i4i79qMNNkyw==", + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-14.0.0.tgz", + "integrity": "sha512-S04gSNJbYE30TlIMLTzv6QCTzt9AqIF5y6s6SzVFILNcNvbV/jU96GeiTPillGQo+Ny64M/5PV7klNYYgv5Dfg==", "dev": true, "dependencies": { "@babel/runtime": "^7.12.5", - "@testing-library/dom": "^8.5.0", + "@testing-library/dom": "^9.0.0", "@types/react-dom": "^18.0.0" }, "engines": { - "node": ">=12" + "node": ">=14" }, "peerDependencies": { "react": "^18.0.0", @@ -45606,9 +45695,9 @@ } }, "node_modules/lz-string": { - "version": "1.4.4", - "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz", - "integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=", + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz", + "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==", "dev": true, "bin": { "lz-string": "bin/bin.js" @@ -73987,6 +74076,22 @@ "ts-dedent": "^2.2.0" }, "dependencies": { + "@testing-library/dom": { + "version": "8.20.0", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.0.tgz", + "integrity": "sha512-d9ULIT+a4EXLX3UU8FBjauG9NnsZHkHztXoIcTsOKoOw030fyjheN9svkTULjJxtYag9DZz5Jz5qkWZDPxTFwA==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^5.0.1", + "aria-query": "^5.0.0", + "chalk": "^4.1.0", + "dom-accessibility-api": "^0.5.9", + "lz-string": "^1.4.4", + "pretty-format": "^27.0.2" + } + }, "@testing-library/user-event": { "version": "13.5.0", "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.5.0.tgz", @@ -73995,6 +74100,55 @@ "requires": { "@babel/runtime": "^7.12.5" } + }, + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } } } }, @@ -74185,9 +74339,9 @@ } }, "@testing-library/dom": { - "version": "8.19.1", - "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.19.1.tgz", - "integrity": "sha512-P6iIPyYQ+qH8CvGauAqanhVnjrnRe0IZFSYCeGkSRW9q3u8bdVn2NPI+lasFyVsEQn1J/IFmp5Aax41+dAP9wg==", + "version": "9.2.0", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.2.0.tgz", + "integrity": "sha512-xTEnpUKiV/bMyEsE5bT4oYA0x0Z/colMtxzUY8bKyPXBNLn/e0V4ZjBZkEhms0xE4pv9QsPfSRu9AWS4y5wGvA==", "dev": true, "requires": { "@babel/code-frame": "^7.10.4", @@ -74196,7 +74350,7 @@ "aria-query": "^5.0.0", "chalk": "^4.1.0", "dom-accessibility-api": "^0.5.9", - "lz-string": "^1.4.4", + "lz-string": "^1.5.0", "pretty-format": "^27.0.2" }, "dependencies": { @@ -74320,13 +74474,13 @@ } }, "@testing-library/react": { - "version": "13.4.0", - "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-13.4.0.tgz", - "integrity": "sha512-sXOGON+WNTh3MLE9rve97ftaZukN3oNf2KjDy7YTx6hcTO2uuLHuCGynMDhFwGw/jYf4OJ2Qk0i4i79qMNNkyw==", + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-14.0.0.tgz", + "integrity": "sha512-S04gSNJbYE30TlIMLTzv6QCTzt9AqIF5y6s6SzVFILNcNvbV/jU96GeiTPillGQo+Ny64M/5PV7klNYYgv5Dfg==", "dev": true, "requires": { "@babel/runtime": "^7.12.5", - "@testing-library/dom": "^8.5.0", + "@testing-library/dom": "^9.0.0", "@types/react-dom": "^18.0.0" } }, @@ -90173,9 +90327,9 @@ } }, "lz-string": { - "version": "1.4.4", - "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz", - "integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=", + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz", + "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==", "dev": true }, "magic-string": { diff --git a/package.json b/package.json index 2da1ff99e5e..6f3651f447c 100644 --- a/package.json +++ b/package.json @@ -148,9 +148,9 @@ "@storybook/test-runner": "0.9.1", "@storybook/testing-library": "0.0.13", "@storybook/theming": "6.5.16", - "@testing-library/dom": "8.19.1", + "@testing-library/dom": "9.2.0", "@testing-library/jest-dom": "5.16.5", - "@testing-library/react": "13.4.0", + "@testing-library/react": "14.0.0", "@testing-library/react-hooks": "7.0.2", "@testing-library/user-event": "^14.3.0", "@types/chroma-js": "2.1.4", diff --git a/script/set-react-version.js b/script/set-react-version.js index 53f3caae925..56a0e17b800 100644 --- a/script/set-react-version.js +++ b/script/set-react-version.js @@ -21,6 +21,10 @@ const versions = new Map([ name: 'react-test-renderer', version: '17.0.2', }, + { + name: '@testing-library/dom', + version: '^8.0.0', + }, { name: '@testing-library/react', version: '12.1.5', @@ -54,7 +58,7 @@ const versions = new Map([ }, { name: '@testing-library/react', - version: '13.4.0', + version: '14.0.0', }, ], }, From 42037c98b845a99cdf922802e9869e1bb3c3f07d Mon Sep 17 00:00:00 2001 From: Josh Black Date: Mon, 3 Apr 2023 16:02:37 -0500 Subject: [PATCH 20/20] feat(DataTable): add Table.Skeleton (#3055) * feat(DataTable): add TableSkeleton and loading * docs(DataTable): update loading story * feat(TableSkeleton): add skeleton shimmer for loading * chore: adjust skeleton widths * fix(Table): add support for HCM on skeleton item * feat(DataTable): add Table.Skeleton * Update generated/components.json * chore: add changeset * docs(DataTable): add aria-labelledby and aria-describedby to Table.Skeleton * Update generated/components.json --------- Co-authored-by: Josh Black --- .changeset/strange-donkeys-worry.md | 5 + generated/components.json | 23 +++ src/DataTable/DataTable.docs.json | 22 +++ src/DataTable/DataTable.features.stories.tsx | 79 ++++++++++ src/DataTable/Table.tsx | 149 +++++++++++++++++-- src/DataTable/__tests__/DataTable.test.tsx | 8 + src/DataTable/__tests__/Table.test.tsx | 33 ++++ src/DataTable/index.ts | 3 + src/DataTable/useTable.ts | 93 ++++++------ 9 files changed, 363 insertions(+), 52 deletions(-) create mode 100644 .changeset/strange-donkeys-worry.md diff --git a/.changeset/strange-donkeys-worry.md b/.changeset/strange-donkeys-worry.md new file mode 100644 index 00000000000..c27e58b4a94 --- /dev/null +++ b/.changeset/strange-donkeys-worry.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +Add Table.Skeleton component diff --git a/generated/components.json b/generated/components.json index 5840bfae98e..a05e339b0dd 100644 --- a/generated/components.json +++ b/generated/components.json @@ -1807,6 +1807,10 @@ { "id": "components-datatable-features--with-custom-heading", "code": "() => (\n <>\n \n Security coverage\n \n

\n Organization members can only see data for the most recently-updated\n repositories. To see all repositories, talk to your organization\n administrator about becoming a security manager.\n

\n \n {\n return \n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return \n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n \n {row.securityFeatures.dependabot.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n \n {row.securityFeatures.codeScanning.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n ]}\n />\n \n \n)" + }, + { + "id": "components-datatable-features--with-loading", + "code": "() => {\n const [loading] = React.useState(true)\n return (\n \n \n Repositories\n \n \n A subtitle could appear here to give extra context to the data.\n \n {loading ? (\n \n ) : (\n \n )}\n \n )\n}" } ], "props": [ @@ -1947,6 +1951,25 @@ "required": true } ] + }, + { + "name": "Table.Skeleton", + "props": [ + { + "name": "cellPadding", + "type": "'condensed' | 'normal' | 'spacious'", + "description": "Specify the amount of space that should be available around the contents of a cell" + }, + { + "name": "columns", + "type": "Array>" + }, + { + "name": "rows", + "type": "number", + "description": "Optionally specify the number of rows which should be included in the skeleton state of the component" + } + ] } ] }, diff --git a/src/DataTable/DataTable.docs.json b/src/DataTable/DataTable.docs.json index 2cfaf0b1194..5a791bade9b 100644 --- a/src/DataTable/DataTable.docs.json +++ b/src/DataTable/DataTable.docs.json @@ -30,6 +30,9 @@ }, { "id": "components-datatable-features--with-custom-heading" + }, + { + "id": "components-datatable-features--with-loading" } ], "props": [ @@ -170,6 +173,25 @@ "required": true } ] + }, + { + "name": "Table.Skeleton", + "props": [ + { + "name": "cellPadding", + "type": "'condensed' | 'normal' | 'spacious'", + "description": "Specify the amount of space that should be available around the contents of a cell" + }, + { + "name": "columns", + "type": "Array>" + }, + { + "name": "rows", + "type": "number", + "description": "Optionally specify the number of rows which should be included in the skeleton state of the component" + } + ] } ] } diff --git a/src/DataTable/DataTable.features.stories.tsx b/src/DataTable/DataTable.features.stories.tsx index b03d27260aa..2fc15c7f84c 100644 --- a/src/DataTable/DataTable.features.stories.tsx +++ b/src/DataTable/DataTable.features.stories.tsx @@ -12,6 +12,7 @@ import Label from '../Label' import LabelGroup from '../LabelGroup' import RelativeTime from '../RelativeTime' import VisuallyHidden from '../_VisuallyHidden' +import {createColumnHelper} from './column' export default { title: 'Components/DataTable/Features', @@ -1132,6 +1133,84 @@ export const WithOverflow = () => ( ) +const columnHelper = createColumnHelper() +const columns = [ + columnHelper.column({ + header: 'Repository', + field: 'name', + rowHeader: true, + }), + columnHelper.column({ + header: 'Type', + field: 'type', + renderCell: row => { + return + }, + }), + columnHelper.column({ + header: 'Updated', + field: 'updatedAt', + renderCell: row => { + return + }, + }), + columnHelper.column({ + header: 'Dependabot', + field: 'securityFeatures.dependabot', + renderCell: row => { + return row.securityFeatures.dependabot.length > 0 ? ( + + {row.securityFeatures.dependabot.map(feature => { + return + })} + + ) : null + }, + }), + columnHelper.column({ + header: 'Code scanning', + field: 'securityFeatures.codeScanning', + renderCell: row => { + return row.securityFeatures.codeScanning.length > 0 ? ( + + {row.securityFeatures.codeScanning.map(feature => { + return + })} + + ) : null + }, + }), +] + +export const WithLoading = () => { + const [loading] = React.useState(true) + return ( + + + Repositories + + + A subtitle could appear here to give extra context to the data. + + {loading ? ( + + ) : ( + + )} + + ) +} + export const WithPlaceholderCells = () => ( diff --git a/src/DataTable/Table.tsx b/src/DataTable/Table.tsx index 8bb1e4fbcb5..b3857e0721e 100644 --- a/src/DataTable/Table.tsx +++ b/src/DataTable/Table.tsx @@ -1,18 +1,26 @@ import {SortAscIcon, SortDescIcon} from '@primer/octicons-react' +import cx from 'classnames' import React from 'react' -import styled from 'styled-components' +import styled, {keyframes} from 'styled-components' import Box from '../Box' import Text from '../Text' import {get} from '../constants' import sx, {SxProp} from '../sx' +import VisuallyHidden from '../_VisuallyHidden' +import {Column, CellAlignment} from './column' +import {UniqueRow} from './row' import {SortDirection} from './sorting' +import {useTableLayout} from './useTable' import {useOverflow} from '../hooks/useOverflow' -import {CellAlignment} from './column' // ---------------------------------------------------------------------------- // Table // ---------------------------------------------------------------------------- +const shimmer = keyframes` + from { mask-position: 200%; } + to { mask-position: 0%; } +` const StyledTable = styled.table>` /* Default table styles */ --table-border-radius: 0.375rem; @@ -104,11 +112,13 @@ const StyledTable = styled.table>` * Offset padding to make sure type aligns regardless of cell padding * selection */ - .TableRow > *:first-child { + .TableRow > *:first-child:not(.TableCellSkeleton), + .TableRow > *:first-child .TableCellSkeletonItem { padding-inline-start: 1rem; } - .TableRow > *:last-child { + .TableRow > *:last-child:not(.TableCellSkeleton), + .TableRow > *:last-child .TableCellSkeletonItem { padding-inline-end: 1rem; } @@ -143,7 +153,7 @@ const StyledTable = styled.table>` } /* TableRow */ - .TableRow:hover .TableCell { + .TableRow:hover .TableCell:not(.TableCellSkeleton) { /* TODO: update this token when the new primitive tokens are released */ background-color: ${get('colors.actionListItem.default.hoverBg')}; } @@ -154,6 +164,66 @@ const StyledTable = styled.table>` font-weight: 600; } + /* TableCellSkeleton */ + .TableCellSkeleton { + padding: 0; + } + + .TableCellSkeletonItems { + display: flex; + flex-direction: column; + } + + .TableCellSkeletonItem { + padding: var(--table-cell-padding); + + &:nth-of-type(5n + 1) { + --skeleton-item-width: 85%; + } + + &:nth-of-type(5n + 2) { + --skeleton-item-width: 67.5%; + } + + &:nth-of-type(5n + 3) { + --skeleton-item-width: 80%; + } + + &:nth-of-type(5n + 4) { + --skeleton-item-width: 60%; + } + + &:nth-of-type(5n + 5) { + --skeleton-item-width: 75%; + } + } + + .TableCellSkeletonItem:not(:last-of-type) { + border-bottom: 1px solid ${get('colors.border.default')}; + } + + .TableCellSkeletonItem::before { + display: block; + content: ''; + height: 1rem; + width: var(--skeleton-item-width, 67%); + background-color: ${get('colors.canvas.subtle')}; + border-radius: 3px; + + @media (prefers-reduced-motion: no-preference) { + mask-image: linear-gradient(75deg, #000 30%, rgba(0, 0, 0, 0.65) 80%); + mask-size: 200%; + animation: ${shimmer}; + animation-duration: 1s; + animation-iteration-count: infinite; + } + + @media (forced-colors: active) { + outline: 1px solid transparent; + outline-offset: -1px; + } + } + /* Grid layout */ .TableHead, .TableBody, @@ -195,7 +265,7 @@ export type TableProps = React.ComponentPropsWithoutRef<'table'> & { } const Table = React.forwardRef(function Table( - {'aria-labelledby': labelledby, cellPadding = 'normal', gridTemplateColumns, ...rest}, + {'aria-labelledby': labelledby, cellPadding = 'normal', className, gridTemplateColumns, ...rest}, ref, ) { return ( @@ -204,7 +274,7 @@ const Table = React.forwardRef(function Table( {...rest} aria-labelledby={labelledby} data-cell-padding={cellPadding} - className="Table" + className={cx('Table', className)} role="table" ref={ref} style={{'--grid-template-columns': gridTemplateColumns} as React.CSSProperties} @@ -332,12 +402,12 @@ export type TableCellProps = Omit, 'align'> scope?: 'row' } -function TableCell({align, children, scope, ...rest}: TableCellProps) { +function TableCell({align, className, children, scope, ...rest}: TableCellProps) { const BaseComponent = scope ? 'th' : 'td' const role = scope ? 'rowheader' : 'cell' return ( - + {children} ) @@ -504,6 +574,66 @@ function TableActions({children}: TableActionsProps) { return
{children}
} +// ---------------------------------------------------------------------------- +// TableSkeleton +// ---------------------------------------------------------------------------- +export type TableSkeletonProps = React.ComponentPropsWithoutRef<'table'> & { + /** + * Specify the amount of space that should be available around the contents of + * a cell + */ + cellPadding?: 'condensed' | 'normal' | 'spacious' + + /** + * Provide an array of columns for the table. Columns will render as the headers + * of the table. + */ + columns: Array> + + /** + * Optionally specify the number of rows which should be included in the + * skeleton state of the component + */ + rows?: number +} + +function TableSkeleton({cellPadding, columns, rows = 10, ...rest}: TableSkeletonProps) { + const {gridTemplateColumns} = useTableLayout(columns) + return ( + + + + {Array.isArray(columns) + ? columns.map((column, i) => { + return ( + + {typeof column.header === 'string' ? column.header : column.header()} + + ) + }) + : null} + + + + + {Array.from({length: columns.length}).map((_, i) => { + return ( + + Loading +
+ {Array.from({length: rows}).map((_, i) => { + return
+ })} +
+ + ) + })} + + +
+ ) +} + // ---------------------------------------------------------------------------- // Utilities // ---------------------------------------------------------------------------- @@ -567,4 +697,5 @@ export { TableSortHeader, TableCell, TableCellPlaceholder, + TableSkeleton, } diff --git a/src/DataTable/__tests__/DataTable.test.tsx b/src/DataTable/__tests__/DataTable.test.tsx index 326cfeba762..085b1d93ecb 100644 --- a/src/DataTable/__tests__/DataTable.test.tsx +++ b/src/DataTable/__tests__/DataTable.test.tsx @@ -823,6 +823,7 @@ describe('DataTable', () => { expect(getGridTemplateFromColumns(columns)).toEqual(['minmax(max-content, 1fr)']) }) + it('correctly sets the column width when width === "grow"', () => { const columnHelper = createColumnHelper<{id: number; name: string}>() const columns = [ @@ -835,6 +836,7 @@ describe('DataTable', () => { expect(getGridTemplateFromColumns(columns)).toEqual(['minmax(max-content, 1fr)']) }) + it('correctly sets the column width when width === "growCollapse"', () => { const columnHelper = createColumnHelper<{id: number; name: string}>() const columns = [ @@ -847,6 +849,7 @@ describe('DataTable', () => { expect(getGridTemplateFromColumns(columns)).toEqual(['minmax(0, 1fr)']) }) + it('correctly sets the column width when width === "auto"', () => { const columnHelper = createColumnHelper<{id: number; name: string}>() const columns = [ @@ -859,6 +862,7 @@ describe('DataTable', () => { expect(getGridTemplateFromColumns(columns)).toEqual(['auto']) }) + it('correctly sets the column width when width is a CSS width string', () => { const columnHelper = createColumnHelper<{id: number; name: string}>() const columns = [ @@ -871,6 +875,7 @@ describe('DataTable', () => { expect(getGridTemplateFromColumns(columns)).toEqual(['42ch']) }) + it('correctly sets the column width when width is a number', () => { const columnHelper = createColumnHelper<{id: number; name: string}>() const columns = [ @@ -883,6 +888,7 @@ describe('DataTable', () => { expect(getGridTemplateFromColumns(columns)).toEqual(['200px']) }) + it('correctly sets min-widths for the column', () => { const columnHelper = createColumnHelper<{id: number; name: string}>() const columns: Record[]> = { @@ -921,6 +927,7 @@ describe('DataTable', () => { expect(getGridTemplateFromColumns(columns[widthOpt])).toEqual([expectedWidths[widthOpt]]) } }) + it('correctly sets max-widths for the column', () => { const columnHelper = createColumnHelper<{id: number; name: string}>() const columns: Record[]> = { @@ -959,6 +966,7 @@ describe('DataTable', () => { expect(getGridTemplateFromColumns(columns[widthOpt])).toEqual([expectedWidths[widthOpt]]) } }) + it('sets a custom property style to define the column grid template', () => { const columnHelper = createColumnHelper<{id: number; name: string}>() const columns = [ diff --git a/src/DataTable/__tests__/Table.test.tsx b/src/DataTable/__tests__/Table.test.tsx index d82cefa4ffa..9e91eef925a 100644 --- a/src/DataTable/__tests__/Table.test.tsx +++ b/src/DataTable/__tests__/Table.test.tsx @@ -1,6 +1,7 @@ import {render, screen} from '@testing-library/react' import React from 'react' import {Table} from '../../DataTable' +import {createColumnHelper} from '../column' import {TableProps} from '../Table' function createTable({columns, rows}: {columns: Array; rows: Array>}) { @@ -230,4 +231,36 @@ describe('Table', () => { expect(screen.getByRole('rowheader', {name: 'Cell'})).toBeInTheDocument() }) }) + + describe('Table.Skeleton', () => { + it('should render a table with columns and loading content', () => { + const columnHelper = createColumnHelper() + const columns = [ + columnHelper.column({ + header: 'Column A', + }), + columnHelper.column({ + header: 'Column B', + }), + columnHelper.column({ + header: 'Column C', + }), + ] + render( + <> +

Test

+ + , + ) + + expect(screen.getByRole('table', {name: 'Test'})).toBeInTheDocument() + for (const column of columns) { + expect(screen.getByRole('columnheader', {name: column.header as string})).toBeInTheDocument() + } + + for (const cell of screen.getAllByRole('cell')) { + expect(cell).toHaveTextContent('Loading') + } + }) + }) }) diff --git a/src/DataTable/index.ts b/src/DataTable/index.ts index b98a280cfb8..b6a3ebc63b6 100644 --- a/src/DataTable/index.ts +++ b/src/DataTable/index.ts @@ -12,6 +12,7 @@ import { TableSubtitle, TableActions, TableDivider, + TableSkeleton, } from './Table' const Table = Object.assign(TableImpl, { @@ -20,6 +21,7 @@ const Table = Object.assign(TableImpl, { Subtitle: TableSubtitle, Actions: TableActions, Divider: TableDivider, + Skeleton: TableSkeleton, Head: TableHead, Body: TableBody, Header: TableHeader, @@ -41,4 +43,5 @@ export type { TableTitleProps, TableSubtitleProps, TableActionsProps, + TableSkeletonProps, } from './Table' diff --git a/src/DataTable/useTable.ts b/src/DataTable/useTable.ts index 67a1c145ddf..cf9579a8764 100644 --- a/src/DataTable/useTable.ts +++ b/src/DataTable/useTable.ts @@ -42,48 +42,6 @@ interface Cell { type ColumnSortState = {id: string | number; direction: Exclude} | null -export function getGridTemplateFromColumns(columns: Array>): string[] { - return columns.map(column => { - const columnWidth = column.width ?? 'grow' - let minWidth = 'auto' - let maxWidth = '1fr' - - if (columnWidth === 'auto') { - maxWidth = 'auto' - } - - // Setting a min-width of 'max-content' ensures that the column will grow to fit the widest cell's content. - // However, If the column has a max width, we can't set the min width to `max-content` because - // the widest cell's content might overflow the container. - if (columnWidth === 'grow' && !column.maxWidth) { - minWidth = 'max-content' - } - - // Column widths set to "growCollapse" don't need a min width unless one is explicitly provided. - if (columnWidth === 'growCollapse') { - minWidth = '0' - } - - // If a consumer passes `minWidth` or `maxWidth`, we need to override whatever we set above. - if (column.minWidth) { - minWidth = typeof column.minWidth === 'number' ? `${column.minWidth}px` : column.minWidth - } - - if (column.maxWidth) { - maxWidth = typeof column.maxWidth === 'number' ? `${column.maxWidth}px` : column.maxWidth - } - - // If a consumer is passing one of the shorthand widths or doesn't pass a width at all, we use the - // min and max width calculated above to create a minmax() column template value. - if (typeof columnWidth !== 'number' && ['grow', 'growCollapse', 'auto'].includes(columnWidth)) { - return minWidth === maxWidth ? minWidth : `minmax(${minWidth}, ${maxWidth})` - } - - // If we reach this point, the consumer is passing an explicit width value. - return typeof columnWidth === 'number' ? `${columnWidth}px` : columnWidth - }) -} - export function useTable({ columns, data, @@ -96,6 +54,7 @@ export function useTable({ const [sortByColumn, setSortByColumn] = useState(() => { return getInitialSortState(columns, initialSortColumn, initialSortDirection) }) + const {gridTemplateColumns} = useTableLayout(columns) // Reset the `sortByColumn` state if the columns change and that column is no // longer provided @@ -235,7 +194,7 @@ export function useTable({ actions: { sortBy, }, - gridTemplateColumns: getGridTemplateFromColumns(columns).join(' '), + gridTemplateColumns, } } @@ -310,6 +269,54 @@ function getInitialSortState( return null } +export function useTableLayout(columns: Array>): {gridTemplateColumns: string} { + return { + gridTemplateColumns: getGridTemplateFromColumns(columns).join(' '), + } +} + +export function getGridTemplateFromColumns(columns: Array>): string[] { + return columns.map(column => { + const columnWidth = column.width ?? 'grow' + let minWidth = 'auto' + let maxWidth = '1fr' + + if (columnWidth === 'auto') { + maxWidth = 'auto' + } + + // Setting a min-width of 'max-content' ensures that the column will grow to fit the widest cell's content. + // However, If the column has a max width, we can't set the min width to `max-content` because + // the widest cell's content might overflow the container. + if (columnWidth === 'grow' && !column.maxWidth) { + minWidth = 'max-content' + } + + // Column widths set to "growCollapse" don't need a min width unless one is explicitly provided. + if (columnWidth === 'growCollapse') { + minWidth = '0' + } + + // If a consumer passes `minWidth` or `maxWidth`, we need to override whatever we set above. + if (column.minWidth) { + minWidth = typeof column.minWidth === 'number' ? `${column.minWidth}px` : column.minWidth + } + + if (column.maxWidth) { + maxWidth = typeof column.maxWidth === 'number' ? `${column.maxWidth}px` : column.maxWidth + } + + // If a consumer is passing one of the shorthand widths or doesn't pass a width at all, we use the + // min and max width calculated above to create a minmax() column template value. + if (typeof columnWidth !== 'number' && ['grow', 'growCollapse', 'auto'].includes(columnWidth)) { + return minWidth === maxWidth ? minWidth : `minmax(${minWidth}, ${maxWidth})` + } + + // If we reach this point, the consumer is passing an explicit width value. + return typeof columnWidth === 'number' ? `${columnWidth}px` : columnWidth + }) +} + // eslint-disable-next-line @typescript-eslint/no-explicit-any function get, Path extends string>( object: ObjectType,