Merge pull request #1755 from epam/bugfix/fixPack_Nov16

fixPack-Nov16 & portal theme class
epam · Nov 17, 2023 · 0233df1 · 0233df1
2 parents 0a58791 + 8374580
commit 0233df1
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 45 deletions.
diff --git a/app/src/common/AppHeader.tsx b/app/src/common/AppHeader.tsx
@@ -1,14 +1,12 @@
 import React from 'react';
-import {
-    BurgerButton, MainMenu, FlexSpacer, GlobalMenu, MainMenuButton, Text, IconContainer, Burger, DropdownMenuSplitter, MainMenuDropdown,
-} from '@epam/promo';
+import { BurgerButton, MainMenu, FlexSpacer, GlobalMenu, MainMenuButton, Text, IconContainer, Burger, MainMenuDropdown } from '@epam/promo';
 import { Anchor, MainMenuLogo } from '@epam/uui-components';
 import { UUI } from './docs';
 import { svc } from '../services';
 import { analyticsEvents } from '../analyticsEvents';
-import css from './AppHeader.module.scss';
 import { ReactComponent as GitIcon } from '../icons/git-branch-18.svg';
 import { useTheme } from '../helpers/useTheme';
+import css from './AppHeader.module.scss';
 
 export type Theme = 'uui-theme-promo' | 'uui-theme-loveship' | 'uui-theme-loveship_dark' | 'uui-theme-electric' | 'uui-theme-vanilla_thunder';
 const themeName: Record<Theme, 'Promo' | 'Loveship' | 'Loveship Dark' | 'Electric' | 'Vanilla Thunder'> = {
@@ -68,9 +66,12 @@ export function AppHeader() {
             <MainMenuButton caption="Loveship" isLinkActive={ theme === 'uui-theme-loveship' } iconPosition="right" onClick={ () => toggleTheme('uui-theme-loveship') } />,
             <MainMenuButton caption="Loveship Dark" isLinkActive={ theme === 'uui-theme-loveship_dark' } iconPosition="right" onClick={ () => toggleTheme('uui-theme-loveship_dark') } />,
             <MainMenuButton caption="Electric" isLinkActive={ theme === 'uui-theme-electric' } iconPosition="right" onClick={ () => toggleTheme('uui-theme-electric') } />,
-            <DropdownMenuSplitter />,
-            <MainMenuButton caption="RD Portal" isLinkActive={ theme === 'uui-theme-vanilla_thunder' } iconPosition="right" onClick={ () => toggleTheme('uui-theme-vanilla_thunder') } />,
         ];
+        if (!window.location.host.includes('uui.epam.com')) {
+            bodyItems.push(
+                <MainMenuButton caption="Vanilla Thunder" isLinkActive={ theme === 'uui-theme-vanilla_thunder' } iconPosition="right" onClick={ () => toggleTheme('uui-theme-vanilla_thunder') } />,
+            );
+        }
 
         return (
             <MainMenuDropdown key="theme-switcher" caption={ `Theme: ${themeName[theme as Theme]}` }>

diff --git a/app/src/common/docs/BaseDocsBlock.module.scss b/app/src/common/docs/BaseDocsBlock.module.scss
@@ -1,6 +1,18 @@
 @use '~@epam/assets/theme/theme_promo' as *;
+@use '~@epam/assets/theme/theme_loveship' as *;
 @use '~@epam/promo/assets/styles/index.scss' as *;
 
+:global {
+    .uui-theme-loveship_important.uui-theme-loveship_important.uui-theme-loveship_important.uui-theme-loveship_important {
+        @include theme-loveship();
+    }
+
+    .uui-theme-promo_important.uui-theme-promo_important.uui-theme-promo_important.uui-theme-promo_important {
+        @include theme-promo();
+    }
+}
+
+
 .secondary-navigation {
     box-sizing: border-box;
     min-height: 60px;
@@ -66,5 +78,7 @@
 }
 
 .theme-promo {
-    @include theme-promo();
+    :global {
+        @include theme-promo();
+    }
 }
diff --git a/app/src/common/docs/BaseDocsBlock.tsx b/app/src/common/docs/BaseDocsBlock.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { UuiContext, UuiContexts } from '@epam/uui-core';
 import { Text, RichTextView, FlexRow, MultiSwitch, FlexSpacer, TabButton, LinkButton, ScrollBars } from '@epam/uui';
 import { ComponentEditor } from './ComponentEditor';
 import { svc } from '../../services';
@@ -14,6 +15,13 @@ export enum TSkin {
     UUI4_promo = 'UUI4_promo',
     UUI = 'UUI'
 }
+
+const themeName: Record<TSkin, string> = {
+    UUI4_promo: 'uui-theme-promo_important',
+    UUI3_loveship: 'uui-theme-loveship_important',
+    UUI: '',
+};
+
 const DEFAULT_SKIN = TSkin.UUI;
 
 export const UUI3 = TSkin.UUI3_loveship;
@@ -32,6 +40,9 @@ type DocPath = {
 interface BaseDocsBlockState {}
 
 export abstract class BaseDocsBlock extends React.Component<any, BaseDocsBlockState> {
+    public static contextType = UuiContext;
+    public context: UuiContexts;
+
     constructor(props: any) {
         super(props);
 
@@ -165,7 +176,21 @@ export abstract class BaseDocsBlock extends React.Component<any, BaseDocsBlockSt
         );
     }
 
+    handlePortalTheme(prop: 'clear' | TSkin) {
+        // TODO: remove this when all our site will use one 'theme-color-picker' with PropertyExplorer
+        const portalId = this.context.uuiLayout.getPortalRootId();
+        const rootPortal = document.getElementById(portalId);
+
+        if (prop === 'clear') {
+            rootPortal.className = '';
+        } else {
+            rootPortal.className = themeName[prop];
+        }
+    }
+
     handleChangeSkin(skin: TSkin) {
+        this.handlePortalTheme(skin);
+
         svc.uuiRouter.redirect({
             pathname: '/documents',
             query: {
@@ -178,6 +203,8 @@ export abstract class BaseDocsBlock extends React.Component<any, BaseDocsBlockSt
     }
 
     handleChangeMode(mode: 'doc' | 'propsEditor') {
+        this.handlePortalTheme('clear');
+
         svc.uuiRouter.redirect({
             pathname: '/documents',
             query: {

diff --git a/app/src/docs/_props/epam-promo/components/typography/richTextView.props.tsx b/app/src/docs/_props/epam-promo/components/typography/richTextView.props.tsx
@@ -1,14 +1,9 @@
 import * as React from 'react';
+import { RichTextViewProps } from '@epam/uui-components';
+import { DocBuilder } from '@epam/uui-docs';
 import { RichTextViewMods } from '@epam/uui';
+import { FlexRow, LinkButton, LabeledInput, ControlWrapper, TextInput, RichTextView, Panel, Anchor } from '@epam/promo';
 import { DefaultContext } from '../../docs';
-import { FlexRow, LabeledInput, ControlWrapper, RichTextView, Panel } from '@epam/promo';
-import { LinkButton } from '@epam/promo';
-import { DocBuilder } from '@epam/uui-docs';
-import { RichTextViewProps } from '@epam/uui-components';
-import { Anchor } from '@epam/promo';
-import { Svg } from '@epam/uui-components';
-import { ReactComponent as Calendar } from '@epam/assets/icons/common/action-calendar-18.svg';
-import { TextInput } from '@epam/promo';
 import style from './richTextViewDoc.module.scss';
 
 const richTextViewDoc = new DocBuilder<RichTextViewProps & RichTextViewMods>({ name: 'RichTextView', component: RichTextView })
@@ -106,7 +101,6 @@ const richTextViewDoc = new DocBuilder<RichTextViewProps & RichTextViewMods>({ n
                             <Anchor href="/">
                                 Click me
                                 {' '}
-                                <Svg svg={ Calendar }></Svg>
                             </Anchor>
                             {' '}
                             It is those feelings that drive our love of astronomy and our desire to learn more and more about it.
@@ -182,7 +176,6 @@ const richTextViewDoc = new DocBuilder<RichTextViewProps & RichTextViewMods>({ n
                                     <>
                                         Demo Component
                                         <Anchor href="/">
-                                            <Svg svg={ Calendar }></Svg>
                                         </Anchor>
                                         {' '}
                                         :
@@ -221,7 +214,6 @@ export const MyComponent = <div className={ css.myHeader }>`}
                             <Anchor href="/">
                                 click me
                                 {' '}
-                                <Svg svg={ Calendar }></Svg>
                             </Anchor>
                             {' '}
                             consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
@@ -239,7 +231,6 @@ export const MyComponent = <div className={ css.myHeader }>`}
                             <Anchor href="/">
                                 click me
                                 {' '}
-                                <Svg svg={ Calendar }></Svg>
                             </Anchor>
                             {' '}
                             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure reprehenderit in voluptate velit esse

diff --git a/app/src/docs/_props/loveship/components/typography/richTextView.props.tsx b/app/src/docs/_props/loveship/components/typography/richTextView.props.tsx
@@ -1,19 +1,9 @@
 import * as React from 'react';
 import { DocBuilder } from '@epam/uui-docs';
-import { RichTextViewProps, Svg } from '@epam/uui-components';
+import { RichTextViewProps } from '@epam/uui-components';
 import { RichTextViewMods } from '@epam/uui';
-import {
-    RichTextView,
-    Anchor,
-    TextInput,
-    FlexRow,
-    LabeledInput,
-    ControlWrapper,
-    LinkButton,
-    Panel,
-} from '@epam/loveship';
+import { RichTextView, Anchor, TextInput, FlexRow, LabeledInput, ControlWrapper, LinkButton, Panel } from '@epam/loveship';
 import { DefaultContext } from '../../docs';
-import { ReactComponent as Calendar } from '@epam/assets/icons/common/action-calendar-18.svg';
 import style from './richTextViewDoc.module.scss';
 
 const richTextViewDoc = new DocBuilder<RichTextViewProps & RichTextViewMods>({ name: 'RichTextView', component: RichTextView })
@@ -95,7 +85,6 @@ const richTextViewDoc = new DocBuilder<RichTextViewProps & RichTextViewMods>({ n
                             <Anchor href="/">
                                 Click me
                                 {' '}
-                                <Svg svg={ Calendar }></Svg>
                             </Anchor>
                             {' '}
                             It is those feelings that drive our love of astronomy and our desire to learn more and more about it.
@@ -171,7 +160,6 @@ const richTextViewDoc = new DocBuilder<RichTextViewProps & RichTextViewMods>({ n
                                     <>
                                         Demo Component
                                         <Anchor href="/">
-                                            <Svg svg={ Calendar }></Svg>
                                         </Anchor>
                                         {' '}
                                         :
@@ -210,7 +198,6 @@ export const MyComponent = <div className={ css.myHeader }>`}
                             <Anchor href="/">
                                 click me
                                 {' '}
-                                <Svg svg={ Calendar }></Svg>
                             </Anchor>
                             {' '}
                             consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
@@ -228,7 +215,6 @@ export const MyComponent = <div className={ css.myHeader }>`}
                             <Anchor href="/">
                                 click me
                                 {' '}
-                                <Svg svg={ Calendar }></Svg>
                             </Anchor>
                             {' '}
                             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure reprehenderit in voluptate velit esse

diff --git a/app/src/docs/_props/uui/components/typography/richTextView.props.tsx b/app/src/docs/_props/uui/components/typography/richTextView.props.tsx
@@ -1,9 +1,8 @@
 import * as React from 'react';
 import { DocBuilder } from '@epam/uui-docs';
-import { RichTextViewProps, Svg } from '@epam/uui-components';
+import { RichTextViewProps } from '@epam/uui-components';
 import { RichTextView, RichTextViewMods, FlexRow, LabeledInput, LinkButton, Anchor, TextInput, Panel } from '@epam/uui';
 import { DefaultContext } from '../../docs';
-import { ReactComponent as Calendar } from '@epam/assets/icons/common/action-calendar-18.svg';
 import style from './richTextViewDoc.module.scss';
 
 const richTextViewDoc = new DocBuilder<RichTextViewProps & RichTextViewMods>({ name: 'RichTextView', component: RichTextView })
@@ -101,7 +100,6 @@ const richTextViewDoc = new DocBuilder<RichTextViewProps & RichTextViewMods>({ n
                             <Anchor href="/">
                                 Click me
                                 {' '}
-                                <Svg svg={ Calendar }></Svg>
                             </Anchor>
                             {' '}
                             It is those feelings that drive our love of astronomy and our desire to learn more and more about it.
@@ -177,7 +175,6 @@ const richTextViewDoc = new DocBuilder<RichTextViewProps & RichTextViewMods>({ n
                                     <>
                                         Demo Component
                                         <Anchor href="/">
-                                            <Svg svg={ Calendar }></Svg>
                                         </Anchor>
                                         {' '}
                                         :
@@ -214,7 +211,6 @@ export const MyComponent = <div className={ css.myHeader }>`}
                             <Anchor href="/">
                                 click me
                                 {' '}
-                                <Svg svg={ Calendar }></Svg>
                             </Anchor>
                             {' '}
                             consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
@@ -232,7 +228,6 @@ export const MyComponent = <div className={ css.myHeader }>`}
                             <Anchor href="/">
                                 click me
                                 {' '}
-                                <Svg svg={ Calendar }></Svg>
                             </Anchor>
                             {' '}
                             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure reprehenderit in voluptate velit esse

diff --git a/app/src/sandbox/tableColConfigModal/TableColumnConfigModalTest.tsx b/app/src/sandbox/tableColConfigModal/TableColumnConfigModalTest.tsx
@@ -1,10 +1,10 @@
 import React, { useMemo, useState } from 'react';
-import { Badge, ColumnsConfigurationModal, DataTable, FlexRow, Panel, RichTextView, Text } from '@epam/promo';
+import { ColumnsConfigurationModal, DataTable, FlexRow, Panel, RichTextView, StatusIndicator, Text } from '@epam/promo';
 import { DataColumnProps, useLazyDataSource, useUuiContext, UuiContexts } from '@epam/uui-core';
 import { Person } from '@epam/uui-docs';
-import css from './TableColumnConfigModalStyles.module.scss';
-import { TApi } from '../../data';
 import { ColumnsConfigurationModalProps } from '@epam/uui';
+import { TApi } from '../../data';
+import css from './TableColumnConfigModalStyles.module.scss';
 
 export function TableColumnConfigModalTest() {
     const svc = useUuiContext<TApi, UuiContexts>();
@@ -37,7 +37,7 @@ export function TableColumnConfigModalTest() {
                 render: (p) =>
                     p.profileStatus && (
                         <FlexRow>
-                            <Badge fill="transparent" color={ p.profileStatus.toLowerCase() as any } caption={ p.profileStatus } />
+                            <StatusIndicator size="18" color={ p.profileStatus.toLowerCase() as any } caption={ p.profileStatus } />
                         </FlexRow>
                     ),
                 width: 140,