diff --git a/babel-defines.js b/babel-defines.js
index 63361e78474..612ee6918d1 100644
--- a/babel-defines.js
+++ b/babel-defines.js
@@ -1,5 +1,5 @@
const shared = {
- __DEV__: "process.env.NODE_ENV !== 'production'"
+ __DEV__: "process.env.NODE_ENV !== 'production'",
}
module.exports = {
@@ -8,6 +8,6 @@ module.exports = {
production: {
...shared,
__DEV__: 'false',
- 'process.env.NODE_ENV': "'production'"
- }
+ 'process.env.NODE_ENV': "'production'",
+ },
}
diff --git a/babel.config.js b/babel.config.js
index 8df549cd2dd..596c9d30212 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -10,7 +10,7 @@ const sharedPlugins = [
'add-react-displayname',
'babel-plugin-styled-components',
'@babel/plugin-proposal-nullish-coalescing-operator',
- '@babel/plugin-proposal-optional-chaining'
+ '@babel/plugin-proposal-optional-chaining',
]
function makePresets(moduleValue) {
@@ -27,19 +27,19 @@ module.exports = {
: process.env.STORYBOOK
? []
: [
- 'transform-commonjs' // theme-preval is commonjs and needs to be transformed to esm
+ 'transform-commonjs', // theme-preval is commonjs and needs to be transformed to esm
]),
...sharedPlugins,
- replacementPlugin('development')
- ]
+ replacementPlugin('development'),
+ ],
},
production: {
presets: makePresets(false),
- plugins: [...sharedPlugins, replacementPlugin('production')]
+ plugins: [...sharedPlugins, replacementPlugin('production')],
},
test: {
presets: makePresets('commonjs'),
- plugins: [...sharedPlugins, ['@babel/plugin-transform-modules-commonjs'], replacementPlugin('test')]
- }
- }
+ plugins: [...sharedPlugins, ['@babel/plugin-transform-modules-commonjs'], replacementPlugin('test')],
+ },
+ },
}
diff --git a/codemods/__tests__/deprecateUtilityComponents.js b/codemods/__tests__/deprecateUtilityComponents.js
index 08bf7853fe1..c7cda752fe3 100644
--- a/codemods/__tests__/deprecateUtilityComponents.js
+++ b/codemods/__tests__/deprecateUtilityComponents.js
@@ -20,7 +20,7 @@ export default () => (
)
`.trim(),
- 'deprecateUtilityComponents'
+ 'deprecateUtilityComponents',
)
defineInlineTest(
@@ -42,7 +42,7 @@ export default () => (
)
`.trim(),
- 'deprecateUtilityComponents'
+ 'deprecateUtilityComponents',
)
defineInlineTest(
@@ -64,7 +64,7 @@ export default () => (
)
`.trim(),
- 'deprecateUtilityComponents'
+ 'deprecateUtilityComponents',
)
defineInlineTest(
@@ -86,7 +86,7 @@ export default () => (
)
`.trim(),
- 'deprecateUtilityComponents'
+ 'deprecateUtilityComponents',
)
defineInlineTest(
@@ -108,7 +108,7 @@ export default () => (
)
`.trim(),
- 'deprecateUtilityComponents'
+ 'deprecateUtilityComponents',
)
defineInlineTest(
@@ -130,7 +130,7 @@ export default () => (
)
`.trim(),
- 'deprecateUtilityComponents'
+ 'deprecateUtilityComponents',
)
defineInlineTest(
@@ -152,7 +152,7 @@ export default () => (
)
`.trim(),
- 'deprecateUtilityComponents'
+ 'deprecateUtilityComponents',
)
defineInlineTest(
@@ -174,7 +174,7 @@ export default () => (
)
`.trim(),
- 'deprecateUtilityComponents'
+ 'deprecateUtilityComponents',
)
defineInlineTest(
@@ -196,5 +196,5 @@ export default () => (
)
`.trim(),
- 'deprecateUtilityComponents'
+ 'deprecateUtilityComponents',
)
diff --git a/codemods/__tests__/removeSystemProps.js b/codemods/__tests__/removeSystemProps.js
index 40307079fa7..ef37944d92c 100644
--- a/codemods/__tests__/removeSystemProps.js
+++ b/codemods/__tests__/removeSystemProps.js
@@ -22,7 +22,7 @@ export default () => (
)
`.trim(),
- 'removeSystemProps'
+ 'removeSystemProps',
)
defineInlineTest(
@@ -54,7 +54,7 @@ const ClipboardCopy = ({value}) => (
)}
)`.trim(),
- 'removeSystemProps'
+ 'removeSystemProps',
)
defineInlineTest(
@@ -95,7 +95,7 @@ const link = (
Primer
)`.trim(),
- 'removeSystemProps'
+ 'removeSystemProps',
)
defineInlineTest(
@@ -119,7 +119,7 @@ export default () => (
)
`.trim(),
- 'removeSystemProps'
+ 'removeSystemProps',
)
defineInlineTest(
@@ -143,7 +143,7 @@ export default () => (
)
`.trim(),
- 'removeSystemProps'
+ 'removeSystemProps',
)
defineInlineTest(
@@ -171,7 +171,7 @@ export default () => (
)
`.trim(),
- 'removeSystemProps'
+ 'removeSystemProps',
)
defineInlineTest(
@@ -195,7 +195,7 @@ export default () => (
)
`.trim(),
- 'removeSystemProps'
+ 'removeSystemProps',
)
defineInlineTest(
@@ -221,5 +221,5 @@ export default () => (
)
`.trim(),
- 'removeSystemProps'
+ 'removeSystemProps',
)
diff --git a/codemods/__tests__/v1.js b/codemods/__tests__/v1.js
index d8a76fd0727..4bb0ded4402 100644
--- a/codemods/__tests__/v1.js
+++ b/codemods/__tests__/v1.js
@@ -19,5 +19,5 @@ export default () => (
)
`.trim(),
- 'v1'
+ 'v1',
)
diff --git a/codemods/__tests__/v12.js b/codemods/__tests__/v12.js
index 332e8f1537c..3247dbb8207 100644
--- a/codemods/__tests__/v12.js
+++ b/codemods/__tests__/v12.js
@@ -19,5 +19,5 @@ export default () => (
)
`.trim(),
- 'v12'
+ 'v12',
)
diff --git a/codemods/__tests__/v2.js b/codemods/__tests__/v2.js
index e7527903734..8516cb7a410 100644
--- a/codemods/__tests__/v2.js
+++ b/codemods/__tests__/v2.js
@@ -20,5 +20,5 @@ export default () => (
)
`.trim(),
- 'v2'
+ 'v2',
)
diff --git a/codemods/__tests__/v3.js b/codemods/__tests__/v3.js
index 0554e9f372b..1c0474cd37e 100644
--- a/codemods/__tests__/v3.js
+++ b/codemods/__tests__/v3.js
@@ -20,5 +20,5 @@ export default () => (
)
`.trim(),
- 'v3'
+ 'v3',
)
diff --git a/codemods/__tests__/v4.js b/codemods/__tests__/v4.js
index 250a6ed8216..5e5f4b97ece 100644
--- a/codemods/__tests__/v4.js
+++ b/codemods/__tests__/v4.js
@@ -20,7 +20,7 @@ export default () => (
)
`.trim(),
- 'v4'
+ 'v4',
)
defineInlineTest(
@@ -42,7 +42,7 @@ export default () => (
)
`.trim(),
- 'v4'
+ 'v4',
)
defineInlineTest(
@@ -64,5 +64,5 @@ export default () => (
)
`.trim(),
- 'v4'
+ 'v4',
)
diff --git a/codemods/deprecateUtilityComponents.js b/codemods/deprecateUtilityComponents.js
index 2e88f669da6..e72a41b215f 100644
--- a/codemods/deprecateUtilityComponents.js
+++ b/codemods/deprecateUtilityComponents.js
@@ -8,42 +8,42 @@ module.exports = (file, api) => {
Flex: {
identifier: 'Box',
attributes: {
- display: 'flex'
- }
+ display: 'flex',
+ },
},
Grid: {
identifier: 'Box',
attributes: {
- display: 'grid'
- }
+ display: 'grid',
+ },
},
Position: {
identifier: 'Box',
- attributes: {}
+ attributes: {},
},
Absolute: {
identifier: 'Box',
attributes: {
- position: 'absolute'
- }
+ position: 'absolute',
+ },
},
Relative: {
identifier: 'Box',
attributes: {
- position: 'relative'
- }
+ position: 'relative',
+ },
},
Fixed: {
identifier: 'Box',
attributes: {
- position: 'fixed'
- }
+ position: 'fixed',
+ },
},
Sticky: {
identifier: 'Box',
attributes: {
- position: 'sticky'
- }
+ position: 'sticky',
+ },
},
BorderBox: {
identifier: 'Box',
@@ -51,9 +51,9 @@ module.exports = (file, api) => {
borderWidth: '1px',
borderStyle: 'solid',
borderColor: 'border.default',
- borderRadius: 2
- }
- }
+ borderRadius: 2,
+ },
+ },
})
return prettify(ast, file)
diff --git a/codemods/lib/modifyProps.js b/codemods/lib/modifyProps.js
index 0b0af4f8461..87cbff2a2d5 100644
--- a/codemods/lib/modifyProps.js
+++ b/codemods/lib/modifyProps.js
@@ -17,16 +17,16 @@ module.exports = (ast, j, moduleName, propsMap) => {
name: {
name: name => {
return name in importsByName
- }
- }
- }
+ },
+ },
+ },
})
.forEach(el => {
j(el)
.find(j.JSXAttribute, {
name: name => {
return name.name in propsMap
- }
+ },
})
.forEach(attr => {
const name = attr.value.name.name
diff --git a/codemods/lib/prettify.js b/codemods/lib/prettify.js
index 463e849e8f5..7437572f4b4 100644
--- a/codemods/lib/prettify.js
+++ b/codemods/lib/prettify.js
@@ -8,9 +8,9 @@ module.exports = function prettify(ast, file) {
Object.assign(
{
parser: 'typescript',
- filepath: file.path
+ filepath: file.path,
},
- config
- )
+ config,
+ ),
)
}
diff --git a/codemods/removeSystemProps.js b/codemods/removeSystemProps.js
index 919c2c9447f..b5b0f203027 100644
--- a/codemods/removeSystemProps.js
+++ b/codemods/removeSystemProps.js
@@ -33,7 +33,7 @@ const COMMON = [
'backgroundColor',
'opacity',
'bg',
- 'display'
+ 'display',
]
const TYPOGRAPHY = [
@@ -44,7 +44,7 @@ const TYPOGRAPHY = [
'letterSpacing',
'textAlign',
'fontStyle',
- 'whiteSpace'
+ 'whiteSpace',
]
const BORDER = [
@@ -76,7 +76,7 @@ const BORDER = [
'borderRightColor',
'borderRightStyle',
'boxShadow',
- 'textShadow'
+ 'textShadow',
]
const LAYOUT = [
@@ -91,7 +91,7 @@ const LAYOUT = [
'overflowX',
'overflowY',
'display',
- 'verticalAlign'
+ 'verticalAlign',
]
const POSITION = ['position', 'zIndex', 'top', 'right', 'bottom', 'left']
@@ -109,7 +109,7 @@ const FLEX = [
'flexBasis',
'justifySelf',
'alignSelf',
- 'order'
+ 'order',
]
// const GRID = [
@@ -179,7 +179,7 @@ const stylePropsMap = {
Timeline: [...COMMON],
Tooltip: [...COMMON],
Truncate: [...TYPOGRAPHY, ...COMMON],
- UnderlineNav: [...COMMON]
+ UnderlineNav: [...COMMON],
}
const expressionToString = expression => {
@@ -243,9 +243,9 @@ module.exports = (file, api) => {
name: {
name: name => {
return name in stylePropsMap
- }
- }
- }
+ },
+ },
+ },
})
.forEach(el => {
const sx = {}
@@ -256,14 +256,14 @@ module.exports = (file, api) => {
name: name => {
const isInElement = name.start >= el.node.start && name.end <= el.value.openingElement.end
return systemProps && systemProps.includes(name.name) && isInElement
- }
+ },
})
const sxNodes = j(el).find(j.JSXAttribute, {
name: name => {
const isInElement = name.start >= el.node.start && name.end <= el.value.openingElement.end
return name.name === 'sx' && isInElement
- }
+ },
})
const existingSx = {}
diff --git a/codemods/v1.js b/codemods/v1.js
index ce86e9a7f64..fde3eb3b70f 100644
--- a/codemods/v1.js
+++ b/codemods/v1.js
@@ -7,7 +7,7 @@ module.exports = (file, api) => {
modifyProps(ast, j, 'primer-react', {
tag: 'is',
- fg: 'color'
+ fg: 'color',
})
return prettify(ast, file)
diff --git a/codemods/v12.js b/codemods/v12.js
index 081ff08fffd..2041b3d989c 100644
--- a/codemods/v12.js
+++ b/codemods/v12.js
@@ -6,7 +6,7 @@ module.exports = (file, api) => {
const ast = j(file.source)
modifyProps(ast, j, '@primer/components', {
- is: 'as'
+ is: 'as',
})
return prettify(ast, file)
diff --git a/codemods/v2.js b/codemods/v2.js
index 60b58f489ac..6232df59f63 100644
--- a/codemods/v2.js
+++ b/codemods/v2.js
@@ -8,7 +8,7 @@ module.exports = (file, api) => {
renameImports(ast, j, 'primer-react', {
Box: 'BorderBox',
Block: 'Box',
- CaretBox: 'PointerBox'
+ CaretBox: 'PointerBox',
})
return prettify(ast, file)
diff --git a/codemods/v3.js b/codemods/v3.js
index a1e390cf1ea..3c594a69f67 100644
--- a/codemods/v3.js
+++ b/codemods/v3.js
@@ -10,7 +10,7 @@ module.exports = (file, api) => {
renameImports(ast, j, '@primer/components', {
DonutChart: 'Donut',
- DonutSlice: 'Donut.Slice'
+ DonutSlice: 'Donut.Slice',
})
return prettify(ast, file)
diff --git a/codemods/v4.js b/codemods/v4.js
index ac9bda7019e..288fda2f6b9 100644
--- a/codemods/v4.js
+++ b/codemods/v4.js
@@ -9,7 +9,7 @@ module.exports = (file, api) => {
FlexContainer: 'Flex',
FlexItem: 'Flex.Item',
UnderlineNavItem: 'UnderlineNav.Item',
- FilterListItem: 'FilterList.Item'
+ FilterListItem: 'FilterList.Item',
})
return prettify(ast, file)
diff --git a/docs/components/constants.js b/docs/components/constants.js
index bdb1fb355b9..7b3c39078c9 100644
--- a/docs/components/constants.js
+++ b/docs/components/constants.js
@@ -10,8 +10,8 @@ export const get = key => themeGet(key, getKey(theme, key))
const whiteSpace = system({
whiteSpace: {
property: 'whiteSpace',
- cssProperty: 'whiteSpace'
- }
+ cssProperty: 'whiteSpace',
+ },
})
export const TYPOGRAPHY = compose(styledSystem.typography, whiteSpace)
diff --git a/docs/gatsby-config.js b/docs/gatsby-config.js
index 35e1be0415b..0e35d6a9ef6 100644
--- a/docs/gatsby-config.js
+++ b/docs/gatsby-config.js
@@ -4,7 +4,7 @@ module.exports = {
siteMetadata: {
title: 'Primer React',
shortName: 'React',
- description: 'React components for the Primer design system'
+ description: 'React components for the Primer design system',
},
plugins: [
'gatsby-plugin-typescript',
@@ -12,8 +12,8 @@ module.exports = {
resolve: '@primer/gatsby-theme-doctocat',
options: {
repoRootPath: '..',
- defaultBranch: 'main'
- }
+ defaultBranch: 'main',
+ },
},
{
resolve: `gatsby-plugin-alias-imports`,
@@ -22,10 +22,10 @@ module.exports = {
'@primer/components': path.resolve(__dirname, '../src'),
'@primer/react': path.resolve(__dirname, '../src'),
'styled-components': path.resolve(__dirname, '..', 'node_modules', 'styled-components'),
- react: path.resolve(__dirname, 'node_modules', 'react')
- }
- }
- }
+ react: path.resolve(__dirname, 'node_modules', 'react'),
+ },
+ },
+ },
],
- pathPrefix: '/react'
+ pathPrefix: '/react',
}
diff --git a/docs/gatsby-node.js b/docs/gatsby-node.js
index 8cdd0a135a9..e02b8640798 100644
--- a/docs/gatsby-node.js
+++ b/docs/gatsby-node.js
@@ -17,8 +17,8 @@ exports.onCreateWebpackConfig = ({actions, plugins, loaders, getConfig}) => {
exclude: modulePath => /node_modules/.test(modulePath),
// ...except that we want to run Primer React through webpack as well.
// By default, Gatsby won't use the define plugin we added above on Primer React.
- include: modulePath => /@primer\/components/.test(modulePath)
- }
+ include: modulePath => /@primer\/components/.test(modulePath),
+ },
]
// Polyfill `path` and stub `fs` for use in the browser
@@ -27,12 +27,12 @@ exports.onCreateWebpackConfig = ({actions, plugins, loaders, getConfig}) => {
...config.resolve,
alias: {
...config.resolve.alias,
- path: require.resolve('path-browserify')
+ path: require.resolve('path-browserify'),
},
fallback: {
...config.resolve.fallback,
- fs: false
- }
+ fs: false,
+ },
}
actions.replaceWebpackConfig(config)
@@ -55,7 +55,7 @@ exports.sourceNodes = ({actions, createNodeId, createContentDigest}) => {
}
return true
- }
+ },
})
const components = data.map(component => {
@@ -69,7 +69,7 @@ exports.sourceNodes = ({actions, createNodeId, createContentDigest}) => {
description: prop.description,
defaultValue: prop.defaultValue ? prop.defaultValue.value : '',
required: prop.required,
- type: prop.type.name
+ type: prop.type.name,
}
})
// Move required props to beginning of the list
@@ -77,7 +77,7 @@ exports.sourceNodes = ({actions, createNodeId, createContentDigest}) => {
if (a.required && !b.required) return -1
if (!a.required && b.required) return 1
return 0
- })
+ }),
}
})
@@ -92,8 +92,8 @@ exports.sourceNodes = ({actions, createNodeId, createContentDigest}) => {
type: `ComponentMetadata`,
mediaType: `text/html`,
content: nodeContent,
- contentDigest: createContentDigest(component)
- }
+ contentDigest: createContentDigest(component),
+ },
}
const node = Object.assign({}, component, nodeMeta)
createNode(node)
diff --git a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js
index 991f401f1fd..6862add0119 100644
--- a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js
+++ b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js
@@ -24,6 +24,6 @@ export default function resolveScope(metastring) {
...(metastring.includes('deprecated') ? deprecated : {}),
ReactRouterLink,
State,
- Placeholder
+ Placeholder,
}
}
diff --git a/docs/src/@primer/gatsby-theme-doctocat/mdx-components.js b/docs/src/@primer/gatsby-theme-doctocat/mdx-components.js
index 76371da5ac9..b15a5ce86a5 100644
--- a/docs/src/@primer/gatsby-theme-doctocat/mdx-components.js
+++ b/docs/src/@primer/gatsby-theme-doctocat/mdx-components.js
@@ -18,5 +18,5 @@ export default {
PropsTablePassthroughPropsRow: PropsTable.PassthroughPropsRow,
PropsTableAsRow: PropsTable.AsRow,
PropsTableRefRow: PropsTable.RefRow,
- PropsTableSxRow: PropsTable.SxRow
+ PropsTableSxRow: PropsTable.SxRow,
}
diff --git a/docs/src/component-statuses.js b/docs/src/component-statuses.js
index ca38eec1ec9..a6cad737efb 100644
--- a/docs/src/component-statuses.js
+++ b/docs/src/component-statuses.js
@@ -76,7 +76,7 @@ export function ComponentStatuses() {
gap: 1,
backgroundColor: 'done.subtle',
fontWeight: 'normal',
- borderColor: 'transparent'
+ borderColor: 'transparent',
}}
>
@@ -88,7 +88,7 @@ export function ComponentStatuses() {
sx={{
backgroundColor: 'neutral.subtle',
fontWeight: 'normal',
- borderColor: 'transparent'
+ borderColor: 'transparent',
}}
>
Not reviewed
diff --git a/e2e/components/ActionList.test.ts b/e2e/components/ActionList.test.ts
index 889545b0b1c..1d7dd8754d9 100644
--- a/e2e/components/ActionList.test.ts
+++ b/e2e/components/ActionList.test.ts
@@ -10,8 +10,8 @@ test.describe('ActionList', () => {
await visit(page, {
id: 'components-actionlist--default',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -22,15 +22,15 @@ test.describe('ActionList', () => {
await visit(page, {
id: 'components-actionlist--default',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
await expect(page).toHaveNoViolations({
rules: {
'color-contrast': {
- enabled: theme !== 'dark_dimmed'
- }
- }
+ enabled: theme !== 'dark_dimmed',
+ },
+ },
})
})
})
@@ -44,8 +44,8 @@ test.describe('ActionList', () => {
await visit(page, {
id: 'components-actionlist-features--block-description',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -56,15 +56,15 @@ test.describe('ActionList', () => {
await visit(page, {
id: 'components-actionlist-features--block-description',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
await expect(page).toHaveNoViolations({
rules: {
'color-contrast': {
- enabled: theme !== 'dark_dimmed'
- }
- }
+ enabled: theme !== 'dark_dimmed',
+ },
+ },
})
})
})
@@ -78,8 +78,8 @@ test.describe('ActionList', () => {
await visit(page, {
id: 'components-actionlist-features--disabled-item',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -90,15 +90,15 @@ test.describe('ActionList', () => {
await visit(page, {
id: 'components-actionlist-features--disabled-item',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
await expect(page).toHaveNoViolations({
rules: {
'color-contrast': {
- enabled: theme !== 'dark_dimmed'
- }
- }
+ enabled: theme !== 'dark_dimmed',
+ },
+ },
})
})
})
@@ -112,8 +112,8 @@ test.describe('ActionList', () => {
await visit(page, {
id: 'components-actionlist-features--inline-description',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -124,15 +124,15 @@ test.describe('ActionList', () => {
await visit(page, {
id: 'components-actionlist-features--inline-description',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
await expect(page).toHaveNoViolations({
rules: {
'color-contrast': {
- enabled: theme !== 'dark_dimmed'
- }
- }
+ enabled: theme !== 'dark_dimmed',
+ },
+ },
})
})
})
@@ -146,8 +146,8 @@ test.describe('ActionList', () => {
await visit(page, {
id: 'components-actionlist-features--inside-overlay',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -158,15 +158,15 @@ test.describe('ActionList', () => {
await visit(page, {
id: 'components-actionlist-features--inside-overlay',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
await expect(page).toHaveNoViolations({
rules: {
'color-contrast': {
- enabled: theme !== 'dark_dimmed'
- }
- }
+ enabled: theme !== 'dark_dimmed',
+ },
+ },
})
})
})
@@ -180,8 +180,8 @@ test.describe('ActionList', () => {
await visit(page, {
id: 'components-actionlist-features--item-dividers',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -192,15 +192,15 @@ test.describe('ActionList', () => {
await visit(page, {
id: 'components-actionlist-features--item-dividers',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
await expect(page).toHaveNoViolations({
rules: {
'color-contrast': {
- enabled: theme !== 'dark_dimmed'
- }
- }
+ enabled: theme !== 'dark_dimmed',
+ },
+ },
})
})
})
@@ -214,8 +214,8 @@ test.describe('ActionList', () => {
await visit(page, {
id: 'components-actionlist-features--links',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -226,15 +226,15 @@ test.describe('ActionList', () => {
await visit(page, {
id: 'components-actionlist-features--links',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
await expect(page).toHaveNoViolations({
rules: {
'color-contrast': {
- enabled: theme !== 'dark_dimmed'
- }
- }
+ enabled: theme !== 'dark_dimmed',
+ },
+ },
})
})
})
@@ -248,8 +248,8 @@ test.describe('ActionList', () => {
await visit(page, {
id: 'components-actionlist-features--multi-select',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -260,15 +260,15 @@ test.describe('ActionList', () => {
await visit(page, {
id: 'components-actionlist-features--multi-select',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
await expect(page).toHaveNoViolations({
rules: {
'color-contrast': {
- enabled: theme !== 'dark_dimmed'
- }
- }
+ enabled: theme !== 'dark_dimmed',
+ },
+ },
})
})
})
@@ -282,8 +282,8 @@ test.describe('ActionList', () => {
await visit(page, {
id: 'components-actionlist-features--simple-list',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -294,15 +294,15 @@ test.describe('ActionList', () => {
await visit(page, {
id: 'components-actionlist-features--simple-list',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
await expect(page).toHaveNoViolations({
rules: {
'color-contrast': {
- enabled: theme !== 'dark_dimmed'
- }
- }
+ enabled: theme !== 'dark_dimmed',
+ },
+ },
})
})
})
@@ -316,8 +316,8 @@ test.describe('ActionList', () => {
await visit(page, {
id: 'components-actionlist-features--single-divider',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -328,15 +328,15 @@ test.describe('ActionList', () => {
await visit(page, {
id: 'components-actionlist-features--single-divider',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
await expect(page).toHaveNoViolations({
rules: {
'color-contrast': {
- enabled: theme !== 'dark_dimmed'
- }
- }
+ enabled: theme !== 'dark_dimmed',
+ },
+ },
})
})
})
@@ -350,8 +350,8 @@ test.describe('ActionList', () => {
await visit(page, {
id: 'components-actionlist-features--single-select',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -362,15 +362,15 @@ test.describe('ActionList', () => {
await visit(page, {
id: 'components-actionlist-features--single-select',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
await expect(page).toHaveNoViolations({
rules: {
'color-contrast': {
- enabled: theme !== 'dark_dimmed'
- }
- }
+ enabled: theme !== 'dark_dimmed',
+ },
+ },
})
})
})
@@ -384,8 +384,8 @@ test.describe('ActionList', () => {
await visit(page, {
id: 'components-actionlist-features--text-wrap-and-truncation',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -396,15 +396,15 @@ test.describe('ActionList', () => {
await visit(page, {
id: 'components-actionlist-features--text-wrap-and-truncation',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
await expect(page).toHaveNoViolations({
rules: {
'color-contrast': {
- enabled: theme !== 'dark_dimmed'
- }
- }
+ enabled: theme !== 'dark_dimmed',
+ },
+ },
})
})
})
@@ -418,8 +418,8 @@ test.describe('ActionList', () => {
await visit(page, {
id: 'components-actionlist-features--with-avatars',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -430,15 +430,15 @@ test.describe('ActionList', () => {
await visit(page, {
id: 'components-actionlist-features--with-avatars',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
await expect(page).toHaveNoViolations({
rules: {
'color-contrast': {
- enabled: theme !== 'dark_dimmed'
- }
- }
+ enabled: theme !== 'dark_dimmed',
+ },
+ },
})
})
})
@@ -452,8 +452,8 @@ test.describe('ActionList', () => {
await visit(page, {
id: 'components-actionlist-features--with-icons',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -464,15 +464,15 @@ test.describe('ActionList', () => {
await visit(page, {
id: 'components-actionlist-features--with-icons',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
await expect(page).toHaveNoViolations({
rules: {
'color-contrast': {
- enabled: theme !== 'dark_dimmed'
- }
- }
+ enabled: theme !== 'dark_dimmed',
+ },
+ },
})
})
})
diff --git a/e2e/components/Button.test.ts b/e2e/components/Button.test.ts
index a9337583657..9612329eeaa 100644
--- a/e2e/components/Button.test.ts
+++ b/e2e/components/Button.test.ts
@@ -9,8 +9,8 @@ test.describe('Button', () => {
await visit(page, {
id: 'components-button--default-button',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -24,7 +24,7 @@ test.describe('Button', () => {
test('axe @aat', async ({page}) => {
await visit(page, {
- id: 'components-button--default-button'
+ id: 'components-button--default-button',
})
await expect(page).toHaveNoViolations()
})
@@ -36,8 +36,8 @@ test.describe('Button', () => {
await visit(page, {
id: 'components-button--primary-button',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -51,7 +51,7 @@ test.describe('Button', () => {
test.fixme('axe @aat', async ({page}) => {
await visit(page, {
- id: 'components-button--primary-button'
+ id: 'components-button--primary-button',
})
await expect(page).toHaveNoViolations()
})
@@ -63,8 +63,8 @@ test.describe('Button', () => {
await visit(page, {
id: 'components-button--danger-button',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -78,7 +78,7 @@ test.describe('Button', () => {
test('axe @aat', async ({page}) => {
await visit(page, {
- id: 'components-button--danger-button'
+ id: 'components-button--danger-button',
})
await expect(page).toHaveNoViolations()
})
@@ -90,8 +90,8 @@ test.describe('Button', () => {
await visit(page, {
id: 'components-button--invisible-button',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -105,7 +105,7 @@ test.describe('Button', () => {
test('axe @aat', async ({page}) => {
await visit(page, {
- id: 'components-button--invisible-button'
+ id: 'components-button--invisible-button',
})
await expect(page).toHaveNoViolations()
})
@@ -117,8 +117,8 @@ test.describe('Button', () => {
await visit(page, {
id: 'components-button--outline-button',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -132,7 +132,7 @@ test.describe('Button', () => {
test('axe @aat', async ({page}) => {
await visit(page, {
- id: 'components-button--outline-button'
+ id: 'components-button--outline-button',
})
await expect(page).toHaveNoViolations()
})
@@ -144,8 +144,8 @@ test.describe('Button', () => {
await visit(page, {
id: 'components-button--icon-before-button',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -159,7 +159,7 @@ test.describe('Button', () => {
test('axe @aat', async ({page}) => {
await visit(page, {
- id: 'components-button--icon-before-button'
+ id: 'components-button--icon-before-button',
})
await expect(page).toHaveNoViolations()
})
@@ -171,8 +171,8 @@ test.describe('Button', () => {
await visit(page, {
id: 'components-button--icon-button',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -186,7 +186,7 @@ test.describe('Button', () => {
test('axe @aat', async ({page}) => {
await visit(page, {
- id: 'components-button--icon-button'
+ id: 'components-button--icon-button',
})
await expect(page).toHaveNoViolations()
})
@@ -198,8 +198,8 @@ test.describe('Button', () => {
await visit(page, {
id: 'components-button--watch-counter-button',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -213,7 +213,7 @@ test.describe('Button', () => {
test.fixme('axe @aat', async ({page}) => {
await visit(page, {
- id: 'components-button--watch-counter-button'
+ id: 'components-button--watch-counter-button',
})
await expect(page).toHaveNoViolations()
})
@@ -225,8 +225,8 @@ test.describe('Button', () => {
await visit(page, {
id: 'components-button--watch-icon-button',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -240,7 +240,7 @@ test.describe('Button', () => {
test('axe @aat', async ({page}) => {
await visit(page, {
- id: 'components-button--watch-icon-button'
+ id: 'components-button--watch-icon-button',
})
await expect(page).toHaveNoViolations()
})
@@ -252,8 +252,8 @@ test.describe('Button', () => {
await visit(page, {
id: 'components-button--caret-button',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -267,7 +267,7 @@ test.describe('Button', () => {
test('axe @aat', async ({page}) => {
await visit(page, {
- id: 'components-button--caret-button'
+ id: 'components-button--caret-button',
})
await expect(page).toHaveNoViolations()
})
@@ -279,8 +279,8 @@ test.describe('Button', () => {
await visit(page, {
id: 'components-button--block-button',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -294,7 +294,7 @@ test.describe('Button', () => {
test('axe @aat', async ({page}) => {
await visit(page, {
- id: 'components-button--block-button'
+ id: 'components-button--block-button',
})
await expect(page).toHaveNoViolations()
})
@@ -306,8 +306,8 @@ test.describe('Button', () => {
await visit(page, {
id: 'components-button--disabled-button',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -321,7 +321,7 @@ test.describe('Button', () => {
test('axe @aat', async ({page}) => {
await visit(page, {
- id: 'components-button--disabled-button'
+ id: 'components-button--disabled-button',
})
await expect(page).toHaveNoViolations()
})
@@ -333,8 +333,8 @@ test.describe('Button', () => {
await visit(page, {
id: 'components-button--link-button',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -348,7 +348,7 @@ test.describe('Button', () => {
test.fixme('axe @aat', async ({page}) => {
await visit(page, {
- id: 'components-button--link-button'
+ id: 'components-button--link-button',
})
await expect(page).toHaveNoViolations()
})
diff --git a/e2e/components/TreeView.test.ts b/e2e/components/TreeView.test.ts
index ccd657d56c3..1f665117e85 100644
--- a/e2e/components/TreeView.test.ts
+++ b/e2e/components/TreeView.test.ts
@@ -10,8 +10,8 @@ test.describe('TreeView', () => {
await visit(page, {
id: 'components-treeview--default',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -22,15 +22,15 @@ test.describe('TreeView', () => {
await visit(page, {
id: 'components-treeview--default',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
await expect(page).toHaveNoViolations({
rules: {
'color-contrast': {
- enabled: theme !== 'dark_dimmed'
- }
- }
+ enabled: theme !== 'dark_dimmed',
+ },
+ },
})
})
})
@@ -44,8 +44,8 @@ test.describe('TreeView', () => {
await visit(page, {
id: 'components-treeview-features--empty-directories',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -56,15 +56,15 @@ test.describe('TreeView', () => {
await visit(page, {
id: 'components-treeview-features--empty-directories',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
await expect(page).toHaveNoViolations({
rules: {
'color-contrast': {
- enabled: theme !== 'dark_dimmed'
- }
- }
+ enabled: theme !== 'dark_dimmed',
+ },
+ },
})
})
})
@@ -78,8 +78,8 @@ test.describe('TreeView', () => {
await visit(page, {
id: 'components-treeview-features--files',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -90,15 +90,15 @@ test.describe('TreeView', () => {
await visit(page, {
id: 'components-treeview-features--files',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
await expect(page).toHaveNoViolations({
rules: {
'color-contrast': {
- enabled: theme !== 'dark_dimmed'
- }
- }
+ enabled: theme !== 'dark_dimmed',
+ },
+ },
})
})
})
@@ -112,8 +112,8 @@ test.describe('TreeView', () => {
await visit(page, {
id: 'components-treeview-features--files-changed',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -124,15 +124,15 @@ test.describe('TreeView', () => {
await visit(page, {
id: 'components-treeview-features--files-changed',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
await expect(page).toHaveNoViolations({
rules: {
'color-contrast': {
- enabled: theme !== 'dark_dimmed'
- }
- }
+ enabled: theme !== 'dark_dimmed',
+ },
+ },
})
})
})
diff --git a/e2e/components/UnderlineNav.test.ts b/e2e/components/UnderlineNav.test.ts
index 5708a4b54e3..bbb23ca3b15 100644
--- a/e2e/components/UnderlineNav.test.ts
+++ b/e2e/components/UnderlineNav.test.ts
@@ -10,8 +10,8 @@ test.describe('UnderlineNav', () => {
await visit(page, {
id: 'drafts-components-underlinenav-examples--profile-page',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -22,15 +22,15 @@ test.describe('UnderlineNav', () => {
await visit(page, {
id: 'drafts-components-underlinenav-examples--profile-page',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
await expect(page).toHaveNoViolations({
rules: {
'color-contrast': {
- enabled: theme !== 'dark_dimmed'
- }
- }
+ enabled: theme !== 'dark_dimmed',
+ },
+ },
})
})
})
@@ -44,8 +44,8 @@ test.describe('UnderlineNav', () => {
await visit(page, {
id: 'drafts-components-underlinenav-examples--pull-request-page',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -56,8 +56,8 @@ test.describe('UnderlineNav', () => {
await visit(page, {
id: 'drafts-components-underlinenav-examples--pull-request-page',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// These themes currently have a contrast violation due to
@@ -67,9 +67,9 @@ test.describe('UnderlineNav', () => {
await expect(page).toHaveNoViolations({
rules: {
'color-contrast': {
- enabled: !denylist.has(theme)
- }
- }
+ enabled: !denylist.has(theme),
+ },
+ },
})
})
})
@@ -83,8 +83,8 @@ test.describe('UnderlineNav', () => {
await visit(page, {
id: 'drafts-components-underlinenav-examples--repos-page',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -95,15 +95,15 @@ test.describe('UnderlineNav', () => {
await visit(page, {
id: 'drafts-components-underlinenav-examples--repos-page',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
await expect(page).toHaveNoViolations({
rules: {
'color-contrast': {
- enabled: theme !== 'dark_dimmed'
- }
- }
+ enabled: theme !== 'dark_dimmed',
+ },
+ },
})
})
})
@@ -117,8 +117,8 @@ test.describe('UnderlineNav', () => {
await visit(page, {
id: 'drafts-components-underlinenav-features--counters-loading-state',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -129,15 +129,15 @@ test.describe('UnderlineNav', () => {
await visit(page, {
id: 'drafts-components-underlinenav-features--counters-loading-state',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
await expect(page).toHaveNoViolations({
rules: {
'color-contrast': {
- enabled: theme !== 'dark_dimmed'
- }
- }
+ enabled: theme !== 'dark_dimmed',
+ },
+ },
})
})
})
@@ -151,8 +151,8 @@ test.describe('UnderlineNav', () => {
await visit(page, {
id: 'drafts-components-underlinenav-features--default',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -163,15 +163,15 @@ test.describe('UnderlineNav', () => {
await visit(page, {
id: 'drafts-components-underlinenav-features--default',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
await expect(page).toHaveNoViolations({
rules: {
'color-contrast': {
- enabled: theme !== 'dark_dimmed'
- }
- }
+ enabled: theme !== 'dark_dimmed',
+ },
+ },
})
})
})
@@ -185,8 +185,8 @@ test.describe('UnderlineNav', () => {
await visit(page, {
id: 'drafts-components-underlinenav-features--overflow-template',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -197,15 +197,15 @@ test.describe('UnderlineNav', () => {
await visit(page, {
id: 'drafts-components-underlinenav-features--overflow-template',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
await expect(page).toHaveNoViolations({
rules: {
'color-contrast': {
- enabled: theme !== 'dark_dimmed'
- }
- }
+ enabled: theme !== 'dark_dimmed',
+ },
+ },
})
})
})
@@ -219,8 +219,8 @@ test.describe('UnderlineNav', () => {
await visit(page, {
id: 'drafts-components-underlinenav-features--with-counter-labels',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -231,15 +231,15 @@ test.describe('UnderlineNav', () => {
await visit(page, {
id: 'drafts-components-underlinenav-features--with-counter-labels',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
await expect(page).toHaveNoViolations({
rules: {
'color-contrast': {
- enabled: theme !== 'dark_dimmed'
- }
- }
+ enabled: theme !== 'dark_dimmed',
+ },
+ },
})
})
})
@@ -253,8 +253,8 @@ test.describe('UnderlineNav', () => {
await visit(page, {
id: 'drafts-components-underlinenav-features--with-icons',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
// Default state
@@ -265,15 +265,15 @@ test.describe('UnderlineNav', () => {
await visit(page, {
id: 'drafts-components-underlinenav-features--with-icons',
globals: {
- colorScheme: theme
- }
+ colorScheme: theme,
+ },
})
await expect(page).toHaveNoViolations({
rules: {
'color-contrast': {
- enabled: theme !== 'dark_dimmed'
- }
- }
+ enabled: theme !== 'dark_dimmed',
+ },
+ },
})
})
})
diff --git a/e2e/matchers/toHaveNoViolations.ts b/e2e/matchers/toHaveNoViolations.ts
index 91669fcc18e..396b10ffa7b 100644
--- a/e2e/matchers/toHaveNoViolations.ts
+++ b/e2e/matchers/toHaveNoViolations.ts
@@ -7,21 +7,21 @@ import fs from 'node:fs'
const defaultOptions = {
rules: {
'document-title': {
- enabled: false
+ enabled: false,
},
'html-has-lang': {
- enabled: false
+ enabled: false,
},
'landmark-one-main': {
- enabled: false
+ enabled: false,
},
'page-has-heading-one': {
- enabled: false
+ enabled: false,
},
region: {
- enabled: false
- }
- }
+ enabled: false,
+ },
+ },
}
expect.extend({
@@ -34,8 +34,8 @@ expect.extend({
...options,
rules: {
...defaultOptions.rules,
- ...options.rules
- }
+ ...options.rules,
+ },
})
.analyze()
@@ -43,7 +43,7 @@ expect.extend({
if (result.violations.length === 0) {
return {
- pass: true
+ pass: true,
}
}
@@ -69,9 +69,9 @@ expect.extend({
return `${result.violations.length} axe violations
${violations.join('\n\n')}`
- }
+ },
}
- }
+ },
})
function saveResult(result: AxeResults) {
@@ -80,7 +80,7 @@ function saveResult(result: AxeResults) {
if (!fs.existsSync(resultsDir)) {
fs.mkdirSync(resultsDir, {
- recursive: true
+ recursive: true,
})
}
@@ -89,10 +89,10 @@ function saveResult(result: AxeResults) {
resultsDir,
path.format({
name: testInfo.titlePath.slice(1).join('-').replace(/ /g, '-'),
- ext: '.json'
- })
+ ext: '.json',
+ }),
),
JSON.stringify(result, null, 2),
- 'utf8'
+ 'utf8',
)
}
diff --git a/e2e/test-helpers/themes.ts b/e2e/test-helpers/themes.ts
index c065a6016dd..9aa3177c5bb 100644
--- a/e2e/test-helpers/themes.ts
+++ b/e2e/test-helpers/themes.ts
@@ -7,5 +7,5 @@ export const themes = [
'dark_dimmed',
'dark_high_contrast',
'dark_colorblind',
- 'dark_tritanopia'
+ 'dark_tritanopia',
]
diff --git a/e2e/test-helpers/waitForImages.ts b/e2e/test-helpers/waitForImages.ts
index 3c83447f357..9127d711c90 100644
--- a/e2e/test-helpers/waitForImages.ts
+++ b/e2e/test-helpers/waitForImages.ts
@@ -17,7 +17,7 @@ export async function waitForImages(page: Page) {
img.addEventListener('load', resolve)
img.addEventListener('error', reject)
})
- })
+ }),
)
})
}
diff --git a/jest.config.js b/jest.config.js
index 29e435deeb8..90263ee6b73 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -7,7 +7,7 @@ module.exports = {
setupFilesAfterEnv: ['/src/utils/test-matchers.tsx', '/src/utils/test-deprecations.tsx'],
testMatch: ['/(src|codemods)/**/*.test.[jt]s?(x)', '!**/*.types.test.[jt]s?(x)'],
transformIgnorePatterns: [
- 'node_modules/(?!@github/combobox-nav|@koddsson/textarea-caret|@github/markdown-toolbar-element)'
+ 'node_modules/(?!@github/combobox-nav|@koddsson/textarea-caret|@github/markdown-toolbar-element)',
],
- watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname']
+ watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
}
diff --git a/package-lock.json b/package-lock.json
index e8d180f7c15..e9f0ae56b12 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "@primer/react",
- "version": "35.14.2",
+ "version": "35.15.1",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@primer/react",
- "version": "35.14.2",
+ "version": "35.15.1",
"license": "MIT",
"dependencies": {
"@github/combobox-nav": "^2.1.5",
@@ -44,7 +44,7 @@
"@babel/preset-typescript": "7.18.6",
"@changesets/changelog-github": "0.4.7",
"@changesets/cli": "2.25.1",
- "@github/prettier-config": "0.0.4",
+ "@github/prettier-config": "0.0.6",
"@playwright/test": "1.27.1",
"@rollup/plugin-babel": "6.0.2",
"@rollup/plugin-commonjs": "23.0.0",
@@ -3011,9 +3011,9 @@
"integrity": "sha512-BU//VcOhAFIz/t36NW/nlmGIFqTrPVMECZEZx+jlrEh87qCoO79fLIcsLr2xAT7E/F/lLAuYFVSwpnsPCAPdrQ=="
},
"node_modules/@github/prettier-config": {
- "version": "0.0.4",
- "resolved": "https://registry.npmjs.org/@github/prettier-config/-/prettier-config-0.0.4.tgz",
- "integrity": "sha512-ZOJ+U771Mw68qp2GPbcqPt2Xg0LEl0YwiIFHXwVLAFm2TgDnsgcCHhXO8PIxOWPqSFO4S7xIMD9CBobfaWGASA==",
+ "version": "0.0.6",
+ "resolved": "https://registry.npmjs.org/@github/prettier-config/-/prettier-config-0.0.6.tgz",
+ "integrity": "sha512-Sdb089z+QbGnFF2NivbDeaJ62ooPlD31wE6Fkb/ESjAOXSjNJo+gjqzYYhlM7G3ERJmKFZRUJYMlsqB7Tym8lQ==",
"dev": true
},
"node_modules/@hapi/hoek": {
@@ -44816,9 +44816,9 @@
"integrity": "sha512-BU//VcOhAFIz/t36NW/nlmGIFqTrPVMECZEZx+jlrEh87qCoO79fLIcsLr2xAT7E/F/lLAuYFVSwpnsPCAPdrQ=="
},
"@github/prettier-config": {
- "version": "0.0.4",
- "resolved": "https://registry.npmjs.org/@github/prettier-config/-/prettier-config-0.0.4.tgz",
- "integrity": "sha512-ZOJ+U771Mw68qp2GPbcqPt2Xg0LEl0YwiIFHXwVLAFm2TgDnsgcCHhXO8PIxOWPqSFO4S7xIMD9CBobfaWGASA==",
+ "version": "0.0.6",
+ "resolved": "https://registry.npmjs.org/@github/prettier-config/-/prettier-config-0.0.6.tgz",
+ "integrity": "sha512-Sdb089z+QbGnFF2NivbDeaJ62ooPlD31wE6Fkb/ESjAOXSjNJo+gjqzYYhlM7G3ERJmKFZRUJYMlsqB7Tym8lQ==",
"dev": true
},
"@hapi/hoek": {
diff --git a/package.json b/package.json
index 30abb501570..e5141980efb 100644
--- a/package.json
+++ b/package.json
@@ -116,7 +116,7 @@
"@babel/preset-typescript": "7.18.6",
"@changesets/changelog-github": "0.4.7",
"@changesets/cli": "2.25.1",
- "@github/prettier-config": "0.0.4",
+ "@github/prettier-config": "0.0.6",
"@playwright/test": "1.27.1",
"@rollup/plugin-babel": "6.0.2",
"@rollup/plugin-commonjs": "23.0.0",
diff --git a/playwright.config.ts b/playwright.config.ts
index 0697cb175a8..624feb19ed2 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -23,13 +23,13 @@ const config: Config = {
// Large breakpoint
// @see https://primer.style/primitives/spacing#breakpoints
width: 1012,
- height: 768
- }
+ height: 768,
+ },
},
expect: {
toHaveScreenshot: {
- animations: 'disabled'
- }
+ animations: 'disabled',
+ },
},
reporter: [
['line'],
@@ -37,10 +37,10 @@ const config: Config = {
[
'json',
{
- outputFile: path.join(__dirname, '.playwright', 'results.json')
- }
- ]
- ]
+ outputFile: path.join(__dirname, '.playwright', 'results.json'),
+ },
+ ],
+ ],
}
export default config
diff --git a/rollup.config.js b/rollup.config.js
index e65259a88ae..02b366b82a4 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -30,7 +30,7 @@ const input = new Set([
'src/polyfills/*',
// "./lib-esm/utils/*"
- 'src/utils/*'
+ 'src/utils/*',
],
{
cwd: __dirname,
@@ -43,10 +43,10 @@ const input = new Set([
// Files use dependencies which are not listed by package
'src/utils/testing.tsx',
- 'src/utils/test-matchers.tsx'
- ]
- }
- )
+ 'src/utils/test-matchers.tsx',
+ ],
+ },
+ ),
])
const extensions = ['.js', '.jsx', '.ts', '.tsx']
@@ -54,7 +54,7 @@ const ESM_ONLY = new Set(['@github/combobox-nav', '@github/markdown-toolbar-elem
const dependencies = [
...Object.keys(packageJson.peerDependencies ?? {}),
...Object.keys(packageJson.dependencies ?? {}),
- ...Object.keys(packageJson.devDependencies ?? {})
+ ...Object.keys(packageJson.devDependencies ?? {}),
]
function createPackageRegex(name) {
@@ -77,9 +77,9 @@ const baseConfig = {
[
'@babel/preset-react',
{
- modules: false
- }
- ]
+ modules: false,
+ },
+ ],
],
plugins: [
'macros',
@@ -92,19 +92,19 @@ const baseConfig = {
'babel-plugin-transform-replace-expressions',
{
replace: {
- __DEV__: "process.env.NODE_ENV !== 'production'"
- }
- }
- ]
- ]
+ __DEV__: "process.env.NODE_ENV !== 'production'",
+ },
+ },
+ ],
+ ],
}),
commonjs({
- extensions
+ extensions,
}),
resolve({
- extensions
- })
- ]
+ extensions,
+ }),
+ ],
}
export default [
@@ -116,8 +116,8 @@ export default [
dir: 'lib-esm',
format: 'esm',
preserveModules: true,
- preserveModulesRoot: 'src'
- }
+ preserveModulesRoot: 'src',
+ },
},
// CommonJS
@@ -129,8 +129,8 @@ export default [
format: 'commonjs',
preserveModules: true,
preserveModulesRoot: 'src',
- exports: 'auto'
- }
+ exports: 'auto',
+ },
},
// Bundles
@@ -141,11 +141,11 @@ export default [
plugins: [
replace({
'process.env.NODE_ENV': JSON.stringify('production'),
- preventAssignment: true
+ preventAssignment: true,
}),
...baseConfig.plugins,
terser(),
- visualizer({sourcemap: true})
+ visualizer({sourcemap: true}),
],
output: ['esm', 'umd'].map(format => ({
file: `dist/browser.${format}.js`,
@@ -155,8 +155,8 @@ export default [
globals: {
react: 'React',
'react-dom': 'ReactDOM',
- 'styled-components': 'styled'
- }
- }))
- }
+ 'styled-components': 'styled',
+ },
+ })),
+ },
]
diff --git a/script/component-status-project/build.ts b/script/component-status-project/build.ts
index 0054289b62d..b9a008e3ded 100644
--- a/script/component-status-project/build.ts
+++ b/script/component-status-project/build.ts
@@ -24,14 +24,14 @@ function getComponentStatuses(filenames: string[], dir: string) {
const handleCallback = (
filename: string,
resolve: (value: ComponentStatus | null) => void,
- reject: (value: unknown) => void
+ reject: (value: unknown) => void,
) => {
fs.readFile(path.resolve(dir, filename), 'utf-8', (err, content) => {
if (err) return reject(err)
if (fm.test(content)) {
const {
- attributes: {title, status}
+ attributes: {title, status},
} = fm(content)
if (status) {
@@ -71,9 +71,9 @@ async function readFiles(dir: string) {
.reduce(
(acc, file) => ({
...acc,
- ...file
+ ...file,
}),
- {}
+ {},
)
} catch (err) {
throw new Error(`error reading files: ${err}`)
diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js
index 7c7cff6eeed..cb306c1a08a 100644
--- a/script/generate-e2e-tests.js
+++ b/script/generate-e2e-tests.js
@@ -13,62 +13,62 @@ const components = new Map([
stories: [
{
id: 'components-actionlist--default',
- name: 'Default'
+ name: 'Default',
},
{
id: 'components-actionlist-features--block-description',
- name: 'Block Description'
+ name: 'Block Description',
},
{
id: 'components-actionlist-features--disabled-item',
- name: 'Disabled Item'
+ name: 'Disabled Item',
},
{
id: 'components-actionlist-features--inline-description',
- name: 'Inline Description'
+ name: 'Inline Description',
},
{
id: 'components-actionlist-features--inside-overlay',
- name: 'Inside Overlay'
+ name: 'Inside Overlay',
},
{
id: 'components-actionlist-features--item-dividers',
- name: 'Item Dividers'
+ name: 'Item Dividers',
},
{
id: 'components-actionlist-features--links',
- name: 'Links'
+ name: 'Links',
},
{
id: 'components-actionlist-features--multi-select',
- name: 'Multi Select'
+ name: 'Multi Select',
},
{
id: 'components-actionlist-features--simple-list',
- name: 'Simple List'
+ name: 'Simple List',
},
{
id: 'components-actionlist-features--single-divider',
- name: 'Single Divider'
+ name: 'Single Divider',
},
{
id: 'components-actionlist-features--single-select',
- name: 'Single Select'
+ name: 'Single Select',
},
{
id: 'components-actionlist-features--text-wrap-and-truncation',
- name: 'Text Wrap And Truncation'
+ name: 'Text Wrap And Truncation',
},
{
id: 'components-actionlist-features--with-avatars',
- name: 'With Avatars'
+ name: 'With Avatars',
},
{
id: 'components-actionlist-features--with-icons',
- name: 'With Icons'
- }
- ]
- }
+ name: 'With Icons',
+ },
+ ],
+ },
],
[
'UnderlineNav',
@@ -76,38 +76,38 @@ const components = new Map([
stories: [
{
id: 'drafts-components-underlinenav-examples--profile-page',
- name: 'Profile Page'
+ name: 'Profile Page',
},
{
id: 'drafts-components-underlinenav-examples--pull-request-page',
- name: 'Pull Request Page'
+ name: 'Pull Request Page',
},
{
id: 'drafts-components-underlinenav-examples--repos-page',
- name: 'Repos Page'
+ name: 'Repos Page',
},
{
id: 'drafts-components-underlinenav-features--counters-loading-state',
- name: 'Counters Loading State'
+ name: 'Counters Loading State',
},
{
id: 'drafts-components-underlinenav-features--default',
- name: 'Default'
+ name: 'Default',
},
{
id: 'drafts-components-underlinenav-features--overflow-template',
- name: 'Overflow Template'
+ name: 'Overflow Template',
},
{
id: 'drafts-components-underlinenav-features--with-counter-labels',
- name: 'With Counter Labels'
+ name: 'With Counter Labels',
},
{
id: 'drafts-components-underlinenav-features--with-icons',
- name: 'With Icons'
- }
- ]
- }
+ name: 'With Icons',
+ },
+ ],
+ },
],
[
'TreeView',
@@ -115,23 +115,23 @@ const components = new Map([
stories: [
{
id: 'components-treeview--default',
- name: 'Default'
+ name: 'Default',
},
{
id: 'components-treeview-features--empty-directories',
- name: 'Empty Directories'
+ name: 'Empty Directories',
},
{
id: 'components-treeview-features--files',
- name: 'Files'
+ name: 'Files',
},
{
id: 'components-treeview-features--files-changed',
- name: 'Files Changed'
- }
- ]
- }
- ]
+ name: 'Files Changed',
+ },
+ ],
+ },
+ ],
])
for (const [component, info] of components) {
@@ -193,7 +193,7 @@ test.describe('${component}', () => {
singleQuote: true,
bracketSpacing: false,
trailingComma: 'none',
- arrowParens: 'avoid'
+ arrowParens: 'avoid',
})
fs.writeFileSync(filepath, formatted, 'utf8')
}
diff --git a/src/ActionList/ActionList.examples.stories.tsx b/src/ActionList/ActionList.examples.stories.tsx
index cb05c95bbfe..d1875ef8cd6 100644
--- a/src/ActionList/ActionList.examples.stories.tsx
+++ b/src/ActionList/ActionList.examples.stories.tsx
@@ -11,7 +11,7 @@ import {
IssueOpenedIcon,
NumberIcon,
LinkIcon,
- XIcon
+ XIcon,
} from '@primer/octicons-react'
import {ActionList, ActionListItemProps} from '.'
import TextInput from '../TextInput'
@@ -24,9 +24,9 @@ const meta: Meta = {
component: ActionList,
parameters: {
controls: {
- disable: true
- }
- }
+ disable: true,
+ },
+ },
}
export default meta
@@ -35,7 +35,7 @@ const ReactRouterLikeLink = forwardRef {
// eslint-disable-next-line jsx-a11y/anchor-has-content
return
- }
+ },
)
const NextJSLikeLink = forwardRef(
@@ -43,10 +43,10 @@ const NextJSLikeLink = forwardRef(
const child = React.Children.only(children)
const childProps = {
ref,
- href
+ href,
}
return <>{React.isValidElement(child) ? React.cloneElement(child, childProps) : null}
- }
+ },
)
export const ListLinkItem = () => (
@@ -106,7 +106,7 @@ const branches = [
'dependabot/npm_and_yarn/docs/engine.io-4.1.2',
'ci-order',
'mdx-components',
- 'emoji-picker-api'
+ 'emoji-picker-api',
]
const filterSlowly = async (query: string) => {
@@ -124,7 +124,7 @@ export function MixedSelection(): JSX.Element {
{text: 'Assignee', icon: },
{text: 'Team', icon: },
{text: 'Estimate', icon: },
- {text: 'Due Date', icon: }
+ {text: 'Due Date', icon: },
]
return (
@@ -216,7 +216,7 @@ export function MemexSortable(): JSX.Element {
{text: 'Assignee', icon: , selected: true},
{text: 'Team', icon: , selected: true},
{text: 'Estimate', icon: , selected: false},
- {text: 'Due Date', icon: , selected: false}
+ {text: 'Due Date', icon: , selected: false},
])
const toggle = (text: string) => {
@@ -224,7 +224,7 @@ export function MemexSortable(): JSX.Element {
options.map(option => {
if (option.text === text) option.selected = !option.selected
return option
- })
+ }),
)
}
@@ -296,7 +296,7 @@ const SortableItem: React.FC> = ({opt
item: option,
collect: monitor => {
return {isDragging: monitor.isDragging()}
- }
+ },
}))
const [{isOver}, dropRef] = useDrop(() => ({
@@ -306,7 +306,7 @@ const SortableItem: React.FC> = ({opt
},
drop: (optionDropped: Option) => {
reorder({optionToMove: optionDropped, moveAfterOption: option})
- }
+ },
}))
return (
@@ -318,7 +318,7 @@ const SortableItem: React.FC> = ({opt
sx={{
opacity: isDragging ? 0.5 : 1,
boxShadow: isOver ? theme => `0px 2px 0 0px ${theme.colors.accent.emphasis}` : undefined,
- borderRadius: isOver ? 0 : 2
+ borderRadius: isOver ? 0 : 2,
}}
>
{option.icon}
diff --git a/src/ActionList/ActionList.features.stories.tsx b/src/ActionList/ActionList.features.stories.tsx
index 5098bc24de3..ee692993678 100644
--- a/src/ActionList/ActionList.features.stories.tsx
+++ b/src/ActionList/ActionList.features.stories.tsx
@@ -22,13 +22,13 @@ import {
RepoForkedIcon,
AlertIcon,
TableIcon,
- PeopleIcon
+ PeopleIcon,
} from '@primer/octicons-react'
export default {
title: 'Components/ActionList/Features',
component: ActionList,
- subcomponents: {Item, LinkItem, Group, Divider, Description}
+ subcomponents: {Item, LinkItem, Group, Divider, Description},
} as Meta
export const SimpleList = () => (
@@ -83,7 +83,7 @@ const users = [
{login: 'mperrotti', name: 'Mike Perrotti'},
{login: 'dgreif', name: 'Dusty Greif'},
{login: 'smockle', name: 'Clay Miller'},
- {login: 'siddharthkp', name: 'Siddharth Kshetrapal'}
+ {login: 'siddharthkp', name: 'Siddharth Kshetrapal'},
]
export const WithAvatars = () => (
@@ -149,7 +149,7 @@ const projects = [
{name: 'Primer Backlog', scope: 'GitHub'},
{name: 'Accessibility', scope: 'GitHub'},
{name: 'Octicons', scope: 'github/primer'},
- {name: 'Primer React', scope: 'github/primer'}
+ {name: 'Primer React', scope: 'github/primer'},
]
export const SingleSelect = () => {
@@ -316,7 +316,7 @@ export const TextWrapAndTruncation = () => (
const teams = [
{id: '5025661', type: 'team', slug: 'github/primer-reviewers', name: 'Primer Reviewers', members: 20},
- {id: '1929972', type: 'team', slug: 'github/design-infrastructure', name: 'Design Infrastructure', members: 20}
+ {id: '1929972', type: 'team', slug: 'github/design-infrastructure', name: 'Design Infrastructure', members: 20},
]
export const ConditionalChildren = () => {
diff --git a/src/ActionList/ActionList.stories.tsx b/src/ActionList/ActionList.stories.tsx
index 53d8f5bc8df..de6f66ae6f5 100644
--- a/src/ActionList/ActionList.stories.tsx
+++ b/src/ActionList/ActionList.stories.tsx
@@ -11,7 +11,7 @@ import {TypographyIcon, VersionsIcon, SearchIcon, ArrowRightIcon, ArrowLeftIcon}
export default {
title: 'Components/ActionList',
component: ActionList,
- subcomponents: {Item, LinkItem, Group, Divider, Description}
+ subcomponents: {Item, LinkItem, Group, Divider, Description},
} as Meta
export const Default = () => (
@@ -33,31 +33,31 @@ Playground.args = {
showDividers: false,
selectionVariant: undefined,
variant: 'inset',
- role: 'listbox'
+ role: 'listbox',
}
Playground.argTypes = {
showDividers: {
control: {
- type: 'boolean'
- }
+ type: 'boolean',
+ },
},
variant: {
control: {
- type: 'radio'
+ type: 'radio',
},
- options: ['inset', 'full']
+ options: ['inset', 'full'],
},
selectionVariant: {
control: {
type: 'radio',
- labels: ['single', 'multiple', 'unset']
+ labels: ['single', 'multiple', 'unset'],
},
options: [0, 1, 2],
- mapping: ['single', 'multiple', null]
+ mapping: ['single', 'multiple', null],
},
role: {
- type: 'string'
- }
+ type: 'string',
+ },
}
const icons = ['unset', 'TypographyIcon', 'VersionsIcon', 'SearchIcon', 'ArrowRightIcon', 'ArrowLeftIcon']
@@ -107,49 +107,49 @@ export const ItemPlayground = args => {
ItemPlayground.argTypes = {
selected: {
control: {
- type: 'boolean'
- }
+ type: 'boolean',
+ },
},
active: {
control: {
- type: 'boolean'
- }
+ type: 'boolean',
+ },
},
disabled: {
control: {
- type: 'boolean'
- }
+ type: 'boolean',
+ },
},
variant: {
control: 'radio',
- options: ['default', 'danger']
+ options: ['default', 'danger'],
},
role: {
- type: 'string'
+ type: 'string',
},
id: {
- type: 'string'
+ type: 'string',
},
leadingVisual: {
control: {
- type: 'select'
+ type: 'select',
},
- options: icons
+ options: icons,
},
trailingVisual: {
control: {
- type: 'select'
+ type: 'select',
},
- options: icons
+ options: icons,
},
selectionVariant: {
control: 'radio',
if: {arg: 'selected'},
options: ['single', 'multiple'],
table: {
- category: 'ActionList'
- }
- }
+ category: 'ActionList',
+ },
+ },
}
ItemPlayground.args = {
selected: false,
@@ -160,7 +160,7 @@ ItemPlayground.args = {
id: 'item-1',
leadingVisual: null,
trailingVisual: null,
- selectionVariant: 'single'
+ selectionVariant: 'single',
}
// @ts-ignore ignoring types here to pass in options for icon selection in Storybook
@@ -211,35 +211,35 @@ LinkItemPlayground.args = {
role: 'listitem',
id: 'item-1',
leadingVisual: null,
- trailingVisual: null
+ trailingVisual: null,
}
LinkItemPlayground.argTypes = {
active: {
control: {
- type: 'boolean'
- }
+ type: 'boolean',
+ },
},
role: {
- type: 'string'
+ type: 'string',
},
id: {
- type: 'string'
+ type: 'string',
},
leadingVisual: {
control: {
- type: 'select'
+ type: 'select',
},
- options: icons
+ options: icons,
},
trailingVisual: {
control: {
- type: 'select'
+ type: 'select',
},
- options: icons
+ options: icons,
},
href: {
- type: 'string'
- }
+ type: 'string',
+ },
}
export const GroupPlayground: Story = args => (
@@ -253,23 +253,23 @@ export const GroupPlayground: Story = args => (
GroupPlayground.argTypes = {
variant: {
control: {
- type: 'radio'
+ type: 'radio',
},
- options: ['subtle', 'filled']
+ options: ['subtle', 'filled'],
},
role: {
- type: 'string'
+ type: 'string',
},
title: {
- type: 'string'
+ type: 'string',
},
auxiliaryText: {
- type: 'string'
- }
+ type: 'string',
+ },
}
GroupPlayground.args = {
variant: 'subtle',
role: 'listbox',
title: 'Group title',
- auxiliaryText: ''
+ auxiliaryText: '',
}
diff --git a/src/ActionList/Description.tsx b/src/ActionList/Description.tsx
index b8a653ba74c..63b89d4356b 100644
--- a/src/ActionList/Description.tsx
+++ b/src/ActionList/Description.tsx
@@ -25,7 +25,7 @@ export const Description: React.FC>
backgroundColor: 'actionListItem.inlineDivider',
marginTop: (theme: Theme) => `calc(${get('space.2')(theme)} - 1px)`,
marginBottom: 2,
- listStyle: 'none' // hide the ::marker inserted by browser's stylesheet
+ listStyle: 'none', // hide the ::marker inserted by browser's stylesheet
},
- sx as SxProp
+ sx as SxProp,
)}
data-component="ActionList.Divider"
/>
diff --git a/src/ActionList/Group.tsx b/src/ActionList/Group.tsx
index 68fc9406793..bd2052fb2e8 100644
--- a/src/ActionList/Group.tsx
+++ b/src/ActionList/Group.tsx
@@ -54,7 +54,7 @@ export const Group: React.FC> = ({
sx={{
'&:not(:first-child)': {marginTop: 2},
listStyle: 'none', // hide the ::marker inserted by browser's stylesheet
- ...sx
+ ...sx,
}}
{...props}
>
@@ -97,8 +97,8 @@ const Header: React.FC> = ({variant, title,
marginBottom: 2,
borderTop: '1px solid',
borderBottom: '1px solid',
- borderColor: 'neutral.muted'
- })
+ borderColor: 'neutral.muted',
+ }),
}
return (
diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx
index 1cd4969f054..ca97e3a727a 100644
--- a/src/ActionList/Item.tsx
+++ b/src/ActionList/Item.tsx
@@ -27,7 +27,7 @@ export const Item = React.forwardRef(
_PrivateItemWrapper,
...props
},
- forwardedRef
+ forwardedRef,
): JSX.Element => {
const {variant: listVariant, showDividers, selectionVariant: listSelectionVariant} = React.useContext(ListContext)
const {selectionVariant: groupSelectionVariant} = React.useContext(GroupContext)
@@ -58,8 +58,8 @@ export const Item = React.forwardRef(
height: '24px',
content: '""',
bg: 'accent.fg',
- borderRadius: 2
- }
+ borderRadius: 2,
+ },
}
const styles = {
@@ -89,35 +89,35 @@ export const Item = React.forwardRef(
'@media (hover: hover) and (pointer: fine)': {
':hover:not([aria-disabled])': {
backgroundColor: `actionListItem.${variant}.hoverBg`,
- color: getVariantStyles(variant, disabled).hoverColor
+ color: getVariantStyles(variant, disabled).hoverColor,
},
':focus:not([data-focus-visible-added]), > a:focus:not([data-focus-visible-added])': {
backgroundColor: `actionListItem.${variant}.selectedBg`,
color: getVariantStyles(variant, disabled).hoverColor,
- outline: 'none'
+ outline: 'none',
},
'&[data-focus-visible-added], > a[data-focus-visible-added]': {
// we don't use :focus-visible because not all browsers (safari) have it yet
outline: 'none',
border: `2 solid`,
- boxShadow: `0 0 0 2px ${theme?.colors.accent.emphasis}`
+ boxShadow: `0 0 0 2px ${theme?.colors.accent.emphasis}`,
},
':active:not([aria-disabled])': {
backgroundColor: `actionListItem.${variant}.activeBg`,
- color: getVariantStyles(variant, disabled).hoverColor
- }
+ color: getVariantStyles(variant, disabled).hoverColor,
+ },
},
'@media (forced-colors: active)': {
':focus': {
// Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips
- outline: 'solid 1px transparent !important'
- }
+ outline: 'solid 1px transparent !important',
+ },
},
/** Divider styles */
'[data-component="ActionList.Item--DividerContainer"]': {
- position: 'relative'
+ position: 'relative',
},
'[data-component="ActionList.Item--DividerContainer"]::before': {
content: '" "',
@@ -127,7 +127,7 @@ export const Item = React.forwardRef(
top: '-7px',
border: '0 solid',
borderTopWidth: showDividers ? `1px` : '0',
- borderColor: 'var(--divider-color, transparent)'
+ borderColor: 'var(--divider-color, transparent)',
},
// show between 2 items
':not(:first-of-type)': {'--divider-color': theme?.colors.actionListItem.inlineDivider},
@@ -135,12 +135,12 @@ export const Item = React.forwardRef(
'[data-component="ActionList.Divider"] + &': {'--divider-color': 'transparent !important'},
// hide border on current and previous item
'&:hover:not([aria-disabled]), &:focus:not([aria-disabled]), &[data-focus-visible-added]:not([aria-disabled])': {
- '--divider-color': 'transparent'
+ '--divider-color': 'transparent',
},
'&:hover:not([aria-disabled]) + &, &:focus:not([aria-disabled]) + &, &[data-focus-visible-added] + li': {
- '--divider-color': 'transparent'
+ '--divider-color': 'transparent',
},
- ...(active ? activeStyles : {})
+ ...(active ? activeStyles : {}),
}
const clickHandler = React.useCallback(
@@ -152,7 +152,7 @@ export const Item = React.forwardRef(
if (typeof afterSelect === 'function') afterSelect()
}
},
- [onSelect, disabled, afterSelect]
+ [onSelect, disabled, afterSelect],
)
const keyPressHandler = React.useCallback(
@@ -164,7 +164,7 @@ export const Item = React.forwardRef(
if (typeof afterSelect === 'function') afterSelect()
}
},
- [onSelect, disabled, afterSelect]
+ [onSelect, disabled, afterSelect],
)
// use props.id if provided, otherwise generate one.
@@ -216,7 +216,7 @@ export const Item = React.forwardRef(
)}
)
- }
+ },
) as PolymorphicForwardRefComponent<'li', ActionListItemProps>
Item.displayName = 'ActionList.Item'
diff --git a/src/ActionList/LinkItem.tsx b/src/ActionList/LinkItem.tsx
index 6003cc35cb8..fb1f17a8d01 100644
--- a/src/ActionList/LinkItem.tsx
+++ b/src/ActionList/LinkItem.tsx
@@ -32,7 +32,7 @@ export const LinkItem = React.forwardRef(({sx = {}, active, as: Component, ...pr
// inherit Item styles
color: 'inherit',
- '&:hover': {color: 'inherit', textDecoration: 'none'}
+ '&:hover': {color: 'inherit', textDecoration: 'none'},
}
return (
diff --git a/src/ActionList/List.tsx b/src/ActionList/List.tsx
index 59c23360b45..3a469e7d0ac 100644
--- a/src/ActionList/List.tsx
+++ b/src/ActionList/List.tsx
@@ -32,19 +32,19 @@ const ListBox = styled.ul(sx)
export const List = React.forwardRef(
(
{variant = 'inset', selectionVariant, showDividers = false, role, sx: sxProp = {}, ...props},
- forwardedRef
+ forwardedRef,
): JSX.Element => {
const styles = {
margin: 0,
paddingInlineStart: 0, // reset ul styles
- paddingY: variant === 'inset' ? 2 : 0
+ paddingY: variant === 'inset' ? 2 : 0,
}
/** if list is inside a Menu, it will get a role from the Menu */
const {
listRole,
listLabelledBy,
- selectionVariant: containerSelectionVariant // TODO: Remove after DropdownMenu2 deprecation
+ selectionVariant: containerSelectionVariant, // TODO: Remove after DropdownMenu2 deprecation
} = React.useContext(ActionListContainerContext)
return (
@@ -60,14 +60,14 @@ export const List = React.forwardRef(
variant,
selectionVariant: selectionVariant || containerSelectionVariant,
showDividers,
- role: role || listRole
+ role: role || listRole,
}}
>
{props.children}
)
- }
+ },
) as PolymorphicForwardRefComponent<'ul', ActionListProps>
List.displayName = 'ActionList'
diff --git a/src/ActionList/Selection.tsx b/src/ActionList/Selection.tsx
index d98599a66f5..b4a9b71b6e4 100644
--- a/src/ActionList/Selection.tsx
+++ b/src/ActionList/Selection.tsx
@@ -21,7 +21,7 @@ export const Selection: React.FC> = ({se
// fail loudly instead of silently ignoring
if (selected) {
throw new Error(
- 'For Item to be selected, ActionList or ActionList.Group needs to have a selectionVariant defined'
+ 'For Item to be selected, ActionList or ActionList.Group needs to have a selectionVariant defined',
)
} else {
return null
@@ -44,13 +44,13 @@ export const Selection: React.FC> = ({se
rect: {
fill: selected ? 'accent.fg' : 'canvas.default',
stroke: selected ? 'accent.fg' : 'border.default',
- shapeRendering: 'auto' // this is a workaround to override global style in github/github, see primer/react#1666
+ shapeRendering: 'auto', // this is a workaround to override global style in github/github, see primer/react#1666
},
path: {
fill: 'fg.onEmphasis',
boxShadow: 'shadow.small',
- opacity: selected ? 1 : 0
- }
+ opacity: selected ? 1 : 0,
+ },
}}
>