+
Button
Button
+
Search Label
Text Field Label
-
+ -->
+
+
JS
+
+
+
+
+
+
+
+
+
+ Tab 1
+ Tab 2
+ Tab 3
+ Tab 4
+
Tab 1 Content
-
-
+
+
Tab 2 Content
-
-
+
+
Tab 3 Content
-
-
+
+
Tab 4 Content
-
-
+
+
- -->
-
`
);
diff --git a/packages/lab-example/style/base.css b/packages/lab-example/style/base.css
index 05451869..08eab4d6 100644
--- a/packages/lab-example/style/base.css
+++ b/packages/lab-example/style/base.css
@@ -1,3 +1,9 @@
+/* Fixes for JupyterLab */
+jp-tab {
+ box-sizing: border-box;
+}
+/* End fixes */
+
.jp-Artwork {
padding: 4px;
@@ -6,7 +12,9 @@
font-size: var(--jp-ui-font-size1);
}
-.jp-Artwork > .jp-FlexRow {
+.jp-Artwork > .jp-Grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
height: 100%;
max-height: 500px;
}
@@ -34,3 +42,14 @@
.jp-Artwork .jp-FlexColumn > div > * {
margin: 2px;
}
+
+jp-progress {
+ width: 100%;
+}
+
+:root {
+ --avatar-fill-blue: royalblue;
+ --avatar-fill-red: indianred;
+ --avatar-color-light: white;
+ --avatar-color-dark: slategrey;
+}
diff --git a/packages/react-components/src/avatar/index.tsx b/packages/react-components/src/avatar/index.tsx
new file mode 100644
index 00000000..486bed85
--- /dev/null
+++ b/packages/react-components/src/avatar/index.tsx
@@ -0,0 +1,25 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import {
+ provideJupyterDesignSystem,
+ jpAvatar
+} from '@jupyter-notebook/web-components';
+import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
+import React from 'react';
+
+const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
+
+export const Avatar: React.DetailedHTMLFactory<
+ React.HTMLAttributes
& {
+ src?: string;
+ alt?: string;
+ link?: string;
+ shape?: 'circle' | 'square' | 'default';
+ fill?: string;
+ color?: string;
+ },
+ HTMLElement
+> = wrap(jpAvatar()) as any;
+// @ts-expect-error unknown property
+Avatar.displayName = 'Jupyter.Avatar';
diff --git a/packages/react-components/src/breadcrumb-item/index.tsx b/packages/react-components/src/breadcrumb-item/index.tsx
new file mode 100644
index 00000000..0380b165
--- /dev/null
+++ b/packages/react-components/src/breadcrumb-item/index.tsx
@@ -0,0 +1,20 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import {
+ provideJupyterDesignSystem,
+ jpBreadcrumbItem
+} from '@jupyter-notebook/web-components';
+import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
+import React from 'react';
+
+const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
+
+export const BreadcrumbItem: React.DetailedHTMLFactory<
+ React.HTMLAttributes & {
+ separator?: boolean;
+ },
+ HTMLElement
+> = wrap(jpBreadcrumbItem()) as any;
+// @ts-expect-error unknown property
+BreadcrumbItem.displayName = 'Jupyter.BreadcrumbItem';
diff --git a/packages/react-components/src/breadcrumb/index.tsx b/packages/react-components/src/breadcrumb/index.tsx
new file mode 100644
index 00000000..78832fda
--- /dev/null
+++ b/packages/react-components/src/breadcrumb/index.tsx
@@ -0,0 +1,20 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import {
+ provideJupyterDesignSystem,
+ jpBreadcrumb
+} from '@jupyter-notebook/web-components';
+import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
+import React from 'react';
+
+const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
+
+export const Breadcrumb: React.DetailedHTMLFactory<
+ React.HTMLAttributes & {
+ href?: string;
+ },
+ HTMLElement
+> = wrap(jpBreadcrumb()) as any;
+// @ts-expect-error unknown property
+Breadcrumb.displayName = 'Jupyter.Breadcrumb';
diff --git a/packages/react-components/src/index.ts b/packages/react-components/src/index.ts
index fee423c8..2f457db2 100644
--- a/packages/react-components/src/index.ts
+++ b/packages/react-components/src/index.ts
@@ -1,4 +1,12 @@
+export * from './avatar';
+export * from './breadcrumb';
+export * from './breadcrumb-item';
export * from './button';
export * from './option';
+export * from './progress';
+export * from './search';
export * from './select';
+export * from './tab-panel';
+export * from './tab';
+export * from './tabs';
export * from './text-field';
diff --git a/packages/react-components/src/progress/index.tsx b/packages/react-components/src/progress/index.tsx
new file mode 100644
index 00000000..3c21c5c3
--- /dev/null
+++ b/packages/react-components/src/progress/index.tsx
@@ -0,0 +1,23 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import {
+ provideJupyterDesignSystem,
+ jpProgress
+} from '@jupyter-notebook/web-components';
+import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
+import React from 'react';
+
+const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
+
+export const Progress: React.DetailedHTMLFactory<
+ React.HTMLAttributes & {
+ min?: number;
+ max?: number;
+ value?: number;
+ paused?: boolean;
+ },
+ HTMLElement
+> = wrap(jpProgress()) as any;
+// @ts-expect-error unknown property
+Progress.displayName = 'Jupyter.Progress';
diff --git a/packages/react-components/src/search/index.tsx b/packages/react-components/src/search/index.tsx
new file mode 100644
index 00000000..df5431bc
--- /dev/null
+++ b/packages/react-components/src/search/index.tsx
@@ -0,0 +1,39 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import {
+ provideJupyterDesignSystem,
+ jpSearch
+} from '@jupyter-notebook/web-components';
+import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
+import React from 'react';
+
+const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
+
+export const Search: React.DetailedHTMLFactory<
+ React.HTMLAttributes & {
+ appearance?: 'outline' | 'filled';
+ autofocus?: boolean;
+ disabled?: boolean;
+ form?: string;
+ label?: string;
+ list?: string;
+ maxlength?: number;
+ minlength?: number;
+ name?: string;
+ pattern?: string;
+ placeholder?: string;
+ readonly?: boolean;
+ required?: boolean;
+ size?: number;
+ value?: string;
+ },
+ HTMLElement
+> = wrap(jpSearch(), {
+ events: {
+ onChange: 'change',
+ onInput: 'input'
+ }
+}) as any;
+// @ts-expect-error unknown property
+Search.displayName = 'Jupyter.Search';
diff --git a/packages/react-components/src/select/index.tsx b/packages/react-components/src/select/index.tsx
index 3d866a3b..5c84fbff 100644
--- a/packages/react-components/src/select/index.tsx
+++ b/packages/react-components/src/select/index.tsx
@@ -18,6 +18,11 @@ export const Select: React.DetailedHTMLFactory<
position?: 'above' | 'below';
},
HTMLElement
-> = wrap(jpSelect()) as any;
+> = wrap(jpSelect(), {
+ events: {
+ onChange: 'change',
+ onInput: 'input'
+ }
+}) as any;
// @ts-expect-error unknown property
Select.displayName = 'Jupyter.Select';
diff --git a/packages/react-components/src/tab-panel/index.tsx b/packages/react-components/src/tab-panel/index.tsx
new file mode 100644
index 00000000..5f0549d0
--- /dev/null
+++ b/packages/react-components/src/tab-panel/index.tsx
@@ -0,0 +1,18 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import {
+ provideJupyterDesignSystem,
+ jpTabPanel
+} from '@jupyter-notebook/web-components';
+import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
+import React from 'react';
+
+const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
+
+export const TabPanel: React.DetailedHTMLFactory<
+ React.HTMLAttributes,
+ HTMLElement
+> = wrap(jpTabPanel()) as any;
+// @ts-expect-error unknown property
+TabPanel.displayName = 'Jupyter.TabPanel';
diff --git a/packages/react-components/src/tab/index.tsx b/packages/react-components/src/tab/index.tsx
new file mode 100644
index 00000000..c732ec57
--- /dev/null
+++ b/packages/react-components/src/tab/index.tsx
@@ -0,0 +1,20 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import {
+ provideJupyterDesignSystem,
+ jpTab
+} from '@jupyter-notebook/web-components';
+import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
+import React from 'react';
+
+const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
+
+export const Tab: React.DetailedHTMLFactory<
+ React.HTMLAttributes & {
+ disabled?: boolean;
+ },
+ HTMLElement
+> = wrap(jpTab()) as any;
+// @ts-expect-error unknown property
+Tab.displayName = 'Jupyter.Tab';
diff --git a/packages/react-components/src/tabs/index.tsx b/packages/react-components/src/tabs/index.tsx
new file mode 100644
index 00000000..379ca2aa
--- /dev/null
+++ b/packages/react-components/src/tabs/index.tsx
@@ -0,0 +1,22 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import {
+ provideJupyterDesignSystem,
+ jpTabs
+} from '@jupyter-notebook/web-components';
+import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
+import React from 'react';
+
+const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
+
+export const Tabs: React.DetailedHTMLFactory<
+ React.HTMLAttributes & {
+ activeid?: string;
+ activeindicator?: boolean;
+ orientation?: 'horizontal' | 'vertical';
+ },
+ HTMLElement
+> = wrap(jpTabs(), { events: { onChange: 'change' } }) as any;
+// @ts-expect-error unknown property
+Tabs.displayName = 'Jupyter.Tabs';
diff --git a/packages/react-components/src/text-field/index.tsx b/packages/react-components/src/text-field/index.tsx
index a9d2d9be..fca44a4a 100644
--- a/packages/react-components/src/text-field/index.tsx
+++ b/packages/react-components/src/text-field/index.tsx
@@ -12,19 +12,26 @@ const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
export const TextField: React.DetailedHTMLFactory<
React.HTMLAttributes & {
+ appearance?: 'outline' | 'filled';
autofocus?: boolean;
- cols?: number;
disabled?: boolean;
form?: string;
+ list?: string;
maxlength?: number;
+ minlength?: number;
name?: string;
+ pattern?: string;
placeholder?: string;
readonly?: boolean;
- resize?: 'none' | 'vertical' | 'horizontal' | 'both';
- rows?: number;
+ required?: boolean;
+ size?: number;
+ spellcheck?: string;
+ type?: 'text' | 'email' | 'password' | 'tel' | 'url';
value?: string;
},
HTMLElement
-> = wrap(jpTextField()) as any;
+> = wrap(jpTextField(), {
+ events: { onChange: 'change', onInput: 'input' }
+}) as any;
// @ts-expect-error unknown property
TextField.displayName = 'Jupyter.TextField';