Merge remote-tracking branch 'origin/develop' into develop

epam · Mar 18, 2024 · f1a1e83 · f1a1e83
2 parents b83c558 + 901e9c7
commit f1a1e83
Show file tree

Hide file tree

Showing 32 changed files with 49 additions and 52 deletions.
diff --git a/app/src/common/apiReference/typeRefRTEPlugin.tsx b/app/src/common/apiReference/typeRefRTEPlugin.tsx
@@ -102,9 +102,9 @@ export function AddTypeRefTableModal({ editor, success, abort, ...props }: AddTy
                 </FlexRow>
                 <ModalFooter borderTop>
                     <FlexSpacer />
-                    <Button color="secondary" caption="Cancel" onClick={ () => abort() } />
+                    <Button color="secondary" fill="outline" caption="Cancel" onClick={ () => abort() } />
                     <Button
-                        color="accent"
+                        color="primary"
                         caption="Ok"
                         isDisabled={ !typePath }
                         onClick={ createTypeRefTableBlock }

diff --git a/app/src/common/appFooterDemo/demoToolbar/DescriptionModal.tsx b/app/src/common/appFooterDemo/demoToolbar/DescriptionModal.tsx
@@ -73,7 +73,7 @@ export function DescriptionModal(props: IDemoItemDescriptionModal) {
                 <ModalFooter borderTop>
                     <FlexSpacer />
                     <Button color="gray" fill="white" caption="Cancel" onClick={ handleClose } />
-                    {!isReadOnly() && <Button color="green" caption="Save" onClick={ handleSaveAndClose } />}
+                    {!isReadOnly() && <Button color="primary" caption="Save" onClick={ handleSaveAndClose } />}
                 </ModalFooter>
             </ModalWindow>
         </ModalBlocker>

diff --git a/app/src/demo/dnd/DndModule.module.scss b/app/src/demo/dnd/DndModule.module.scss
@@ -23,17 +23,13 @@
         background-color: var(--uui-surface-main);
     }
 
-    .item {
-        background-color: var(--uui-surface-main);
-    }
-
     .module-icon {
         width: 36px;
         height: 36px;
         padding: 6px;
-        margin: auto;
         border-radius: 50%;
         box-sizing: border-box;
+        align-self: center;
 
         &.complete-icon {
             background-color: #EEFFCC;

diff --git a/app/src/demo/form/DemoForm.tsx b/app/src/demo/form/DemoForm.tsx
@@ -520,7 +520,7 @@ export function DemoForm() {
                     <hr className={ css.divider } />
                     <FlexRow columnGap="12">
                         <FlexSpacer />
-                        <Button caption="Save" color="accent" onClick={ save } />
+                        <Button caption="Save" color="primary" onClick={ save } />
                     </FlexRow>
                 </FlexCell>
             </Panel>

diff --git a/app/src/docs/_examples/badge/Attributes.example.tsx b/app/src/docs/_examples/badge/Attributes.example.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Avatar, FlexCell, FlexRow, Panel, Text, Badge } from '@epam/uui';
 
-import { ReactComponent as notificationIcon } from '@epam/assets/icons/common/notification-done-12.svg';
+import { ReactComponent as notificationIcon } from '@epam/assets/icons/notification-done-outline.svg';
 import css from './AttributesExample.module.scss';
 
 export default function AttributesExample() {

diff --git a/app/src/docs/_examples/badge/Dropdown.example.tsx b/app/src/docs/_examples/badge/Dropdown.example.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Dropdown, DropdownContainer, DropdownMenuButton, FlexRow, Badge } from '@epam/uui';
-import { ReactComponent as navigationDownIcon } from '@epam/assets/icons/common/navigation-chevron-down-18.svg';
+import { ReactComponent as navigationDownIcon } from '@epam/assets/icons/navigation-chevron_down-outline.svg';
 import { DropdownBodyProps } from '@epam/uui-core';
 import css from './DropdownExample.module.scss';
 

diff --git a/app/src/docs/_examples/badge/Types.example.tsx b/app/src/docs/_examples/badge/Types.example.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Dropdown, FlexRow, Panel, Text, Badge } from '@epam/uui';
-import { ReactComponent as mediaIcon } from '@epam/assets/icons/common/media-play-fill-18.svg';
-import { ReactComponent as doneIcon } from '@epam/assets/icons/common/notification-done-24.svg';
-import { ReactComponent as navigationDownIcon } from '@epam/assets/icons/common/navigation-chevron-down-18.svg';
+import { ReactComponent as mediaIcon } from '@epam/assets/icons/media-play-fill-opt.2.svg';
+import { ReactComponent as doneIcon } from '@epam/assets/icons/notification-done-outline.svg';
+import { ReactComponent as navigationDownIcon } from '@epam/assets/icons/navigation-chevron_down-outline.svg';
 
 export default function TypesExample() {
     return (

diff --git a/app/src/docs/_examples/dropdown/CloseFromBody.example.tsx b/app/src/docs/_examples/dropdown/CloseFromBody.example.tsx
@@ -18,7 +18,7 @@ export default function BasicDropdownExample() {
                 </FlexCell>
                 <FlexCell alignSelf="flex-start">
                     <FlexRow columnGap="12">
-                        <Button color="accent" size="30" caption="Some Action" onClick={ () => null } />
+                        <Button color="primary" size="30" caption="Some Action" onClick={ () => null } />
                         <Button fill="outline" size="30" color="secondary" caption="Cancel" onClick={ () => props.onClose() } />
                     </FlexRow>
                 </FlexCell>

diff --git a/app/src/docs/_examples/dropdownContainer/Basic.example.tsx b/app/src/docs/_examples/dropdownContainer/Basic.example.tsx
@@ -20,7 +20,7 @@ export default function BasicExample() {
                 </FlexCell>
                 <FlexCell alignSelf="flex-start">
                     <FlexRow columnGap="12">
-                        <Button color="accent" size="30" caption="Some Action" onClick={ () => null } />
+                        <Button color="primary" size="30" caption="Some Action" onClick={ () => null } />
                         <Button color="secondary" fill="outline" size="30" caption="Cancel" onClick={ () => null } />
                     </FlexRow>
                 </FlexCell>

diff --git a/app/src/docs/_examples/dropdownContainer/FocusLockAndKeyboardNavigation.example.tsx b/app/src/docs/_examples/dropdownContainer/FocusLockAndKeyboardNavigation.example.tsx
@@ -19,7 +19,7 @@ export default function FocusLockAndKeyboardNavigationExample() {
                 </Text>
                 <FlexCell>
                     <FlexRow columnGap="12">
-                        <Button color="accent" size="30" caption="Some Action" onClick={ () => null } />
+                        <Button color="primary" size="30" caption="Some Action" onClick={ () => null } />
                         <Button fill="outline" size="30" color="neutral" caption="Cancel" onClick={ () => null } />
                     </FlexRow>
                 </FlexCell>

diff --git a/app/src/docs/_examples/form/Advanced.example.tsx b/app/src/docs/_examples/form/Advanced.example.tsx
@@ -117,7 +117,7 @@ export default function AdvancedFormExample() {
             </FlexRow>
             <FlexRow vPadding="12">
                 <FlexSpacer />
-                <Button caption="Save" onClick={ save } color="accent" />
+                <Button caption="Save" onClick={ save } color="primary" />
             </FlexRow>
         </FlexCell>
     );

diff --git a/app/src/docs/_examples/form/Basic.example.tsx b/app/src/docs/_examples/form/Basic.example.tsx
@@ -69,7 +69,7 @@ export default function BasicFormExample() {
             </FlexRow>
             <FlexRow vPadding="12">
                 <FlexSpacer />
-                <Button caption="Save" onClick={ save } color="accent" />
+                <Button caption="Save" onClick={ save } color="primary" />
             </FlexRow>
         </FlexCell>
     );

diff --git a/app/src/docs/_examples/form/ComplexValidation.example.tsx b/app/src/docs/_examples/form/ComplexValidation.example.tsx
@@ -62,11 +62,11 @@ export default function ComplexFormValidationExample() {
         <FlexCell width="100%">
             { lens.get().map(renderUser) }
             <FlexRow>
-                <Button caption="Add user" onClick={ () => lens.update((current) => [...current, emptyUser]) } color="primary" />
+                <Button caption="Add user" onClick={ () => lens.update((current) => [...current, emptyUser]) } color="primary" fill="outline" />
             </FlexRow>
             <FlexRow vPadding="12">
                 <FlexSpacer />
-                <Button caption="Save" onClick={ save } color="accent" />
+                <Button caption="Save" onClick={ save } color="primary" />
             </FlexRow>
         </FlexCell>
     );

diff --git a/app/src/docs/_examples/form/FormLeaveHandling.example.tsx b/app/src/docs/_examples/form/FormLeaveHandling.example.tsx
@@ -46,7 +46,7 @@ export default function FormLeaveHandlingExample() {
             </FlexRow>
             <FlexRow vPadding="12">
                 <FlexSpacer />
-                <Button caption="Save" onClick={ save } color="accent" />
+                <Button caption="Save" onClick={ save } color="primary" />
             </FlexRow>
         </FlexCell>
     );

diff --git a/app/src/docs/_examples/form/FormValidateOnChange.example.tsx b/app/src/docs/_examples/form/FormValidateOnChange.example.tsx
@@ -69,7 +69,7 @@ export default function BasicFormExample() {
             </FlexRow>
             <FlexRow vPadding="12">
                 <FlexSpacer />
-                <Button caption="Save" onClick={ save } color="accent" />
+                <Button caption="Save" onClick={ save } color="primary" />
             </FlexRow>
         </FlexCell>
     );

diff --git a/app/src/docs/_examples/form/FormWIthClasses.example.tsx b/app/src/docs/_examples/form/FormWIthClasses.example.tsx
@@ -35,8 +35,8 @@ export default function FormWIthClassesExample() {
             </FlexRow>
             <FlexRow vPadding="12" columnGap="12">
                 <FlexSpacer />
-                <Button caption="Validate" onClick={ validate } color="primary" />
-                <Button caption="Save" onClick={ save } color="accent" />
+                <Button caption="Validate" onClick={ validate } color="primary" fill="outline" />
+                <Button caption="Save" onClick={ save } color="primary" />
             </FlexRow>
         </FlexCell>
     );

diff --git a/app/src/docs/_examples/form/HandleSuccessSaveAndError.example.tsx b/app/src/docs/_examples/form/HandleSuccessSaveAndError.example.tsx
@@ -57,7 +57,7 @@ export default function HandleSuccessSaveAndErrorExample() {
             </FlexRow>
             <FlexRow vPadding="12">
                 <FlexSpacer />
-                <Button caption="Save" onClick={ save } color="accent" />
+                <Button caption="Save" onClick={ save } color="primary" />
             </FlexRow>
         </FlexCell>
     );

diff --git a/app/src/docs/_examples/form/ServerValidation.example.tsx b/app/src/docs/_examples/form/ServerValidation.example.tsx
@@ -77,8 +77,8 @@ export default function ServerValidationExample() {
             </FlexRow>
             <FlexRow vPadding="12" columnGap="12">
                 <FlexSpacer />
-                <Button caption="Validate" onClick={ validate } />
-                <Button caption="Save" onClick={ save } color="accent" />
+                <Button caption="Validate" onClick={ validate } color="primary" fill="outline" />
+                <Button caption="Save" onClick={ save } color="primary" />
             </FlexRow>
         </FlexCell>
     );

diff --git a/app/src/docs/_examples/modals/Basic.example.tsx b/app/src/docs/_examples/modals/Basic.example.tsx
@@ -58,7 +58,7 @@ export function BasicModalExample(modalProps: IModal<string>) {
                     <ModalFooter>
                         <FlexSpacer />
                         <Button color="secondary" fill="outline" caption="Cancel" onClick={ () => modalProps.abort() } />
-                        <Button color="accent" caption="Ok" onClick={ () => modalProps.success('Success action') } />
+                        <Button color="primary" caption="Ok" onClick={ () => modalProps.success('Success action') } />
                     </ModalFooter>
                 </Panel>
             </ModalWindow>

diff --git a/app/src/docs/_examples/modals/DisableClickOutsideAndCross.example.tsx b/app/src/docs/_examples/modals/DisableClickOutsideAndCross.example.tsx
@@ -21,7 +21,7 @@ function ModalWithDisabledClickOutsideAndCross(props: IModal<string>) {
                     <ModalFooter>
                         <FlexSpacer />
                         <Button color="secondary" fill="outline" caption="Cancel" onClick={ () => props.abort() } />
-                        <Button color="accent" caption="Ok" onClick={ () => props.success('Success action') } />
+                        <Button color="primary" caption="Ok" onClick={ () => props.success('Success action') } />
                     </ModalFooter>
                 </Panel>
             </ModalWindow>

diff --git a/app/src/docs/_examples/modals/ModalWithForm.example.tsx b/app/src/docs/_examples/modals/ModalWithForm.example.tsx
@@ -80,7 +80,7 @@ function ModalWithFormExample(modalProps: IModal<Person>) {
                     <ModalFooter borderTop>
                         <FlexSpacer />
                         <Button color="secondary" fill="outline" onClick={ () => close().then(modalProps.abort) } caption="Cancel" />
-                        <Button color="accent" caption="Confirm" onClick={ save } />
+                        <Button color="primary" caption="Confirm" onClick={ save } />
                     </ModalFooter>
                     <FlexSpacer />
                 </ScrollBars>

diff --git a/app/src/docs/_examples/tables/EditableTable.example.tsx b/app/src/docs/_examples/tables/EditableTable.example.tsx
@@ -191,14 +191,14 @@ export default function EditableTableExample() {
             {/* Render a panel with Save/Revert buttons to control the form */}
             <FlexRow columnGap="12" padding="12" vPadding="12" borderBottom>
                 <FlexCell width="auto">
-                    <Button caption="Add task" onClick={ handleNewItem } />
+                    <Button caption="Add task" fill="outline" color="primary" onClick={ handleNewItem } />
                 </FlexCell>
                 <FlexSpacer />
                 <FlexCell width="auto">
-                    <Button caption="Revert" onClick={ revert } isDisabled={ !isChanged } color="secondary" />
+                    <Button caption="Revert" onClick={ revert } isDisabled={ !isChanged } color="secondary" fill="outline" />
                 </FlexCell>
                 <FlexCell width="auto">
-                    <Button caption="Save" onClick={ save } color="accent" isDisabled={ !isChanged } />
+                    <Button caption="Save" onClick={ save } color="primary" isDisabled={ !isChanged } />
                 </FlexCell>
             </FlexRow>
             <FlexRow>

diff --git a/app/src/docs/panel/panelExamples.tsx b/app/src/docs/panel/panelExamples.tsx
@@ -78,8 +78,8 @@ export const childrenExamples = [
                 </FlexRow>
                 <ModalFooter borderTop>
                     <FlexSpacer />
-                    <Button caption="Cancel" onClick={ () => {} } color="secondary" />
-                    <Button caption="Ok" onClick={ () => {} } color="accent" fill="solid" />
+                    <Button caption="Cancel" onClick={ () => {} } color="secondary" fill="outline" />
+                    <Button caption="Ok" onClick={ () => {} } color="primary" fill="solid" />
                 </ModalFooter>
             </>
         ),

diff --git a/app/src/sandbox/scroll-spy/ScrollSpyModal.tsx b/app/src/sandbox/scroll-spy/ScrollSpyModal.tsx
@@ -26,9 +26,9 @@ export function ScrollSpyModal() {
                             </ScrollBars>
                             <ModalFooter>
                                 <FlexSpacer />
-                                <Button color="gray" fill="white" caption="Cancel" onClick={ () => modalProps.abort() } />
+                                <Button color="secondary" fill="white" caption="Cancel" onClick={ () => modalProps.abort() } />
                                 <Button
-                                    color="green"
+                                    color="primary"
                                     caption="Ok"
                                     onClick={ () => {
                                         scrollToElement('b');

diff --git a/uui-editor/src/plugins/imagePlugin/AddImageModal.tsx b/uui-editor/src/plugins/imagePlugin/AddImageModal.tsx
@@ -31,7 +31,7 @@ export function AddImageModal(props: AddImageModalProps): JSX.Element {
                 </FlexRow>
                 <ModalFooter borderTop>
                     <UploadFileToggler
-                        render={ (props) => <Button { ...props } caption="Select file" /> }
+                        render={ (props) => <Button color="primary" fill="outline" { ...props } caption="Select file" /> }
                         onFilesAdded={ (acceptedFiles: File[]) => {
                             const urlName = acceptedFiles.map(({ name }) => name).join('; ');
                             setImageURL(urlName);
@@ -40,9 +40,9 @@ export function AddImageModal(props: AddImageModalProps): JSX.Element {
                         accept="image/*"
                     />
                     <FlexSpacer />
-                    <Button color="secondary" caption="Cancel" onClick={ abort } />
+                    <Button color="secondary" fill="outline" caption="Cancel" onClick={ abort } />
                     <Button
-                        color="accent"
+                        color="primary"
                         caption="Ok"
                         isDisabled={ !imageURL }
                         onClick={ async () => {

diff --git a/uui-editor/src/plugins/linkPlugin/AddLinkModal.tsx b/uui-editor/src/plugins/linkPlugin/AddLinkModal.tsx
@@ -55,6 +55,7 @@ export function AddLinkModal({ editor, ...modalProps }: AddLinkModalProps) {
                     <FlexSpacer />
                     <Button
                         color="secondary"
+                        fill="outline"
                         caption="Delete"
                         onClick={ () => {
                             setLink('');
@@ -63,7 +64,7 @@ export function AddLinkModal({ editor, ...modalProps }: AddLinkModalProps) {
                         } }
                     />
                     <Button
-                        color="accent"
+                        color="primary"
                         caption="Save"
                         onClick={ () => {
                             upsertLink(editor, {

diff --git a/uui-editor/src/plugins/videoPlugin/AddVideoModal.tsx b/uui-editor/src/plugins/videoPlugin/AddVideoModal.tsx
@@ -70,9 +70,9 @@ export function AddVideoModal({ editor, success, abort, ...props }: AddVideoModa
                 </FlexRow>
                 <ModalFooter borderTop>
                     <FlexSpacer />
-                    <Button color="secondary" caption="Cancel" onClick={ () => abort() } />
+                    <Button color="secondary" fill="outline" caption="Cancel" onClick={ () => abort() } />
                     <Button
-                        color="accent"
+                        color="primary"
                         caption="Ok"
                         isDisabled={ !src }
                         onClick={ createVideoBlock }

diff --git a/uui/components/overlays/ConfirmationModal.tsx b/uui/components/overlays/ConfirmationModal.tsx
@@ -32,7 +32,7 @@ export class ConfirmationModal extends React.Component<ConfirmationModalWindowPr
                         {this.props.hideCancelButton || (
                             <Button caption={ i18n.form.modals.discardButton } onClick={ () => this.props.success(false) } fill="outline" color="secondary" />
                         )}
-                        <Button caption={ i18n.form.modals.saveButton } onClick={ () => this.props.success(true) } color="accent" />
+                        <Button caption={ i18n.form.modals.saveButton } onClick={ () => this.props.success(true) } color="primary" />
                     </ModalFooter>
                 </ModalWindow>
             </ModalBlocker>

diff --git a/uui/components/overlays/__tests__/__snapshots__/ConfirmationModal.test.tsx.snap b/uui/components/overlays/__tests__/__snapshots__/ConfirmationModal.test.tsx.snap
@@ -163,7 +163,7 @@ exports[`ConfirmationModal should be rendered correctly 1`] = `
         </div>
       </button>
       <button
-        className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-solid uui-color-accent uui-size-36"
+        className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-solid uui-color-primary uui-size-36"
         onClick={[Function]}
         tabIndex={0}
         type="button"
@@ -334,7 +334,7 @@ exports[`ConfirmationModal should be rendered correctly without body 1`] = `
         </div>
       </button>
       <button
-        className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-solid uui-color-accent uui-size-36"
+        className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-solid uui-color-primary uui-size-36"
         onClick={[Function]}
         tabIndex={0}
         type="button"

diff --git a/uui/components/pickers/PickerModal.tsx b/uui/components/pickers/PickerModal.tsx
@@ -90,7 +90,7 @@ export function PickerModal<TItem, TId>(props: PickerModalProps<TItem, TId>) {
                 )}
                 <FlexSpacer />
                 <Button fill="outline" color="secondary" caption={ i18n.pickerModal.cancelButton } onClick={ () => props.abort() } />
-                <Button color="accent" caption={ i18n.pickerModal.selectButton } onClick={ () => props.success(selection as any) } />
+                <Button color="primary" caption={ i18n.pickerModal.selectButton } onClick={ () => props.success(selection as any) } />
             </>
         );
     };

diff --git a/uui/components/pickers/__tests__/__snapshots__/PickerList.test.tsx.snap b/uui/components/pickers/__tests__/__snapshots__/PickerList.test.tsx.snap
@@ -762,7 +762,7 @@ exports[`PickerList should open body 1`] = `
             </div>
           </button>
           <button
-            class="uui-button-box uui-enabled -clickable container root uui-button uui-fill-solid uui-color-accent uui-size-36"
+            class="uui-button-box uui-enabled -clickable container root uui-button uui-fill-solid uui-color-primary uui-size-36"
             tabindex="0"
             type="button"
           >

diff --git a/uui/components/pickers/__tests__/__snapshots__/PickerModal.test.tsx.snap b/uui/components/pickers/__tests__/__snapshots__/PickerModal.test.tsx.snap
@@ -415,7 +415,7 @@ exports[`PickerModal should be rendered correctly 1`] = `
         </div>
       </button>
       <button
-        className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-solid uui-color-accent uui-size-36"
+        className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-solid uui-color-primary uui-size-36"
         onClick={[Function]}
         tabIndex={0}
         type="button"
@@ -1796,7 +1796,7 @@ exports[`PickerModal should be rendered correctly with maximum props 1`] = `
         </div>
       </button>
       <button
-        className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-solid uui-color-accent uui-size-36"
+        className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-solid uui-color-primary uui-size-36"
         onClick={[Function]}
         tabIndex={0}
         type="button"
@@ -2048,7 +2048,7 @@ exports[`PickerModal should open body 1`] = `
             </div>
           </button>
           <button
-            class="uui-button-box uui-enabled -clickable container root uui-button uui-fill-solid uui-color-accent uui-size-36"
+            class="uui-button-box uui-enabled -clickable container root uui-button uui-fill-solid uui-color-primary uui-size-36"
             tabindex="0"
             type="button"
           >