feat(plasma-b2c, plasma-web): Modal refinement #629

kayman233 · 2023-07-25T13:15:13Z

Добавлены новые свойства для компонента Modal:

сloseOnEsc?: boolean - Закрывать модальное окно при нажатии на ESC(по умолчанию true).
сloseOnOverlayClick?: boolean - Закрывать модальное окно при нажатии вне области модального окна(по умолчанию true).
onEscKeyDown?: (event: KeyboardEvent) => void - Обработчик клика при нажатии на ESC(если не передан, то при нажатии используется onClose).
onOverlayClick?: (event: React.MouseEvent<HTMLDivElement>) => void - Обработчик клика при нажатии вне области модального окна(если не передан, то при нажатии используется onClose).
initialFocusRef?: React.RefObject<HTMLElement> - Первый элемент для фокуса внутри модального окна.
focusLaterRef?: React.RefObject<HTMLElement> - Элемент для фокуса после закрытия модального окна(по умолчанию фокус на последнем перед открытием активном элементе).
showCloseButton?: boolean - Отображать кнопку "закрыть"(по умолчанию true).

🐤 Download canary assets:

color

color_plasma_b2c_ios-swift--canary.629.5736515470.swift
color_plasma_b2c_kotlin--canary.629.5736515470.kt
color_plasma_b2c_react-native--canary.629.5736515470.ts
color_plasma_b2c_xml--canary.629.5736515470.xml
color_sberHealth_ios-swift--canary.629.5736515470.swift
color_sberHealth_kotlin--canary.629.5736515470.kt
color_sberHealth_react-native--canary.629.5736515470.ts
color_sberHealth_xml--canary.629.5736515470.xml
color_sbermarket_business_ios-swift--canary.629.5736515470.swift
color_sbermarket_business_kotlin--canary.629.5736515470.kt
color_sbermarket_business_react-native--canary.629.5736515470.ts
color_sbermarket_business_xml--canary.629.5736515470.xml
color_sbermarket_ios-swift--canary.629.5736515470.swift
color_sbermarket_kotlin--canary.629.5736515470.kt
color_sbermarket_metro_ios-swift--canary.629.5736515470.swift
color_sbermarket_metro_kotlin--canary.629.5736515470.kt
color_sbermarket_metro_react-native--canary.629.5736515470.ts
color_sbermarket_metro_xml--canary.629.5736515470.xml
color_sbermarket_react-native--canary.629.5736515470.ts
color_sbermarket_selgros_ios-swift--canary.629.5736515470.swift
color_sbermarket_selgros_kotlin--canary.629.5736515470.kt
color_sbermarket_selgros_react-native--canary.629.5736515470.ts
color_sbermarket_selgros_xml--canary.629.5736515470.xml
color_sbermarket_wlbusiness_ios-swift--canary.629.5736515470.swift
color_sbermarket_wlbusiness_kotlin--canary.629.5736515470.kt
color_sbermarket_wlbusiness_react-native--canary.629.5736515470.ts
color_sbermarket_wlbusiness_xml--canary.629.5736515470.xml
color_sbermarket_xml--canary.629.5736515470.xml
color_sberonline_ios-swift--canary.629.5736515470.swift
color_sberonline_kotlin--canary.629.5736515470.kt
color_sberonline_react-native--canary.629.5736515470.ts
color_sberonline_xml--canary.629.5736515470.xml
color_sberprime_ios-swift--canary.629.5736515470.swift
color_sberprime_kotlin--canary.629.5736515470.kt
color_sberprime_react-native--canary.629.5736515470.ts
color_sberprime_xml--canary.629.5736515470.xml
color_stylesSalute_ios-swift--canary.629.5736515470.swift
color_stylesSalute_kotlin--canary.629.5736515470.kt
color_stylesSalute_react-native--canary.629.5736515470.ts
color_stylesSalute_xml--canary.629.5736515470.xml

shadow

shadow_plasma_b2c_react-native--canary.629.5736515470.ts
shadow_sberHealth_react-native--canary.629.5736515470.ts
shadow_sbermarket_business_react-native--canary.629.5736515470.ts
shadow_sbermarket_metro_react-native--canary.629.5736515470.ts
shadow_sbermarket_react-native--canary.629.5736515470.ts
shadow_sbermarket_selgros_react-native--canary.629.5736515470.ts
shadow_sbermarket_wlbusiness_react-native--canary.629.5736515470.ts
shadow_sberonline_react-native--canary.629.5736515470.ts
shadow_sberprime_react-native--canary.629.5736515470.ts
shadow_stylesSalute_react-native--canary.629.5736515470.ts

typo

typo_mage_ios-swift--canary.629.5736515470.swift
typo_mage_kotlin--canary.629.5736515470.kt
typo_mage_react-native--canary.629.5736515470.ts
typo_plasma_ios-swift--canary.629.5736515470.swift
typo_plasma_kotlin--canary.629.5736515470.kt
typo_plasma_react-native--canary.629.5736515470.ts
typo_ruler_ios-swift--canary.629.5736515470.swift
typo_ruler_kotlin--canary.629.5736515470.kt
typo_ruler_react-native--canary.629.5736515470.ts
typo_sage_ios-swift--canary.629.5736515470.swift
typo_sage_kotlin--canary.629.5736515470.kt
typo_sage_react-native--canary.629.5736515470.ts
typo_sbermarket_ios-swift--canary.629.5736515470.swift
typo_sbermarket_kotlin--canary.629.5736515470.kt
typo_sbermarket_react-native--canary.629.5736515470.ts
typo_soulmate_ios-swift--canary.629.5736515470.swift
typo_soulmate_kotlin--canary.629.5736515470.kt
typo_soulmate_react-native--canary.629.5736515470.ts

📦 Published PR as canary version: Canary Versions

✨ Test out this PR locally via:

npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
# or 
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]

Salute-Eva · 2023-07-25T13:17:16Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-629/

Salute-Eva · 2023-07-25T13:26:34Z

Documentation preview deployed!

website: http://plasma.sberdevices.ru/pr/pr-629/
b2c storybook: http://plasma.sberdevices.ru/pr/pr-629/b2c-storybook/
web storybook: http://plasma.sberdevices.ru/pr/pr-629/web-storybook/

Salute-Eva · 2023-07-25T13:53:00Z

Component performance testing

Result: 🟢 Success

Check out report in job artifacts!

Salute-Eva · 2023-07-26T08:46:15Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-629/

Salute-Eva · 2023-07-26T08:56:51Z

Documentation preview deployed!

website: http://plasma.sberdevices.ru/pr/pr-629/
b2c storybook: http://plasma.sberdevices.ru/pr/pr-629/b2c-storybook/
web storybook: http://plasma.sberdevices.ru/pr/pr-629/web-storybook/

Salute-Eva · 2023-07-26T09:19:45Z

Component performance testing

Result: 🟢 Success

Check out report in job artifacts!

Salute-Eva · 2023-07-26T09:46:31Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-629/

Salute-Eva · 2023-07-26T09:53:45Z

Documentation preview deployed!

website: http://plasma.sberdevices.ru/pr/pr-629/
b2c storybook: http://plasma.sberdevices.ru/pr/pr-629/b2c-storybook/
web storybook: http://plasma.sberdevices.ru/pr/pr-629/web-storybook/

Salute-Eva · 2023-07-26T10:21:23Z

Component performance testing

Result: 🟢 Success

Check out report in job artifacts!

packages/plasma-hope/src/hooks/useFocusTrap.ts

packages/plasma-hope/src/utils/focusManager.ts

Salute-Eva · 2023-07-27T07:09:02Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-629/

Salute-Eva · 2023-07-27T07:17:27Z

Documentation preview deployed!

website: http://plasma.sberdevices.ru/pr/pr-629/
b2c storybook: http://plasma.sberdevices.ru/pr/pr-629/b2c-storybook/
web storybook: http://plasma.sberdevices.ru/pr/pr-629/web-storybook/

Salute-Eva · 2023-07-27T07:44:14Z

Component performance testing

Result: 🟢 Success

Check out report in job artifacts!

packages/plasma-hope/src/components/Modal/Modal.tsx

packages/plasma-hope/src/components/Modal/ModalView.tsx

packages/plasma-hope/src/hooks/useFocusTrap.ts

Salute-Eva · 2023-07-31T07:27:37Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-629/

Salute-Eva · 2023-07-31T07:45:15Z

Documentation preview deployed!

website: http://plasma.sberdevices.ru/pr/pr-629/
b2c storybook: http://plasma.sberdevices.ru/pr/pr-629/b2c-storybook/
web storybook: http://plasma.sberdevices.ru/pr/pr-629/web-storybook/

Salute-Eva · 2023-07-31T08:07:55Z

Component performance testing

Result: 🟢 Success

Check out report in job artifacts!

Yeti-or · 2023-08-01T09:27:46Z

packages/plasma-hope/api/plasma-hope.api.md

+    focusLaterRef?: React_2.RefObject<HTMLElement>;
+    initialFocusRef?: React_2.RefObject<HTMLElement>;
+    isCloseOnEsc?: boolean;
+    isCloseOnOverlayClick?: boolean;


если честно мне не нравится писать через is
почему не просто
closeOnEsc?

у нас много мест где написано через is ?

ну кстати да, в данном случае наверное без is лучше

Yeti-or · 2023-08-01T09:28:22Z

packages/plasma-hope/api/plasma-hope.api.md

@@ -906,7 +907,13 @@ export const Modal: FC<ModalProps>;

 // @public (undocumented)
 export interface ModalProps extends ModalViewProps {
+    focusLaterRef?: React_2.RefObject<HTMLElement>;


focusLater тоже звучит странно

ну у меня в голове были еще focusAfter или focusAfterClose

Yeti-or · 2023-08-01T09:29:08Z

packages/plasma-hope/api/plasma-hope.api.md

@@ -923,6 +930,7 @@ export interface ModalViewProps extends React_2.HTMLAttributes<HTMLDivElement> {
    children?: React_2.ReactNode;
    closeButtonAriaLabel?: string;
    onClose?: () => void;
+    showCloseIcon?: boolean;


тут же унас не isShowCloseIcon
и почему icon ? именно в иконке дело ?

сделал showCloseButton, так кажется получше

Yeti-or · 2023-08-01T09:30:18Z

packages/plasma-hope/src/utils/focusManager.ts

@@ -25,8 +25,10 @@ export class FocusManager {
    };

    // добавление на фокус после анмаунта
-    public markForFocusLater = () => {
-        this.focusLaterElements.push(document.activeElement as HTMLElement);
+    public markForFocusLater = (focusLaterNode?: React.RefObject<HTMLElement>) => {


focusLater это уже в API focus-trap ?

да, ну логику focus-trap расширили

Salute-Eva · 2023-08-01T20:54:57Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-629/

Salute-Eva · 2023-08-01T21:04:34Z

Documentation preview deployed!

website: http://plasma.sberdevices.ru/pr/pr-629/
b2c storybook: http://plasma.sberdevices.ru/pr/pr-629/b2c-storybook/
web storybook: http://plasma.sberdevices.ru/pr/pr-629/web-storybook/

Salute-Eva · 2023-08-01T21:33:14Z

Component performance testing

Result: 🟢 Success

Check out report in job artifacts!

Salute-Eva · 2023-08-02T08:24:12Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-629/

Salute-Eva · 2023-08-02T08:28:21Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-629/

Salute-Eva · 2023-08-02T08:36:41Z

Documentation preview deployed!

website: http://plasma.sberdevices.ru/pr/pr-629/
b2c storybook: http://plasma.sberdevices.ru/pr/pr-629/b2c-storybook/
web storybook: http://plasma.sberdevices.ru/pr/pr-629/web-storybook/

Salute-Eva · 2023-08-02T09:11:32Z

Component performance testing

Result: 🟢 Success

Check out report in job artifacts!

Salute-Eva · 2023-08-03T13:48:47Z

Salute-Eva · 2023-08-03T13:48:56Z

kayman233 force-pushed the kayman233/modal-new-feats.PLASMA-1820 branch from 0f3659c to 347ca6b Compare July 26, 2023 08:43

kayman233 force-pushed the kayman233/modal-new-feats.PLASMA-1820 branch from 347ca6b to b535015 Compare July 26, 2023 09:44

kayman233 marked this pull request as ready for review July 26, 2023 10:46

kayman233 requested review from Yeti-or, neretin-trike and Yakutoc as code owners July 26, 2023 10:46

Yakutoc reviewed Jul 27, 2023

View reviewed changes

packages/plasma-hope/src/hooks/useFocusTrap.ts Outdated Show resolved Hide resolved

Yakutoc reviewed Jul 27, 2023

View reviewed changes

packages/plasma-hope/src/utils/focusManager.ts Outdated Show resolved Hide resolved

kayman233 force-pushed the kayman233/modal-new-feats.PLASMA-1820 branch from b535015 to 951f5c1 Compare July 27, 2023 07:07

Yakutoc approved these changes Jul 28, 2023

View reviewed changes

neretin-trike reviewed Jul 31, 2023

View reviewed changes

packages/plasma-hope/src/components/Modal/Modal.tsx Outdated Show resolved Hide resolved

neretin-trike reviewed Jul 31, 2023

View reviewed changes

packages/plasma-hope/src/components/Modal/Modal.tsx Outdated Show resolved Hide resolved

neretin-trike reviewed Jul 31, 2023

View reviewed changes

packages/plasma-hope/src/components/Modal/ModalView.tsx Outdated Show resolved Hide resolved

neretin-trike reviewed Jul 31, 2023

View reviewed changes

packages/plasma-hope/src/hooks/useFocusTrap.ts Show resolved Hide resolved

kayman233 force-pushed the kayman233/modal-new-feats.PLASMA-1820 branch from 951f5c1 to 8049ce4 Compare July 31, 2023 07:25

neretin-trike approved these changes Jul 31, 2023

View reviewed changes

Yeti-or reviewed Aug 1, 2023

View reviewed changes

kayman233 force-pushed the kayman233/modal-new-feats.PLASMA-1820 branch from 8049ce4 to 5c3a7e1 Compare August 1, 2023 20:52

feat(plasma-hope): useFocusTrap focusAfterNode added

51131bc

kayman233 force-pushed the kayman233/modal-new-feats.PLASMA-1820 branch from 5c3a7e1 to 1677f30 Compare August 2, 2023 08:21

feat(plasma-b2c, plasma-web): Modal refinement

6d52dd0

kayman233 force-pushed the kayman233/modal-new-feats.PLASMA-1820 branch from 1677f30 to 6d52dd0 Compare August 2, 2023 08:26

Yeti-or approved these changes Aug 2, 2023

View reviewed changes

kayman233 added this pull request to the merge queue Aug 2, 2023

Merged via the queue into dev with commit d912390 Aug 2, 2023

kayman233 deleted the kayman233/modal-new-feats.PLASMA-1820 branch August 2, 2023 13:47

Salute-Eva added the released label Aug 3, 2023

Salute-Eva mentioned this pull request Jan 18, 2024

Release by 18.01.2024 #972

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(plasma-b2c, plasma-web): Modal refinement #629

feat(plasma-b2c, plasma-web): Modal refinement #629

kayman233 commented Jul 25, 2023 •

edited by Salute-Eva

Loading

Salute-Eva commented Jul 25, 2023

Salute-Eva commented Jul 25, 2023

Salute-Eva commented Jul 25, 2023

Salute-Eva commented Jul 26, 2023

Salute-Eva commented Jul 26, 2023

Salute-Eva commented Jul 26, 2023

Salute-Eva commented Jul 26, 2023

Salute-Eva commented Jul 26, 2023

Salute-Eva commented Jul 26, 2023

Salute-Eva commented Jul 27, 2023

Salute-Eva commented Jul 27, 2023

Salute-Eva commented Jul 27, 2023

Salute-Eva commented Jul 31, 2023

Salute-Eva commented Jul 31, 2023

Salute-Eva commented Jul 31, 2023

Yeti-or Aug 1, 2023

kayman233 Aug 1, 2023

Yeti-or Aug 1, 2023

kayman233 Aug 1, 2023

Yeti-or Aug 1, 2023

kayman233 Aug 1, 2023

Yeti-or Aug 1, 2023

kayman233 Aug 1, 2023

Salute-Eva commented Aug 1, 2023

Salute-Eva commented Aug 1, 2023

Salute-Eva commented Aug 1, 2023

Salute-Eva commented Aug 2, 2023

Salute-Eva commented Aug 2, 2023

Salute-Eva commented Aug 2, 2023

Salute-Eva commented Aug 2, 2023

Salute-Eva commented Aug 3, 2023

Salute-Eva commented Aug 3, 2023

feat(plasma-b2c, plasma-web): Modal refinement #629

feat(plasma-b2c, plasma-web): Modal refinement #629

Conversation

kayman233 commented Jul 25, 2023 • edited by Salute-Eva Loading

Salute-Eva commented Jul 25, 2023

Salute-Eva commented Jul 25, 2023

Salute-Eva commented Jul 25, 2023

Salute-Eva commented Jul 26, 2023

Salute-Eva commented Jul 26, 2023

Salute-Eva commented Jul 26, 2023

Salute-Eva commented Jul 26, 2023

Salute-Eva commented Jul 26, 2023

Salute-Eva commented Jul 26, 2023

Salute-Eva commented Jul 27, 2023

Salute-Eva commented Jul 27, 2023

Salute-Eva commented Jul 27, 2023

Salute-Eva commented Jul 31, 2023

Salute-Eva commented Jul 31, 2023

Salute-Eva commented Jul 31, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Salute-Eva commented Aug 1, 2023

Salute-Eva commented Aug 1, 2023

Salute-Eva commented Aug 1, 2023

Salute-Eva commented Aug 2, 2023

Salute-Eva commented Aug 2, 2023

Salute-Eva commented Aug 2, 2023

Salute-Eva commented Aug 2, 2023

Salute-Eva commented Aug 3, 2023

Salute-Eva commented Aug 3, 2023

kayman233 commented Jul 25, 2023 •

edited by Salute-Eva

Loading