diff --git a/.github/workflows/qa.yml b/.github/workflows/qa.yml index 9ac9910e08..6566c2728c 100644 --- a/.github/workflows/qa.yml +++ b/.github/workflows/qa.yml @@ -3,7 +3,7 @@ name: qa # Controls when the action will run. on: push: - branches: [ themes/eduverse-theme ] + branches: [ feature/4px-grid-for-uui ] # Allows you to run this workflow manually from the Actions tab workflow_dispatch: diff --git a/app/src/common/AppHeader.tsx b/app/src/common/AppHeader.tsx index 11dfaaf0f5..ed20c4bca2 100644 --- a/app/src/common/AppHeader.tsx +++ b/app/src/common/AppHeader.tsx @@ -82,16 +82,22 @@ export function AppHeader() { ( - { Object.values(themesById).map(({ id, name }) => ( - toggleTheme(id) } - /> - )) } + { Object.values(themesById).map(({ id, name, devOnly }) => { + if (window.location.host.includes('uui.epam.com') && devOnly) { + return null; + } + + return ( + toggleTheme(id) } + /> + ); + }) } ) } renderTarget={ (props) => ( diff --git a/app/src/common/appFooterDemo/AppFooterDemo.module.scss b/app/src/common/appFooterDemo/AppFooterDemo.module.scss index aa8c5dad08..e281135fbc 100644 --- a/app/src/common/appFooterDemo/AppFooterDemo.module.scss +++ b/app/src/common/appFooterDemo/AppFooterDemo.module.scss @@ -10,5 +10,9 @@ overflow-x: auto; width: 100%; margin: 0 auto; + + &:global(.uui-flex-row) { + --uui-size: 36px; + } } } diff --git a/app/src/common/appFooterDemo/AppFooterDemo.tsx b/app/src/common/appFooterDemo/AppFooterDemo.tsx index 912844b200..00d4746a10 100644 --- a/app/src/common/appFooterDemo/AppFooterDemo.tsx +++ b/app/src/common/appFooterDemo/AppFooterDemo.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import css from './AppFooterDemo.module.scss'; -import { FlexRow } from '@epam/promo'; +import { FlexRow } from '@epam/uui'; import { DemoItem } from '../../demo/structure'; import { DemoToolbar } from './demoToolbar/DemoToolbar'; diff --git a/app/src/common/appFooterDemo/demoToolbar/DemoToolbar.module.scss b/app/src/common/appFooterDemo/demoToolbar/DemoToolbar.module.scss index 0977c5e21e..14c5f89e75 100644 --- a/app/src/common/appFooterDemo/demoToolbar/DemoToolbar.module.scss +++ b/app/src/common/appFooterDemo/demoToolbar/DemoToolbar.module.scss @@ -3,11 +3,23 @@ .container { display: flex; + &:global(.uui-flex-row)[class*='uui-size-'] { + --uui-size: 36px; + } + + &[class*='uui-size-'] { + --uui-size: 36px; + } + .item { padding-left: 18px; padding-right: 18px; color: var(--uui-neutral-0) !important; + &:global(.uui-button-box) { + --uui-size: 36px; + } + &:hover { background-color: var(--uui-neutral-90); } @@ -28,7 +40,7 @@ content: ''; position: absolute; height: 100%; - border-right: thin solid var(--icon-color); + border-right: thin solid var(--uui-icon); } } } diff --git a/app/src/common/appFooterDemo/demoToolbar/DemoToolbar.tsx b/app/src/common/appFooterDemo/demoToolbar/DemoToolbar.tsx index 47e43574ae..38a6d13d66 100644 --- a/app/src/common/appFooterDemo/demoToolbar/DemoToolbar.tsx +++ b/app/src/common/appFooterDemo/demoToolbar/DemoToolbar.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { LinkButton, FlexRow, FlexCell, -} from '@epam/promo'; +} from '@epam/uui'; import { DemoItem } from '../../../demo/structure'; import { ReactComponent as BackIcon } from '@epam/assets/icons/common/navigation-back-18.svg'; import { ReactComponent as ExternalLinkIcon } from '@epam/assets/icons/common/action-external_link-18.svg'; diff --git a/app/src/common/docs/DocExample.tsx b/app/src/common/docs/DocExample.tsx index 0e85e699a3..5bb0a09f4a 100644 --- a/app/src/common/docs/DocExample.tsx +++ b/app/src/common/docs/DocExample.tsx @@ -1,17 +1,26 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; +import cx from 'classnames'; +import { TDocConfig } from '@epam/uui-docs'; +import { LinkButton, FlexSpacer } from '@epam/uui'; import { Switch, FlexRow } from '@epam/promo'; import { EditableDocContent } from './EditableDocContent'; import { svc } from '../../services'; -import type { FilesRecord } from '../../data/codesandbox/getCodesandboxConfig'; -import css from './DocExample.module.scss'; import { CodesandboxLink } from './CodesandboxLink'; import { Code } from './Code'; -import cx from 'classnames'; import { docExampleLoader } from './docExampleLoader'; import { ThemeId } from '../../data'; -import { LinkButton, FlexSpacer } from '@epam/uui'; +import { generateNewRawString, getSkin, useCode, useExampleProps, usePropEditorTypeOverride } from './utils'; + import { ReactComponent as PreviewIcon } from '@epam/assets/icons/common/media-fullscreen-12.svg'; -import { getCurrentTheme } from '../../helpers'; + +import css from './DocExample.module.scss'; +import { useAppThemeContext } from '../../helpers/appTheme'; + +const EXAMPLES_PATH_PREFIX = './_examples'; + +const LABELS = { + Fullscreen: 'Fullscreen', +}; interface DocExampleProps { path: string; @@ -20,111 +29,95 @@ interface DocExampleProps { width?: number | 'auto'; cx?: string; disableCodesandbox?: boolean; + config?: TDocConfig; } -interface DocExampleState { - showCode: boolean; - component?: any; - code?: string; - raw?: string; - stylesheets?: FilesRecord; -} +const DocExampleFsBtn: React.FC<{ path: string; theme: ThemeId }> = ({ path, theme }) => { + const regex = /^\.\/_examples\/(.*)\/(\w+)\.example\.tsx$/; + const examplePath = path.replace(regex, '$1/$2'); + const href = `/docExample?theme=${encodeURIComponent(theme)}&examplePath=${encodeURIComponent(examplePath)}`; + return ( + + ); +}; -const EXAMPLES_PATH_PREFIX = './_examples'; +export function DocExample(props: DocExampleProps) { + const [showCode, setShowCode] = useState(false); + const [component, setComponent] = useState<{ elementType: any }>(); + const [raw, setRaw] = useState(); + const { theme } = useAppThemeContext(); + const skin = getSkin(theme, true); + const type = props?.config?.bySkin[skin]?.type; + const propsOverride = usePropEditorTypeOverride(theme, type); + const exampleProps = useExampleProps(props.config, type, theme, propsOverride); + const code = useCode(props.path, raw, exampleProps, props.config); -export class DocExample extends React.Component { - componentDidMount(): void { - const { path, onlyCode } = this.props; + useEffect(() => { + const { path, onlyCode } = props; if (!onlyCode) { const exPathRelative = `.${path.substring(EXAMPLES_PATH_PREFIX.length)}`; - docExampleLoader({ path: exPathRelative }).then((component) => { - this.setState({ component }); + docExampleLoader({ path: exPathRelative }).then((elementType) => { + setComponent({ elementType }); }); } + }, []); - svc.api - .getCode({ path }) - .then((r) => this.setState({ code: r.highlighted, raw: r.raw })); - } + useEffect(() => { + const { path } = props; - state: DocExampleState = { - showCode: false, - stylesheets: {}, - }; - - private getDescriptionFileName(): string { - // Files are stored here: "public/docs/content" - const name = this.props.path - .replace(new RegExp(/\.example.tsx|\./g), '') - .replace(/\//g, '-') - .replace(/^-/, ''); + svc.api.getCode({ path }).then((r) => { + setRaw(r.raw); + }); + }, []); - // next line removes leading underscore - // i.e. "_examples-alert-Basic.json" -> "examples-alert-Basic.json" + const getDescriptionFileName = (): string => { + const name = props.path.replace(new RegExp(/\.example.tsx|\./g), '').replace(/\//g, '-').replace(/^-/, ''); return name.substring(1); - } + }; - private onSwitchValueChange = (val: boolean) => { - this.setState({ showCode: val }); + const renderCode = (): React.ReactNode => { + return code && ; }; - private renderCode(): React.ReactNode { - return ( - - ); - } + const renderPreview = () => { + const dirPath = props.path.split('/').slice(0, -1); + const codesandboxRaw = (props.config && raw && exampleProps) ? generateNewRawString(raw, exampleProps) : raw; + + if (props.config && (!exampleProps || !codesandboxRaw)) { + return null; + } - private renderPreview() { - const { raw } = this.state; - const { path } = this.props; - const dirPath = path.split('/').slice(0, -1); - const theme = getCurrentTheme(); return ( <> - {this.state.component && React.createElement(this.state.component)} + {component && React.createElement(component.elementType, { propDocs: exampleProps })}
- + - { !this.props.disableCodesandbox && } - + {!props.disableCodesandbox && } +
- {this.state.showCode && this.renderCode()} + {showCode && renderCode()} ); - } - - render() { - return ( -
- -
- {this.props.onlyCode ? this.renderCode() : this.renderPreview()} -
-
- ); - } -} + }; -const LABELS = { - Fullscreen: 'Fullscreen', -}; -function DocExampleFsBtn(props: { path: string; theme: ThemeId }) { - const regex = /^\.\/_examples\/(.*)\/(\w+)\.example\.tsx$/; - const examplePath = props.path.replace(regex, '$1/$2'); - const href = `/docExample?theme=${encodeURIComponent(props.theme)}&examplePath=${encodeURIComponent(examplePath)}`; return ( - +
+ +
+ {props.onlyCode ? renderCode() : renderPreview()} +
+
); } diff --git a/app/src/common/docs/DocsSidebar.tsx b/app/src/common/docs/DocsSidebar.tsx index ea0c4a3f83..c4006fd08e 100644 --- a/app/src/common/docs/DocsSidebar.tsx +++ b/app/src/common/docs/DocsSidebar.tsx @@ -1,12 +1,13 @@ -import { DocItem } from '../../documents/structure'; -import { Sidebar } from '../sidebar'; import React from 'react'; import { DataRowProps } from '@epam/uui-core'; import { TreeListItem } from '@epam/uui-components'; +import { DocItem } from '../../documents/structure'; +import { Sidebar } from '../sidebar'; import { useQuery } from '../../helpers'; import { TMode } from './docsConstants'; import { ThemeId } from '../../data'; import { svc } from '../../services'; +import { useAppThemeContext } from '../../helpers/appTheme'; type DocsQuery = { id: string, @@ -27,7 +28,7 @@ export function DocsSidebar() { const mode = useQuery('mode') || TMode.doc; const queryParamId: string = useQuery('id'); const isSkin = useQuery('isSkin'); - const theme = useQuery('theme'); + const { theme } = useAppThemeContext(); const onChange = (row: DataRowProps) => { if (row.parentId === 'components') { @@ -57,6 +58,7 @@ export function DocsSidebar() { mode: (row.parentId && mode), isSkin: (row.parentId && isSkin), category: row.parentId, + theme, }, } } /> diff --git a/app/src/common/docs/baseDocBlock/BaseDocsBlock.tsx b/app/src/common/docs/baseDocBlock/BaseDocsBlock.tsx index 5b8d081f9e..87f7b47752 100644 --- a/app/src/common/docs/baseDocBlock/BaseDocsBlock.tsx +++ b/app/src/common/docs/baseDocBlock/BaseDocsBlock.tsx @@ -79,7 +79,7 @@ export abstract class BaseDocsBlock extends React.Component { ); } - private getConfig = () => { + getConfig = () => { return (this.constructor as unknown as { config: TDocConfig })?.config; }; diff --git a/app/src/common/docs/index.ts b/app/src/common/docs/index.ts index e4291496a6..5bef60f59e 100644 --- a/app/src/common/docs/index.ts +++ b/app/src/common/docs/index.ts @@ -3,3 +3,4 @@ export * from './properyEditor/PropertyEditor'; export * from './ContentSection'; export * from './DocExample'; export * from './EditableDocContent'; +export * from './utils'; diff --git a/app/src/common/docs/properyEditor/PropertyEditor.tsx b/app/src/common/docs/properyEditor/PropertyEditor.tsx index df7781112c..09218a5971 100644 --- a/app/src/common/docs/properyEditor/PropertyEditor.tsx +++ b/app/src/common/docs/properyEditor/PropertyEditor.tsx @@ -8,7 +8,7 @@ import { PropDocUnknown, TDocContext, DocBuilder, } from '@epam/uui-docs'; import { PropertyEditorView } from './view/PropertyEditorView'; -import { getSkin, useDocBuilderGenCtx, usePropEditorTypeOverride } from './utils'; +import { getSkin, useDocBuilderGenCtx, usePropEditorTypeOverride } from '../utils'; import { PropSamplesCreationContext } from './view/PropSamplesCreationContext'; import { buildExamplesAndFindById, diff --git a/app/src/common/docs/properyEditor/utils.ts b/app/src/common/docs/properyEditor/utils.ts deleted file mode 100644 index 6b6248f485..0000000000 --- a/app/src/common/docs/properyEditor/utils.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { IDocBuilderGenCtx, TPropEditorTypeOverride, TSkin, TTypeRef } from '@epam/uui-docs'; -import { useUuiContext } from '@epam/uui-core'; -import { useMemo } from 'react'; -import { loadDocsGenType } from '../../apiReference/dataHooks'; -import { getAllIcons } from '../../../documents/iconListHelpers'; -import { AppContext, BuiltInTheme, ThemeId } from '../../../data'; -import { CustomThemeManifest } from '../../../data/customThemes'; -import { useAppThemeContext } from '../../../helpers/appTheme'; - -export function getSkin(theme: ThemeId, isSkin: boolean): TSkin { - if (!isSkin) return TSkin.UUI; - - switch (theme) { - case BuiltInTheme.electric: - return TSkin.Electric; - case BuiltInTheme.loveship: - case BuiltInTheme.loveship_dark: - return TSkin.Loveship; - case BuiltInTheme.promo: - return TSkin.Promo; - default: - return TSkin.UUI; - } -} - -export function useDocBuilderGenCtx(propsOverride: TPropEditorTypeOverride[TTypeRef] | undefined): IDocBuilderGenCtx { - const uuiCtx = useUuiContext(); - return useMemo(() => { - const result: IDocBuilderGenCtx = { - loadDocsGenType, - uuiCtx: { - uuiNotifications: uuiCtx.uuiNotifications, - }, - demoApi: uuiCtx.api.demo, - getIconList: getAllIcons, - propsOverride, - }; - return result; - }, [propsOverride, uuiCtx.api.demo, uuiCtx.uuiNotifications]); -} - -export function usePropEditorTypeOverride(themeId: ThemeId, typeRef: TTypeRef | undefined): TPropEditorTypeOverride[TTypeRef] | undefined { - const { themesById } = useAppThemeContext(); - if (typeRef && themesById) { - const themeDetails = (themesById[themeId] as CustomThemeManifest); - return themeDetails?.propsOverride?.[typeRef]; - } -} diff --git a/app/src/common/docs/utils.ts b/app/src/common/docs/utils.ts new file mode 100644 index 0000000000..b506839967 --- /dev/null +++ b/app/src/common/docs/utils.ts @@ -0,0 +1,137 @@ +import { + IDocBuilderGenCtx, OneOfEditor, overrideProp, TDocConfig, TPropEditorTypeOverride, TSkin, TTypeProp, TTypeRef, +} from '@epam/uui-docs'; +import { useUuiContext } from '@epam/uui-core'; +import { useEffect, useMemo, useState } from 'react'; +import { loadDocsGenType } from '../apiReference/dataHooks'; +import { getAllIcons } from '../../documents/iconListHelpers'; +import { AppContext, BuiltInTheme, ThemeId } from '../../data'; +import { CustomThemeManifest } from '../../data/customThemes'; +import { useAppThemeContext } from '../../helpers/appTheme'; +import prism from 'prismjs'; +import { svc } from '../../services'; + +export function getSkin(theme: ThemeId, isSkin: boolean): TSkin { + if (!isSkin) return TSkin.UUI; + + switch (theme) { + case BuiltInTheme.electric: + return TSkin.Electric; + case BuiltInTheme.loveship: + case BuiltInTheme.loveship_dark: + return TSkin.Loveship; + case BuiltInTheme.promo: + return TSkin.Promo; + default: + return TSkin.UUI; + } +} + +export function useDocBuilderGenCtx(propsOverride: TPropEditorTypeOverride[TTypeRef] | undefined): IDocBuilderGenCtx { + const uuiCtx = useUuiContext(); + return useMemo(() => { + const result: IDocBuilderGenCtx = { + loadDocsGenType, + uuiCtx: { + uuiNotifications: uuiCtx.uuiNotifications, + }, + demoApi: uuiCtx.api.demo, + getIconList: getAllIcons, + propsOverride, + }; + return result; + }, [propsOverride, uuiCtx.api.demo, uuiCtx.uuiNotifications]); +} + +export function usePropEditorTypeOverride(themeId: ThemeId, typeRef: TTypeRef | undefined): TPropEditorTypeOverride[TTypeRef] | undefined { + const { themesById } = useAppThemeContext(); + if (typeRef && themesById) { + const themeDetails = (themesById[themeId] as CustomThemeManifest); + return themeDetails?.propsOverride?.[typeRef]; + } +} + +export const useExampleProps = ( + config: TDocConfig | undefined, + type: TTypeRef | undefined, + theme: ThemeId, + propsOverride: TPropEditorTypeOverride[TTypeRef] | undefined, +) => { + const [exampleProps, setExampleProps] = useState>(); + + useEffect(() => { + if (config && type) { + const loadExampleProps = async () => { + const { content: { details } } = await loadDocsGenType(type); + const initialProps = details.props; + + const updatedProps: Record = initialProps.reduce((prev, current) => { + const newProp = propsOverride && propsOverride[current.name] ? overrideProp(current, propsOverride[current.name]) : current; + return { ...prev, [current.name]: newProp }; + }, {}); + + setExampleProps(updatedProps); + }; + + loadExampleProps().catch(console.error); + } + }, [config, type, theme, propsOverride]); + + return exampleProps; +}; + +export const useCode = (path: string, raw: string | undefined, exampleProps: Record | undefined, config: TDocConfig | undefined) => { + const [code, setCode] = useState(); + + useEffect(() => { + if (raw && exampleProps) { + const newRaw = generateNewRawString(raw, exampleProps); + const highlightedCode = prism.highlight(newRaw, prism.languages.ts, 'typescript'); + setCode(highlightedCode); + } + }, [exampleProps, raw]); + + useEffect(() => { + if (!config) { + svc.api.getCode({ path }).then((r) => { + const highlightedCode = prism.highlight(r.raw, prism.languages.ts, 'typescript'); + setCode(highlightedCode); + }); + } + }, [config, path]); + + return code; +}; + +export function generateNewRawString(initialRaw: string, props: Record) { + // Remove the import statement + const importGetAllPropValuesRegEx = /import\s+\{\s*getAllPropValues\s*\}\s+from\s+'[^']*';[\r\n]*[\r\n]/; + const importExamplePropsRegEx = /import\s+\{\s*ExampleProps\s*\}\s+from\s+'[^']*';[\r\n]*[\r\n]/; + + let updatedString = initialRaw.replace(importGetAllPropValuesRegEx, '').replace(importExamplePropsRegEx, ''); + + // Remove `props: ExampleProps` from function definition + const functionParamRegEx = /export\sdefault\sfunction\s(\w+)\(props:\sExampleProps\)\s\{/; + updatedString = updatedString.replace(functionParamRegEx, 'export default function $1() {'); + + // Find the getAllPropValues call and extract the key and reverse flag + const functionCallRegEx = /getAllPropValues\('([a-zA-Z]+)'\s*,\s*(true|false),\s*props\)/; + const match = updatedString.match(functionCallRegEx); + + if (match) { + const key = match[1]; + const shouldRevert = match[2] === 'true'; + + // Get the values from props + const values = (props[key].editor as OneOfEditor).options; + const valuesArray = shouldRevert ? values.slice().reverse() : values; + + // Create the new array string + const newArrayString = `['${valuesArray.join("', '")}']`; + + // Replace the `getAllPropValues` call with the actual array string in the initial string + updatedString = updatedString.replace(functionCallRegEx, newArrayString); + } + + return updatedString; +} diff --git a/app/src/data/codesandbox/getCodesandboxConfig.ts b/app/src/data/codesandbox/getCodesandboxConfig.ts index f98e7df7ab..4cf846fe75 100644 --- a/app/src/data/codesandbox/getCodesandboxConfig.ts +++ b/app/src/data/codesandbox/getCodesandboxConfig.ts @@ -11,6 +11,10 @@ export const getCodesandboxConfig = (content: string, stylesheets: FilesRecord, isBinary: false, content: initialFiles.indexTSX, }, + 'settings.ts': { + isBinary: false, + content: initialFiles.settingsTS, + }, 'package.json': { isBinary: false, content: initialFiles.packageJSON, diff --git a/app/src/data/codesandbox/index.html b/app/src/data/codesandbox/index.html index 16faafd81d..c634a94571 100644 --- a/app/src/data/codesandbox/index.html +++ b/app/src/data/codesandbox/index.html @@ -7,6 +7,6 @@ Document -
+
diff --git a/app/src/data/codesandbox/index.tsx b/app/src/data/codesandbox/index.tsx index 8f8f1586ee..e49eeff4e8 100644 --- a/app/src/data/codesandbox/index.tsx +++ b/app/src/data/codesandbox/index.tsx @@ -10,14 +10,24 @@ import { DragGhost, } from '@epam/uui-core'; import { Modals, Snackbar } from '@epam/uui-components'; +import { Settings, settings } from '@epam/uui'; +import { settings_override } from './settings'; import '@epam/uui-components/styles.css'; // eslint-disable-next-line import/no-unresolved import '@epam/uui/styles.css'; import '@epam/promo/styles.css'; import '@epam/loveship/styles.css'; +/* eslint-disable */ +"" import '@epam/uui-docs/styles.css'; import Example from './Example'; import { svc, getApi } from './api'; +/* eslint-enable */ + +settings.sizes = { + ...settings.sizes, + ...(settings_override as Settings).sizes, +}; type TApi = ReturnType; diff --git a/app/src/data/codesandbox/settings.ts b/app/src/data/codesandbox/settings.ts new file mode 100644 index 0000000000..8892e754ed --- /dev/null +++ b/app/src/data/codesandbox/settings.ts @@ -0,0 +1,6 @@ +import { Settings } from '@epam/uui'; + +/* eslint-disable */ +export const settings_override: Settings | {} = { + sizes: "", +}; diff --git a/app/src/data/customThemes.ts b/app/src/data/customThemes.ts index de1c3993ba..41857b0320 100644 --- a/app/src/data/customThemes.ts +++ b/app/src/data/customThemes.ts @@ -1,4 +1,5 @@ import { TPropEditorTypeOverride } from '@epam/uui-docs'; +import { Settings } from '@epam/uui'; import { ThemeId } from './themes'; import { svc } from '../services'; @@ -10,8 +11,9 @@ export interface CustomThemeManifest { name: string; css: string[]; path: string; - settings: null | object; + settings: null | Settings; propsOverride?: TPropEditorTypeOverride; + devOnly?: boolean; } function getCustomThemesConfig(): string[] { @@ -87,7 +89,7 @@ async function loadCustomThemesInternal() { async function loadSettings(url: string) { try { const result = await fetch(url); - return (await result.json()) as object; + return (await result.json()) as Settings; } catch (err) { console.error(`Unable to load settings from: "${url}"`, err); } diff --git a/app/src/data/propsOverride_4px.ts b/app/src/data/propsOverride_4px.ts new file mode 100644 index 0000000000..b5331d8aa5 --- /dev/null +++ b/app/src/data/propsOverride_4px.ts @@ -0,0 +1,243 @@ +import { TPropEditorType, TPropEditorTypeOverride } from '@epam/uui-docs'; + +const propsOverride: TPropEditorTypeOverride = { + '@epam/uui:AlertProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['40', '48'], + }, + comment: { + tags: { + '@default': '40', + }, + }, + }, + }, + '@epam/uui:ButtonProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['40', '48'], + }, + comment: { + tags: { + '@default': '40', + }, + }, + }, + }, + '@epam/uui:IconButtonProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['20', '24'], + }, + }, + }, + '@epam/uui:BadgeProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['24', '32', '40'], + }, + comment: { + tags: { + '@default': '32', + }, + }, + }, + }, + '@epam/uui:LinkButtonProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['24', '32', '40'], + }, + comment: { + tags: { + '@default': '40', + }, + }, + }, + }, + '@epam/uui:TextInputProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['40', '48'], + }, + comment: { + tags: { + '@default': '40', + }, + }, + }, + }, + '@epam/uui:NumericInputProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['40', '48'], + }, + comment: { + tags: { + '@default': '40', + }, + }, + }, + }, + '@epam/uui:CheckboxProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['20', '24', '28'], + }, + comment: { + tags: { + '@default': '24', + }, + }, + }, + }, + '@epam/uui:RadioInputProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['20', '24', '28'], + }, + comment: { + tags: { + '@default': '24', + }, + }, + }, + }, + '@epam/uui:SwitchProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['20', '24'], + }, + comment: { + tags: { + '@default': '24', + }, + }, + }, + }, + '@epam/uui:TabButtonProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['48'], + }, + comment: { + tags: { + '@default': '48', + }, + }, + }, + }, + '@epam/uui:PickerInputProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['40', '48'], + }, + comment: { + tags: { + '@default': '40', + }, + }, + }, + }, + '@epam/uui:CountIndicatorProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['20', '24'], + }, + comment: { + tags: { + '@default': '24', + }, + }, + }, + }, + '@epam/uui:DatePickerProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['40', '48'], + }, + comment: { + tags: { + '@default': '40', + }, + }, + }, + }, + '@epam/uui:RangeDatePickerProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['40', '48'], + }, + }, + }, + '@epam/uui:RatingProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['20', '24'], + }, + comment: { + tags: { + '@default': '20', + }, + }, + }, + }, + '@epam/uui:PaginatorProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['24', '32'], + }, + comment: { + tags: { + '@default': '24', + }, + }, + }, + }, + '@epam/uui:StatusIndicatorProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['20', '24', '28'], + }, + comment: { + tags: { + '@default': '24', + }, + }, + }, + }, + '@epam/uui:TagProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['32', '40', '48'], + }, + comment: { + tags: { + '@default': '40', + }, + }, + }, + }, +}; + +export default propsOverride; diff --git a/app/src/data/service.ts b/app/src/data/service.ts index 7c11df65de..0ccf2194eb 100644 --- a/app/src/data/service.ts +++ b/app/src/data/service.ts @@ -1,10 +1,28 @@ import { getParameters } from 'codesandbox/lib/api/define'; import { CodesandboxFilesRecord, FilesRecord, getCodesandboxConfig } from './codesandbox/getCodesandboxConfig'; import { svc } from '../services'; +import { ThemeBaseParams, ThemeId } from './themes'; +import { CustomThemeManifest } from './customThemes'; -const CodesandboxFiles: Record }> = { - 'index.html': '../data/codesandbox/index.html', - 'index.tsx': '../data/codesandbox/index.tsx', +const CodesandboxFiles: Record string)> }> = { + 'index.html': { + path: '../data/codesandbox/index.html', + placeholders: { + '': (theme: ThemeBaseParams) => theme.id, + }, + }, + 'index.tsx': { + path: '../data/codesandbox/index.tsx', + placeholders: { + '""': (theme) => `import '@epam/assets/css/theme/theme_${theme.id}.css';`, + }, + }, + 'settings.ts': { + path: '../data/codesandbox/settings.ts', + placeholders: { + '""': (theme) => theme.settings ? JSON.stringify(theme.settings.sizes, null, 4) : '{}', + }, + }, 'package.json': { path: '../data/codesandbox/package.json', placeholders: { @@ -23,7 +41,7 @@ class CodesandboxService { this.files = {}; } - public getFiles(): Promise { + public getFiles(current_theme: string, themesById: Record): Promise { if (!svc.api) { throw new Error('svc.api isn\'t available'); } @@ -33,7 +51,7 @@ class CodesandboxService { Object.keys(CodesandboxFiles).map((name) => { const params = CodesandboxFiles[name]; let path: string; - let placeholders: Record; + let placeholders: Record string)>; if (typeof params === 'string') { path = params; } else { @@ -44,7 +62,10 @@ class CodesandboxService { return svcApi.getCode({ path }).then((file) => { if (placeholders) { file.raw = Object.keys(placeholders).reduce((acc, phName) => { - return file.raw.replace(new RegExp(phName, 'g'), placeholders[phName]); + const placeholder = placeholders[phName]; + const replaceValue = typeof placeholder === 'function' ? placeholder(themesById[current_theme]) : placeholder; + + return file.raw.replace(new RegExp(phName, 'g'), replaceValue); }, file.raw); } return file; @@ -53,11 +74,12 @@ class CodesandboxService { ) .then((data) => data.map((file) => file.raw)) .then(([ - indexHTML, indexTSX, packageJSON, tsConfigJSON, api, globalTypings, env, + indexHTML, indexTSX, settingsTS, packageJSON, tsConfigJSON, api, globalTypings, env, ]) => { Object.assign(this.files, { indexHTML, indexTSX, + settingsTS, packageJSON, tsConfigJSON, api, diff --git a/app/src/data/settings_4px.ts b/app/src/data/settings_4px.ts new file mode 100644 index 0000000000..9d4d26bd5d --- /dev/null +++ b/app/src/data/settings_4px.ts @@ -0,0 +1,269 @@ +import { Settings } from '@epam/uui'; + +const settings_4px: Settings = { + sizes: { + defaults: { + alert: '48', + badge: '24', + button: '40', + checkbox: '24', + countIndicator: '24', + flexRow: '40', + filtersPanel: '40', + linkButton: '40', + numericInput: '40', + radioInput: '24', + richTextView: '14', + switch: '24', + tabButton: '48', + tag: '40', + text: '40', + textArea: '40', + textInput: '40', + rangeDatePicker: '40', + datePicker: '40', + labeledInput: '40', + statusIndicator: '40', + paginator: '32', + rating: '24', + }, + alert: { + action: { + 32: '24', + 48: '32', + }, + }, + notificationCard: { + action: '32', + }, + tag: { + countIndicator: { + 32: '20', + 40: '24', + 48: '24', + }, + }, + pickerInput: { + toggler: { + defaults: { + size: '40', + tag: '40', + }, + tag: { + 40: '32', + 48: '32', + }, + }, + body: { + dropdown: { + height: 300, + width: 360, + padding: '12', + row: { + default: '40', + cell: { + padding: '24', + text: { + 40: '40', + 48: '48', + }, + icon: { + 40: '24', + 48: '24', + }, + isBoldSelectionIcon: { + 24: true, + }, + item: { + default: '40', + verticalPadding: { + 40: '8', + 48: '12', + }, + avatar: { + rest: { + 40: '32', + 48: '32', + }, + multiline: { + 40: '40', + 48: '48', + }, + }, + }, + }, + }, + footer: { + switch: { + 40: '20', + 48: '24', + }, + linkButton: { + 40: '32', + 48: '32', + }, + }, + }, + mobile: { + header: { + titleSize: '48', + }, + footer: { + linkButton: '48', + }, + row: '48', + searchInput: '48', + }, + modal: { + row: '40', + padding: '24', + }, + }, + }, + rowAddons: { + defaults: { + icon: '20', + indentUnit: 24, + indentWidth: 12, + }, + checkbox: { + 40: '24', + 48: '24', + 60: '24', + }, + icon: { + 40: '20', + 48: '20', + 60: '24', + }, + indentUnit: { + 40: 24, + 48: 24, + 60: 24, + }, + indentWidth: { + 40: 24, + 48: 24, + 60: 24, + }, + }, + text: { + 20: { lineHeight: 12, fontSize: 10 }, + 24: { lineHeight: 18, fontSize: 12 }, + 32: { lineHeight: 18, fontSize: 14 }, + 40: { lineHeight: 24, fontSize: 16 }, + 48: { lineHeight: 24, fontSize: 16 }, + 60: { lineHeight: 30, fontSize: 24 }, + }, + filtersPanel: { + pickerInput: { + body: { + default: '40', + }, + }, + }, + labeledInput: { + fillIcon: ['24', '32'], + }, + badge: { + countIndicator: { + 24: '20', + 32: '20', + 48: '24', + }, + }, + dataTable: { + header: { + row: { + default: '40', + cell: { + defaults: { + size: '40', + resizeMarker: '12', + padding: '12', + paddingEdge: '24', + }, + checkbox: { + 40: '24', + 48: '24', + 60: '24', + }, + columnCaption: { + fontSize: '14', + fontWeight: '400', + size: '20', + uppercase: '12', + }, + iconSize: { + 40: '20', + 48: '20', + 60: '20', + }, + truncate: ['48'], + }, + groupCell: { + defaults: { + size: '40', + padding: '12', + paddingEdge: '24', + }, + columnCaption: { + fontSize: '14', + fontWeight: '400', + size: '20', + uppercase: '12', + }, + iconSize: { + 40: '20', + 48: '20', + 60: '20', + }, + truncate: ['48'], + }, + }, + }, + body: { + row: { + default: '40', + cell: { + defaults: { + size: '40', + padding: '12', + paddingEdge: '24', + }, + text: { + 24: '24', + 32: '32', + 40: '40', + 48: '48', + 60: '48', + }, + }, + }, + }, + columnsConfigurationModal: { + columnRow: '40', + countIndicator: '20', + subgroupIcon: '20', + search: '40', + width: 560, + }, + }, + modal: { + window: { + defaults: { + width: 560, + }, + }, + }, + tabButton: { + countIndicator: { + 40: '24', + 48: '24', + 60: '24', + }, + }, + }, +}; + +export default settings_4px; diff --git a/app/src/data/themes.ts b/app/src/data/themes.ts index eadb9a9c6b..17b09c8487 100644 --- a/app/src/data/themes.ts +++ b/app/src/data/themes.ts @@ -1,8 +1,13 @@ +import { CustomThemeManifest } from './customThemes'; +import settings_4px from './settings_4px'; +import propsOverride_4px from './propsOverride_4px'; + export enum BuiltInTheme { electric = 'electric', loveship = 'loveship', loveship_dark = 'loveship_dark', promo = 'promo', + fresh_4px = 'fresh_4px', vanilla_thunder = 'vanilla_thunder', eduverse_light = 'eduverse_light', eduverse_dark = 'eduverse_dark' @@ -13,7 +18,7 @@ type CustomTheme = string; export type ThemeId = BuiltInTheme | CustomTheme; -export interface ThemeBaseParams { +export interface ThemeBaseParams extends Partial { id: ThemeId; name: string; } @@ -22,8 +27,9 @@ export const builtInThemes: ThemeBaseParams[] = [ { id: BuiltInTheme.electric, name: 'Electric' }, { id: BuiltInTheme.loveship, name: 'Loveship Light' }, { id: BuiltInTheme.loveship_dark, name: 'Loveship Dark' }, - { id: BuiltInTheme.vanilla_thunder, name: 'Vanilla Thunder' }, + { id: BuiltInTheme.fresh_4px, name: 'Fresh Light 4px', settings: settings_4px, propsOverride: propsOverride_4px, devOnly: true, css: null }, { id: BuiltInTheme.promo, name: 'Promo' }, + { id: BuiltInTheme.vanilla_thunder, name: 'Vanilla Thunder' }, { id: BuiltInTheme.eduverse_light, name: 'Eduverse Light' }, { id: BuiltInTheme.eduverse_dark, name: 'Eduverse Dark' }, ]; diff --git a/app/src/demo/dnd/DemoDnd.tsx b/app/src/demo/dnd/DemoDnd.tsx index 80cd923770..128cf67d48 100644 --- a/app/src/demo/dnd/DemoDnd.tsx +++ b/app/src/demo/dnd/DemoDnd.tsx @@ -64,7 +64,7 @@ export class DemoDnd extends React.Component<{}, DemoDndState> { <> - + Modules diff --git a/app/src/demo/dnd/DndModule.tsx b/app/src/demo/dnd/DndModule.tsx index cf70ea4c25..aa5fbb1f79 100644 --- a/app/src/demo/dnd/DndModule.tsx +++ b/app/src/demo/dnd/DndModule.tsx @@ -55,18 +55,18 @@ export class DndModule extends React.Component { return (
- + - + {item.name}
-
); diff --git a/app/src/docs/Badge.doc.tsx b/app/src/docs/Badge.doc.tsx index 5d9ed63e61..9bc716eed8 100644 --- a/app/src/docs/Badge.doc.tsx +++ b/app/src/docs/Badge.doc.tsx @@ -33,7 +33,6 @@ export class BadgeDoc extends BaseDocsBlock { [TSkin.Electric]: { type: '@epam/electric:BadgeProps', component: electric.Badge }, }, doc: (doc: DocBuilder) => { - doc.setDefaultPropExample('size', ({ value }) => value === '36'); doc.setDefaultPropExample('onClick', () => true); doc.merge('color', { defaultValue: 'info', @@ -114,9 +113,9 @@ export class BadgeDoc extends BaseDocsBlock { {this.renderSectionTitle('Overview')} - + - + {this.renderSectionTitle('Examples')} diff --git a/app/src/docs/Button.doc.tsx b/app/src/docs/Button.doc.tsx index ad6a3a3e86..6de2c7058a 100644 --- a/app/src/docs/Button.doc.tsx +++ b/app/src/docs/Button.doc.tsx @@ -94,7 +94,7 @@ export class ButtonDoc extends BaseDocsBlock { {this.renderSectionTitle('Examples')} - + diff --git a/app/src/docs/Checkbox.doc.tsx b/app/src/docs/Checkbox.doc.tsx index d594844168..5f505ff59a 100644 --- a/app/src/docs/Checkbox.doc.tsx +++ b/app/src/docs/Checkbox.doc.tsx @@ -61,7 +61,7 @@ export class CheckboxDoc extends BaseDocsBlock { <> {this.renderSectionTitle('Examples')} - + ); diff --git a/app/src/docs/CountIndicator.doc.tsx b/app/src/docs/CountIndicator.doc.tsx index b67b340a62..f45a5f1e2e 100644 --- a/app/src/docs/CountIndicator.doc.tsx +++ b/app/src/docs/CountIndicator.doc.tsx @@ -53,7 +53,7 @@ export class CountIndicatorDoc extends BaseDocsBlock { <> {this.renderSectionTitle('Examples')} - + ); } diff --git a/app/src/docs/LinkButton.doc.tsx b/app/src/docs/LinkButton.doc.tsx index 2ec197e5bd..cb5e93e901 100644 --- a/app/src/docs/LinkButton.doc.tsx +++ b/app/src/docs/LinkButton.doc.tsx @@ -83,12 +83,12 @@ export class LinkButtonDoc extends BaseDocsBlock { {this.renderSectionTitle('Overview')} - + {this.renderSectionTitle('Examples')} - + diff --git a/app/src/docs/NumericInput.doc.tsx b/app/src/docs/NumericInput.doc.tsx index 63f09000f3..7373d06f22 100644 --- a/app/src/docs/NumericInput.doc.tsx +++ b/app/src/docs/NumericInput.doc.tsx @@ -93,7 +93,7 @@ export class NumericInputDoc extends BaseDocsBlock { {this.renderSectionTitle('Examples')} - + ); } diff --git a/app/src/docs/Paginator.doc.tsx b/app/src/docs/Paginator.doc.tsx index 22696529b5..36cf0547db 100644 --- a/app/src/docs/Paginator.doc.tsx +++ b/app/src/docs/Paginator.doc.tsx @@ -87,6 +87,7 @@ export class PaginatorDoc extends BaseDocsBlock { {this.renderSectionTitle('Examples')} + ); } diff --git a/app/src/docs/RadioInput.doc.tsx b/app/src/docs/RadioInput.doc.tsx index ee866752e5..7737b908c6 100644 --- a/app/src/docs/RadioInput.doc.tsx +++ b/app/src/docs/RadioInput.doc.tsx @@ -68,7 +68,7 @@ export class RadioInputDoc extends BaseDocsBlock { <> {this.renderSectionTitle('Examples')} - + ); diff --git a/app/src/docs/StatusIndicator.doc.tsx b/app/src/docs/StatusIndicator.doc.tsx index 3155f7add2..959606daec 100644 --- a/app/src/docs/StatusIndicator.doc.tsx +++ b/app/src/docs/StatusIndicator.doc.tsx @@ -26,8 +26,8 @@ export class StatusIndicatorDoc extends BaseDocsBlock { <> {this.renderSectionTitle('Examples')} - - + + diff --git a/app/src/docs/Switch.doc.tsx b/app/src/docs/Switch.doc.tsx index 411702b344..5cf8c9dee5 100644 --- a/app/src/docs/Switch.doc.tsx +++ b/app/src/docs/Switch.doc.tsx @@ -55,7 +55,7 @@ export class SwitchDoc extends BaseDocsBlock { <> {this.renderSectionTitle('Examples')} - + ); } diff --git a/app/src/docs/TabButton.doc.tsx b/app/src/docs/TabButton.doc.tsx index cf2536a129..35e177322d 100644 --- a/app/src/docs/TabButton.doc.tsx +++ b/app/src/docs/TabButton.doc.tsx @@ -85,7 +85,7 @@ export class TabButtonDoc extends BaseDocsBlock { <> {this.renderSectionTitle('Examples')} - + ); } diff --git a/app/src/docs/Tag.doc.tsx b/app/src/docs/Tag.doc.tsx index c2fec7d286..74fb3fb602 100644 --- a/app/src/docs/Tag.doc.tsx +++ b/app/src/docs/Tag.doc.tsx @@ -81,8 +81,8 @@ export class TagDoc extends BaseDocsBlock { {this.renderSectionTitle('Examples')} - - + + ); } diff --git a/app/src/docs/TextInput.doc.tsx b/app/src/docs/TextInput.doc.tsx index e5d0244780..e4173ed36b 100644 --- a/app/src/docs/TextInput.doc.tsx +++ b/app/src/docs/TextInput.doc.tsx @@ -81,7 +81,7 @@ export class TextInputDoc extends BaseDocsBlock { {this.renderSectionTitle('Examples')} - + ); diff --git a/app/src/docs/_examples/badge/Colors.example.tsx b/app/src/docs/_examples/badge/Colors.example.tsx index cfa83b8691..e023bf78cd 100644 --- a/app/src/docs/_examples/badge/Colors.example.tsx +++ b/app/src/docs/_examples/badge/Colors.example.tsx @@ -1,17 +1,23 @@ import React from 'react'; -import { Panel, Text, Badge } from '@epam/uui'; +import { Panel, Text, Badge, BadgeProps } from '@epam/uui'; +import { ExampleProps } from '../types'; +import { getAllPropValues } from '../utils'; + +export default function ColorsExample(props: ExampleProps) { + const colors = getAllPropValues('color', false, props) as BadgeProps['color'][]; -export default function ColorsExample() { return ( - + Semantic colors, use for appropriate sense
- - - - - + { colors.map((color) => ( + + )) }
); diff --git a/app/src/docs/_examples/badge/Size.example.tsx b/app/src/docs/_examples/badge/Size.example.tsx index 56ba86ebd1..48a3e23e19 100644 --- a/app/src/docs/_examples/badge/Size.example.tsx +++ b/app/src/docs/_examples/badge/Size.example.tsx @@ -1,30 +1,23 @@ import React from 'react'; -import { Text, Badge } from '@epam/uui'; +import { Text, Badge, BadgeProps } from '@epam/uui'; +import { getAllPropValues } from '../utils'; +import { ExampleProps } from '../types'; + import css from './SizeExample.module.scss'; -export default function SizeExample() { +export default function SizeExample(props: ExampleProps) { + const sizes = getAllPropValues('size', true, props) as Array; + return (
-
- - 42 px -
-
- - 36 px -
-
- - 30 px -
-
- - 24 px -
-
- - 18 px -
+ { + sizes?.map((size) => ( +
+ + {`${size} px`} +
+ )) + }
); } diff --git a/app/src/docs/_examples/button/Button.module.scss b/app/src/docs/_examples/button/Button.module.scss index 9e029495a3..0cda5535a6 100644 --- a/app/src/docs/_examples/button/Button.module.scss +++ b/app/src/docs/_examples/button/Button.module.scss @@ -5,7 +5,7 @@ padding: 6px; } -.white-column { +.whiteColumn { display: flex; flex-direction: column; row-gap: 12px; diff --git a/app/src/docs/_examples/button/Size.example.tsx b/app/src/docs/_examples/button/Size.example.tsx index 55359f5d67..6aeaf54fb9 100644 --- a/app/src/docs/_examples/button/Size.example.tsx +++ b/app/src/docs/_examples/button/Size.example.tsx @@ -1,15 +1,20 @@ import React from 'react'; -import { Button } from '@epam/uui'; +import { Button, ButtonProps } from '@epam/uui'; +import { ExampleProps } from '../types'; +import { getAllPropValues } from '../utils'; + import css from './Button.module.scss'; -export default function SizeExample() { +export default function SizeExample(props: ExampleProps) { + const sizes = getAllPropValues('size', true, props) as ButtonProps['size'][]; + return (
-
); } diff --git a/app/src/docs/_examples/checkbox/Basic.example.tsx b/app/src/docs/_examples/checkbox/Basic.example.tsx index f3415bf8c8..8a6d98b830 100644 --- a/app/src/docs/_examples/checkbox/Basic.example.tsx +++ b/app/src/docs/_examples/checkbox/Basic.example.tsx @@ -1,15 +1,22 @@ import React, { useState } from 'react'; -import { Checkbox, FlexCell } from '@epam/uui'; +import { Checkbox, CheckboxProps, FlexCell } from '@epam/uui'; +import { ExampleProps } from '../types'; +import { getAllPropValues } from '../utils'; + import css from './BasicExample.module.scss'; -export default function BasicExample() { +export default function BasicExample(props: ExampleProps) { const [value, onValueChange] = useState(null); + const sizes = getAllPropValues('size', true, props) as CheckboxProps['size'][]; return ( - - + { + sizes?.map((size) => ( + + )) + } diff --git a/app/src/docs/_examples/checkbox/BasicExample.module.scss b/app/src/docs/_examples/checkbox/BasicExample.module.scss index 2c3170e927..2b7da7e383 100644 --- a/app/src/docs/_examples/checkbox/BasicExample.module.scss +++ b/app/src/docs/_examples/checkbox/BasicExample.module.scss @@ -1,6 +1,6 @@ .container { - height: 150px; display: flex; flex-direction: column; justify-content: space-between; + row-gap: 8px; } diff --git a/app/src/docs/_examples/checkbox/GroupExample.module.scss b/app/src/docs/_examples/checkbox/GroupExample.module.scss index 5686c32e75..32d53afe8f 100644 --- a/app/src/docs/_examples/checkbox/GroupExample.module.scss +++ b/app/src/docs/_examples/checkbox/GroupExample.module.scss @@ -1,6 +1,6 @@ .container { - height: 120px; display: flex; flex-direction: column; justify-content: space-between; + row-gap: 12px; } diff --git a/app/src/docs/_examples/common/Card.example.tsx b/app/src/docs/_examples/common/Card.example.tsx index 664c3a607e..d0139bb8ec 100644 --- a/app/src/docs/_examples/common/Card.example.tsx +++ b/app/src/docs/_examples/common/Card.example.tsx @@ -22,9 +22,9 @@ export default function AttributesExample() { - - - + + +
diff --git a/app/src/docs/_examples/contexts/NotificationContext.example.tsx b/app/src/docs/_examples/contexts/NotificationContext.example.tsx index 04dc8d8983..70333f9dcf 100644 --- a/app/src/docs/_examples/contexts/NotificationContext.example.tsx +++ b/app/src/docs/_examples/contexts/NotificationContext.example.tsx @@ -22,7 +22,7 @@ export interface PositionType { direction: 'bot-left' | 'bot-right' | 'top-left' | 'top-right' | 'top-center' | 'bot-center'; } -interface Position { +interface Position { id: PositionType['direction']; name: string; } @@ -36,7 +36,7 @@ export default function NotificationContextExample() { .show( (props: INotification) => ( - + Success notification @@ -62,7 +62,7 @@ export default function NotificationContextExample() { }, ] } > - + Warning notification with some buttons @@ -74,7 +74,7 @@ export default function NotificationContextExample() { .show( (props: INotification) => ( - + It`s Ok! @@ -99,7 +99,7 @@ export default function NotificationContextExample() { }, ] } > - + Error notification with looooooooong looooooong text about lorem ispum dolor diff --git a/app/src/docs/_examples/countIndicator/Basic.example.tsx b/app/src/docs/_examples/countIndicator/Basic.example.tsx index e524d542cd..7cee775d7f 100644 --- a/app/src/docs/_examples/countIndicator/Basic.example.tsx +++ b/app/src/docs/_examples/countIndicator/Basic.example.tsx @@ -1,34 +1,25 @@ import React from 'react'; import { CountIndicatorProps, CountIndicator, Text } from '@epam/uui'; +import { ExampleProps } from '../types'; +import { getAllPropValues } from '../utils'; const exampleNames = ['Neutral', 'White', 'Info', 'Success', 'Warning', 'Negative']; +const captions = ['0', '1', '5', '+99', '123', '2']; +const colors: CountIndicatorProps['color'][] = ['neutral', 'white', 'info', 'success', 'warning', 'critical']; -const solidExamples: CountIndicatorProps[] = [ - { caption: '0', color: 'neutral', size: '12' }, - { caption: '1', color: 'white', size: '12' }, - { caption: '5', color: 'info', size: '12' }, - { caption: '+99', color: 'success', size: '12' }, - { caption: '123', color: 'warning', size: '12' }, - { caption: '2', color: 'critical', size: '12' }, - { caption: '0', color: 'neutral', size: '18' }, - { caption: '1', color: 'white', size: '18' }, - { caption: '5', color: 'info', size: '18' }, - { caption: '+99', color: 'success', size: '18' }, - { caption: '123', color: 'warning', size: '18' }, - { caption: '2', color: 'critical', size: '18' }, - { caption: '0', color: 'neutral', size: '24' }, - { caption: '1', color: 'white', size: '24' }, - { caption: '5', color: 'info', size: '24' }, - { caption: '+99', color: 'success', size: '24' }, - { caption: '123', color: 'warning', size: '24' }, - { caption: '2', color: 'critical', size: '24' }, -]; +export default function BasicCountIndicatorExample(props: ExampleProps) { + const sizes = getAllPropValues('size', false, props) as Array; + const solidExamples: CountIndicatorProps[] = sizes?.flatMap((size) => + captions.map((caption, index) => ({ + caption, + color: colors[index], + size, + }))); -export default function BasicCountIndicatorExample() { return ( -
- { exampleNames.map((name) => { name })} - { solidExamples.map((item) => ) } +
+ { exampleNames.map((name) => { name })} + { solidExamples?.map((item, index) => ) }
); } diff --git a/app/src/docs/_examples/dropdown/Basic.example.tsx b/app/src/docs/_examples/dropdown/Basic.example.tsx index 75b793c3df..f0a8e838fb 100644 --- a/app/src/docs/_examples/dropdown/Basic.example.tsx +++ b/app/src/docs/_examples/dropdown/Basic.example.tsx @@ -47,9 +47,9 @@ export default function BasicDropdownExample() { - - - + + + On vacation from 19 Aug till 26 Aug diff --git a/app/src/docs/_examples/dropdownContainer/Basic.example.tsx b/app/src/docs/_examples/dropdownContainer/Basic.example.tsx index 546b9ec852..0aa03cf739 100644 --- a/app/src/docs/_examples/dropdownContainer/Basic.example.tsx +++ b/app/src/docs/_examples/dropdownContainer/Basic.example.tsx @@ -16,7 +16,7 @@ export default function BasicExample() { - +
diff --git a/app/src/preview/previewContent/previewContent.tsx b/app/src/preview/previewContent/previewContent.tsx index e0819edb72..1aeb820c82 100644 --- a/app/src/preview/previewContent/previewContent.tsx +++ b/app/src/preview/previewContent/previewContent.tsx @@ -1,13 +1,13 @@ import React, { useCallback, useMemo } from 'react'; +import { useUuiContext } from '@epam/uui-core'; import { useDocBuilderGen } from '@epam/uui-docs'; -import { getSkin, useDocBuilderGenCtx, usePropEditorTypeOverride } from '../../common/docs/properyEditor/utils'; +import { getSkin, useDocBuilderGenCtx, usePropEditorTypeOverride } from '../../common'; import { RenderCase } from './renderCase/renderCase'; import { PreviewLayout } from './previewLayout'; import { TPreviewContentParams } from '../types'; import { ERRORS } from '../constants'; import { buildRenderCaseArr, getConfigByComponentId } from './previewContentUtils'; import { formatPreviewIdToString } from '../utils/previewLinkUtils'; -import { useUuiContext } from '@epam/uui-core'; import { MatrixSummary } from './matrixSummary/matrixSummary'; export function PreviewContent(props: { params: TPreviewContentParams }) { diff --git a/epam-assets/theme/theme_fresh_4px.scss b/epam-assets/theme/theme_fresh_4px.scss new file mode 100644 index 0000000000..8bb30a7767 --- /dev/null +++ b/epam-assets/theme/theme_fresh_4px.scss @@ -0,0 +1,7 @@ +@use 'variables/4px_grid' as *; +@use 'variables/fresh_4px' as *; + +.uui-theme-fresh_4px { + @include fresh-variables(); + @include uui-4px-grid(); +} diff --git a/epam-assets/theme/variables/4px_grid.scss b/epam-assets/theme/variables/4px_grid.scss new file mode 100644 index 0000000000..98f4f89e05 --- /dev/null +++ b/epam-assets/theme/variables/4px_grid.scss @@ -0,0 +1,240 @@ +@mixin uui-4px-grid { + & { + --uui-grid-unit: 8px; + --uui-focus-outline-width: 2px; + --uui-focus-outline-offset: 2px; + --uui-focus-radius: 2px; + --uui-border-radius: 8px; + --uui-tab-line-width: 3px; + --uui-notify-size: 6px; + } + + .uui-size-16 { + --uui-size: 16px; + --uui-border-width: 1px; + --uui-horizontal-gap: 4px; + --uui-vertical-gap: 3px; + --uui-horizontal-padding: 3px; + --uui-vertical-padding: 3px; + --uui-icon-size: 12px; + --uui-line-height: 12px; + --uui-font-size: 10px; + --uui-dot-size: 4px; + } + + .uui-size-20 { + --uui-size: 20px; + --uui-border-width: 1px; + --uui-horizontal-gap: 8px; + --uui-vertical-gap: 3px; + --uui-horizontal-padding: 3px; + --uui-vertical-padding: 3px; + --uui-icon-size: 12px; + --uui-line-height: 18px; + --uui-font-size: 14px; + --uui-dot-size: 8px; + } + + .uui-size-24 { + --uui-size: 24px; + --uui-border-width: 1px; + --uui-horizontal-gap: 8px; + --uui-vertical-gap: 3px; + --uui-horizontal-padding: 6px; + --uui-vertical-padding: 3px; + --uui-icon-size: 12px; + --uui-line-height: 18px; + --uui-font-size: 14px; + --uui-dot-size: 10px; + } + + .uui-size-28 { + --uui-size: 28px; + --uui-border-width: 1px; + --uui-horizontal-gap: 8px; + --uui-vertical-gap: 3px; + --uui-horizontal-padding: 6px; + --uui-vertical-padding: 3px; + --uui-icon-size: 12px; + --uui-line-height: 28px; + --uui-font-size: 18px; + --uui-dot-size: 12px; + } + + .uui-size-32 { + --uui-size: 32px; + --uui-border-width: 1px; + --uui-horizontal-gap: 4px; + --uui-vertical-gap: 3px; + --uui-horizontal-padding: 20px; + --uui-vertical-padding: 6px; + --uui-icon-size: 20px; + --uui-line-height: 18px; + --uui-font-size: 14px; + --uui-dot-size: 8px; + } + + .uui-size-40 { + --uui-size: 40px; + --uui-border-width: 1px; + --uui-horizontal-gap: 4px; + --uui-vertical-gap: 3px; + --uui-horizontal-padding: 20px; + --uui-vertical-padding: 8px; + --uui-icon-size: 20px; + --uui-line-height: 18px; + --uui-font-size: 14px; + --uui-dot-size: 12px; + } + + .uui-size-48 { + --uui-size: 48px; + --uui-border-width: 1px; + --uui-horizontal-gap: 4px; + --uui-vertical-gap: 3px; + --uui-horizontal-padding: 32px; + --uui-vertical-padding: 12px; + --uui-icon-size: 24px; + --uui-line-height: 20px; + --uui-font-size: 16px; + --uui-dot-size: 12px; + } + + .uui-size-60 { + --uui-size: 60px; + --uui-border-width: 1px; + --uui-horizontal-gap: 6px; + --uui-vertical-gap: 3px; + --uui-horizontal-padding: 12px; + --uui-vertical-padding: 3px; + --uui-icon-size: 24px; + --uui-line-height: 24px; + --uui-font-size: 16px; + --uui-dot-size: 12px; + } + + .uui-button { + --uui-btn-font-weight: 500; + + &.uui-size-48 { + --uui-btn-border-radius: 12px; + } + + .uui-caption:first-child { + padding-left: 0; + } + + .uui-caption:last-child { + padding-right: 0; + } + + &:has(.uui-icon:only-child) { + &.uui-size-32 { + --uui-horizontal-padding: 4px; + } + + &.uui-size-40 { + --uui-horizontal-padding: 10px; + } + + &.uui-size-48 { + --uui-horizontal-padding: 14px; + } + } + } + + .uui-input-box { + &.uui-size-40 { + --uui-horizontal-padding: 8px; + --uui-horizontal-gap: 8px; + } + + &.uui-size-48 { + --uui-horizontal-padding: 12px; + --uui-horizontal-gap: 8px; + } + } + + .uui-link_button { + &.uui-size-16 { + --uui-horizontal-gap: 4px; + --uui-icon-size: 16px; + --uui-line-height: 16px; + --uui-font-size: 14px; + } + + &.uui-size-20 { + --uui-horizontal-gap: 4px; + --uui-icon-size: 20px; + --uui-line-height: 20px; + --uui-font-size: 16px; + } + } + + .uui-checkbox-container, .uui-radio-input-container { + --uui-checkbox-border-radius: 4px; + + .uui-input-label { + align-self: center; + } + + &.uui-size-20 { + --uui-size: 14px; + + .uui-checkbox, .uui-radioinput { + margin: 3px; + } + } + + &.uui-size-24 { + --uui-size: 18px; + --uui-line-height: 22px; + --uui-font-size: 16px; + + .uui-checkbox, .uui-radioinput { + margin: 3px; + } + } + + &.uui-size-28 { + --uui-size: 22px; + + .uui-checkbox, .uui-radioinput { + margin: 3px; + } + } + } + + .uui-tab-button { + &.uui-size-48 { + --uui-size: 50px; + --uui-horizontal-padding: 16px; + --uui-horizontal-gap: 4px; + --uui-icon-size: 20px; + --uui-font-size: 14px; + } + } + + .uui-count_indicator { + &.uui-size-20 { + --uui-horizontal-padding: 6px; + --uui-line-height: 18px; + --uui-font-size: 12px; + } + + &.uui-size-24 { + --uui-line-height: 22px; + --uui-font-size: 14px; + } + } + + .uui-datepicker-body-wrapper { + --uui-dtp_body-min-height: 310px; + } + + .uui-badge { + &.uui-size-24 { + --uui-horizontal-gap: 4px; + } + } +} diff --git a/epam-assets/theme/variables/6px_grid.scss b/epam-assets/theme/variables/6px_grid.scss index 1ea747346a..e5fd55c8b7 100644 --- a/epam-assets/theme/variables/6px_grid.scss +++ b/epam-assets/theme/variables/6px_grid.scss @@ -15,7 +15,7 @@ --uui-horizontal-gap: 6px; --uui-vertical-gap: 3px; --uui-horizontal-padding: 6px; - --uui-vertical-padding: 3px; + --uui-vertical-padding: 3px; // remove - discuss --uui-icon-size: 12px; --uui-line-height: 12px; --uui-font-size: 12px; @@ -149,7 +149,7 @@ --uui-font-size: 12px; .uui-caption { - --uui-tag-horizontal-gap: 0; + --uui-tag-caption-horizontal-padding: 0; } } @@ -324,4 +324,11 @@ --uui-alert-caption-gap-h: 9px; } } + + .uui-filters-panel-item-toggler { + &.uui-size-24 { + --uui-horizontal-padding: 3px; + --uui-horizontal-gap: 3px; + } + } } diff --git a/epam-assets/theme/variables/fresh_4px.scss b/epam-assets/theme/variables/fresh_4px.scss new file mode 100644 index 0000000000..9c705ed2d1 --- /dev/null +++ b/epam-assets/theme/variables/fresh_4px.scss @@ -0,0 +1,578 @@ +@use 'tokens/theme_fresh_light_4px' as tokens; +@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap'); +/* Name convention */ +/* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */ + +@mixin fresh-variables { + --uui-font: 'Lexend', serif; + --uui-font-mono: 'Roboto Mono', monospace; + + /* shadows */ + --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.05), 0 3px 6px rgba(29, 30, 38, 0.1); + --uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.05), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05); + --uui-shadow-level-3: 0 0 10px rgba(29, 30, 38, 0.05), 0 6px 36px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.05); + + @include tokens.theme-tokens; + + + & { + --uui-border-radius: 3px; + } + + /* begin color classes */ + + .uui-color-grass { + --uui-color-5: var(--uui-accent-5); + --uui-color-10: var(--uui-accent-10); + --uui-color-20: var(--uui-accent-20); + --uui-color-50: var(--uui-accent-50); + --uui-color-60: var(--uui-accent-60); + --uui-color-70: var(--uui-accent-70); + --uui-color-contrast: var(--uui-accent-contrast); + } + + .uui-color-sky { + --uui-color-5: var(--uui-primary-5); + --uui-color-10: var(--uui-primary-10); + --uui-color-20: var(--uui-primary-20); + --uui-color-50: var(--uui-primary-50); + --uui-color-60: var(--uui-primary-60); + --uui-color-70: var(--uui-primary-70); + --uui-color-contrast: var(--uui-primary-contrast); + } + + .uui-color-fire { + --uui-color-5: var(--uui-critical-5); + --uui-color-10: var(--uui-critical-10); + --uui-color-20: var(--uui-critical-20); + --uui-color-50: var(--uui-critical-50); + --uui-color-60: var(--uui-critical-60); + --uui-color-70: var(--uui-critical-70); + --uui-color-contrast: var(--uui-critical-contrast); + } + + .uui-color-night100 { + --uui-color-5: var(--white); + --uui-color-10: var(--white); + --uui-color-20: var(--night50); + --uui-color-50: var(--night100); + --uui-color-60: var(--uui-color-night100-800); + --uui-color-70: var(--uui-color-night100-900); + --uui-color-contrast: var(--uui-neutral-70); + } + + .uui-color-night300 { + --uui-color-5: var(--night50); + --uui-color-10: var(--night100); + --uui-color-20: var(--night200); + --uui-color-50: var(--night300); + --uui-color-60: var(--night400); + --uui-color-70: var(--night500); + --uui-color-contrast: var(--uui-neutral-80); + } + + .uui-color-night500 { + --uui-color-5: var(--night200); + --uui-color-10: var(--night300); + --uui-color-20: var(--night400); + --uui-color-50: var(--night500); + --uui-color-60: var(--night600); + --uui-color-70: var(--night700); + --uui-color-contrast: var(--white); + } + + .uui-color-night600, + .uui-color-gray { + --uui-color-5: var(--uui-secondary-5); + --uui-color-10: var(--uui-secondary-10); + --uui-color-20: var(--uui-secondary-20); + --uui-color-50: var(--uui-secondary-50); + --uui-color-60: var(--uui-secondary-60); + --uui-color-70: var(--uui-secondary-70); + --uui-color-contrast: var(--uui-secondary-contrast); + } + + .uui-color-night700 { + --uui-color-5: var(--night400); + --uui-color-10: var(--night500); + --uui-color-20: var(--night600); + --uui-color-50: var(--night700); + --uui-color-60: var(--uui-color-night700-800); + --uui-color-70: var(--uui-color-night700-900); + --uui-color-contrast: var(--white); + } + + .uui-color-sun { + --uui-color-5: var(--uui-warning-5); + --uui-color-10: var(--uui-warning-10); + --uui-color-20: var(--uui-warning-20); + --uui-color-50: var(--uui-warning-50); + --uui-color-60: var(--uui-warning-60); + --uui-color-70: var(--uui-warning-70); + --uui-color-contrast: var(--uui-warning-contrast); + } + + .uui-color-yellow { + --uui-color-5: var(--yellow-5); + --uui-color-10: var(--yellow-10); + --uui-color-20: var(--yellow-20); + --uui-color-50: var(--yellow-50); + --uui-color-60: var(--yellow-60); + --uui-color-70: var(--yellow-70); + --uui-color-contrast: var(--uui-neutral-80); + } + + .uui-color-orange { + --uui-color-5: var(--orange-5); + --uui-color-10: var(--orange-10); + --uui-color-20: var(--orange-20); + --uui-color-50: var(--orange-50); + --uui-color-60: var(--orange-60); + --uui-color-70: var(--orange-70); + --uui-color-contrast: var(--uui-neutral-80); + } + + .uui-color-fuchsia { + --uui-color-5: var(--fuchsia-5); + --uui-color-10: var(--fuchsia-10); + --uui-color-20: var(--fuchsia-20); + --uui-color-50: var(--fuchsia-50); + --uui-color-60: var(--fuchsia-60); + --uui-color-70: var(--fuchsia-70); + --uui-color-contrast: var(--white); + } + + .uui-color-purple { + --uui-color-5: var(--purple-5); + --uui-color-10: var(--purple-10); + --uui-color-20: var(--purple-20); + --uui-color-50: var(--purple-50); + --uui-color-60: var(--purple-60); + --uui-color-70: var(--purple-70); + --uui-color-contrast: var(--white); + } + + .uui-color-violet { + --uui-color-5: var(--violet-5); + --uui-color-10: var(--violet-10); + --uui-color-20: var(--violet-20); + --uui-color-50: var(--violet-50); + --uui-color-60: var(--violet-60); + --uui-color-70: var(--violet-70); + --uui-color-contrast: var(--white); + } + + .uui-color-cobalt { + --uui-color-5: var(--cobalt-5); + --uui-color-10: var(--cobalt-10); + --uui-color-20: var(--cobalt-20); + --uui-color-50: var(--cobalt-50); + --uui-color-60: var(--cobalt-60); + --uui-color-70: var(--cobalt-70); + --uui-color-contrast: var(--white); + } + + .uui-color-cyan { + --uui-color-5: var(--cyan-5); + --uui-color-10: var(--cyan-10); + --uui-color-20: var(--cyan-20); + --uui-color-50: var(--cyan-50); + --uui-color-60: var(--cyan-60); + --uui-color-70: var(--cyan-70); + --uui-color-contrast: var(--uui-neutral-80); + } + + .uui-color-mint { + --uui-color-5: var(--mint-5); + --uui-color-10: var(--mint-10); + --uui-color-20: var(--mint-20); + --uui-color-50: var(--mint-50); + --uui-color-60: var(--mint-60); + --uui-color-70: var(--mint-70); + --uui-color-contrast: var(--uui-neutral-80); + } + + /* Accordion */ + + .uui-accordion-container { + --uui-accordion-border-radius: 6px; + } + + /* FileCard */ + + .uui-file_card { + --uui-file_card-border-radius: 6px; + } + + /* Badge */ + + .uui-badge.uui-color-white { + &.uui-fill-solid { + --uui-badge-border-hover: var(--uui-neutral-30); + } + + &.uui-fill-outline { + --uui-badge-bg: var(--uui-neutral-0); + --uui-badge-bg-hover: var(--uui-neutral-30); + --uui-badge-border: var(--uui-neutral-30); + --uui-badge-border-hover: var(--uui-neutral-30); + --uui-badge-caption: var(--uui-neutral-70); + --uui-badge-caption-hover: var(--uui-neutral-70); + } + } + + .uui-badge.uui-color-neutral, + .uui-badge.uui-color-night300 { + &.uui-fill-solid { + --uui-badge-bg: var(--uui-neutral-30); + --uui-badge-bg-hover: var(--uui-neutral-40); + --uui-badge-border: var(--uui-neutral-30); + --uui-badge-border-hover: var(--uui-neutral-40); + --uui-color-contrast: var(--uui-neutral-80); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-0); + --uui-count_indicator-border: var(--uui-neutral-0); + } + } + + &.uui-fill-outline { + --uui-badge-bg: var(--uui-neutral-20); + --uui-badge-bg-hover: var(--uui-neutral-30); + --uui-badge-border: var(--uui-neutral-40); + --uui-badge-caption: var(--uui-neutral-80); + --uui-badge-caption-hover: var(--uui-neutral-80); + } + } + + .uui-badge.uui-color-night100 { + &.uui-fill-solid { + --uui-badge-bg-hover: var(--uui-neutral-20); + --uui-badge-border-hover: var(--uui-neutral-20); + } + + &.uui-fill-outline { + --uui-badge-bg: var(--uui-neutral-10); + --uui-badge-bg-hover: var(--uui-neutral-20); + --uui-badge-border: var(--uui-neutral-30); + --uui-badge-border-hover: var(--uui-neutral-30); + --uui-badge-caption: var(--uui-neutral-70); + --uui-badge-caption-hover: var(--uui-neutral-70); + + .uui-count_indicator { + --uui-count_indicator-bg: color-mix(in srgb, var(--uui-badge-caption) 8%, transparent); + --uui-count_indicator-border: color-mix(in srgb, var(--uui-badge-caption) 40%, transparent); + } + } + } + + .uui-badge.uui-color-night600 { + &.uui-fill-outline { + --uui-badge-bg: var(--uui-neutral-20); + --uui-badge-border: var(--uui-neutral-60); + --uui-badge-border-hover: var(--uui-neutral-60); + --uui-badge-caption: var(--uui-neutral-80); + --uui-badge-caption-hover: var(--uui-neutral-80); + } + } + + .uui-badge.uui-color-yellow.uui-fill-outline { + --uui-badge-border: var(--yellow-20); + } + + /* Button */ + + .uui-button { + &:is(.uui-color-secondary, .uui-color-neutral, .uui-color-gray, .uui-color-night600):is(.uui-fill-outline, .uui-fill-none, .uui-fill-ghost) { + --uui-btn-caption: var(--uui-neutral-70); + } + } + + /* IconButton */ + + .uui-icon_button.uui-color-secondary { + --uui-icon_btn: var(--uui-neutral-50); + --uui-icon_btn-hover: var(--uui-neutral-60); + --uui-icon_btn-active: var(--uui-neutral-70); + } + + .uui-icon_button.uui-color-white { + --uui-icon_btn-hover: var(--uui-neutral-20); + --uui-icon_btn-active: var(--uui-neutral-30); + } + + /* LinkButton */ + + .uui-link_button.uui-color-contrast { + --uui-link_btn-text: var(--uui-neutral-5); + --uui-link_btn-text-hover: var(--uui-neutral-10); + --uui-link_btn-text-active: var(--uui-neutral-20); + } + + .uui-link_button.uui-color-white { + --uui-link_btn-text: var(--uui-neutral-5); + --uui-link_btn-text-hover: var(--uui-neutral-30); + --uui-link_btn-text-active: var(--uui-neutral-40); + --uui-link_btn-text-disabled: color-mix(in srgb, var(--white) 40%, transparent); + } + + /* Tooltip */ + + .uui-tooltip-container.uui-color-white { + --uui-tooltip-bg: var(--uui-neutral-0); + --uui-tooltip-text: var(--uui-neutral-80); + } + + .uui-tooltip-container.uui-color-red { + --uui-tooltip-bg: var(--uui-error-60); + } + + .uui-tooltip-container.uui-color-gray { + --uui-tooltip-bg: var(--uui-neutral-80); + --uui-tooltip-text: var(--uui-neutral-5); + } + + /* CountIndicator */ + + .uui-count_indicator.uui-color-gray, + .uui-count_indicator.uui-color-neutral { + --uui-count_indicator-bg: var(--uui-neutral-30); + --uui-count_indicator-border: var(--uui-neutral-30); + } + + .uui-count_indicator:is(.uui-color-gray, .uui-color-neutral, .uui-color-white, .uui-color-sun, .uui-color-warning) { + --uui-count_indicator-caption: var(--uui-neutral-70); + } + + /* Status Indicator */ + + .uui-status_indicator.uui-color-white.uui-fill-outline { + .uui-status_indicator-dot { + background-color: color-mix(in srgb, var(--white) 20%, transparent); + border: 1px solid var(--uui-neutral-40); + } + } + + /* FlexRow */ + + .uui-flex-row.uui-color-none { + --uui-flex-row-bg: transparent; + } + + .uui-flex-row.uui-color-white { + --uui-flex-row-bg: var(--white); + } + + .uui-flex-row.uui-color-night50 { + --uui-flex-row-bg: var(--night50); + } + + .uui-flex-row.uui-color-night100 { + --uui-flex-row-bg: var(--night100); + } + + .uui-panel.uui-color-white { + --uui-panel-bg: var(--white); + } + + .uui-panel.uui-color-night50 { + --uui-panel-bg: var(--night50); + } + + /* Text */ + + .uui-text.uui-color-night50 { + --uui-text: var(--night50); + } + + .uui-text.uui-color-night400 { + --uui-text: var(--night400); + } + + .uui-text.uui-color-night800 { + --uui-text: var(--night800); + } + + .uui-text.uui-color-night900 { + --uui-text: var(--night900); + } + + .uui-text.uui-color-sky { + --uui-text: var(--sky-70); + } + + .uui-text.uui-color-grass { + --uui-text: var(--grass-70); + } + + .uui-text.uui-color-sun { + --uui-text: var(--sun-70); + } + + .uui-text.uui-color-fire { + --uui-text: var(--fire-70); + } + + /* Tag */ + + .uui-tag { + &.uui-color-white { + &.uui-fill-solid { + --uui-tag-bg-hover: var(--uui-neutral-10); + --uui-tag-border-hover: var(--uui-neutral-10); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-30); + --uui-count_indicator-border: var(--uui-neutral-30); + } + } + + &.uui-fill-outline { + --uui-tag-bg: var(--uui-neutral-0); + --uui-tag-border: var(--uui-neutral-30); + --uui-tag-bg-hover: var(--uui-neutral-10); + --uui-tag-border-hover: var(--uui-neutral-30); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-30); + --uui-count_indicator-border: var(--uui-neutral-30); + } + } + } + + &.uui-color-night100 { + &.uui-fill-solid { + --uui-tag-bg-hover: var(--uui-neutral-20); + --uui-tag-border-hover: var(--uui-neutral-20); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-30); + --uui-count_indicator-border: var(--uui-neutral-30); + } + } + + &.uui-fill-outline { + --uui-tag-bg: var(--uui-neutral-5); + --uui-tag-bg-hover: var(--uui-neutral-10); + --uui-tag-border: var(--uui-neutral-30); + --uui-tag-border-hover: var(--uui-neutral-30); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-30); + --uui-count_indicator-border: var(--uui-neutral-30); + } + } + } + + &.uui-color-neutral, + &.uui-color-night300 { + &.uui-fill-solid { + --uui-tag-bg: var(--uui-neutral-30); + --uui-tag-bg-hover: var(--uui-neutral-40); + --uui-tag-border: var(--uui-neutral-30); + --uui-tag-border-hover: var(--uui-neutral-40); + --uui-tag-caption: var(--uui-neutral-70); + --uui-tag-fill: var(--uui-neutral-70); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-0); + --uui-count_indicator-border: var(--uui-neutral-0); + --uui-count_indicator-caption: var(--uui-neutral-70); + } + } + + &.uui-fill-outline { + --uui-tag-bg: var(--uui-neutral-20); + --uui-tag-bg-hover: var(--uui-neutral-30); + --uui-tag-border: var(--uui-neutral-40); + --uui-tag-border-hover: var(--uui-neutral-40); + + .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-30); + --uui-count_indicator-border: var(--uui-neutral-30); + } + } + } + + &.uui-color-night700 { + &.uui-fill-solid { + --uui-tag-caption: var(--uui-neutral-0); + --uui-tag-fill: var(--uui-neutral-0); + --uui-tag-bg: var(--uui-neutral-70); + --uui-tag-border: var(--uui-neutral-70); + --uui-tag-bg-hover: var(--uui-neutral-80); + --uui-tag-border-hover: var(--uui-neutral-80); + + .uui-count_indicator { + --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-0) 50%, transparent); + --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-0) 10%, transparent); + } + } + + &.uui-fill-outline { + --uui-tag-bg: var(--uui-neutral-20); + --uui-tag-bg-hover: var(--uui-neutral-30); + --uui-tag-border: var(--uui-neutral-50); + --uui-tag-border-hover: var(--uui-neutral-50); + + } + } + + &.uui-color-warning, + &.uui-color-sun { + &.uui-fill-solid { + --uui-tag-caption: var(--uui-text-primary); + --uui-tag-fill: var(--uui-neutral-90); + + .uui-count_indicator { + --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-90) 5%, transparent); + --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-90) 30%, transparent); + } + } + + &.uui-fill-outline .uui-count_indicator { + --uui-count_indicator-bg: var(--uui-neutral-0); + --uui-count_indicator-border: var(--uui-neutral-40); + } + } + } + + /* fonts */ + + .uui-font-sans { + --uui-text-font: var(--uui-font); + --uui-text-font-weight: 400; + } + + .uui-font-sans-semibold { + --uui-text-font: var(--uui-font); + --uui-text-font-weight: 600; + } + + .uui-font-sans-light { + --uui-text-font: var(--uui-font); + --uui-text-font-weight: 300; + } + + /* Typography */ + + .uui-typography { + h1 { + font-weight: 600; + } + + h2 { + font-weight: 700; + } + + h3 { + font-weight: 600; + } + + .hero-header { + font-size: 72px; + line-height: 72px; + font-weight: 700; + } + } +} diff --git a/epam-assets/theme/variables/tokens/_theme_fresh_light_4px.scss b/epam-assets/theme/variables/tokens/_theme_fresh_light_4px.scss new file mode 100644 index 0000000000..92b571cfac --- /dev/null +++ b/epam-assets/theme/variables/tokens/_theme_fresh_light_4px.scss @@ -0,0 +1,272 @@ +// This file is AUTOGENERATED from Figma. DO NOT EDIT THIS FILE DIRECTLY. +@use './_color_classes.scss' as colorClasses; + +@mixin theme-tokens { + + /***************/ + /*** Palette ***/ + /***************/ + + // "" + --black: #000000; + --white: #FFFFFF; + + // "palette-additional/cobalt" + --cobalt-5: #F8FAFF; + --cobalt-10: #D9E2FC; + --cobalt-20: #AEC0F5; + --cobalt-50: #0F98FF; + --cobalt-60: #006FE5; + --cobalt-70: #0954A5; + + // "palette-additional/cyan" + --cyan-5: #F6FEFE; + --cyan-10: #D1FAFA; + --cyan-20: #AAEEEE; + --cyan-50: #14CCCC; + --cyan-60: #12B5B5; + --cyan-70: #0B6F6F; + + // "palette/fire" + --fire-5: #FFF8F7; + --fire-10: #FFECEE; + --fire-20: #FF869E; + --fire-50: #C61B54; + --fire-60: #900038; + --fire-70: #660025; + + // "palette-additional/fuchsia" + --fuchsia-5: #FFF7FB; + --fuchsia-10: #F9D8E7; + --fuchsia-20: #EDADC8; + --fuchsia-50: #EA4386; + --fuchsia-60: #D61E68; + --fuchsia-70: #AE1955; + + // "palette/grass" + --grass-5: #FFFBFF; + --grass-10: #FFF8F4; + --grass-20: #FFEEE0; + --grass-50: #DA974C; + --grass-60: #A56A23; + --grass-70: #683D00; + + // "palette-additional/mint" + --mint-5: #F2FCF5; + --mint-10: #DDF3E4; + --mint-20: #B4DFC4; + --mint-50: #4FC48C; + --mint-60: #31AA70; + --mint-70: #236E4A; + + // "palette/night" + --night50: #FCFDF6; + --night100: #F9FAF3; + --night200: #F1F1EB; + --night300: #E2E3DD; + --night400: #C6C7C1; + --night500: #ABACA6; + --night600: #767872; + --night700: #454743; + --night800: #3A3C38; + --night900: #242623; + + // "palette-additional/orange" + --orange-5: #FEF8F4; + --orange-10: #FFE8D7; + --orange-20: #FFCCA7; + --orange-50: #FF8B3E; + --orange-60: #F76B0D; + --orange-70: #BD4B00; + + // "palette-additional/purple" + --purple-5: #FDF6FE; + --purple-10: #F2CCFA; + --purple-20: #E79DF5; + --purple-50: #B114D1; + --purple-60: #860F9E; + --purple-70: #5E0B6F; + + // "palette/sky" + --sky-5: #F7FFEF; + --sky-10: #ECFFE2; + --sky-20: #CAFFBB; + --sky-50: #62B757; + --sky-60: #33882E; + --sky-70: #005307; + + // "palette/sun" + --sun-5: #FFF8F1; + --sun-10: #FFEFCF; + --sun-20: #FFDF92; + --sun-50: #E4B302; + --sun-60: #937300; + --sun-70: #594400; + + // "palette-additional/violet" + --violet-5: #F8F6FE; + --violet-10: #DBCCFA; + --violet-20: #BB9DF5; + --violet-50: #773CEC; + --violet-60: #5514D6; + --violet-70: #40109E; + + // "palette-additional/yellow" + --yellow-5: #FFFFF5; + --yellow-10: #FFFFE5; + --yellow-20: #FFFCA4; + --yellow-50: #FDD63B; + --yellow-60: #EDBE02; + --yellow-70: #BC7E02; + + /*********************/ + /*** Core Semantic ***/ + /*********************/ + + // "core/semantic/accent-" + --uui-accent-5: var(--grass-5); + --uui-accent-10: var(--grass-10); + --uui-accent-20: var(--grass-20); + --uui-accent-50: var(--grass-50); + --uui-accent-60: var(--grass-60); + --uui-accent-70: var(--grass-70); + --uui-accent-contrast: var(--white); + + // "core/semantic/critical-" + --uui-critical-5: var(--fire-5); + --uui-critical-10: var(--fire-10); + --uui-critical-20: var(--fire-20); + --uui-critical-50: var(--fire-50); + --uui-critical-60: var(--fire-60); + --uui-critical-70: var(--fire-70); + --uui-critical-contrast: var(--white); + + // "core/semantic/error-" + --uui-error-5: var(--fire-5); + --uui-error-10: var(--fire-10); + --uui-error-20: var(--fire-20); + --uui-error-50: var(--fire-50); + --uui-error-60: var(--fire-60); + --uui-error-70: var(--fire-70); + --uui-error-contrast: var(--white); + + // "core/semantic/info-" + --uui-info-5: var(--sky-5); + --uui-info-10: var(--sky-10); + --uui-info-20: var(--sky-20); + --uui-info-50: var(--sky-50); + --uui-info-60: var(--sky-60); + --uui-info-70: var(--sky-70); + --uui-info-contrast: var(--white); + + // "core/semantic/primary-" + --uui-primary-5: var(--sky-5); + --uui-primary-10: var(--sky-10); + --uui-primary-20: var(--sky-20); + --uui-primary-50: var(--sky-50); + --uui-primary-60: var(--sky-60); + --uui-primary-70: var(--sky-70); + --uui-primary-contrast: var(--white); + + // "core/semantic/secondary-" + --uui-secondary-5: var(--night100); + --uui-secondary-10: var(--night200); + --uui-secondary-20: var(--night300); + --uui-secondary-50: var(--night600); + --uui-secondary-60: var(--night700); + --uui-secondary-70: var(--night800); + --uui-secondary-contrast: var(--white); + + // "core/semantic/success-" + --uui-success-5: var(--grass-5); + --uui-success-10: var(--grass-10); + --uui-success-20: var(--grass-20); + --uui-success-50: var(--grass-50); + --uui-success-60: var(--grass-60); + --uui-success-70: var(--grass-70); + --uui-success-contrast: var(--white); + + // "core/semantic/warning-" + --uui-warning-5: var(--sun-5); + --uui-warning-10: var(--sun-10); + --uui-warning-20: var(--sun-20); + --uui-warning-50: var(--sun-50); + --uui-warning-60: var(--sun-60); + --uui-warning-70: var(--sun-70); + --uui-warning-contrast: var(--night800); + + /********************/ + /*** Core Neutral ***/ + /********************/ + + --uui-neutral-0: var(--white); + --uui-neutral-5: var(--night50); + --uui-neutral-10: var(--night100); + --uui-neutral-20: var(--night200); + --uui-neutral-30: var(--night300); + --uui-neutral-40: var(--night400); + --uui-neutral-50: var(--night500); + --uui-neutral-60: var(--night600); + --uui-neutral-70: var(--night700); + --uui-neutral-80: var(--night800); + --uui-neutral-90: var(--night900); + --uui-neutral-100: var(--black); + + /************/ + /*** Core ***/ + /************/ + + // "core/surfaces" + --uui-app-bg: var(--uui-neutral-10); + --uui-divider: var(--uui-neutral-40); + --uui-divider-light: var(--uui-neutral-30); + --uui-overlay: #1D1E26CC; + --uui-surface-higher: var(--uui-neutral-10); + --uui-surface-highest: var(--uui-neutral-20); + --uui-surface-main: var(--uui-neutral-0); + --uui-surface-sunken: var(--uui-neutral-20); + + // "core/controls" + --uui-control-bg: var(--uui-surface-main); + --uui-control-bg-disabled: var(--uui-neutral-5); + --uui-control-bg-hover: var(--uui-neutral-60); + --uui-control-border: var(--uui-neutral-40); + --uui-control-border-disabled: var(--uui-neutral-30); + --uui-control-border-focus: var(--uui-primary-50); + --uui-control-border-hover: var(--uui-neutral-60); + --uui-control-icon: var(--uui-neutral-50); + --uui-control-icon-disabled: var(--uui-neutral-50); + --uui-control-placeholder: var(--uui-neutral-50); + --uui-control-placeholder-disabled: var(--uui-text-disabled); + --uui-control-text: var(--uui-neutral-80); + --uui-control-text-disabled: var(--uui-text-tertiary); + + // "core/icons" + --uui-icon: var(--uui-neutral-60); + --uui-icon-active: var(--uui-neutral-80); + --uui-icon-disabled: var(--uui-neutral-50); + --uui-icon-hover: var(--uui-neutral-70); + + // "core/links" + --uui-link: var(--uui-primary-50); + --uui-link-hover: var(--uui-primary-60); + --uui-link-visited: var(--purple-60); + --uui-link-visited-hover: var(--purple-70); + + // "core/other" + --uui-outline-focus: #009ECC7F; + --uui-skeleton: var(--uui-neutral-40); + + // "core/text" + --uui-text-bg-highlight: var(--uui-warning-10); + --uui-text-critical: var(--uui-critical-70); + --uui-text-disabled: var(--uui-neutral-50); + --uui-text-info: var(--uui-info-70); + --uui-text-primary: var(--uui-neutral-80); + --uui-text-secondary: var(--uui-neutral-70); + --uui-text-success: var(--uui-success-70); + --uui-text-tertiary: var(--uui-neutral-60); + --uui-text-warning: var(--uui-warning-70); + + @include colorClasses.theme-color-classes; +} diff --git a/public/docs/content/coreConcepts.json b/public/docs/content/coreConcepts.json index 103c6a7969..0e4a610c9a 100644 --- a/public/docs/content/coreConcepts.json +++ b/public/docs/content/coreConcepts.json @@ -375,8 +375,8 @@ }, { "text": "?: ", - "color": "#000000", - "uui-richTextEditor-span-mark": true + "uui-richTextEditor-span-mark": true, + "color": "#000000" }, { "text": "CX", @@ -384,22 +384,17 @@ "uui-richTextEditor-span-mark": true }, { - "text": " ", - "color": "#000000", - "uui-richTextEditor-span-mark": true - }, - { - "text": "} ", - "color": "#000000", - "uui-richTextEditor-span-mark": true + "text": " } ", + "uui-richTextEditor-span-mark": true, + "color": "#000000" }, { "text": "— " }, { "text": "\"", - "color": "#000000", - "uui-richTextEditor-span-mark": true + "uui-richTextEditor-span-mark": true, + "color": "#000000" }, { "text": "CX\" means \"Classes\" here. It's a short-cut to the " @@ -1161,4 +1156,4 @@ } ] } -] \ No newline at end of file +] diff --git a/public/docs/content/examples-richTextView-Basic.json b/public/docs/content/examples-richTextView-Basic.json index 43bea25303..cceeed6015 100644 --- a/public/docs/content/examples-richTextView-Basic.json +++ b/public/docs/content/examples-richTextView-Basic.json @@ -1,154 +1,72 @@ -{ - "object": "value", - "document": { - "object": "document", +[ + { + "type": "paragraph", "data": {}, - "nodes": [ + "children": [ { - "object": "block", - "type": "paragraph", - "data": {}, - "nodes": [ - { - "object": "text", - "text": "Below is a b", - "marks": [ - { - "object": "mark", - "type": "uui-richTextEditor-span-mark", - "data": { - "style": { - "font-size": "12pt", - "font-family": null, - "color": "#303240", - "background-color": null, - "font-weight": "400", - "font-style": null, - "font-variant": "normal", - "text-decoration": "none", - "vertical-align": "baseline", - "white-space": "pre-wrap", - "": null - } - } - } - ] - }, - { - "object": "text", - "text": "asic example of using text with", - "marks": [ - { - "object": "mark", - "type": "uui-richTextEditor-span-mark", - "data": { - "style": { - "font-size": "12pt", - "font-family": null, - "color": "#303240", - "background-color": null, - "font-weight": "400", - "font-style": null, - "font-variant": "normal", - "text-decoration": "none", - "vertical-align": "baseline", - "white-space": "pre-wrap", - "": null - } - } - } - ] - }, - { - "object": "text", - "text": " ", - "marks": [] - }, - { - "object": "text", - "text": "HTML", - "marks": [ - { - "object": "mark", - "type": "uui-richTextEditor-span-mark", - "data": { - "style": { - "font-size": "12pt", - "font-family": null, - "color": "#303240", - "background-color": null, - "font-weight": "400", - "font-style": null, - "font-variant": "normal", - "text-decoration": "none", - "vertical-align": "baseline", - "white-space": "pre-wrap", - "": null - } - } - } - ] - }, - { - "object": "text", - "text": " ", - "marks": [] - }, - { - "object": "text", - "text": "markup.", - "marks": [ - { - "object": "mark", - "type": "uui-richTextEditor-span-mark", - "data": { - "style": { - "font-size": "12pt", - "font-family": null, - "color": "#303240", - "background-color": null, - "font-weight": "400", - "font-style": null, - "font-variant": "normal", - "text-decoration": "none", - "vertical-align": "baseline", - "white-space": "pre-wrap", - "": null - } - } - } - ] - } - ] + "text": "Below is a basic example of using text with", + "font-size": "12pt", + "font-family": null, + "background-color": null, + "font-weight": "400", + "font-style": null, + "font-variant": "normal", + "text-decoration": "none", + "vertical-align": "baseline", + "white-space": "pre-wrap", + "": null, + "uui-richTextEditor-span-mark": true }, { - "object": "block", - "type": "paragraph", - "data": {}, - "nodes": [ - { - "object": "text", - "text": "It has ", - "marks": [] - }, - { - "object": "text", - "text": "12 | 14 | 16", - "marks": [ - { - "object": "mark", - "type": "uui-richTextEditor-code", - "data": {} - } - ] - }, - { - "object": "text", - "text": " size values to configure the paragraph text size and scale or to reduce other elements according to it.", - "marks": [] - } - ] + "text": " " + }, + { + "text": "HTML", + "font-size": "12pt", + "font-family": null, + "background-color": null, + "font-weight": "400", + "font-style": null, + "font-variant": "normal", + "text-decoration": "none", + "vertical-align": "baseline", + "white-space": "pre-wrap", + "": null, + "uui-richTextEditor-span-mark": true + }, + { + "text": " " + }, + { + "text": "markup.", + "font-size": "12pt", + "font-family": null, + "background-color": null, + "font-weight": "400", + "font-style": null, + "font-variant": "normal", + "text-decoration": "none", + "vertical-align": "baseline", + "white-space": "pre-wrap", + "": null, + "uui-richTextEditor-span-mark": true + } + ] + }, + { + "type": "paragraph", + "data": {}, + "children": [ + { + "text": "It has " + }, + { + "text": "12 | 14 | 16", + "uui-richTextEditor-code": true + }, + { + "text": " size values to configure the paragraph text size and scale or to reduce other elements according to it." } ] } -} \ No newline at end of file +] \ No newline at end of file diff --git a/public/docs/content/examples-scrollSpy-BasicScrollSpy.json b/public/docs/content/examples-scrollSpy-BasicScrollSpy.json index c54645d22e..cd045258f6 100644 --- a/public/docs/content/examples-scrollSpy-BasicScrollSpy.json +++ b/public/docs/content/examples-scrollSpy-BasicScrollSpy.json @@ -1,374 +1,201 @@ -{ - "object": "value", - "document": { - "object": "document", +[ + { + "type": "paragraph", "data": {}, - "nodes": [ + "children": [ { - "object": "block", - "type": "paragraph", + "text": "The most common Scroll Spy usage is a sidebar navigation. " + }, + { + "text": "For a ScrollSpy to recognize blocks correctly,", + "font-size": "12pt", + "font-family": null, + "background-color": null, + "font-weight": "400", + "font-style": null, + "font-variant": "normal", + "text-decoration": "none", + "vertical-align": "baseline", + "white-space": "pre-wrap", + "": null, + "uui-richTextEditor-span-mark": true + }, + { + "text": " " + }, + { + "text": "you may need to take", + "font-size": "12pt", + "font-family": null, + "background-color": null, + "font-weight": "400", + "font-style": null, + "font-variant": "normal", + "text-decoration": "none", + "vertical-align": "baseline", + "white-space": "pre-wrap", + "": null, + "uui-richTextEditor-span-mark": true + }, + { + "text": " " + }, + { + "text": "four", + "font-size": "12pt", + "font-family": null, + "background-color": null, + "font-weight": "400", + "font-style": null, + "font-variant": "normal", + "text-decoration": "none", + "vertical-align": "baseline", + "white-space": "pre-wrap", + "": null, + "uui-richTextEditor-span-mark": true + }, + { + "text": " " + }, + { + "text": "simple steps:", + "font-size": "12pt", + "font-family": null, + "background-color": null, + "font-weight": "400", + "font-style": null, + "font-variant": "normal", + "text-decoration": "none", + "vertical-align": "baseline", + "white-space": "pre-wrap", + "": null, + "uui-richTextEditor-span-mark": true + } + ] + }, + { + "type": "ordered-list", + "data": {}, + "children": [ + { + "type": "list-item", "data": {}, - "nodes": [ - { - "object": "text", - "text": "The most common Scroll Spy usage is a sidebar navigation. ", - "marks": [] - }, - { - "object": "text", - "text": "For a ScrollSpy to recognize blocks correctly", - "marks": [ - { - "object": "mark", - "type": "uui-richTextEditor-span-mark", - "data": { - "style": { - "font-size": "12pt", - "font-family": null, - "color": "#303240", - "background-color": null, - "font-weight": "400", - "font-style": null, - "font-variant": "normal", - "text-decoration": "none", - "vertical-align": "baseline", - "white-space": "pre-wrap", - "": null - } - } - } - ] - }, + "children": [ { - "object": "text", - "text": ",", - "marks": [ + "type": "list-item-child", + "data": {}, + "children": [ { - "object": "mark", - "type": "uui-richTextEditor-span-mark", - "data": { - "style": { - "font-size": "12pt", - "font-family": null, - "color": "#303240", - "background-color": null, - "font-weight": "400", - "font-style": null, - "font-variant": "normal", - "text-decoration": "none", - "vertical-align": "baseline", - "white-space": "pre-wrap", - "": null - } - } - } - ] - }, - { - "object": "text", - "text": " ", - "marks": [] - }, - { - "object": "text", - "text": "you may need to take", - "marks": [ + "text": "Provide a ref on a wrapper node via " + }, { - "object": "mark", - "type": "uui-richTextEditor-span-mark", - "data": { - "style": { - "font-size": "12pt", - "font-family": null, - "color": "#303240", - "background-color": null, - "font-weight": "400", - "font-style": null, - "font-variant": "normal", - "text-decoration": "none", - "vertical-align": "baseline", - "white-space": "pre-wrap", - "": null - } - } - } - ] - }, - { - "object": "text", - "text": " ", - "marks": [] - }, - { - "object": "text", - "text": "four", - "marks": [ + "text": "setRef", + "uui-richTextEditor-code": true + }, { - "object": "mark", - "type": "uui-richTextEditor-span-mark", - "data": { - "style": { - "font-size": "12pt", - "font-family": null, - "color": "#303240", - "background-color": null, - "font-weight": "400", - "font-style": null, - "font-variant": "normal", - "text-decoration": "none", - "vertical-align": "baseline", - "white-space": "pre-wrap", - "": null - } - } - } - ] - }, - { - "object": "text", - "text": " ", - "marks": [] - }, - { - "object": "text", - "text": "simple steps:", - "marks": [ - { - "object": "mark", - "type": "uui-richTextEditor-span-mark", - "data": { - "style": { - "font-size": "12pt", - "font-family": null, - "color": "#303240", - "background-color": null, - "font-weight": "400", - "font-style": null, - "font-variant": "normal", - "text-decoration": "none", - "vertical-align": "baseline", - "white-space": "pre-wrap", - "": null - } - } + "text": " callback." } ] } ] }, { - "object": "block", - "type": "ordered-list", + "type": "list-item", "data": {}, - "nodes": [ + "children": [ { - "object": "block", - "type": "list-item", + "type": "list-item-child", "data": {}, - "nodes": [ + "children": [ { - "object": "block", - "type": "list-item-child", - "data": {}, - "nodes": [ - { - "object": "text", - "text": "Provide a ref on a wrapper node via ", - "marks": [] - }, - { - "object": "text", - "text": "setRef", - "marks": [ - { - "object": "mark", - "type": "uui-richTextEditor-code", - "data": {} - } - ] - }, - { - "object": "text", - "text": " callback.", - "marks": [] - } - ] - } - ] - }, - { - "object": "block", - "type": "list-item", - "data": {}, - "nodes": [ + "text": "Provide an array of ids via " + }, { - "object": "block", - "type": "list-item-child", - "data": {}, - "nodes": [ - { - "object": "text", - "text": "Provide an array of ids via ", - "marks": [] - }, - { - "object": "text", - "text": "elements", - "marks": [ - { - "object": "mark", - "type": "uui-richTextEditor-code", - "data": {} - } - ] - }, - { - "object": "text", - "text": " ", - "marks": [ - { - "object": "mark", - "type": "uui-richTextEditor-italic", - "data": {} - } - ] - }, - { - "object": "text", - "text": "prop.", - "marks": [] - } - ] - } - ] - }, - { - "object": "block", - "type": "list-item", - "data": {}, - "nodes": [ + "text": "elements", + "uui-richTextEditor-code": true + }, { - "object": "block", - "type": "list-item-child", - "data": {}, - "nodes": [ - { - "object": "text", - "text": "Add anchors with appropriate ids for navigation links. ", - "marks": [] - } - ] - } - ] - }, - { - "object": "block", - "type": "list-item", - "data": {}, - "nodes": [ + "text": " ", + "uui-richTextEditor-italic": true + }, { - "object": "block", - "type": "list-item-child", - "data": {}, - "nodes": [ - { - "object": "text", - "text": "Add ", - "marks": [] - }, - { - "object": "text", - "text": "data-spy", - "marks": [ - { - "object": "mark", - "type": "uui-richTextEditor-code", - "data": {} - } - ] - }, - { - "object": "text", - "text": " attribute to the elements which will be treated as anchors. E.g., by pressing on a navigation link on the example below, the page is scrolled to the provided anchor.", - "marks": [] - } - ] + "text": "prop." } ] } ] }, { - "object": "block", - "type": "paragraph", + "type": "list-item", "data": {}, - "nodes": [ - { - "object": "text", - "text": "The output of the component (either a hook or a higher-order component) is a ", - "marks": [] - }, + "children": [ { - "object": "text", - "text": "currentActive", - "marks": [ + "type": "list-item-child", + "data": {}, + "children": [ { - "object": "mark", - "type": "uui-richTextEditor-code", - "data": {} + "text": "Add anchors with appropriate ids for navigation links. " } ] - }, + } + ] + }, + { + "type": "list-item", + "data": {}, + "children": [ { - "object": "text", - "text": " ", - "marks": [ + "type": "list-item-child", + "data": {}, + "children": [ { - "object": "mark", - "type": "uui-richTextEditor-italic", - "data": {} - } - ] - }, - { - "object": "text", - "text": "element id. The ", - "marks": [] - }, - { - "object": "text", - "text": "scrollToElement", - "marks": [ + "text": "Add " + }, { - "object": "mark", - "type": "uui-richTextEditor-code", - "data": {} - } - ] - }, - { - "object": "text", - "text": " function to manually scroll to an element", - "marks": [] - }, - { - "object": "text", - "text": ", ", - "marks": [ + "text": "data-spy", + "uui-richTextEditor-code": true + }, { - "object": "mark", - "type": "uui-richTextEditor-italic", - "data": {} + "text": " attribute to the elements which will be treated as anchors. E.g., by pressing on a navigation link on the example below, the page is scrolled to the provided anchor." } ] - }, - { - "object": "text", - "text": "where you can provide a desired id and get navigated there (or to the root of the wrapper when not provided). ", - "marks": [] } ] } ] + }, + { + "type": "paragraph", + "data": {}, + "children": [ + { + "text": "The output of the component (either a hook or a higher-order component) is a " + }, + { + "text": "currentActive", + "uui-richTextEditor-code": true + }, + { + "text": " ", + "uui-richTextEditor-italic": true + }, + { + "text": "element id. The " + }, + { + "text": "scrollToElement", + "uui-richTextEditor-code": true + }, + { + "text": " function to manually scroll to an element" + }, + { + "text": ", ", + "uui-richTextEditor-italic": true + }, + { + "text": "where you can provide a desired id and get navigated there (or to the root of the wrapper when not provided). " + } + ] } -} \ No newline at end of file +] \ No newline at end of file diff --git a/public/docs/content/multiSwitch-descriptions.json b/public/docs/content/multiSwitch-descriptions.json index a0ab6df19d..92e1472fb3 100644 --- a/public/docs/content/multiSwitch-descriptions.json +++ b/public/docs/content/multiSwitch-descriptions.json @@ -1,276 +1,155 @@ -{ - "object": "value", - "document": { - "object": "document", +[ + { + "type": "paragraph", "data": {}, - "nodes": [ + "children": [ { - "object": "block", - "type": "paragraph", - "data": {}, - "nodes": [ - { - "object": "text", - "text": "MultiSwitch", - "marks": [ - { - "object": "mark", - "type": "uui-richTextEditor-span-mark", - "data": { - "style": { - "font-size": "12pt", - "font-family": null, - "color": "#303240", - "background-color": null, - "font-weight": "400", - "font-style": null, - "font-variant": "normal", - "text-decoration": "none", - "vertical-align": "baseline", - "white-space": "pre-wrap", - "": null - } - } - }, - { - "object": "mark", - "type": "uui-richTextEditor-code", - "data": {} - } - ] - }, - { - "object": "text", - "text": " is", - "marks": [ - { - "object": "mark", - "type": "uui-richTextEditor-span-mark", - "data": { - "style": { - "font-size": "12pt", - "font-family": null, - "color": "#303240", - "background-color": null, - "font-weight": "400", - "font-style": null, - "font-variant": "normal", - "text-decoration": "none", - "vertical-align": "baseline", - "white-space": "pre-wrap", - "": null - } - } - } - ] - }, - { - "object": "text", - "text": " ", - "marks": [] - }, - { - "object": "text", - "text": "a", - "marks": [ - { - "object": "mark", - "type": "uui-richTextEditor-span-mark", - "data": { - "style": { - "font-size": "12pt", - "font-family": null, - "color": "#303240", - "background-color": null, - "font-weight": "400", - "font-style": null, - "font-variant": "normal", - "text-decoration": "none", - "vertical-align": "baseline", - "white-space": "pre-wrap", - "": null - } - } - } - ] - }, - { - "object": "text", - "text": " ", - "marks": [] - }, - { - "object": "text", - "text": "UI element", - "marks": [ - { - "object": "mark", - "type": "uui-richTextEditor-span-mark", - "data": { - "style": { - "font-size": "12pt", - "font-family": null, - "color": "#303240", - "background-color": null, - "font-weight": "400", - "font-style": null, - "font-variant": "normal", - "text-decoration": "none", - "vertical-align": "baseline", - "white-space": "pre-wrap", - "": null - } - } - } - ] - }, - { - "object": "text", - "text": " ", - "marks": [] - }, - { - "object": "text", - "text": "allowing", - "marks": [ - { - "object": "mark", - "type": "uui-richTextEditor-span-mark", - "data": { - "style": { - "font-size": "12pt", - "font-family": null, - "color": "#303240", - "background-color": null, - "font-weight": "400", - "font-style": null, - "font-variant": "normal", - "text-decoration": "none", - "vertical-align": "baseline", - "white-space": "pre-wrap", - "": null - } - } - } - ] - }, - { - "object": "text", - "text": " ", - "marks": [] - }, - { - "object": "text", - "text": "users to choose one value from", - "marks": [ - { - "object": "mark", - "type": "uui-richTextEditor-span-mark", - "data": { - "style": { - "font-size": "12pt", - "font-family": null, - "color": "#303240", - "background-color": null, - "font-weight": "400", - "font-style": null, - "font-variant": "normal", - "text-decoration": "none", - "vertical-align": "baseline", - "white-space": "pre-wrap", - "": null - } - } - } - ] - }, - { - "object": "text", - "text": " ", - "marks": [] - }, - { - "object": "text", - "text": "a", - "marks": [ - { - "object": "mark", - "type": "uui-richTextEditor-span-mark", - "data": { - "style": { - "font-size": "12pt", - "font-family": null, - "color": "#303240", - "background-color": null, - "font-weight": "400", - "font-style": null, - "font-variant": "normal", - "text-decoration": "none", - "vertical-align": "baseline", - "white-space": "pre-wrap", - "": null - } - } - } - ] - }, - { - "object": "text", - "text": " ", - "marks": [] - }, - { - "object": "text", - "text": "predefined list of values", - "marks": [ - { - "object": "mark", - "type": "uui-richTextEditor-span-mark", - "data": { - "style": { - "font-size": "12pt", - "font-family": null, - "color": "#303240", - "background-color": null, - "font-weight": "400", - "font-style": null, - "font-variant": "normal", - "text-decoration": "none", - "vertical-align": "baseline", - "white-space": "pre-wrap", - "": null - } - } - } - ] - }, - { - "object": "text", - "text": ".", - "marks": [ - { - "object": "mark", - "type": "uui-richTextEditor-span-mark", - "data": { - "style": { - "font-size": "12pt", - "font-family": null, - "color": "#303240", - "background-color": null, - "font-weight": "400", - "font-style": null, - "font-variant": "normal", - "text-decoration": "none", - "vertical-align": "baseline", - "white-space": "pre-wrap", - "": null - } - } - } - ] - } - ] + "text": "MultiSwitch", + "font-size": "12pt", + "font-family": null, + "color": "#303240", + "background-color": null, + "font-weight": "400", + "font-style": null, + "font-variant": "normal", + "text-decoration": "none", + "vertical-align": "baseline", + "white-space": "pre-wrap", + "": null, + "uui-richTextEditor-span-mark": true, + "uui-richTextEditor-code": true + }, + { + "text": " ", + "font-size": "12pt", + "font-family": null, + "color": "#303240", + "background-color": null, + "font-weight": "400", + "font-style": null, + "font-variant": "normal", + "text-decoration": "none", + "vertical-align": "baseline", + "white-space": "pre-wrap", + "": null, + "uui-richTextEditor-span-mark": true + }, + { + "font-size": "12pt", + "font-family": null, + "background-color": null, + "font-weight": "400", + "font-style": null, + "font-variant": "normal", + "text-decoration": "none", + "vertical-align": "baseline", + "white-space": "pre-wrap", + "": null, + "uui-richTextEditor-span-mark": true, + "text": "is" + }, + { + "text": " " + }, + { + "text": "a", + "font-size": "12pt", + "font-family": null, + "background-color": null, + "font-weight": "400", + "font-style": null, + "font-variant": "normal", + "text-decoration": "none", + "vertical-align": "baseline", + "white-space": "pre-wrap", + "": null, + "uui-richTextEditor-span-mark": true + }, + { + "text": " " + }, + { + "text": "UI element", + "font-size": "12pt", + "font-family": null, + "background-color": null, + "font-weight": "400", + "font-style": null, + "font-variant": "normal", + "text-decoration": "none", + "vertical-align": "baseline", + "white-space": "pre-wrap", + "": null, + "uui-richTextEditor-span-mark": true + }, + { + "text": " " + }, + { + "text": "allowing", + "font-size": "12pt", + "font-family": null, + "background-color": null, + "font-weight": "400", + "font-style": null, + "font-variant": "normal", + "text-decoration": "none", + "vertical-align": "baseline", + "white-space": "pre-wrap", + "": null, + "uui-richTextEditor-span-mark": true + }, + { + "text": " " + }, + { + "text": "users to choose one value from", + "font-size": "12pt", + "font-family": null, + "background-color": null, + "font-weight": "400", + "font-style": null, + "font-variant": "normal", + "text-decoration": "none", + "vertical-align": "baseline", + "white-space": "pre-wrap", + "": null, + "uui-richTextEditor-span-mark": true + }, + { + "text": " " + }, + { + "text": "a", + "font-size": "12pt", + "font-family": null, + "background-color": null, + "font-weight": "400", + "font-style": null, + "font-variant": "normal", + "text-decoration": "none", + "vertical-align": "baseline", + "white-space": "pre-wrap", + "": null, + "uui-richTextEditor-span-mark": true + }, + { + "text": " " + }, + { + "text": "predefined list of values.", + "font-size": "12pt", + "font-family": null, + "background-color": null, + "font-weight": "400", + "font-style": null, + "font-variant": "normal", + "text-decoration": "none", + "vertical-align": "baseline", + "white-space": "pre-wrap", + "": null, + "uui-richTextEditor-span-mark": true } ] } -} \ No newline at end of file +] \ No newline at end of file diff --git a/public/docs/content/scrollSpy-descriptions.json b/public/docs/content/scrollSpy-descriptions.json index 56af4a2e8e..24b2e18efa 100644 --- a/public/docs/content/scrollSpy-descriptions.json +++ b/public/docs/content/scrollSpy-descriptions.json @@ -1,190 +1,105 @@ -{ - "object": "value", - "document": { - "object": "document", +[ + { + "type": "paragraph", "data": {}, - "nodes": [ + "children": [ { - "object": "block", - "type": "paragraph", + "text": "Scroll Spy is a UI element helping to define and control anchors on your page. " + }, + { + "text": "Some common cases where", + "font-size": "12pt", + "font-family": null, + "background-color": null, + "font-weight": "400", + "font-style": null, + "font-variant": "normal", + "text-decoration": "none", + "vertical-align": "baseline", + "white-space": "pre-wrap", + "": null, + "uui-richTextEditor-span-mark": true + }, + { + "text": " " + }, + { + "text": "a", + "font-size": "12pt", + "font-family": null, + "background-color": null, + "font-weight": "400", + "font-style": null, + "font-variant": "normal", + "text-decoration": "none", + "vertical-align": "baseline", + "white-space": "pre-wrap", + "": null, + "uui-richTextEditor-span-mark": true + }, + { + "text": " " + }, + { + "text": "scroll spy can be applied:", + "font-size": "12pt", + "font-family": null, + "background-color": null, + "font-weight": "400", + "font-style": null, + "font-variant": "normal", + "text-decoration": "none", + "vertical-align": "baseline", + "white-space": "pre-wrap", + "": null, + "uui-richTextEditor-span-mark": true + } + ] + }, + { + "type": "unordered-list", + "data": {}, + "children": [ + { + "type": "list-item", "data": {}, - "nodes": [ - { - "object": "text", - "text": "Scroll Spy is a UI element helping to define and control anchors on your page. ", - "marks": [] - }, - { - "object": "text", - "text": "Some common cases where", - "marks": [ - { - "object": "mark", - "type": "uui-richTextEditor-span-mark", - "data": { - "style": { - "font-size": "12pt", - "font-family": null, - "color": "#303240", - "background-color": null, - "font-weight": "400", - "font-style": null, - "font-variant": "normal", - "text-decoration": "none", - "vertical-align": "baseline", - "white-space": "pre-wrap", - "": null - } - } - } - ] - }, - { - "object": "text", - "text": " ", - "marks": [] - }, + "children": [ { - "object": "text", - "text": "a", - "marks": [ - { - "object": "mark", - "type": "uui-richTextEditor-span-mark", - "data": { - "style": { - "font-size": "12pt", - "font-family": null, - "color": "#303240", - "background-color": null, - "font-weight": "400", - "font-style": null, - "font-variant": "normal", - "text-decoration": "none", - "vertical-align": "baseline", - "white-space": "pre-wrap", - "": null - } - } - } - ] - }, - { - "object": "text", - "text": " ", - "marks": [] - }, - { - "object": "text", - "text": "scroll spy can be applied", - "marks": [ - { - "object": "mark", - "type": "uui-richTextEditor-span-mark", - "data": { - "style": { - "font-size": "12pt", - "font-family": null, - "color": "#303240", - "background-color": null, - "font-weight": "400", - "font-style": null, - "font-variant": "normal", - "text-decoration": "none", - "vertical-align": "baseline", - "white-space": "pre-wrap", - "": null - } - } - } - ] - }, - { - "object": "text", - "text": ":", - "marks": [ + "type": "list-item-child", + "data": {}, + "children": [ { - "object": "mark", - "type": "uui-richTextEditor-span-mark", - "data": { - "style": { - "font-size": "12pt", - "font-family": null, - "color": "#303240", - "background-color": null, - "font-weight": "400", - "font-style": null, - "font-variant": "normal", - "text-decoration": "none", - "vertical-align": "baseline", - "white-space": "pre-wrap", - "": null - } - } + "text": "Navigation menu." } ] } ] }, { - "object": "block", - "type": "unordered-list", + "type": "list-item", "data": {}, - "nodes": [ + "children": [ { - "object": "block", - "type": "list-item", + "type": "list-item-child", "data": {}, - "nodes": [ + "children": [ { - "object": "block", - "type": "list-item-child", - "data": {}, - "nodes": [ - { - "object": "text", - "text": "Navigation menu.", - "marks": [] - } - ] + "text": "Pages that preserve the last viewed place and recover it when the user returns to the page." } ] - }, - { - "object": "block", - "type": "list-item", - "data": {}, - "nodes": [ - { - "object": "block", - "type": "list-item-child", - "data": {}, - "nodes": [ - { - "object": "text", - "text": "Pages that preserve the last viewed place and recover it when the user returns to the page.", - "marks": [] - } - ] - } - ] - }, + } + ] + }, + { + "type": "list-item", + "data": {}, + "children": [ { - "object": "block", - "type": "list-item", + "type": "list-item-child", "data": {}, - "nodes": [ + "children": [ { - "object": "block", - "type": "list-item-child", - "data": {}, - "nodes": [ - { - "object": "text", - "text": "Sidebar navigation, showing currently viewed section.", - "marks": [] - } - ] + "text": "Sidebar navigation, showing currently viewed section." } ] } @@ -192,4 +107,4 @@ } ] } -} \ No newline at end of file +] \ No newline at end of file diff --git a/public/docs/content/unitTestingGuide-basics.json b/public/docs/content/unitTestingGuide-basics.json index e34d1eb512..39c26c7d0e 100644 --- a/public/docs/content/unitTestingGuide-basics.json +++ b/public/docs/content/unitTestingGuide-basics.json @@ -361,7 +361,6 @@ "children": [ { "text": "(*)", - "color": "rgb(48, 50, 64)", "font-family": null, "font-size": "16px", "font-style": null, @@ -389,7 +388,6 @@ }, { "text": " with React components, the distinction between a “unit” and “integration” test can be blurry. For simplicity, we consider that any test of React component is integration one.", - "color": "rgb(48, 50, 64)", "font-family": null, "font-size": "16px", "font-style": null, @@ -435,7 +433,6 @@ "children": [ { "text": "(**)", - "color": "rgb(48, 50, 64)", "font-family": null, "font-size": "16px", "font-style": null, @@ -463,7 +460,6 @@ }, { "text": " such tests require real browser, real API endpoints, layout, navigation, etc.", - "color": "rgb(48, 50, 64)", "font-family": null, "font-size": "16px", "font-style": null, diff --git a/public/docs/content/unitTestingGuide-tools.json b/public/docs/content/unitTestingGuide-tools.json index 3d899dbd2b..3d082da7d8 100644 --- a/public/docs/content/unitTestingGuide-tools.json +++ b/public/docs/content/unitTestingGuide-tools.json @@ -275,8 +275,7 @@ "children": [ { "text": "Example:", - "uui-richTextEditor-italic": true, - "color": "rgb(0, 0, 0)" + "uui-richTextEditor-italic": true }, { "text": " " @@ -290,13 +289,13 @@ { "text": "describe", "uui-richTextEditor-italic": true, - "color": "rgb(0, 0, 0)", - "uui-richTextEditor-superscript": true + "uui-richTextEditor-superscript": true, + "color": "rgb(0, 0, 0)" }, { "text": "(", - "color": "rgb(0, 0, 0)", - "uui-richTextEditor-superscript": true + "uui-richTextEditor-superscript": true, + "color": "rgb(0, 0, 0)" }, { "text": "'example suite'", @@ -306,19 +305,19 @@ }, { "text": ", () => {\n ", - "color": "rgb(0, 0, 0)", - "uui-richTextEditor-superscript": true + "uui-richTextEditor-superscript": true, + "color": "rgb(0, 0, 0)" }, { "text": "it", "uui-richTextEditor-italic": true, - "color": "rgb(0, 0, 0)", - "uui-richTextEditor-superscript": true + "uui-richTextEditor-superscript": true, + "color": "rgb(0, 0, 0)" }, { "text": "(", - "color": "rgb(0, 0, 0)", - "uui-richTextEditor-superscript": true + "uui-richTextEditor-superscript": true, + "color": "rgb(0, 0, 0)" }, { "text": "'example test'", @@ -328,8 +327,8 @@ }, { "text": ", ", - "color": "rgb(0, 0, 0)", - "uui-richTextEditor-superscript": true + "uui-richTextEditor-superscript": true, + "color": "rgb(0, 0, 0)" }, { "text": "async ", @@ -339,8 +338,8 @@ }, { "text": "() => {\n ", - "color": "rgb(0, 0, 0)", - "uui-richTextEditor-superscript": true + "uui-richTextEditor-superscript": true, + "color": "rgb(0, 0, 0)" }, { "text": "await ", @@ -351,13 +350,13 @@ { "text": "renderWithContextAsync", "uui-richTextEditor-italic": true, - "color": "rgb(0, 0, 0)", - "uui-richTextEditor-superscript": true + "uui-richTextEditor-superscript": true, + "color": "rgb(0, 0, 0)" }, { "text": "(<", - "color": "rgb(0, 0, 0)", - "uui-richTextEditor-superscript": true + "uui-richTextEditor-superscript": true, + "color": "rgb(0, 0, 0)" }, { "text": "Component ", @@ -367,8 +366,8 @@ }, { "text": "/>);\n ", - "color": "rgb(0, 0, 0)", - "uui-richTextEditor-superscript": true + "uui-richTextEditor-superscript": true, + "color": "rgb(0, 0, 0)" }, { "text": "// ...\n", @@ -447,8 +446,7 @@ "children": [ { "text": "Example:", - "uui-richTextEditor-italic": true, - "color": "rgb(0, 0, 0)" + "uui-richTextEditor-italic": true }, { "text": " " @@ -624,8 +622,7 @@ "children": [ { "text": "Example:", - "uui-richTextEditor-italic": true, - "color": "rgb(0, 0, 0)" + "uui-richTextEditor-italic": true } ] }, @@ -1066,7 +1063,6 @@ "children": [ { "text": "Example:", - "color": "rgb(0, 0, 0)", "uui-richTextEditor-italic": true }, { @@ -1315,15 +1311,10 @@ "children": [ { "text": "Example:", - "uui-richTextEditor-italic": true, - "color": "rgb(0, 0, 0)" - }, - { - "text": " ", - "color": "rgb(48, 50, 64)" + "uui-richTextEditor-italic": true }, { - "text": " " + "text": " " } ] }, @@ -1482,8 +1473,7 @@ "children": [ { "text": "Example:", - "uui-richTextEditor-italic": true, - "color": "rgb(0, 0, 0)" + "uui-richTextEditor-italic": true } ] }, @@ -1721,8 +1711,7 @@ "children": [ { "text": "Example:", - "uui-richTextEditor-italic": true, - "color": "rgb(0, 0, 0)" + "uui-richTextEditor-italic": true }, { "text": " " diff --git a/public/docs/docsGenOutput/docsGenOutput.d.ts b/public/docs/docsGenOutput/docsGenOutput.d.ts index 9788a6581e..2e8c3a4784 100644 --- a/public/docs/docsGenOutput/docsGenOutput.d.ts +++ b/public/docs/docsGenOutput/docsGenOutput.d.ts @@ -26,6 +26,7 @@ type Autogenerated_TDocsGenExportedTypeRef = '@epam/uui-core:AcceptDropParams' | '@epam/uui-core:CommonDatePickerProps' | '@epam/uui-core:ContextProviderProps' | '@epam/uui-core:CX' | +'@epam/uui-core:DataColumnGroupProps' | '@epam/uui-core:DataColumnProps' | '@epam/uui-core:DataPickerCellProps' | '@epam/uui-core:DataQuery' | @@ -42,6 +43,7 @@ type Autogenerated_TDocsGenExportedTypeRef = '@epam/uui-core:AcceptDropParams' | '@epam/uui-core:DataTableColumnsConfigOptions' | '@epam/uui-core:DataTableConfigModalParams' | '@epam/uui-core:DataTableHeaderCellProps' | +'@epam/uui-core:DataTableHeaderGroupCellProps' | '@epam/uui-core:DataTableHeaderRowProps' | '@epam/uui-core:DataTableRowProps' | '@epam/uui-core:DataTableSelectedCellData' | diff --git a/public/docs/docsGenOutput/docsGenOutput.json b/public/docs/docsGenOutput/docsGenOutput.json index 38a3e84385..3a51170f6d 100644 --- a/public/docs/docsGenOutput/docsGenOutput.json +++ b/public/docs/docsGenOutput/docsGenOutput.json @@ -1,5 +1,5 @@ { - "version": "5.11.0-rc.0", + "version": "5.11.1-rc.0", "docsGenTypes": { "@epam/uui-core:AcceptDropParams": { "summary": { @@ -4867,6 +4867,210 @@ } } }, + "@epam/uui-core:DataColumnGroupProps": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "DataColumnGroupProps", + "nameFull": "DataColumnGroupProps" + }, + "src": "uui-core/src/types/tables.ts", + "comment": { + "raw": [ + "Columns group configuration." + ] + }, + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "DataColumnGroupProps", + "print": [ + "/**", + " * Columns group configuration.", + " */", + "interface DataColumnGroupProps extends IHasCX, IClickable {", + " /**", + " * Unique key to identify the columns group. Used to reference columns group.", + " */", + " key: string;", + " /** Columns group caption. Can be a plain text, or any React Component */", + " caption?: React.ReactNode;", + " /** Aligns columns group header content horizontally */", + " textAlign?: 'left' | 'center' | 'right';", + " /** Info tooltip displayed in the table header */", + " info?: React.ReactNode;", + " /** Overrides rendering of the whole columns group cell */", + " renderCell?(column: DataColumnGroupProps): any;", + " /** Render callback for columns group header tooltip.", + " * This tooltip will appear on cell hover with 600ms delay.", + " *", + " * If omitted, default implementation with columnGroup.caption + columnGroup.info will be rendered.", + " * Pass `() => null` to disable tooltip rendering.", + " */", + " renderTooltip?(column: DataColumnGroupProps): React.ReactNode;", + " /**", + " * Overrides rendering of the whole columns group header cell.", + " */", + " renderHeaderCell?(cellProps: DataTableHeaderGroupCellProps): any;", + "}" + ] + }, + "props": [ + { + "uid": "key", + "name": "key", + "comment": { + "raw": [ + "Unique key to identify the columns group. Used to reference columns group." + ] + }, + "typeValue": { + "raw": "string" + }, + "editor": { + "type": "string" + }, + "required": true + }, + { + "uid": "caption", + "name": "caption", + "comment": { + "raw": [ + "Columns group caption. Can be a plain text, or any React Component" + ] + }, + "typeValue": { + "raw": "React.ReactNode" + }, + "typeValueRef": "@types/react:ReactNode", + "required": false + }, + { + "uid": "textAlign", + "name": "textAlign", + "comment": { + "raw": [ + "Aligns columns group header content horizontally" + ] + }, + "typeValue": { + "raw": "'right' | 'left' | 'center'" + }, + "editor": { + "type": "oneOf", + "options": [ + "right", + "left", + "center" + ] + }, + "required": false + }, + { + "uid": "info", + "name": "info", + "comment": { + "raw": [ + "Info tooltip displayed in the table header" + ] + }, + "typeValue": { + "raw": "React.ReactNode" + }, + "typeValueRef": "@types/react:ReactNode", + "required": false + }, + { + "uid": "renderCell", + "name": "renderCell", + "comment": { + "raw": [ + "Overrides rendering of the whole columns group cell" + ] + }, + "typeValue": { + "raw": "(column: DataColumnGroupProps) => any" + }, + "editor": { + "type": "func" + }, + "required": false + }, + { + "uid": "renderTooltip", + "name": "renderTooltip", + "comment": { + "raw": [ + "Render callback for columns group header tooltip.", + " This tooltip will appear on cell hover with 600ms delay.", + "", + " If omitted, default implementation with columnGroup.caption + columnGroup.info will be rendered.", + " Pass `() => null` to disable tooltip rendering." + ] + }, + "typeValue": { + "raw": "(column: DataColumnGroupProps) => React.ReactNode" + }, + "editor": { + "type": "component" + }, + "required": false + }, + { + "uid": "renderHeaderCell", + "name": "renderHeaderCell", + "comment": { + "raw": [ + "Overrides rendering of the whole columns group header cell." + ] + }, + "typeValue": { + "raw": "(cellProps: DataTableHeaderGroupCellProps) => any" + }, + "editor": { + "type": "func" + }, + "required": false + }, + { + "uid": "cx", + "name": "cx", + "comment": { + "raw": [ + "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" + ] + }, + "typeValue": { + "raw": "null | string | number | boolean | ClassDictionary | ClassArray" + }, + "typeValueRef": "@epam/uui-core:ClassValue", + "from": "@epam/uui-core:IHasCX", + "required": false + }, + { + "uid": "onClick", + "name": "onClick", + "comment": { + "raw": [ + "Called when component is clicked" + ] + }, + "typeValue": { + "raw": "(e?: any) => void" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:IClickable", + "required": false + } + ], + "propsFromUnion": false + } + }, "@epam/uui-core:DataColumnProps": { "summary": { "module": "@epam/uui-core", @@ -4888,6 +5092,10 @@ " * Also, used as React key for cells, header cells, and other components inside tables.", " */", " key: string;", + " /**", + " * A unique identifier for a group of columns that establishes a connection between the column and the group of columns.", + " */", + " group?: string;", " /** Column caption. Can be a plain text, or any React Component */", " caption?: React.ReactNode;", " /**", @@ -4982,6 +5190,22 @@ }, "required": true }, + { + "uid": "group", + "name": "group", + "comment": { + "raw": [ + "A unique identifier for a group of columns that establishes a connection between the column and the group of columns." + ] + }, + "typeValue": { + "raw": "string" + }, + "editor": { + "type": "string" + }, + "required": false + }, { "uid": "caption", "name": "caption", @@ -8483,6 +8707,229 @@ "propsFromUnion": false } }, + "@epam/uui-core:DataTableHeaderGroupCellProps": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "DataTableHeaderGroupCellProps", + "nameFull": "DataTableHeaderGroupCellProps" + }, + "src": "uui-core/src/types/tables.ts", + "comment": { + "raw": [ + "DataTable columns group header cell props." + ] + }, + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "DataTableHeaderGroupCellProps", + "print": [ + "/**", + " * DataTable columns group header cell props.", + " */", + "interface DataTableHeaderGroupCellProps extends IHasCX, IEditable {", + " /**", + " * A unique identifier for a group.", + " */", + " key: string;", + " /**", + " * Columns group configuration.", + " */", + " group: DataColumnGroupProps;", + " /**", + " * Defines if first column of the group is the first one in the table header.", + " */", + " isFirstCell: boolean;", + " /**", + " * Defines if last column of the group is the last one in the table header.", + " */", + " isLastCell: boolean;", + "}" + ] + }, + "props": [ + { + "uid": "key", + "name": "key", + "comment": { + "raw": [ + "A unique identifier for a group." + ] + }, + "typeValue": { + "raw": "string" + }, + "editor": { + "type": "string" + }, + "required": true + }, + { + "uid": "group", + "name": "group", + "comment": { + "raw": [ + "Columns group configuration." + ] + }, + "typeValue": { + "raw": "DataColumnGroupProps" + }, + "required": true + }, + { + "uid": "isFirstCell", + "name": "isFirstCell", + "comment": { + "raw": [ + "Defines if first column of the group is the first one in the table header." + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "required": true + }, + { + "uid": "isLastCell", + "name": "isLastCell", + "comment": { + "raw": [ + "Defines if last column of the group is the last one in the table header." + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "required": true + }, + { + "uid": "cx", + "name": "cx", + "comment": { + "raw": [ + "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" + ] + }, + "typeValue": { + "raw": "null | string | number | boolean | ClassDictionary | ClassArray" + }, + "typeValueRef": "@epam/uui-core:ClassValue", + "from": "@epam/uui-core:IHasCX", + "required": false + }, + { + "uid": "isInvalid", + "name": "isInvalid", + "comment": { + "raw": [ + "True if component contains invalid input" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:ICanBeInvalid", + "required": false + }, + { + "uid": "isDisabled", + "name": "isDisabled", + "comment": { + "raw": [ + "Disable editing, and visually de-emphasize value of the component" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:IDisableable", + "required": false + }, + { + "uid": "isReadonly", + "name": "isReadonly", + "comment": { + "raw": [ + "Disable editing. Unlike isDisabled, keep component's value readable." + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:ICanBeReadonly", + "required": false + }, + { + "uid": "isRequired", + "name": "isRequired", + "comment": { + "raw": [ + "Marks that component's value is required and shouldn't be empty" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:ICanBeRequired", + "required": false + }, + { + "uid": "value", + "name": "value", + "comment": { + "raw": [ + "The current value of component" + ] + }, + "typeValue": { + "raw": "DataTableState" + }, + "from": "@epam/uui-core:IControlled", + "required": true + }, + { + "uid": "onValueChange", + "name": "onValueChange", + "comment": { + "raw": [ + "Called when value needs to be changed (usually due to user interaction)" + ] + }, + "typeValue": { + "raw": "(newValue: DataTableState) => void" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:IControlled", + "required": true + } + ], + "propsFromUnion": false + } + }, "@epam/uui-core:DataTableHeaderRowProps": { "summary": { "module": "@epam/uui-core", @@ -8500,6 +8947,10 @@ "print": [ "interface DataTableHeaderRowProps extends IEditable, IHasCX, DataTableColumnsConfigOptions {", " columns: DataColumnProps[];", + " /**", + " * Columns group configuration.", + " */", + " columnGroups?: DataColumnGroupProps[];", " selectAll?: ICheckable;", " /**", " * Enables collapse/expand all functionality.", @@ -8507,6 +8958,10 @@ " showFoldAll?: boolean;", " onConfigButtonClick?: (params: DataTableConfigModalParams) => any;", " renderCell?: (props: DataTableHeaderCellProps) => React.ReactNode;", + " /**", + " * Columns group cell render function.", + " */", + " renderGroupCell?: (props: DataTableHeaderGroupCellProps) => React.ReactNode;", " renderConfigButton?: () => React.ReactNode;", "}" ] @@ -8520,6 +8975,19 @@ }, "required": true }, + { + "uid": "columnGroups", + "name": "columnGroups", + "comment": { + "raw": [ + "Columns group configuration." + ] + }, + "typeValue": { + "raw": "DataColumnGroupProps[]" + }, + "required": false + }, { "uid": "selectAll", "name": "selectAll", @@ -8566,6 +9034,22 @@ }, "required": false }, + { + "uid": "renderGroupCell", + "name": "renderGroupCell", + "comment": { + "raw": [ + "Columns group cell render function." + ] + }, + "typeValue": { + "raw": "(props: DataTableHeaderGroupCellProps) => React.ReactNode" + }, + "editor": { + "type": "component" + }, + "required": false + }, { "uid": "renderConfigButton", "name": "renderConfigButton", @@ -11288,6 +11772,8 @@ " imageUrl?: string;", " /** Url of error image to display on error page in case of mobile layout (app width < 720px) */", " mobileImageUrl?: string;", + " /** Additional message with link to the support portal */", + " supportLink?: React.ReactNode;", "}" ] }, @@ -11367,6 +11853,20 @@ "type": "string" }, "required": false + }, + { + "uid": "supportLink", + "name": "supportLink", + "comment": { + "raw": [ + "Additional message with link to the support portal" + ] + }, + "typeValue": { + "raw": "React.ReactNode" + }, + "typeValueRef": "@types/react:ReactNode", + "required": false } ], "propsFromUnion": false @@ -40831,6 +41331,23 @@ "from": "@epam/uui-core:DataColumnProps", "required": true }, + { + "uid": "group", + "name": "group", + "comment": { + "raw": [ + "A unique identifier for a group of columns that establishes a connection between the column and the group of columns." + ] + }, + "typeValue": { + "raw": "string" + }, + "editor": { + "type": "string" + }, + "from": "@epam/uui-core:DataColumnProps", + "required": false + }, { "uid": "caption", "name": "caption", @@ -41561,7 +42078,7 @@ " /**", " * DataTable column configuration.", " */", - " column: DataColumnProps;", + " column: DataColumnProps | DataColumnGroupProps;", " /**", " * CSS text-align property.", " */", @@ -41591,7 +42108,7 @@ ] }, "typeValue": { - "raw": "DataColumnProps" + "raw": "DataColumnProps | DataColumnGroupProps" }, "required": true }, @@ -71933,6 +72450,20 @@ "from": "@epam/uui-core:DataTableHeaderRowProps", "required": true }, + { + "uid": "columnGroups", + "name": "columnGroups", + "comment": { + "raw": [ + "Columns group configuration." + ] + }, + "typeValue": { + "raw": "DataColumnGroupProps[]" + }, + "from": "@epam/uui-core:DataTableHeaderRowProps", + "required": false + }, { "uid": "selectAll", "name": "selectAll", @@ -71983,6 +72514,23 @@ "from": "@epam/uui-core:DataTableHeaderRowProps", "required": false }, + { + "uid": "renderGroupCell", + "name": "renderGroupCell", + "comment": { + "raw": [ + "Columns group cell render function." + ] + }, + "typeValue": { + "raw": "(props: DataTableHeaderGroupCellProps) => React.ReactNode" + }, + "editor": { + "type": "component" + }, + "from": "@epam/uui-core:DataTableHeaderRowProps", + "required": false + }, { "uid": "renderConfigButton", "name": "renderConfigButton", @@ -72424,6 +72972,8 @@ " getRows?(): DataRowProps[];", " /** Rows that should be rendered in table */", " rows?: DataRowProps[];", + " /** Array of all possible column groups for the table */", + " columnGroups?: DataColumnGroupProps[];", " /** Array of all possible columns for the table */", " columns: DataColumnProps[];", " /** Render callback for the table row.", @@ -72489,6 +73039,19 @@ }, "required": false }, + { + "uid": "columnGroups", + "name": "columnGroups", + "comment": { + "raw": [ + "Array of all possible column groups for the table" + ] + }, + "typeValue": { + "raw": "DataColumnGroupProps[]" + }, + "required": false + }, { "uid": "columns", "name": "columns", @@ -74203,8 +74766,12 @@ "name": "size", "comment": { "raw": [ - "Defines component size." - ] + "Defines component size.", + " @default '36'" + ], + "tags": { + "@default": "36" + } }, "typeValue": { "raw": "'36' | '48' | '24' | '30' | '42'" diff --git a/uui-docs/src/dataSources/DataSourceViewer.module.scss b/uui-docs/src/dataSources/DataSourceViewer.module.scss index 01d9afdeb9..22f4eececa 100644 --- a/uui-docs/src/dataSources/DataSourceViewer.module.scss +++ b/uui-docs/src/dataSources/DataSourceViewer.module.scss @@ -18,5 +18,6 @@ } .pickerRow { + --uui-picker_input-selected_mark: var(--uui-info-50); height: 38px; } diff --git a/uui-docs/src/docBuilderGen/docBuilderGen.tsx b/uui-docs/src/docBuilderGen/docBuilderGen.tsx index ba66c15a77..de153eb67d 100644 --- a/uui-docs/src/docBuilderGen/docBuilderGen.tsx +++ b/uui-docs/src/docBuilderGen/docBuilderGen.tsx @@ -72,7 +72,7 @@ export async function docBuilderGen(params: IDocBuilderGenParams): Promise) { - const { format = defaultFormat, value } = props; + const { format = defaultFormat, value, size = settings.sizes.defaults.datePicker } = props; const context = useUuiContext(); const [inputValue, setInputValue] = useState(toCustomDateFormat(value, format)); const [isBodyOpen, setBodyIsOpen] = useState(false); @@ -76,7 +76,7 @@ export function DatePickerComponent(props: DatePickerProps, ref: React.Forwarded icon={ props.mode !== EditMode.CELL && systemIcons.calendar ? systemIcons.calendar : undefined } iconPosition={ props.iconPosition || 'left' } placeholder={ props.placeholder ? props.placeholder : format } - size={ props.size || settings.sizes.defaults.datePicker as TextInputProps['size'] } + size={ size as TextInputProps['size'] } value={ inputValue || undefined } onValueChange={ (v) => { setInputValue(v || ''); diff --git a/uui/components/datePickers/RangeDatePicker.tsx b/uui/components/datePickers/RangeDatePicker.tsx index 78f14a1999..9166b021b1 100644 --- a/uui/components/datePickers/RangeDatePicker.tsx +++ b/uui/components/datePickers/RangeDatePicker.tsx @@ -11,6 +11,7 @@ import { RangeDatePickerBodyValue, RangeDatePickerInputType, RangeDatePickerProp import { defaultFormat, defaultRangeValue } from './helpers'; import { RangeDatePickerInput } from './RangeDatePickerInput'; import css from './RangeDatePicker.module.scss'; +import { settings } from '../../settings'; const modifiers = [{ name: 'offset', @@ -18,7 +19,7 @@ const modifiers = [{ }]; function RangeDatePickerComponent(props: RangeDatePickerProps, ref: React.ForwardedRef): JSX.Element { - const { value: _value, format = defaultFormat } = props; + const { value: _value, format = defaultFormat, size = settings.sizes.defaults.rangeDatePicker } = props; const value = _value || defaultRangeValue; // also handles null in comparison to default value const context = useUuiContext(); @@ -111,7 +112,7 @@ function RangeDatePickerComponent(props: RangeDatePickerProps, ref: React.Forwar isDisabled={ props.isDisabled } isInvalid={ props.isInvalid } isReadonly={ props.isReadonly } - size={ props.size } + size={ size as RangeDatePickerProps['size'] } getPlaceholder={ props.getPlaceholder } disableClear={ props.disableClear } rawProps={ props.rawProps } diff --git a/uui/components/datePickers/RangeDatePickerInput.module.scss b/uui/components/datePickers/RangeDatePickerInput.module.scss index a5ccf6c204..0f94d51e75 100644 --- a/uui/components/datePickers/RangeDatePickerInput.module.scss +++ b/uui/components/datePickers/RangeDatePickerInput.module.scss @@ -29,13 +29,13 @@ border-radius: var(--uui-rdtp-border-radius); > :first-child { - border-top-right-radius: 0; - border-bottom-right-radius: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; } > :last-child { - border-top-left-radius: 0; - border-bottom-left-radius: 0; + border-start-start-radius: 0; + border-end-start-radius: 0; } .separator { diff --git a/uui/components/datePickers/types.ts b/uui/components/datePickers/types.ts index 516bcfb69e..ce6cad7783 100644 --- a/uui/components/datePickers/types.ts +++ b/uui/components/datePickers/types.ts @@ -32,6 +32,7 @@ export interface DatePickerModsOverride {} type DatePickerMods = { /** * Defines component size. + * @default '36' */ size?: '24' | '30' | '36' | '42' | '48'; }; diff --git a/uui/components/errors/ErrorHandler.module.scss b/uui/components/errors/ErrorHandler.module.scss index f4dcaad341..98cc625c4a 100644 --- a/uui/components/errors/ErrorHandler.module.scss +++ b/uui/components/errors/ErrorHandler.module.scss @@ -4,6 +4,8 @@ .recovery-message { margin: 12px 0 24px; + padding-left: 24px; + padding-right: 24px; } .modal-blocker { diff --git a/uui/components/errors/ErrorHandler.tsx b/uui/components/errors/ErrorHandler.tsx index e2ff34abf9..875b67bee6 100644 --- a/uui/components/errors/ErrorHandler.tsx +++ b/uui/components/errors/ErrorHandler.tsx @@ -36,7 +36,7 @@ export function ErrorHandler(props: ErrorHandlerProps) { } else { uuiNotifications.show((notificationProps: INotification) => ( - + {c.responseData && c.responseData.errorMessage} @@ -54,7 +54,7 @@ export function ErrorHandler(props: ErrorHandlerProps) { - + {subtitle} { isAuthLost && ( diff --git a/uui/components/fileUpload/FileCard.module.scss b/uui/components/fileUpload/FileCard.module.scss index a22e2a6065..077b7aa5fc 100644 --- a/uui/components/fileUpload/FileCard.module.scss +++ b/uui/components/fileUpload/FileCard.module.scss @@ -12,9 +12,11 @@ --uui-file_card-icon-mov: #5214CC; --uui-file_card-icon-img: #E67E17; + --uui-file_card-font-error: var(--uui-font); + --uui-file_card-border-radius: var(--uui-border-radius); + --uui-file_card-icon-size: 18px; - --uui-file_card-font-error: var(--uui-font); &:global(.uui-file_card) { box-sizing: border-box; @@ -87,6 +89,11 @@ min-width: 18px; flex-basis: 0; - @include icon-size(18); + :global(.uui-icon) { + svg { + height: var(--uui-file_card-icon-size); + width: inherit; + } + } } } diff --git a/uui/components/fileUpload/FileCard.tsx b/uui/components/fileUpload/FileCard.tsx index cfcbd8e942..91db598c0c 100644 --- a/uui/components/fileUpload/FileCard.tsx +++ b/uui/components/fileUpload/FileCard.tsx @@ -128,7 +128,7 @@ export const FileCard = React.forwardRef((props, minWidth={ width } width={ !width ? '100%' : undefined } > - + {fileExtension && getIcon(fileExtension)} diff --git a/uui/components/filters/FilterNumericBody.tsx b/uui/components/filters/FilterNumericBody.tsx index 436ecb383a..3d95523227 100644 --- a/uui/components/filters/FilterNumericBody.tsx +++ b/uui/components/filters/FilterNumericBody.tsx @@ -105,7 +105,6 @@ export function FilterNumericBody(props: IFilterNumericBodyProps) { @@ -114,7 +113,6 @@ export function FilterNumericBody(props: IFilterNumericBodyProps) { diff --git a/uui/components/filters/FilterPanelItemToggler.module.scss b/uui/components/filters/FilterPanelItemToggler.module.scss index e80982b238..fcef43bf49 100644 --- a/uui/components/filters/FilterPanelItemToggler.module.scss +++ b/uui/components/filters/FilterPanelItemToggler.module.scss @@ -15,18 +15,25 @@ --uui-filters_toggler-font: var(--uui-font); --uui-filters_toggler-font-weight: 400; + --uui-filters_toggler-min-height: var(--uui-size); + --uui-filters_toggler-border-width: var(--uui-border-width); + --uui-filters_toggler-horizontal-padding: calc(var(--uui-horizontal-padding) - var(--uui-filters_toggler-border-width)); + --uui-filters_toggler-caption-horizontal-padding: var(--uui-horizontal-gap); + --uui-filters_toggler-icon-size: var(--uui-icon-size); + &:global(.uui-input-box) { box-sizing: border-box; min-width: 40px; + min-height: var(--uui-filters_toggler-min-height); position: relative; display: flex; outline: none; - border: 1px solid var(--uui-filters_toggler-border); + border: var(--uui-filters_toggler-border-width) solid var(--uui-filters_toggler-border); border-radius: var(--uui-filters_toggler-border-radius); background-color: var(--uui-filters_toggler-bg); box-shadow: var(--uui-filters_toggler-shadow); - padding-left: 6px; - padding-right: 6px; + padding-left: var(--uui-filters_toggler-horizontal-padding); + padding-right: var(--uui-filters_toggler-horizontal-padding); &:global(.-clickable):hover { cursor: pointer; @@ -107,36 +114,11 @@ } } - @mixin filterTogglerSize($size) { - &:global(.size-#{$size}) { - @if $size == 24 { - padding-left: 2px; - padding-right: 2px; - - .title-wrapper { - padding-left: 3px; - padding-right: 3px; - } - } @else if $size == 42 { - padding-left: 11px; - padding-right: 11px; - } @else if $size == 48 { - padding-left: 11px; - padding-right: 11px; - } @else { - padding-left: 5px; - padding-right: 5px; - } - - @include control-vertical-layout(#{$size}px, 1px); - @include scalable-icon-size($size); + :global(.uui-icon) { + svg { + height: var(--uui-filters_toggler-icon-size); + width: inherit; } } - - @include filterTogglerSize(24); - @include filterTogglerSize(30); - @include filterTogglerSize(36); - @include filterTogglerSize(42); - @include filterTogglerSize(48); } } diff --git a/uui/components/filters/FilterPanelItemToggler.tsx b/uui/components/filters/FilterPanelItemToggler.tsx index be44e5aa84..474e02b5b1 100644 --- a/uui/components/filters/FilterPanelItemToggler.tsx +++ b/uui/components/filters/FilterPanelItemToggler.tsx @@ -63,7 +63,7 @@ export const FilterPanelItemToggler = React.forwardRef(filter: TFilter) => { }; function FiltersToolbarImpl(props: FiltersPanelProps) { - const { filters, tableState, setTableState } = props; + const { filters, tableState, setTableState, size = (settings.sizes.defaults.filtersPanel as FiltersPanelProps['size']) } = props; const [newFilterId, setNewFilterId] = useState(null); const pickerInputRef = useRef(null); @@ -157,7 +161,7 @@ function FiltersToolbarImpl(props: FiltersPanelProps { return (