@neo4j-ndl/react 4.20.1 → 4.21.1-alpha.b78fc61

package/skills/ndl-react/components/slider.md

@@ -250,8 +250,8 @@ const Component = () => {
   const hasError = !isValid;
 
   const handleInputChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const newInputValue = e.target.value;
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const newInputValue = event.target.value;
       setInputValue(newInputValue);
 
       if (isValid) {

package/skills/ndl-react/components/status-indicator.md

@@ -31,23 +31,23 @@ const Component = () => {
     <div className="n-flex n-gap-token-16">
       <div className="n-flex n-flex-col n-items-center n-gap-token-8">
         <StatusIndicator variant="unknown" />
-        <Typography variant="label">Unknown</Typography>
+        <Typography variant="title-4">Unknown</Typography>
       </div>
       <div className="n-flex n-flex-col n-items-center n-gap-token-8">
         <StatusIndicator variant="success" />
-        <Typography variant="label">Success</Typography>
+        <Typography variant="title-4">Success</Typography>
       </div>
       <div className="n-flex n-flex-col n-items-center n-gap-token-8">
         <StatusIndicator variant="info" />
-        <Typography variant="label">Info</Typography>
+        <Typography variant="title-4">Info</Typography>
       </div>
       <div className="n-flex n-flex-col n-items-center n-gap-token-8">
         <StatusIndicator variant="warning" />
-        <Typography variant="label">Warning</Typography>
+        <Typography variant="title-4">Warning</Typography>
       </div>
       <div className="n-flex n-flex-col n-items-center n-gap-token-8">
         <StatusIndicator variant="danger" />
-        <Typography variant="label">Danger</Typography>
+        <Typography variant="title-4">Danger</Typography>
       </div>
     </div>
   );

package/skills/ndl-react/components/tabs.md

@@ -12,7 +12,7 @@ Import: `import { Tabs } from '@neo4j-ndl/react'`
 | `children` | `ReactNode` | ✅ |  | The content dislayed in the tabs |
 | `fill` | `'filled' \| 'underline'` |  | `underline` | The fill type of the tabs |
 | `onBackground` | `'default' \| 'weak'` |  | `weak` | What background the Tabs is placed on. This affects the gradient background of the scroll navigation buttons. |
-| `onChange` | `(e: U) => void` | ✅ |  | Callback function triggered when a new tab is selected |
+| `onChange` | `(event: U) => void` | ✅ |  | Callback function triggered when a new tab is selected |
 | `ref` | `any` |  |  | A ref to apply to the root element. |
 | `size` | `'large' \| 'small'` |  | `large` | The size of the tabs |
 | `value` | `string` | ✅ |  | The currently active tabId |
@@ -185,7 +185,7 @@ const Component = () => {
   return (
     <div className="n-flex n-gap-token-8">
       <div className="n-flex n-flex-col n-gap-token-32">
-        <Typography variant="label">Underline (Default)</Typography>
+        <Typography variant="title-4">Underline (Default)</Typography>
         <div>
           <Tabs
             value={underlineValue}
@@ -209,7 +209,7 @@ const Component = () => {
       </div>
 
       <div className="n-flex n-flex-col n-gap-token-8">
-        <Typography variant="label">Filled</Typography>
+        <Typography variant="title-4">Filled</Typography>
         <div>
           <Tabs
             value={filledValue}
@@ -320,7 +320,7 @@ const Component = () => {
   return (
     <div className="n-flex n-gap-token-8">
       <div className="n-flex n-flex-col n-gap-token-8">
-        <Typography variant="label">Small Size</Typography>
+        <Typography variant="title-4">Small Size</Typography>
         <div className="n-w-fit">
           <Tabs
             value={smallValue}
@@ -351,7 +351,7 @@ const Component = () => {
       </div>
 
       <div className="n-flex n-flex-col n-gap-token-8">
-        <Typography variant="label">Large Size (Default)</Typography>
+        <Typography variant="title-4">Large Size (Default)</Typography>
         <Tabs
           value={largeValue}
           onChange={setLargeValue}

package/skills/ndl-react/components/text-button.md

@@ -16,8 +16,8 @@ Import: `import { TextButton } from '@neo4j-ndl/react'`
 | `isLoading` | `boolean` |  | `false` | If the button is doing something Async, it will display a loading spinner |
 | `leadingVisual` | `ReactNode` |  |  | Icon to display before the button content |
 | `loadingMessage` | `string` |  |  | Accessible message for screen readers when the button is in a loading state |
-| `onClick` | `((e: MouseEvent<HTMLButtonElement, MouseEvent>) => void)` |  |  | onClick callback |
-| `onKeyDown` | `((e: KeyboardEvent<HTMLButtonElement>) => void)` |  |  | onKeyDown callback |
+| `onClick` | `((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void)` |  |  | onClick callback |
+| `onKeyDown` | `((event: KeyboardEvent<HTMLButtonElement>) => void)` |  |  | onKeyDown callback |
 | `ref` | `any` |  |  | A ref to apply to the root element. |
 | `size` | `'large' \| 'medium' \| 'small'` |  | `medium` | Size of button |
 | `target` | `HTMLAttributeAnchorTarget` |  |  | The target window for the link. Only applies when `as="a"`. Not present or required for other element types. |

package/skills/ndl-react/components/text-input.md

@@ -167,7 +167,7 @@ const Component = () => {
       helpText="Help text"
       placeholder="Placeholder"
       value={textValue}
-      onChange={(e) => setTextValue(e.target.value)}
+      onChange={(event) => setTextValue(event.target.value)}
       leadingElement={<UserIconOutline />}
       trailingElement={
         <CleanIconButton
@@ -465,7 +465,7 @@ const Component = () => {
       leadingElement={<DatabasePlugIcon />}
       trailingElement={<DatabasePlusIcon />}
       value={searchValue}
-      onChange={(e) => setSearchValue(e.target.value)}
+      onChange={(event) => setSearchValue(event.target.value)}
       htmlAttributes={{ id: 'text-input' }}
     />
   );

package/skills/ndl-react/components/typography.md

@@ -11,7 +11,7 @@ Import: `import { Typography } from '@neo4j-ndl/react'`
 | `as` | `ElementType<any, keyof IntrinsicElements>` |  |  | An override of the default HTML tag of the root of the component. Can also be another React component. |
 | `children` | `ReactNode` |  |  | Content displayed inside the component |
 | `ref` | `any` |  |  | A ref to apply to the root element. |
-| `variant` | `'body-large' \| 'body-medium' \| 'body-small' \| 'code' \| 'display' \| 'label' \| 'subheading-large' \| 'subheading-medium' \| 'subheading-small' \| 'title-1' \| 'title-2' \| 'title-3' \| 'title-4'` | ✅ |  | The typography variant to use for the text. |
+| `variant` | `'body-large' \| 'body-medium' \| 'body-small' \| 'code' \| 'display' \| 'label' \| 'subheading-large' \| 'subheading-medium' \| 'subheading-small' \| 'title-1' \| 'title-2' \| 'title-3' \| 'title-4'` | ✅ |  | The typography variant to use for the text.  `label` is deprecated: it is identical to `title-4`, which should be used instead. |
 
 ## Examples