From 4ccacafa4ed5860d822e7edab9bc945fc5a91c12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Mon, 22 Jan 2024 15:50:20 +0300 Subject: [PATCH 1/4] Added empty message into tree --- components/lib/tree/Tree.js | 66 +++++++++++++++++++++++---------- components/lib/tree/TreeBase.js | 2 + 2 files changed, 48 insertions(+), 20 deletions(-) diff --git a/components/lib/tree/Tree.js b/components/lib/tree/Tree.js index a827e1fe68..610eabd594 100644 --- a/components/lib/tree/Tree.js +++ b/components/lib/tree/Tree.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { PrimeReactContext } from '../api/Api'; +import { localeOption, PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; import { useMergeProps } from '../hooks/Hooks'; import { useUpdateEffect } from '../hooks/useUpdateEffect'; @@ -408,33 +408,59 @@ export const Tree = React.memo( ); }; - const createRootChildren = () => { - if (props.filter) { - filterChanged.current = true; - _filter(); - } + const createEmptyMessageNode = () => { + const emptyMessageProps = mergeProps( + { + className: classNames(props.contentClassName, cx('emptyMessage')) + }, + ptm('emptyMessage') + ); + + return ( +
  • + {localeOption('emptyMessage')} +
    • + ); + }; - const value = getRootNode(); + const createRootChildrenContainer = (children) => { + const containerProps = mergeProps( + { + className: classNames(props.contentClassName, cx('container')), + role: 'tree', + 'aria-label': props.ariaLabel, + 'aria-labelledby': props.ariaLabelledBy, + style: props.contentStyle, + ...ariaProps + }, + ptm('container') + ); + return ; + }; + + const createRootChildren = (value) => { return value.map((node, index) => createRootChild(node, index, index === value.length - 1)); }; const createModel = () => { if (props.value) { - const rootNodes = createRootChildren(); - const containerProps = mergeProps( - { - className: classNames(props.contentClassName, cx('container')), - role: 'tree', - 'aria-label': props.ariaLabel, - 'aria-labelledby': props.ariaLabelledBy, - style: props.contentStyle, - ...ariaProps - }, - ptm('container') - ); + if (props.filter) { + filterChanged.current = true; + _filter(); + } - return ; + const value = getRootNode(); + + if (value.length > 0) { + const rootNodes = createRootChildren(value); + + return createRootChildrenContainer(rootNodes); + } else { + const emptyMessageNode = createEmptyMessageNode(); + + return createRootChildrenContainer(emptyMessageNode); + } } return null; diff --git a/components/lib/tree/TreeBase.js b/components/lib/tree/TreeBase.js index 5c96d169c9..3b7335bc57 100644 --- a/components/lib/tree/TreeBase.js +++ b/components/lib/tree/TreeBase.js @@ -6,6 +6,7 @@ const classes = { loadingIcon: 'p-tree-loading-icon', loadingOverlay: 'p-tree-loading-overlay p-component-overlay', searchIcon: 'p-tree-filter-icon', + emptyMessage: 'p-treenode p-tree-empty-message', filterContainer: 'p-tree-filter-container', input: 'p-tree-filter p-inputtext p-component', header: 'p-tree-header', @@ -117,6 +118,7 @@ export const TreeBase = ComponentBase.extend({ value: null, checkboxIcon: null, disabled: false, + emptyMessage: null, selectionMode: null, selectionKeys: null, onSelectionChange: null, From 653a95985d4ee9027b151ffa4a468b402cf0649d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Wed, 24 Jan 2024 05:17:56 +0300 Subject: [PATCH 2/4] Fix: Added TS Support to Doc Highlights --- components/doc/common/codeeditor/templates.js | 96 +++++++++++++++---- 1 file changed, 79 insertions(+), 17 deletions(-) diff --git a/components/doc/common/codeeditor/templates.js b/components/doc/common/codeeditor/templates.js index 37f9ed7cbb..46c35743b0 100644 --- a/components/doc/common/codeeditor/templates.js +++ b/components/doc/common/codeeditor/templates.js @@ -9,7 +9,59 @@ const PrimeReact = { const app_dependencies = pkg ? pkg.dependencies : {}; -const getConfiguredDependencies = (isUnstyled) => { +const typeScriptDependencies = { + '@types/react-dom': '^18.0.0', + '@vitejs/plugin-react': '^1.3.0', + typescript: '^4.6.3' +}; + +const typeScriptFiles = { + 'tsconfig.json': { + content: `{ + "compilerOptions": { + "target": "ESNext", + "lib": ["DOM", "DOM.Iterable", "ESNext"], + "module": "ESNext", + "skipLibCheck": true, + "allowJs": true, + + /* Bundler mode */ + "moduleResolution": "node", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + + "allowSyntheticDefaultImports": true, + "esModuleInterop": true, + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} + ` + }, + 'tsconfig.node.json': { + content: `{ + "compilerOptions": { + "composite": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true, + "esModuleInterop": true + }, + "include": ["vite.config.ts"] +}` + } +}; + +const getConfiguredDependencies = (isUnstyled, isTypeScript) => { const defaultDependencies = { '@types/react': '^18.2.38', // For stackblitz react: app_dependencies['react'] || 'latest', @@ -18,7 +70,8 @@ const getConfiguredDependencies = (isUnstyled) => { primereact: PrimeReact.version || 'latest', // latest primeicons: app_dependencies['primeicons'] || 'latest', vite: 'latest', - '@vitejs/plugin-react': 'latest' + '@vitejs/plugin-react': 'latest', + ...(isTypeScript ? typeScriptDependencies : '') }; if (isUnstyled) { @@ -36,7 +89,9 @@ const getConfiguredDependencies = (isUnstyled) => { } }; -const getUnstyledFiles = (path) => { +const getUnstyledFiles = (path, isTypeScript) => { + const fileExtension = isTypeScript ? 'tsx' : 'jsx'; + const tailwindConfig = { content: `/** @type {import('tailwindcss').Config} */ export default { @@ -134,7 +189,7 @@ import './index.css'; import './flags.css'; import App from './App'; -const root = ReactDOM.createRoot(document.getElementById('root')); +const root = ReactDOM.createRoot(document.getElementById('root')${isTypeScript ? ' as HTMLElement' : ''}); root.render( @@ -145,10 +200,12 @@ root.render( );` }; - return { 'tailwind.config.js': tailwindConfig, 'postcss.config.js': postcssConfig, [`${path}main.jsx`]: mainJsx, [`${path}index.css`]: tailwindCss, [`${path}components/themeSwitcher.jsx`]: themeSwitcher }; + return { 'tailwind.config.js': tailwindConfig, 'postcss.config.js': postcssConfig, [`${path}main.${fileExtension}`]: mainJsx, [`${path}index.css`]: tailwindCss, [`${path}components/themeSwitcher.${fileExtension}`]: themeSwitcher }; }; -const getStyledFiles = (path) => { +const getStyledFiles = (path, isTypeScript) => { + const fileExtension = isTypeScript ? 'tsx' : 'jsx'; + const globalCss = { content: `html { font-size: 14px; @@ -185,7 +242,7 @@ import './index.css'; import './flags.css'; import App from './App'; -const root = ReactDOM.createRoot(document.getElementById('root')); +const root = ReactDOM.createRoot(document.getElementById('root')${isTypeScript ? ' as HTMLElement' : ''}); root.render( @@ -195,16 +252,18 @@ root.render( );` }; - return { [`${path}main.jsx`]: mainJsx, [`${path}index.css`]: globalCss }; + return { [`${path}main.${fileExtension}`]: mainJsx, [`${path}index.css`]: globalCss }; }; const getVite = (props = {}, template = 'javascript') => { const path = 'src/'; const isUnstyled = props.embedded; + const isTypeScript = template === 'typescript'; + const fileExtension = isTypeScript ? 'tsx' : 'jsx'; const { code: sources, title = 'primereact_demo', description = '', dependencies: pDependencies = {} } = props; - const configuredDependencies = getConfiguredDependencies(isUnstyled); + const configuredDependencies = getConfiguredDependencies(isUnstyled, isTypeScript); const dependencies = { ...configuredDependencies, ...pDependencies, 'react-scripts': '5.0.1' }; const extFiles = {}; @@ -216,6 +275,8 @@ const getVite = (props = {}, template = 'javascript') => { }; }); + const buildType = isTypeScript ? 'tsc && vite build' : 'vite build'; + const packageJson = { content: { name: title.toLowerCase().replaceAll(' ', '_'), @@ -223,10 +284,10 @@ const getVite = (props = {}, template = 'javascript') => { type: 'module', scripts: { dev: 'vite', - build: 'vite build', + build: buildType, preview: 'vite preview' }, - main: `${path}main.jsx`, + main: `${path}main.${fileExtension}`, keywords: ['primereact', 'react', 'vite', 'starter'], dependencies } @@ -261,33 +322,34 @@ export default defineConfig({
    - + ` }; - const configuredFiles = isUnstyled ? getUnstyledFiles(path) : getStyledFiles(path); + const configuredFiles = isUnstyled ? getUnstyledFiles(path, isTypeScript) : getStyledFiles(path, isTypeScript); let files = { 'package.json': packageJson, 'vite.config.js': viteConfig, 'index.html': indexHtml, [`${path}flags.css`]: flagsCss, - [`${path}App.jsx`]: { + [`${path}App.${fileExtension}`]: { content: sources[template].replace(/^\n/, '') }, - ...configuredFiles + ...configuredFiles, + ...(isTypeScript ? typeScriptFiles : '') }; if (props.service) { props.service.forEach((name) => { - files[`${path}service/${name}.jsx`] = { + files[`${path}service/${name}.${fileExtension}`] = { content: services[name] }; }); } - return { files, dependencies, sourceFileName: `${path}App.jsx` }; + return { files, dependencies, sourceFileName: `${path}App.${fileExtension}` }; }; const flagsCss = { From 0346efa37ac039da2988484c3dbd038839e4277f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Wed, 24 Jan 2024 05:18:29 +0300 Subject: [PATCH 3/4] Revert "Fix: Added TS Support to Doc Highlights" This reverts commit 653a95985d4ee9027b151ffa4a468b402cf0649d. --- components/doc/common/codeeditor/templates.js | 96 ++++--------------- 1 file changed, 17 insertions(+), 79 deletions(-) diff --git a/components/doc/common/codeeditor/templates.js b/components/doc/common/codeeditor/templates.js index 46c35743b0..37f9ed7cbb 100644 --- a/components/doc/common/codeeditor/templates.js +++ b/components/doc/common/codeeditor/templates.js @@ -9,59 +9,7 @@ const PrimeReact = { const app_dependencies = pkg ? pkg.dependencies : {}; -const typeScriptDependencies = { - '@types/react-dom': '^18.0.0', - '@vitejs/plugin-react': '^1.3.0', - typescript: '^4.6.3' -}; - -const typeScriptFiles = { - 'tsconfig.json': { - content: `{ - "compilerOptions": { - "target": "ESNext", - "lib": ["DOM", "DOM.Iterable", "ESNext"], - "module": "ESNext", - "skipLibCheck": true, - "allowJs": true, - - /* Bundler mode */ - "moduleResolution": "node", - "allowImportingTsExtensions": true, - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - "jsx": "react-jsx", - - "allowSyntheticDefaultImports": true, - "esModuleInterop": true, - - /* Linting */ - "strict": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "noFallthroughCasesInSwitch": true - }, - "include": ["src"], - "references": [{ "path": "./tsconfig.node.json" }] -} - ` - }, - 'tsconfig.node.json': { - content: `{ - "compilerOptions": { - "composite": true, - "module": "ESNext", - "moduleResolution": "bundler", - "allowSyntheticDefaultImports": true, - "esModuleInterop": true - }, - "include": ["vite.config.ts"] -}` - } -}; - -const getConfiguredDependencies = (isUnstyled, isTypeScript) => { +const getConfiguredDependencies = (isUnstyled) => { const defaultDependencies = { '@types/react': '^18.2.38', // For stackblitz react: app_dependencies['react'] || 'latest', @@ -70,8 +18,7 @@ const getConfiguredDependencies = (isUnstyled, isTypeScript) => { primereact: PrimeReact.version || 'latest', // latest primeicons: app_dependencies['primeicons'] || 'latest', vite: 'latest', - '@vitejs/plugin-react': 'latest', - ...(isTypeScript ? typeScriptDependencies : '') + '@vitejs/plugin-react': 'latest' }; if (isUnstyled) { @@ -89,9 +36,7 @@ const getConfiguredDependencies = (isUnstyled, isTypeScript) => { } }; -const getUnstyledFiles = (path, isTypeScript) => { - const fileExtension = isTypeScript ? 'tsx' : 'jsx'; - +const getUnstyledFiles = (path) => { const tailwindConfig = { content: `/** @type {import('tailwindcss').Config} */ export default { @@ -189,7 +134,7 @@ import './index.css'; import './flags.css'; import App from './App'; -const root = ReactDOM.createRoot(document.getElementById('root')${isTypeScript ? ' as HTMLElement' : ''}); +const root = ReactDOM.createRoot(document.getElementById('root')); root.render( @@ -200,12 +145,10 @@ root.render( );` }; - return { 'tailwind.config.js': tailwindConfig, 'postcss.config.js': postcssConfig, [`${path}main.${fileExtension}`]: mainJsx, [`${path}index.css`]: tailwindCss, [`${path}components/themeSwitcher.${fileExtension}`]: themeSwitcher }; + return { 'tailwind.config.js': tailwindConfig, 'postcss.config.js': postcssConfig, [`${path}main.jsx`]: mainJsx, [`${path}index.css`]: tailwindCss, [`${path}components/themeSwitcher.jsx`]: themeSwitcher }; }; -const getStyledFiles = (path, isTypeScript) => { - const fileExtension = isTypeScript ? 'tsx' : 'jsx'; - +const getStyledFiles = (path) => { const globalCss = { content: `html { font-size: 14px; @@ -242,7 +185,7 @@ import './index.css'; import './flags.css'; import App from './App'; -const root = ReactDOM.createRoot(document.getElementById('root')${isTypeScript ? ' as HTMLElement' : ''}); +const root = ReactDOM.createRoot(document.getElementById('root')); root.render( @@ -252,18 +195,16 @@ root.render( );` }; - return { [`${path}main.${fileExtension}`]: mainJsx, [`${path}index.css`]: globalCss }; + return { [`${path}main.jsx`]: mainJsx, [`${path}index.css`]: globalCss }; }; const getVite = (props = {}, template = 'javascript') => { const path = 'src/'; const isUnstyled = props.embedded; - const isTypeScript = template === 'typescript'; - const fileExtension = isTypeScript ? 'tsx' : 'jsx'; const { code: sources, title = 'primereact_demo', description = '', dependencies: pDependencies = {} } = props; - const configuredDependencies = getConfiguredDependencies(isUnstyled, isTypeScript); + const configuredDependencies = getConfiguredDependencies(isUnstyled); const dependencies = { ...configuredDependencies, ...pDependencies, 'react-scripts': '5.0.1' }; const extFiles = {}; @@ -275,8 +216,6 @@ const getVite = (props = {}, template = 'javascript') => { }; }); - const buildType = isTypeScript ? 'tsc && vite build' : 'vite build'; - const packageJson = { content: { name: title.toLowerCase().replaceAll(' ', '_'), @@ -284,10 +223,10 @@ const getVite = (props = {}, template = 'javascript') => { type: 'module', scripts: { dev: 'vite', - build: buildType, + build: 'vite build', preview: 'vite preview' }, - main: `${path}main.${fileExtension}`, + main: `${path}main.jsx`, keywords: ['primereact', 'react', 'vite', 'starter'], dependencies } @@ -322,34 +261,33 @@ export default defineConfig({
    - + ` }; - const configuredFiles = isUnstyled ? getUnstyledFiles(path, isTypeScript) : getStyledFiles(path, isTypeScript); + const configuredFiles = isUnstyled ? getUnstyledFiles(path) : getStyledFiles(path); let files = { 'package.json': packageJson, 'vite.config.js': viteConfig, 'index.html': indexHtml, [`${path}flags.css`]: flagsCss, - [`${path}App.${fileExtension}`]: { + [`${path}App.jsx`]: { content: sources[template].replace(/^\n/, '') }, - ...configuredFiles, - ...(isTypeScript ? typeScriptFiles : '') + ...configuredFiles }; if (props.service) { props.service.forEach((name) => { - files[`${path}service/${name}.${fileExtension}`] = { + files[`${path}service/${name}.jsx`] = { content: services[name] }; }); } - return { files, dependencies, sourceFileName: `${path}App.${fileExtension}` }; + return { files, dependencies, sourceFileName: `${path}App.jsx` }; }; const flagsCss = { From 52247e456cffae7dfaa1f21d36366115e7833693 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Fri, 16 Feb 2024 13:21:03 +0300 Subject: [PATCH 4/4] Contrast and Secondary Variants for Badge/Tag/Message/Toast --- components/doc/badge/severitydoc.js | 8 + components/doc/message/severitydoc.js | 8 + components/doc/message/theming/tailwinddoc.js | 2 + components/doc/messages/severitydoc.js | 10 +- components/doc/tag/pilldoc.js | 8 + components/doc/tag/severitydoc.js | 8 + components/doc/toast/severitydoc.js | 65 +- components/lib/api/MessageSeverity.js | 4 +- components/lib/api/api.d.ts | 4 +- components/lib/message/MessageBase.js | 8 +- components/lib/message/message.d.ts | 2 +- components/lib/messages/messages.d.ts | 2 +- components/lib/toast/toast.d.ts | 2 +- public/themes/arya-blue/theme.css | 77 +- public/themes/arya-green/theme.css | 77 +- public/themes/arya-orange/theme.css | 77 +- public/themes/bootstrap4-dark-blue/theme.css | 125 ++- public/themes/bootstrap4-light-blue/theme.css | 125 ++- public/themes/fluent-light/theme.css | 77 +- public/themes/lara-dark-amber/theme.css | 203 ++++- public/themes/lara-dark-blue/theme.css | 203 ++++- public/themes/lara-dark-cyan/theme.css | 203 ++++- public/themes/lara-dark-green/theme.css | 203 ++++- public/themes/lara-dark-indigo/theme.css | 203 ++++- public/themes/lara-dark-pink/theme.css | 203 ++++- public/themes/lara-dark-teal/theme.css | 203 ++++- public/themes/lara-light-amber/theme.css | 203 ++++- public/themes/lara-light-blue/theme.css | 203 ++++- public/themes/lara-light-cyan/theme.css | 203 ++++- public/themes/lara-light-green/theme.css | 203 ++++- public/themes/lara-light-indigo/theme.css | 203 ++++- public/themes/lara-light-pink/theme.css | 203 ++++- public/themes/lara-light-teal/theme.css | 203 ++++- public/themes/luna-amber/theme.css | 77 +- public/themes/luna-blue/theme.css | 77 +- public/themes/luna-green/theme.css | 77 +- public/themes/luna-pink/theme.css | 77 +- public/themes/md-dark-deeppurple/theme.css | 852 ++++++++++++++---- public/themes/md-dark-indigo/theme.css | 509 ++++++++--- public/themes/md-light-deeppurple/theme.css | 600 ++++++++++-- public/themes/md-light-indigo/theme.css | 237 ++++- public/themes/mdc-dark-deeppurple/theme.css | 852 ++++++++++++++---- public/themes/mdc-dark-indigo/theme.css | 509 ++++++++--- public/themes/mdc-light-deeppurple/theme.css | 600 ++++++++++-- public/themes/mdc-light-indigo/theme.css | 237 ++++- public/themes/mira/theme.css | 77 +- public/themes/nano/theme.css | 77 +- public/themes/nova-accent/theme.css | 77 +- public/themes/nova-alt/theme.css | 77 +- public/themes/nova/theme.css | 77 +- public/themes/rhea/theme.css | 77 +- public/themes/saga-blue/theme.css | 77 +- public/themes/saga-green/theme.css | 77 +- public/themes/saga-orange/theme.css | 77 +- public/themes/soho-dark/theme.css | 175 +++- public/themes/soho-light/theme.css | 125 ++- public/themes/tailwind-light/theme.css | 77 +- public/themes/vela-blue/theme.css | 77 +- public/themes/vela-green/theme.css | 77 +- public/themes/vela-orange/theme.css | 77 +- public/themes/viva-dark/theme.css | 125 ++- public/themes/viva-light/theme.css | 125 ++- 62 files changed, 8916 insertions(+), 870 deletions(-) diff --git a/components/doc/badge/severitydoc.js b/components/doc/badge/severitydoc.js index ad2426f161..65a31bf598 100644 --- a/components/doc/badge/severitydoc.js +++ b/components/doc/badge/severitydoc.js @@ -10,6 +10,8 @@ export function SeverityDoc(props) { + + `, javascript: ` import React from 'react'; @@ -23,6 +25,8 @@ export default function SeverityDemo() { + + ); } @@ -39,6 +43,8 @@ export default function SeverityDemo() { + + ); } @@ -58,6 +64,8 @@ export default function SeverityDemo() { + + diff --git a/components/doc/message/severitydoc.js b/components/doc/message/severitydoc.js index 37a41d9107..3816c16252 100644 --- a/components/doc/message/severitydoc.js +++ b/components/doc/message/severitydoc.js @@ -9,6 +9,8 @@ export function SeverityDoc(props) { + + `, javascript: ` import React from 'react'; @@ -21,6 +23,8 @@ export default function SeverityDemo() { + + ) } @@ -36,6 +40,8 @@ export default function SeverityDemo() { + + ) } @@ -54,6 +60,8 @@ export default function SeverityDemo() { + + diff --git a/components/doc/message/theming/tailwinddoc.js b/components/doc/message/theming/tailwinddoc.js index e1858a7a65..857e575ab2 100644 --- a/components/doc/message/theming/tailwinddoc.js +++ b/components/doc/message/theming/tailwinddoc.js @@ -33,6 +33,8 @@ export default function UnstyledDemo() { + + ) } diff --git a/components/doc/messages/severitydoc.js b/components/doc/messages/severitydoc.js index 8e1fdc8cee..019043d374 100644 --- a/components/doc/messages/severitydoc.js +++ b/components/doc/messages/severitydoc.js @@ -14,7 +14,9 @@ export function SeverityDoc(props) { { sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false }, { sticky: true, severity: 'success', summary: 'Success', detail: 'Message Content', closable: false }, { sticky: true, severity: 'warn', summary: 'Warning', detail: 'Message Content', closable: false }, - { sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false } + { sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false }, + { sticky: true, severity: 'secondary', summary: 'Secondary', detail: 'Message Content', closable: false }, + { sticky: true, severity: 'contrast', summary: 'Contrast', detail: 'Message Content', closable: false } ]); } }); @@ -26,6 +28,8 @@ msgs.current.show([ {sticky: true, severity: 'success', summary: 'Success', detail: 'Message Content', closable: false}, {sticky: true, severity: 'warn', summary: 'Warning', detail: 'Message Content', closable: false}, {sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false} + {sticky: true, severity: 'secondary', summary: 'Secondary', detail: 'Message Content', closable: false} + {sticky: true, severity: 'contrast', summary: 'Contrast', detail: 'Message Content', closable: false} ]); `, javascript: ` @@ -44,6 +48,8 @@ export default function SeverityDemo() { { sticky: true, severity: 'success', summary: 'Success', detail: 'Message Content', closable: false }, { sticky: true, severity: 'warn', summary: 'Warning', detail: 'Message Content', closable: false }, { sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false } + { sticky: true, severity: 'secondary', summary: 'Secondary', detail: 'Message Content', closable: false } + { sticky: true, severity: 'contrast', summary: 'Contrast', detail: 'Message Content', closable: false } ]); } }); @@ -68,6 +74,8 @@ export default function SeverityDemo() { {sticky: true, severity: 'success', summary: 'Success', detail: 'Message Content'}, {sticky: true, severity: 'warn', summary: 'Warning', detail: 'Message Content'}, {sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content'} + {sticky: true, severity: 'secondary', summary: 'Secondary', detail: 'Message Content'} + {sticky: true, severity: 'contrast', summary: 'Contrast', detail: 'Message Content'} ]); }); diff --git a/components/doc/tag/pilldoc.js b/components/doc/tag/pilldoc.js index 141a6f1cac..bd6d8d746f 100644 --- a/components/doc/tag/pilldoc.js +++ b/components/doc/tag/pilldoc.js @@ -10,6 +10,8 @@ export function PillDoc(props) { + + `, javascript: ` import React from 'react'; @@ -23,6 +25,8 @@ export default function PillDemo() { + + ); } @@ -39,6 +43,8 @@ export default function PillDemo() { + + ); } @@ -58,6 +64,8 @@ export default function PillDemo() { + + diff --git a/components/doc/tag/severitydoc.js b/components/doc/tag/severitydoc.js index 878ca663c4..e9583334c3 100644 --- a/components/doc/tag/severitydoc.js +++ b/components/doc/tag/severitydoc.js @@ -10,6 +10,8 @@ export function SeverityDoc(props) { + + `, javascript: ` import React from 'react'; @@ -23,6 +25,8 @@ export default function SeverityDemo() { + + ); } @@ -39,6 +43,8 @@ export default function SeverityDemo() { + + ); } @@ -58,6 +64,8 @@ export default function SeverityDemo() { + + diff --git a/components/doc/toast/severitydoc.js b/components/doc/toast/severitydoc.js index db8dd67e02..fbabdaebe7 100644 --- a/components/doc/toast/severitydoc.js +++ b/components/doc/toast/severitydoc.js @@ -23,13 +23,23 @@ export function SeverityDoc(props) { toast.current.show({ severity: 'error', summary: 'Error', detail: 'Message Content', life: 3000 }); }; + const showSecondary = () => { + toast.current.show({ severity: 'secondary', summary: 'Secondary', detail: 'Message Content', life: 3000 }); + }; + + const showContrast = () => { + toast.current.show({ severity: 'contrast', summary: 'Contrast', detail: 'Message Content', life: 3000 }); + }; + const code = { basic: ` -