From 3e3bfb64f3935ed32e5d8313d7ec44a3ce594c45 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Fri, 16 Oct 2026 09:49:31 +0300 Subject: [PATCH 1/4] fix(dialog): update samples content --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- .../dialog/closing-variations/src/index.css | 2 - .../dialog/closing-variations/src/index.tsx | 69 -------- .../notifications/dialog/form/src/index.css | 2 - .../notifications/dialog/form/src/index.tsx | 74 -------- .../notifications/dialog/overview/index.html | 2 +- .../dialog/overview/package.json | 2 +- .../dialog/overview/src/index.css | 31 +++- .../dialog/overview/src/index.tsx | 67 +++----- .../notifications/dialog/styling/index.html | 2 +- .../notifications/dialog/styling/package.json | 2 +- .../dialog/styling/src/index.css | 162 +++++++++++++++++- .../dialog/styling/src/index.tsx | 89 +++++----- .../.devcontainer/devcontainer.json | 0 .../.eslintrc.js | 0 .../README.md | 8 +- .../index.html | 2 +- .../package.json | 6 +- .../sandbox.config.json | 0 .../dialog/tailwind-styling/src/index.css | 20 +++ .../dialog/tailwind-styling/src/index.tsx | 56 ++++++ .../tsconfig.json | 0 .../{form => tailwind-styling}/vite.config.js | 9 +- .../.devcontainer/devcontainer.json | 0 .../dialog/{form => types}/.eslintrc.js | 0 .../dialog/{form => types}/README.md | 8 +- .../dialog/{form => types}/index.html | 2 +- .../dialog/{form => types}/package.json | 4 +- .../{form => types}/sandbox.config.json | 0 .../notifications/dialog/types/src/index.css | 48 ++++++ .../notifications/dialog/types/src/index.tsx | 57 ++++++ .../dialog/{form => types}/tsconfig.json | 0 .../vite.config.js | 0 34 files changed, 456 insertions(+), 272 deletions(-) delete mode 100644 samples/notifications/dialog/closing-variations/src/index.css delete mode 100644 samples/notifications/dialog/closing-variations/src/index.tsx delete mode 100644 samples/notifications/dialog/form/src/index.css delete mode 100644 samples/notifications/dialog/form/src/index.tsx rename samples/notifications/dialog/{closing-variations => tailwind-styling}/.devcontainer/devcontainer.json (100%) rename samples/notifications/dialog/{closing-variations => tailwind-styling}/.eslintrc.js (100%) rename samples/notifications/dialog/{closing-variations => tailwind-styling}/README.md (84%) rename samples/notifications/dialog/{closing-variations => tailwind-styling}/index.html (85%) rename samples/notifications/dialog/{closing-variations => tailwind-styling}/package.json (81%) rename samples/notifications/dialog/{closing-variations => tailwind-styling}/sandbox.config.json (100%) create mode 100644 samples/notifications/dialog/tailwind-styling/src/index.css create mode 100644 samples/notifications/dialog/tailwind-styling/src/index.tsx rename samples/notifications/dialog/{closing-variations => tailwind-styling}/tsconfig.json (100%) rename samples/notifications/dialog/{form => tailwind-styling}/vite.config.js (53%) rename samples/notifications/dialog/{form => types}/.devcontainer/devcontainer.json (100%) rename samples/notifications/dialog/{form => types}/.eslintrc.js (100%) rename samples/notifications/dialog/{form => types}/README.md (86%) rename samples/notifications/dialog/{form => types}/index.html (88%) rename samples/notifications/dialog/{form => types}/package.json (87%) rename samples/notifications/dialog/{form => types}/sandbox.config.json (100%) create mode 100644 samples/notifications/dialog/types/src/index.css create mode 100644 samples/notifications/dialog/types/src/index.tsx rename samples/notifications/dialog/{form => types}/tsconfig.json (100%) rename samples/notifications/dialog/{closing-variations => types}/vite.config.js (100%) diff --git a/browser/public/meta.json b/browser/public/meta.json index 3274837cd5..fa3707d8a6 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-10-01 17:08:02","note":"this file is auto-generated"} +{"version":"23.2.915","date":"2026-10-15 22:06:06","note":"this file is auto-generated"} \ No newline at end of file diff --git a/browser/src/navigation/SamplesBrowser.json b/browser/src/navigation/SamplesBrowser.json index 3274837cd5..fa3707d8a6 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-10-01 17:08:02","note":"this file is auto-generated"} +{"version":"23.2.915","date":"2026-10-15 22:06:06","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/notifications/dialog/closing-variations/src/index.css b/samples/notifications/dialog/closing-variations/src/index.css deleted file mode 100644 index 1f53b8aa05..0000000000 --- a/samples/notifications/dialog/closing-variations/src/index.css +++ /dev/null @@ -1,2 +0,0 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file diff --git a/samples/notifications/dialog/closing-variations/src/index.tsx b/samples/notifications/dialog/closing-variations/src/index.tsx deleted file mode 100644 index 89e4dd701b..0000000000 --- a/samples/notifications/dialog/closing-variations/src/index.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { IgrButton, IgrDialog, IgrSwitch } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; - -export default class DialogClosingVariations extends React.Component { - - public dialogRef: IgrDialog; - - constructor(props: any) { - super(props); - this.onDialogRef = this.onDialogRef.bind(this); - this.onDialogShow = this.onDialogShow.bind(this); - this.onDialogHide = this.onDialogHide.bind(this); - this.onSwitchChangeEscape = this.onSwitchChangeEscape.bind(this); - this.onSwitchChangeClick = this.onSwitchChangeClick.bind(this); - } - - public render(): JSX.Element { - return ( -
- keepOpenOnEscape - closeOnOutsideClick - - - Show Dialog - - - -

Are you sure you want to delete the Annual_Report_2016.pdf and Annual_Report_2017.pdf files?

-
- Cancel - OK -
- -
- ); - } - - public onDialogRef(dialog: IgrDialog){ - if (!dialog) { return; } - this.dialogRef = dialog; - } - - public onDialogShow() { - if(this.dialogRef){ - this.dialogRef.show(); - } - } - - public onDialogHide() { - if(this.dialogRef){ - this.dialogRef.hide(); - } - } - - public onSwitchChangeEscape(e: any) { - this.dialogRef.keepOpenOnEscape = e.detail.checked; - } - - public onSwitchChangeClick(e: any) { - this.dialogRef.closeOnOutsideClick = e.detail.checked; - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); diff --git a/samples/notifications/dialog/form/src/index.css b/samples/notifications/dialog/form/src/index.css deleted file mode 100644 index 1f53b8aa05..0000000000 --- a/samples/notifications/dialog/form/src/index.css +++ /dev/null @@ -1,2 +0,0 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file diff --git a/samples/notifications/dialog/form/src/index.tsx b/samples/notifications/dialog/form/src/index.tsx deleted file mode 100644 index 606954ecbf..0000000000 --- a/samples/notifications/dialog/form/src/index.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { IgrButton, IgrDialog, IgrInput, IgrIcon,registerIconFromText } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; - -const usernameIconText = ''; -const passwordIconText = ''; - -export default class DialogForm extends React.Component { - - public dialogRef: IgrDialog; - public passwordIcon: IgrIcon; - public usernameIcon: IgrIcon; - - constructor(props: any) { - super(props); - this.onDialogRef = this.onDialogRef.bind(this); - this.onDialogShow = this.onDialogShow.bind(this); - registerIconFromText("username", usernameIconText, "material"); - registerIconFromText("password", passwordIconText, "material"); - } - - public render(): JSX.Element { - return ( -
- - Show Dialog - - - -
- - - - - -
- - - - - -
-
- Reset - Submit -
-
- - -
- Create an account -
- -
- ); - } - - public onDialogRef(dialog: IgrDialog){ - if (!dialog) { return; } - this.dialogRef = dialog; - } - - public onDialogShow() { - if(this.dialogRef){ - this.dialogRef.show(); - } - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); diff --git a/samples/notifications/dialog/overview/index.html b/samples/notifications/dialog/overview/index.html index 8fbce1748d..e9a80bafe2 100644 --- a/samples/notifications/dialog/overview/index.html +++ b/samples/notifications/dialog/overview/index.html @@ -1,7 +1,7 @@ - DialogOverview + Dialog Overview diff --git a/samples/notifications/dialog/overview/package.json b/samples/notifications/dialog/overview/package.json index 4b0e38b8ae..97fa4dec0c 100644 --- a/samples/notifications/dialog/overview/package.json +++ b/samples/notifications/dialog/overview/package.json @@ -1,6 +1,6 @@ { "name": "react-dialog-overview", - "description": "This project provides example of Dialog Overview using Infragistics React components", + "description": "This project provides an example of Dialog overview using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", diff --git a/samples/notifications/dialog/overview/src/index.css b/samples/notifications/dialog/overview/src/index.css index 1f53b8aa05..b215b6c9b9 100644 --- a/samples/notifications/dialog/overview/src/index.css +++ b/samples/notifications/dialog/overview/src/index.css @@ -1,2 +1,31 @@ /* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.sample { + display: flex; + flex-direction: column; + align-items: center; + padding: 1.9375rem 1rem 1rem; +} + +.open-button { + width: 11.25rem; +} + +igc-dialog { + --ig-dialog-backdrop: transparent; + --ig-dialog-message-color: var(--ig-gray-700); +} + +igc-dialog::part(base) { + width: 17.5rem; + margin-top: 6.9375rem; +} + +igc-dialog igc-button { + --ig-size: var(--ig-size-medium); +} + +igc-dialog igc-button::part(base) { + min-width: auto; +} diff --git a/samples/notifications/dialog/overview/src/index.tsx b/samples/notifications/dialog/overview/src/index.tsx index 582e8eebd2..fb205b5f24 100644 --- a/samples/notifications/dialog/overview/src/index.tsx +++ b/samples/notifications/dialog/overview/src/index.tsx @@ -1,54 +1,31 @@ -import React from 'react'; +import React, { useRef } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import { IgrButton, IgrDialog } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class DialogOverview extends React.Component { - - public dialogRef: IgrDialog; - - constructor(props: any) { - super(props); - this.onDialogRef = this.onDialogRef.bind(this); - this.onDialogShow = this.onDialogShow.bind(this); - this.onDialogHide = this.onDialogHide.bind(this); - } - - public render(): JSX.Element { - return ( -
- - Show Dialog +export default function DialogOverview(): JSX.Element { + const dialogRef = useRef(null); + + const showDialog = () => dialogRef.current?.show(); + const hideDialog = () => dialogRef.current?.hide(); + + return ( +
+ + Open dialog + + + Your email will be permanently deleted + + Cancel - - -

Are you sure you want to delete the Annual_Report_2016.pdf and Annual_Report_2017.pdf files?

-
- Cancel - OK -
- -
- ); - } - - public onDialogRef(dialog: IgrDialog){ - if (!dialog) { return; } - this.dialogRef = dialog; - } - - public onDialogShow() { - if(this.dialogRef){ - this.dialogRef.show(); - } - } - - public onDialogHide() { - if(this.dialogRef){ - this.dialogRef.hide(); - } - } + + OK + + +
+ ); } // rendering above class to the React DOM diff --git a/samples/notifications/dialog/styling/index.html b/samples/notifications/dialog/styling/index.html index f189aa950e..7d677a1e9a 100644 --- a/samples/notifications/dialog/styling/index.html +++ b/samples/notifications/dialog/styling/index.html @@ -1,7 +1,7 @@ - DialogStyling + Dialog Styling diff --git a/samples/notifications/dialog/styling/package.json b/samples/notifications/dialog/styling/package.json index e20f163574..0da34024f6 100644 --- a/samples/notifications/dialog/styling/package.json +++ b/samples/notifications/dialog/styling/package.json @@ -1,6 +1,6 @@ { "name": "react-dialog-styling", - "description": "This project provides example of Dialog Styling using Infragistics React components", + "description": "This project provides an example of Dialog styling using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", diff --git a/samples/notifications/dialog/styling/src/index.css b/samples/notifications/dialog/styling/src/index.css index fd29928682..4a5af58eab 100644 --- a/samples/notifications/dialog/styling/src/index.css +++ b/samples/notifications/dialog/styling/src/index.css @@ -1,13 +1,159 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -igc-dialog::part(content) { - background: #011627; - color: white; +@import url("https://use.typekit.net/bng2zgw.css"); +@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital@0;1&display=swap"); + +.sample { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.sign-in-dialog { + --ig-dialog-background: #00142b; + --ig-dialog-border-radius: 1rem; + --ig-dialog-elevation: none; + --ig-dialog-title-color: #fcfcfc; + --ig-dialog-message-color: #d2dbe8; +} + +.sign-in-dialog::part(base) { + position: static; + display: block; + width: 21.8125rem; + margin: 0; + border: none; +} + +.sign-in-dialog::part(title) { + flex-direction: column; + align-items: flex-start; + gap: 1rem; + padding: 1.5rem 1.5rem 0; + border: none; + font: 500 1.25rem / 1.5rem aktiv-grotesk, sans-serif; + letter-spacing: 0; +} + +.sign-in-dialog::part(content) { + display: flex; + flex-direction: column; + gap: 1rem; + padding: 0.5rem 1.5rem 1.5rem; +} + +.sign-in-dialog::part(footer) { + flex-direction: column; + align-items: stretch; + gap: 1.375rem; + padding: 0 1.5rem 1.5rem; + border: none; } -igc-dialog::part(title), -igc-dialog::part(footer) { - background: #011627; - color: #ECAA53; -} \ No newline at end of file +.sign-in-avatar::part(base) { + width: 3rem; + min-width: 0; + height: 3rem; + padding: 0; + border: none; + border-radius: 0.75rem; + background: #5a1f0c; + box-shadow: var(--ig-elevation-6); +} + +.sign-in-avatar igc-icon { + --ig-icon-size: 1.125rem; + + color: #f95924; +} + +.sign-in-title { + margin: 0; +} + +.sign-in-message { + margin-bottom: 0.375rem; + font: 600 0.75rem / 1rem aktiv-grotesk, sans-serif; + letter-spacing: 0.15px; +} + +.sign-in-input { + --ig-size: var(--ig-size-small); + --ig-font-family: "Nunito Sans", sans-serif; + --ig-input-group-idle-text-color: #fcfcfc; + --ig-input-group-filled-text-color: #fcfcfc; + --ig-input-group-filled-text-hover-color: #fcfcfc; + --ig-input-group-focused-text-color: #fcfcfc; + --ig-input-group-placeholder-color: #a9b8cc; + --ig-input-group-hover-placeholder-color: #d2dbe8; + --ig-input-group-idle-secondary-color: #a9b8cc; + --ig-input-group-focused-secondary-color: #a9b8cc; + --ig-input-group-input-prefix-color: #7d91ab; + --ig-input-group-input-prefix-color--filled: #7d91ab; + --ig-input-group-input-prefix-color--focused: #7d91ab; + --ig-input-group-idle-bottom-line-color: rgb(255 255 255 / 40%); + --ig-input-group-hover-bottom-line-color: rgb(255 255 255 / 80%); + --ig-input-group-focused-bottom-line-color: #f95924; +} + +.sign-in-input::part(label) { + font-size: 0.6875rem; + line-height: 0.9375rem; + letter-spacing: 0; +} + +.sign-in-actions { + display: flex; + gap: 0.5rem; +} + +.sign-in-actions igc-button { + flex: 1; +} + +.sign-in-actions igc-button::part(base) { + height: 1.875rem; + border-radius: 0.5rem; + font: 600 0.75rem / 1rem aktiv-grotesk, sans-serif; + letter-spacing: 0.15px; + text-transform: none; +} + +.cancel-button { + --ig-outlined-button-hover-background: rgb(125 145 171 / 8%); + --ig-outlined-button-focus-hover-background: rgb(125 145 171 / 8%); + --ig-outlined-button-active-background: rgb(125 145 171 / 16%); + --ig-outlined-button-focus-background: rgb(125 145 171 / 16%); + --ig-outlined-button-focus-visible-background: rgb(125 145 171 / 16%); +} + +.cancel-button::part(base) { + border-color: #7d91ab; + color: #7d91ab; +} + +.submit-button::part(base) { + background: #f95924; + color: #00142b; + box-shadow: none; +} + +.submit-button:hover::part(base) { + background: #e04f20; +} + +.sign-up { + font: 400 0.625rem / 1rem aktiv-grotesk, sans-serif; + letter-spacing: 1.5px; + text-transform: uppercase; + text-align: center; + color: #a9b8cc; +} + +.sign-up a { + color: #f95924; + text-decoration: none; +} diff --git a/samples/notifications/dialog/styling/src/index.tsx b/samples/notifications/dialog/styling/src/index.tsx index 488b6e4d37..e897cbd77a 100644 --- a/samples/notifications/dialog/styling/src/index.tsx +++ b/samples/notifications/dialog/styling/src/index.tsx @@ -1,55 +1,50 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrButton, IgrDialog } from 'igniteui-react'; +import { IgrButton, IgrDialog, IgrIcon, IgrInput, IgrThemeProvider, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class DialogStyling extends React.Component { - - public dialogRef: IgrDialog; - - constructor(props: any) { - super(props); - this.onDialogRef = this.onDialogRef.bind(this); - this.onDialogShow = this.onDialogShow.bind(this); - this.onDialogHide = this.onDialogHide.bind(this); - } - - public render(): JSX.Element { - return ( -
- - Show Dialog +const personIcon = ''; +const notificationsIcon = ''; +const lockIcon = ''; + +export default function DialogStyling(): JSX.Element { + useEffect(() => { + registerIconFromText('person', personIcon, 'material'); + registerIconFromText('notifications', notificationsIcon, 'material'); + registerIconFromText('lock', lockIcon, 'material'); + }, []); + + return ( +
+ + + - - -

Styled Title

-

Are you sure you want to delete the Annual_Report_2016.pdf and Annual_Report_2017.pdf files?

-
- Cancel - OK -
- -
- ); - } - - public onDialogRef(dialog: IgrDialog){ - if (!dialog) { return; } - this.dialogRef = dialog; - } - - public onDialogShow() { - if(this.dialogRef){ - this.dialogRef.show(); - } - } - - public onDialogHide() { - if(this.dialogRef){ - this.dialogRef.hide(); - } - } + Welcome back + Sign in to your workspace + + + + + + + + +
+ + Cancel + + + Sign in + +
+ + No account? Create workspace + + +
+ ); } // rendering above class to the React DOM diff --git a/samples/notifications/dialog/closing-variations/.devcontainer/devcontainer.json b/samples/notifications/dialog/tailwind-styling/.devcontainer/devcontainer.json similarity index 100% rename from samples/notifications/dialog/closing-variations/.devcontainer/devcontainer.json rename to samples/notifications/dialog/tailwind-styling/.devcontainer/devcontainer.json diff --git a/samples/notifications/dialog/closing-variations/.eslintrc.js b/samples/notifications/dialog/tailwind-styling/.eslintrc.js similarity index 100% rename from samples/notifications/dialog/closing-variations/.eslintrc.js rename to samples/notifications/dialog/tailwind-styling/.eslintrc.js diff --git a/samples/notifications/dialog/closing-variations/README.md b/samples/notifications/dialog/tailwind-styling/README.md similarity index 84% rename from samples/notifications/dialog/closing-variations/README.md rename to samples/notifications/dialog/tailwind-styling/README.md index 2d9a35f02a..32f95d7195 100644 --- a/samples/notifications/dialog/closing-variations/README.md +++ b/samples/notifications/dialog/tailwind-styling/README.md @@ -1,7 +1,7 @@ -This folder contains implementation of React application with example of Closing Variations feature using [Dialog](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. +This folder contains implementation of React application with example of Tailwind Styling feature using [Dialog](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. @@ -12,10 +12,10 @@ This folder contains implementation of React application with example of Closing View Code - + Run Sample - + Run Sample @@ -34,7 +34,7 @@ Follow these instructions to run this example: git clone https://github.com/IgniteUI/igniteui-react-examples.git git checkout master cd ./igniteui-react-examples -cd ./samples/notifications/dialog/closing-variations +cd ./samples/notifications/dialog/tailwind-styling ``` open above folder in VS Code or type: diff --git a/samples/notifications/dialog/closing-variations/index.html b/samples/notifications/dialog/tailwind-styling/index.html similarity index 85% rename from samples/notifications/dialog/closing-variations/index.html rename to samples/notifications/dialog/tailwind-styling/index.html index a2fdfc66e0..21b24e8f5e 100644 --- a/samples/notifications/dialog/closing-variations/index.html +++ b/samples/notifications/dialog/tailwind-styling/index.html @@ -1,7 +1,7 @@ - DialogClosingVariations + Dialog Tailwind Styling diff --git a/samples/notifications/dialog/closing-variations/package.json b/samples/notifications/dialog/tailwind-styling/package.json similarity index 81% rename from samples/notifications/dialog/closing-variations/package.json rename to samples/notifications/dialog/tailwind-styling/package.json index 41e5d1efb5..b1a921f60d 100644 --- a/samples/notifications/dialog/closing-variations/package.json +++ b/samples/notifications/dialog/tailwind-styling/package.json @@ -1,6 +1,6 @@ { - "name": "react-dialog-closing-variations", - "description": "This project provides example of Dialog Closing Variations using Infragistics React components", + "name": "react-dialog-tailwind-styling", + "description": "This project provides an example of Dialog tailwind styling using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", @@ -21,12 +21,14 @@ "tslib": "^2.4.0" }, "devDependencies": { + "@tailwindcss/vite": "^4.1.14", "@types/jest": "^29.2.0", "@types/node": "^24.7.1", "@types/react": "^18.0.24", "@types/react-dom": "^18.0.8", "@vitejs/plugin-react": "^5.0.4", "@vitest/browser": "^3.2.4", + "tailwindcss": "^4.1.14", "typescript": "^4.8.4", "vite": "^7.1.9", "vitest": "^3.2.4", diff --git a/samples/notifications/dialog/closing-variations/sandbox.config.json b/samples/notifications/dialog/tailwind-styling/sandbox.config.json similarity index 100% rename from samples/notifications/dialog/closing-variations/sandbox.config.json rename to samples/notifications/dialog/tailwind-styling/sandbox.config.json diff --git a/samples/notifications/dialog/tailwind-styling/src/index.css b/samples/notifications/dialog/tailwind-styling/src/index.css new file mode 100644 index 0000000000..be7459e411 --- /dev/null +++ b/samples/notifications/dialog/tailwind-styling/src/index.css @@ -0,0 +1,20 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +@import url("https://use.typekit.net/bng2zgw.css"); +@layer theme, base, components, utilities; +@import "tailwindcss/theme.css" layer(theme); +@import "tailwindcss/utilities.css" layer(utilities); +@source "./index.tsx"; + +@theme { + --color-export-surface: #002b5c; + --color-export-ink: #fcfcfc; + --color-export-muted: #a9b8cc; + --color-export-accent: #f95924; + --color-export-accent-hover: #e04f20; + --color-invite-surface: #e6f2ff; + --color-invite-border: #99c9ff; + --color-invite-ink: #004699; + --color-invite-link: #0176ff; +} diff --git a/samples/notifications/dialog/tailwind-styling/src/index.tsx b/samples/notifications/dialog/tailwind-styling/src/index.tsx new file mode 100644 index 0000000000..21ce10036e --- /dev/null +++ b/samples/notifications/dialog/tailwind-styling/src/index.tsx @@ -0,0 +1,56 @@ +import React, { useEffect } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrButton, IgrDialog, IgrIconButton, registerIconFromText } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +const clearIcon = ''; + +export default function DialogTailwindStyling(): JSX.Element { + useEffect(() => { + registerIconFromText('clear', clearIcon, 'material'); + }, []); + + return ( +
+
+ + Export complete + + analytics_report_Q3.csv +
+ has been exported to your Downloads folder. + + + Got it + + + + Invitation sent + + + john.smith@company.com has been invited to your team. + + +
+
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/notifications/dialog/closing-variations/tsconfig.json b/samples/notifications/dialog/tailwind-styling/tsconfig.json similarity index 100% rename from samples/notifications/dialog/closing-variations/tsconfig.json rename to samples/notifications/dialog/tailwind-styling/tsconfig.json diff --git a/samples/notifications/dialog/form/vite.config.js b/samples/notifications/dialog/tailwind-styling/vite.config.js similarity index 53% rename from samples/notifications/dialog/form/vite.config.js rename to samples/notifications/dialog/tailwind-styling/vite.config.js index 1744dbc719..4043727956 100644 --- a/samples/notifications/dialog/form/vite.config.js +++ b/samples/notifications/dialog/tailwind-styling/vite.config.js @@ -1,12 +1,13 @@ import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; +import tailwindcss from '@tailwindcss/vite'; export default defineConfig({ - plugins: [react()], + plugins: [react(), tailwindcss()], build: { - outDir: 'build' + outDir: 'build', }, server: { - open: false + open: false, }, -}); \ No newline at end of file +}); diff --git a/samples/notifications/dialog/form/.devcontainer/devcontainer.json b/samples/notifications/dialog/types/.devcontainer/devcontainer.json similarity index 100% rename from samples/notifications/dialog/form/.devcontainer/devcontainer.json rename to samples/notifications/dialog/types/.devcontainer/devcontainer.json diff --git a/samples/notifications/dialog/form/.eslintrc.js b/samples/notifications/dialog/types/.eslintrc.js similarity index 100% rename from samples/notifications/dialog/form/.eslintrc.js rename to samples/notifications/dialog/types/.eslintrc.js diff --git a/samples/notifications/dialog/form/README.md b/samples/notifications/dialog/types/README.md similarity index 86% rename from samples/notifications/dialog/form/README.md rename to samples/notifications/dialog/types/README.md index 4f56b73684..137af27b6d 100644 --- a/samples/notifications/dialog/form/README.md +++ b/samples/notifications/dialog/types/README.md @@ -1,7 +1,7 @@ -This folder contains implementation of React application with example of Form feature using [Dialog](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. +This folder contains implementation of React application with example of Types feature using [Dialog](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. @@ -12,10 +12,10 @@ This folder contains implementation of React application with example of Form fe View Code - + Run Sample - + Run Sample @@ -34,7 +34,7 @@ Follow these instructions to run this example: git clone https://github.com/IgniteUI/igniteui-react-examples.git git checkout master cd ./igniteui-react-examples -cd ./samples/notifications/dialog/form +cd ./samples/notifications/dialog/types ``` open above folder in VS Code or type: diff --git a/samples/notifications/dialog/form/index.html b/samples/notifications/dialog/types/index.html similarity index 88% rename from samples/notifications/dialog/form/index.html rename to samples/notifications/dialog/types/index.html index a5e3d1052b..859ede2923 100644 --- a/samples/notifications/dialog/form/index.html +++ b/samples/notifications/dialog/types/index.html @@ -1,7 +1,7 @@ - DialogForm + Dialog Types diff --git a/samples/notifications/dialog/form/package.json b/samples/notifications/dialog/types/package.json similarity index 87% rename from samples/notifications/dialog/form/package.json rename to samples/notifications/dialog/types/package.json index 6c67dd512b..185cbf792a 100644 --- a/samples/notifications/dialog/form/package.json +++ b/samples/notifications/dialog/types/package.json @@ -1,6 +1,6 @@ { - "name": "react-dialog-form", - "description": "This project provides example of Dialog Form using Infragistics React components", + "name": "react-dialog-types", + "description": "This project provides an example of Dialog types using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", diff --git a/samples/notifications/dialog/form/sandbox.config.json b/samples/notifications/dialog/types/sandbox.config.json similarity index 100% rename from samples/notifications/dialog/form/sandbox.config.json rename to samples/notifications/dialog/types/sandbox.config.json diff --git a/samples/notifications/dialog/types/src/index.css b/samples/notifications/dialog/types/src/index.css new file mode 100644 index 0000000000..e36f0d7f37 --- /dev/null +++ b/samples/notifications/dialog/types/src/index.css @@ -0,0 +1,48 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.sample { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.dialog-types { + display: flex; + align-items: flex-start; + justify-content: center; + gap: 3.75rem; + width: 100%; +} + +.dialog-types igc-dialog { + --ig-dialog-message-color: var(--ig-gray-700); +} + +.dialog-types igc-dialog::part(base) { + position: static; + display: block; + flex: 0 1 17.5rem; + min-width: 0; + margin: 0; +} + +.dialog-types igc-button { + --ig-size: var(--ig-size-medium); +} + +.dialog-types igc-button::part(base) { + min-width: auto; +} + +.sign-in-form { + display: flex; + flex-direction: column; + gap: 1.75rem; +} + +.sign-in-form igc-input { + --ig-size: var(--ig-size-small); +} diff --git a/samples/notifications/dialog/types/src/index.tsx b/samples/notifications/dialog/types/src/index.tsx new file mode 100644 index 0000000000..cd450ac9bb --- /dev/null +++ b/samples/notifications/dialog/types/src/index.tsx @@ -0,0 +1,57 @@ +import React, { useEffect } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrButton, IgrDialog, IgrIcon, IgrInput, registerIconFromText } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +const accountCircleIcon = ''; +const lockIcon = ''; + +export default function DialogTypes(): JSX.Element { + useEffect(() => { + registerIconFromText('account_circle', accountCircleIcon, 'material'); + registerIconFromText('lock', lockIcon, 'material'); + }, []); + + return ( +
+
+ + Your email has been sent successfully! + + OK + + + + Your email will be permanently deleted + + Cancel + + + OK + + + +
+ + + + + + +
+ + Cancel + + + Sign In + + +
+
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/notifications/dialog/form/tsconfig.json b/samples/notifications/dialog/types/tsconfig.json similarity index 100% rename from samples/notifications/dialog/form/tsconfig.json rename to samples/notifications/dialog/types/tsconfig.json diff --git a/samples/notifications/dialog/closing-variations/vite.config.js b/samples/notifications/dialog/types/vite.config.js similarity index 100% rename from samples/notifications/dialog/closing-variations/vite.config.js rename to samples/notifications/dialog/types/vite.config.js From 5c9a96e9dad61c61b70826e810de181fdde8219e Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Fri, 23 Oct 2026 18:22:57 +0300 Subject: [PATCH 2/4] fix(dialog): update tailwind sample --- samples/notifications/dialog/tailwind-styling/src/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/samples/notifications/dialog/tailwind-styling/src/index.css b/samples/notifications/dialog/tailwind-styling/src/index.css index be7459e411..cbca433d0d 100644 --- a/samples/notifications/dialog/tailwind-styling/src/index.css +++ b/samples/notifications/dialog/tailwind-styling/src/index.css @@ -1,8 +1,8 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -@import url("https://use.typekit.net/bng2zgw.css"); @layer theme, base, components, utilities; +@import url("https://use.typekit.net/bng2zgw.css"); @import "tailwindcss/theme.css" layer(theme); @import "tailwindcss/utilities.css" layer(utilities); @source "./index.tsx"; From 0d4cfc77bdb98657bba0405d6a1fa9067b2d9763 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Wed, 28 Oct 2026 17:23:38 +0200 Subject: [PATCH 3/4] fix(dialog): add updates after review --- samples/notifications/dialog/overview/src/index.css | 2 +- samples/notifications/dialog/tailwind-styling/src/index.tsx | 2 +- samples/notifications/dialog/types/src/index.css | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/samples/notifications/dialog/overview/src/index.css b/samples/notifications/dialog/overview/src/index.css index b215b6c9b9..6b2e98fa1c 100644 --- a/samples/notifications/dialog/overview/src/index.css +++ b/samples/notifications/dialog/overview/src/index.css @@ -14,7 +14,7 @@ igc-dialog { --ig-dialog-backdrop: transparent; - --ig-dialog-message-color: var(--ig-gray-700); + --ig-dialog-message-color: var(--ig-gray-600); } igc-dialog::part(base) { diff --git a/samples/notifications/dialog/tailwind-styling/src/index.tsx b/samples/notifications/dialog/tailwind-styling/src/index.tsx index 673a64771d..57de42701c 100644 --- a/samples/notifications/dialog/tailwind-styling/src/index.tsx +++ b/samples/notifications/dialog/tailwind-styling/src/index.tsx @@ -40,7 +40,7 @@ export default function DialogTailwindStyling() { name="clear" collection="material" aria-label="Close" - className="[&::part(base)]:size-6 [&::part(base)]:p-0 [&::part(base)]:rounded-full [&::part(base)]:border [&::part(base)]:border-invite-ink [&::part(base)]:text-invite-ink" + className="[&::part(base)]:size-6 [&::part(base)]:p-0 [&::part(base)]:rounded-full [&::part(base)]:border [&::part(base)]:border-invite-ink [--ig-outlined-icon-button-foreground:var(--color-invite-ink)]" /> john.smith@company.com has been invited to your team. diff --git a/samples/notifications/dialog/types/src/index.css b/samples/notifications/dialog/types/src/index.css index e36f0d7f37..5a2b99c440 100644 --- a/samples/notifications/dialog/types/src/index.css +++ b/samples/notifications/dialog/types/src/index.css @@ -18,7 +18,7 @@ } .dialog-types igc-dialog { - --ig-dialog-message-color: var(--ig-gray-700); + --ig-dialog-message-color: var(--ig-gray-600); } .dialog-types igc-dialog::part(base) { From 3780d410fa6c270dfd5a73fe8a5924a1adf115ec Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Thu, 29 Oct 2026 13:45:34 +0200 Subject: [PATCH 4/4] fix(dialog): use correct gray levels --- samples/notifications/dialog/overview/src/index.css | 2 +- samples/notifications/dialog/types/src/index.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/samples/notifications/dialog/overview/src/index.css b/samples/notifications/dialog/overview/src/index.css index 6b2e98fa1c..b215b6c9b9 100644 --- a/samples/notifications/dialog/overview/src/index.css +++ b/samples/notifications/dialog/overview/src/index.css @@ -14,7 +14,7 @@ igc-dialog { --ig-dialog-backdrop: transparent; - --ig-dialog-message-color: var(--ig-gray-600); + --ig-dialog-message-color: var(--ig-gray-700); } igc-dialog::part(base) { diff --git a/samples/notifications/dialog/types/src/index.css b/samples/notifications/dialog/types/src/index.css index 5a2b99c440..e36f0d7f37 100644 --- a/samples/notifications/dialog/types/src/index.css +++ b/samples/notifications/dialog/types/src/index.css @@ -18,7 +18,7 @@ } .dialog-types igc-dialog { - --ig-dialog-message-color: var(--ig-gray-600); + --ig-dialog-message-color: var(--ig-gray-700); } .dialog-types igc-dialog::part(base) {