diff --git a/package-lock.json b/package-lock.json
index 9803ef9e772..9caece748c0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,7 @@
"@github/relative-time-element": "^4.1.2",
"@lit-labs/react": "1.1.1",
"@primer/behaviors": "1.3.4",
- "@primer/octicons-react": "18.3.0",
+ "@primer/octicons-react": "^19.3.0",
"@primer/primitives": "7.11.11",
"@react-aria/ssr": "^3.1.0",
"@styled-system/css": "^5.1.5",
@@ -87,6 +87,7 @@
"@types/node": "16.11.11",
"@types/react": "18.0.28",
"@types/react-dom": "18.2.6",
+ "@types/react-is": "18.2.1",
"@typescript-eslint/eslint-plugin": "5.59.6",
"@typescript-eslint/parser": "5.59.6",
"ajv": "8.12.0",
@@ -150,6 +151,7 @@
"react-dnd": "14.0.4",
"react-dnd-html5-backend": "14.0.2",
"react-dom": "18.2.0",
+ "react-is": "18.2.0",
"react-test-renderer": "18.2.0",
"recast": "0.22.0",
"rimraf": "4.1.2",
@@ -3969,12 +3971,6 @@
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
- "node_modules/@jest/core/node_modules/react-is": {
- "version": "18.2.0",
- "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
- "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
- "dev": true
- },
"node_modules/@jest/core/node_modules/slash": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -4456,12 +4452,6 @@
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
- "node_modules/@jest/expect/node_modules/react-is": {
- "version": "18.2.0",
- "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
- "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
- "dev": true
- },
"node_modules/@jest/expect/node_modules/slash": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -5438,14 +5428,14 @@
}
},
"node_modules/@primer/octicons-react": {
- "version": "18.3.0",
- "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-18.3.0.tgz",
- "integrity": "sha512-kOoc4wrBw3bPe2ZPj9BmCwXdEkw8hxUX/tFCvcjOsZ6eywaQXm3PR0yZnPZxZ8o4RFj2tdg/cwGr4+cU83weHw==",
+ "version": "19.3.0",
+ "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-19.3.0.tgz",
+ "integrity": "sha512-LCCer1Roc5WGYy5FZcByniuUOJKla7i+9TaPeL95G+KIXhisuyWbTIy5DbiW/EWYMWvfCUQe6u71zZKVNeHjyg==",
"engines": {
"node": ">=8"
},
"peerDependencies": {
- "react": ">=15"
+ "react": ">=16.3"
}
},
"node_modules/@primer/primitives": {
@@ -14427,12 +14417,6 @@
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
- "node_modules/@storybook/test-runner/node_modules/react-is": {
- "version": "18.2.0",
- "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
- "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
- "dev": true
- },
"node_modules/@storybook/test-runner/node_modules/rimraf": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -15510,12 +15494,6 @@
"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
}
},
- "node_modules/@types/jest/node_modules/react-is": {
- "version": "18.2.0",
- "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
- "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
- "dev": true
- },
"node_modules/@types/jsdom": {
"version": "20.0.0",
"resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-20.0.0.tgz",
@@ -15750,6 +15728,15 @@
"@types/react": "*"
}
},
+ "node_modules/@types/react-is": {
+ "version": "18.2.1",
+ "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-18.2.1.tgz",
+ "integrity": "sha512-wyUkmaaSZEzFZivD8F2ftSyAfk6L+DfFliVj/mYdOXbVjRcS87fQJLTnhk6dRZPuJjI+9g6RZJO4PNCngUrmyw==",
+ "dev": true,
+ "dependencies": {
+ "@types/react": "*"
+ }
+ },
"node_modules/@types/react-test-renderer": {
"version": "17.0.1",
"resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-17.0.1.tgz",
@@ -23166,12 +23153,6 @@
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
- "node_modules/expect/node_modules/react-is": {
- "version": "18.2.0",
- "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
- "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
- "dev": true
- },
"node_modules/expect/node_modules/supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -24845,6 +24826,11 @@
"react-is": "^16.7.0"
}
},
+ "node_modules/hoist-non-react-statics/node_modules/react-is": {
+ "version": "16.13.1",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+ },
"node_modules/homedir-polyfill": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
@@ -26576,12 +26562,6 @@
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
- "node_modules/jest-circus/node_modules/react-is": {
- "version": "18.2.0",
- "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
- "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
- "dev": true
- },
"node_modules/jest-circus/node_modules/slash": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -26881,12 +26861,6 @@
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
- "node_modules/jest-cli/node_modules/react-is": {
- "version": "18.2.0",
- "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
- "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
- "dev": true
- },
"node_modules/jest-cli/node_modules/slash": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -27784,12 +27758,6 @@
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
- "node_modules/jest-config/node_modules/react-is": {
- "version": "18.2.0",
- "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
- "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
- "dev": true
- },
"node_modules/jest-config/node_modules/shebang-command": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -28017,12 +27985,6 @@
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
- "node_modules/jest-diff/node_modules/react-is": {
- "version": "18.2.0",
- "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
- "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
- "dev": true
- },
"node_modules/jest-diff/node_modules/supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -28165,12 +28127,6 @@
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
- "node_modules/jest-each/node_modules/react-is": {
- "version": "18.2.0",
- "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
- "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
- "dev": true
- },
"node_modules/jest-each/node_modules/supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -28523,12 +28479,6 @@
"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
}
},
- "node_modules/jest-leak-detector/node_modules/react-is": {
- "version": "18.2.0",
- "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
- "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
- "dev": true
- },
"node_modules/jest-matcher-utils": {
"version": "29.2.2",
"resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-29.2.2.tgz",
@@ -28646,12 +28596,6 @@
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
- "node_modules/jest-matcher-utils/node_modules/react-is": {
- "version": "18.2.0",
- "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
- "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
- "dev": true
- },
"node_modules/jest-matcher-utils/node_modules/supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -28844,12 +28788,6 @@
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
- "node_modules/jest-message-util/node_modules/react-is": {
- "version": "18.2.0",
- "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
- "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
- "dev": true
- },
"node_modules/jest-message-util/node_modules/slash": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -29674,12 +29612,6 @@
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
- "node_modules/jest-snapshot/node_modules/react-is": {
- "version": "18.2.0",
- "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
- "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
- "dev": true
- },
"node_modules/jest-snapshot/node_modules/supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -29910,12 +29842,6 @@
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
- "node_modules/jest-validate/node_modules/react-is": {
- "version": "18.2.0",
- "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
- "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
- "dev": true
- },
"node_modules/jest-validate/node_modules/supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -34972,6 +34898,12 @@
"react-is": "^16.13.1"
}
},
+ "node_modules/prop-types/node_modules/react-is": {
+ "version": "16.13.1",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+ "dev": true
+ },
"node_modules/property-information": {
"version": "5.6.0",
"resolved": "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz",
@@ -35439,9 +35371,10 @@
}
},
"node_modules/react-is": {
- "version": "16.13.1",
- "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
- "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+ "version": "18.2.0",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+ "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+ "dev": true
},
"node_modules/react-refresh": {
"version": "0.11.0",
@@ -35508,12 +35441,6 @@
"react": "^18.2.0"
}
},
- "node_modules/react-test-renderer/node_modules/react-is": {
- "version": "18.2.0",
- "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
- "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
- "dev": true
- },
"node_modules/read-pkg": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -37410,6 +37337,12 @@
"react-dom": ">= 16.3.0"
}
},
+ "node_modules/styled-components/node_modules/react-is": {
+ "version": "16.13.1",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+ "dev": true
+ },
"node_modules/styled-system": {
"version": "5.1.5",
"resolved": "https://registry.npmjs.org/styled-system/-/styled-system-5.1.5.tgz",
diff --git a/package.json b/package.json
index f88215352c3..38c56596de8 100644
--- a/package.json
+++ b/package.json
@@ -99,7 +99,7 @@
"@github/relative-time-element": "^4.1.2",
"@lit-labs/react": "1.1.1",
"@primer/behaviors": "1.3.4",
- "@primer/octicons-react": "18.3.0",
+ "@primer/octicons-react": "^19.3.0",
"@primer/primitives": "7.11.11",
"@react-aria/ssr": "^3.1.0",
"@styled-system/css": "^5.1.5",
@@ -171,6 +171,7 @@
"@types/node": "16.11.11",
"@types/react": "18.0.28",
"@types/react-dom": "18.2.6",
+ "@types/react-is": "18.2.1",
"@typescript-eslint/eslint-plugin": "5.59.6",
"@typescript-eslint/parser": "5.59.6",
"ajv": "8.12.0",
@@ -234,6 +235,7 @@
"react-dnd": "14.0.4",
"react-dnd-html5-backend": "14.0.2",
"react-dom": "18.2.0",
+ "react-is": "18.2.0",
"react-test-renderer": "18.2.0",
"recast": "0.22.0",
"rimraf": "4.1.2",
diff --git a/src/Octicon/Octicon.tsx b/src/Octicon/Octicon.tsx
index 8eaa7d37a39..5e331e9a2a9 100644
--- a/src/Octicon/Octicon.tsx
+++ b/src/Octicon/Octicon.tsx
@@ -6,9 +6,10 @@ import {ComponentProps} from '../utils/types'
type StyledOcticonProps = {icon: React.ElementType; color?: string} & IconProps
-function Icon({icon: IconComponent, ...rest}: StyledOcticonProps) {
- return
-}
+const Icon = React.forwardRef((props: StyledOcticonProps, ref: React.Ref) => {
+ const {icon: IconComponent, ...rest} = props
+ return
+})
const Octicon = styled(Icon)`
${({color, sx: sxProp}) => sx({sx: {color, ...sxProp}})}
diff --git a/src/TextInput/TextInput.tsx b/src/TextInput/TextInput.tsx
index 94827b83cf5..cca3ac1afb7 100644
--- a/src/TextInput/TextInput.tsx
+++ b/src/TextInput/TextInput.tsx
@@ -8,6 +8,7 @@ import {Merge} from '../utils/types'
import TextInputWrapper, {StyledWrapperProps} from '../internal/components/TextInputWrapper'
import UnstyledTextInput from '../internal/components/UnstyledTextInput'
import TextInputAction from '../_TextInputInnerAction'
+import {isValidElementType} from 'react-is'
export type TextInputNonPassthroughProps = {
/** @deprecated Use `leadingVisual` or `trailingVisual` prop instead */
@@ -24,11 +25,11 @@ export type TextInputNonPassthroughProps = {
/**
* A visual that renders inside the input before the typing area
*/
- leadingVisual?: string | React.ComponentType>
+ leadingVisual?: string | React.ReactNode
/**
* A visual that renders inside the input after the typing area
*/
- trailingVisual?: string | React.ComponentType>
+ trailingVisual?: string | React.ReactNode
/**
* A visual that renders inside the input after the typing area
*/
@@ -134,7 +135,7 @@ const TextInput = React.forwardRef(
showLoadingIndicator={showLeadingLoadingIndicator}
hasLoadingIndicator={typeof loading === 'boolean'}
>
- {typeof LeadingVisual === 'function' ? : LeadingVisual}
+ {isValidElementType(LeadingVisual) ? : LeadingVisual}
(
showLoadingIndicator={showTrailingLoadingIndicator}
hasLoadingIndicator={typeof loading === 'boolean'}
>
- {typeof TrailingVisual === 'function' ? : TrailingVisual}
+ {isValidElementType(TrailingVisual) ? : TrailingVisual}
{trailingAction}
diff --git a/src/TextInputWithTokens/TextInputWithTokens.tsx b/src/TextInputWithTokens/TextInputWithTokens.tsx
index 69c93b13758..03d6ffd0346 100644
--- a/src/TextInputWithTokens/TextInputWithTokens.tsx
+++ b/src/TextInputWithTokens/TextInputWithTokens.tsx
@@ -13,6 +13,7 @@ import {TokenSizeKeys} from '../Token/TokenBase'
import TextInputWrapper, {textInputHorizPadding, TextInputSizes} from '../internal/components/TextInputWrapper'
import UnstyledTextInput from '../internal/components/UnstyledTextInput'
import TextInputInnerVisualSlot from '../internal/components/TextInputInnerVisualSlot'
+import {isValidElementType} from 'react-is'
// eslint-disable-next-line @typescript-eslint/no-explicit-any
type AnyReactComponent = React.ComponentType>
@@ -296,7 +297,7 @@ function TextInputWithTokensInnerComponent
- {typeof LeadingVisual === 'function' ? : LeadingVisual}
+ {isValidElementType(LeadingVisual) ? : LeadingVisual}
}
@@ -362,7 +363,7 @@ function TextInputWithTokensInnerComponent
- {typeof TrailingVisual === 'function' ? : TrailingVisual}
+ {isValidElementType(TrailingVisual) ? : TrailingVisual}
)
diff --git a/src/Token/__tests__/__snapshots__/Token.test.tsx.snap b/src/Token/__tests__/__snapshots__/Token.test.tsx.snap
index 0eb72bbc832..f8b70368c1f 100644
--- a/src/Token/__tests__/__snapshots__/Token.test.tsx.snap
+++ b/src/Token/__tests__/__snapshots__/Token.test.tsx.snap
@@ -212,11 +212,11 @@ exports[`Token components AvatarToken renders all sizes 1`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={12}
>
@@ -435,11 +435,11 @@ exports[`Token components AvatarToken renders all sizes 2`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={15}
>
@@ -1536,11 +1536,11 @@ exports[`Token components AvatarToken renders with a remove button 1`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={15}
>
@@ -1709,11 +1709,11 @@ exports[`Token components IssueLabelToken renders all sizes 1`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={12}
>
@@ -1882,11 +1882,11 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={15}
>
@@ -2658,11 +2658,11 @@ exports[`Token components IssueLabelToken renders custom fill color 1`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={15}
>
@@ -2831,11 +2831,11 @@ exports[`Token components IssueLabelToken renders default fill color 1`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={15}
>
@@ -3115,11 +3115,11 @@ exports[`Token components IssueLabelToken renders with a remove button 1`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={15}
>
@@ -3295,11 +3295,11 @@ exports[`Token components Token renders all sizes 1`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={12}
>
@@ -3475,11 +3475,11 @@ exports[`Token components Token renders all sizes 2`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={15}
>
@@ -4462,11 +4462,11 @@ exports[`Token components Token renders with a remove button 1`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={15}
>
diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index f2119138454..bd1f7ba606b 100644
--- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -2469,11 +2469,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={12}
>
@@ -2520,11 +2520,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={12}
>
@@ -2571,11 +2571,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={12}
>
@@ -2622,11 +2622,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={12}
>
@@ -2673,11 +2673,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={12}
>
@@ -2724,11 +2724,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={12}
>
@@ -2775,11 +2775,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={12}
>
@@ -2826,11 +2826,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={12}
>
@@ -3194,11 +3194,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={15}
>
@@ -3245,11 +3245,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={15}
>
@@ -3296,11 +3296,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={15}
>
@@ -3347,11 +3347,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={15}
>
@@ -3398,11 +3398,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={15}
>
@@ -3449,11 +3449,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={15}
>
@@ -3500,11 +3500,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={15}
>
@@ -3551,11 +3551,11 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={15}
>
@@ -14718,11 +14718,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={12}
>
@@ -14769,11 +14769,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={12}
>
@@ -14820,11 +14820,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={12}
>
@@ -14871,11 +14871,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={12}
>
@@ -14922,11 +14922,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={12}
>
@@ -14973,11 +14973,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={12}
>
@@ -15024,11 +15024,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={12}
>
@@ -15075,11 +15075,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
"verticalAlign": "text-bottom",
}
}
- viewBox="0 0 16 16"
+ viewBox="0 0 12 12"
width={12}
>
diff --git a/src/deprecated/ActionList/Item.tsx b/src/deprecated/ActionList/Item.tsx
index 755a78be028..d0f3c1b70df 100644
--- a/src/deprecated/ActionList/Item.tsx
+++ b/src/deprecated/ActionList/Item.tsx
@@ -16,6 +16,7 @@ import {
import {useId} from '../../hooks/useId'
import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../../utils/polymorphic'
import {AriaRole} from '../../utils/types'
+import {isValidElementType} from 'react-is'
/**
* Contract for props passed to the `Item` component.
@@ -59,7 +60,7 @@ export interface ItemProps extends SxProp {
/**
* Icon or text positioned after `Item` text.
*/
- trailingVisual?: React.FunctionComponent> | React.ReactNode
+ trailingVisual?: React.ReactNode
/**
* Style variations associated with various `Item` types.
@@ -465,7 +466,7 @@ export const Item = React.forwardRef((itemProps, ref) => {
{/* backward compatibility: prefer TrailingVisual but fallback to TrailingIcon */}
{TrailingVisual ? (
- {typeof TrailingVisual === 'function' ? : TrailingVisual}
+ {isValidElementType(TrailingVisual) ? : TrailingVisual}
) : TrailingIcon || trailingText ? (
diff --git a/src/stories/deprecated/ActionList.stories.tsx b/src/stories/deprecated/ActionList.stories.tsx
index ac33aeff3ef..78bf567ab78 100644
--- a/src/stories/deprecated/ActionList.stories.tsx
+++ b/src/stories/deprecated/ActionList.stories.tsx
@@ -336,6 +336,18 @@ export function SizeStressTestingStory(): JSX.Element {
trailingVisual: ArrowLeftIcon,
showDivider: true,
},
+ {
+ leadingVisual: ArrowRightIcon,
+ text: 'Block Description. Long text should wrap',
+ description: 'This description is long, but it is block so it wraps',
+ descriptionVariant: 'block',
+ trailingVisual: (
+ <>
+
+
+ ),
+ showDivider: true,
+ },
{
leadingVisual: ArrowRightIcon,
text: 'Inline Description',