feat(plasma-core, plasma-web, plasma-b2c): ModalBase component #774

kayman233 · 2023-09-26T10:27:32Z

Реализован компонент ModalBase, сделанный на основе PopupBase, который сохраняет все его свойства(исключая frame), но также добавляет:

withBlur?: boolean - Нужно ли применять blur для подложки.
с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).

Также добавлено поле overlay?: React.ReactNode для PopupBase.

🐤 Download canary assets:

borderRadius

borderRadius_default_react-native--canary.774.6352872831.ts
borderRadius_plasma_b2c_react-native--canary.774.6352872831.ts
borderRadius_plasma_web_react-native--canary.774.6352872831.ts
borderRadius_sberHealth_react-native--canary.774.6352872831.ts
borderRadius_sbermarket_business_react-native--canary.774.6352872831.ts
borderRadius_sbermarket_metro_react-native--canary.774.6352872831.ts
borderRadius_sbermarket_react-native--canary.774.6352872831.ts
borderRadius_sbermarket_selgros_react-native--canary.774.6352872831.ts
borderRadius_sbermarket_wlbusiness_react-native--canary.774.6352872831.ts
borderRadius_sberonline_react-native--canary.774.6352872831.ts
borderRadius_sberprime_react-native--canary.774.6352872831.ts
borderRadius_stylesSalute_react-native--canary.774.6352872831.ts

color

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

shadow

shadow_default_react-native--canary.774.6352872831.ts
shadow_plasma_b2c_react-native--canary.774.6352872831.ts
shadow_plasma_web_react-native--canary.774.6352872831.ts
shadow_sberHealth_react-native--canary.774.6352872831.ts
shadow_sbermarket_business_react-native--canary.774.6352872831.ts
shadow_sbermarket_metro_react-native--canary.774.6352872831.ts
shadow_sbermarket_react-native--canary.774.6352872831.ts
shadow_sbermarket_selgros_react-native--canary.774.6352872831.ts
shadow_sbermarket_wlbusiness_react-native--canary.774.6352872831.ts
shadow_sberonline_react-native--canary.774.6352872831.ts
shadow_sberprime_react-native--canary.774.6352872831.ts
shadow_stylesSalute_react-native--canary.774.6352872831.ts

spacing

spacing_default_react-native--canary.774.6352872831.ts
spacing_plasma_b2c_react-native--canary.774.6352872831.ts
spacing_plasma_web_react-native--canary.774.6352872831.ts
spacing_sberHealth_react-native--canary.774.6352872831.ts
spacing_sbermarket_business_react-native--canary.774.6352872831.ts
spacing_sbermarket_metro_react-native--canary.774.6352872831.ts
spacing_sbermarket_react-native--canary.774.6352872831.ts
spacing_sbermarket_selgros_react-native--canary.774.6352872831.ts
spacing_sbermarket_wlbusiness_react-native--canary.774.6352872831.ts
spacing_sberonline_react-native--canary.774.6352872831.ts
spacing_sberprime_react-native--canary.774.6352872831.ts
spacing_stylesSalute_react-native--canary.774.6352872831.ts

typo

typo_mage_ios-swift--canary.774.6352872831.swift
typo_mage_kotlin--canary.774.6352872831.kt
typo_mage_react-native--canary.774.6352872831.ts
typo_plasma_ios-swift--canary.774.6352872831.swift
typo_plasma_kotlin--canary.774.6352872831.kt
typo_plasma_react-native--canary.774.6352872831.ts
typo_ruler_ios-swift--canary.774.6352872831.swift
typo_ruler_kotlin--canary.774.6352872831.kt
typo_ruler_react-native--canary.774.6352872831.ts
typo_sage_ios-swift--canary.774.6352872831.swift
typo_sage_kotlin--canary.774.6352872831.kt
typo_sage_react-native--canary.774.6352872831.ts
typo_sbermarket_ios-swift--canary.774.6352872831.swift
typo_sbermarket_kotlin--canary.774.6352872831.kt
typo_sbermarket_react-native--canary.774.6352872831.ts
typo_soulmate_ios-swift--canary.774.6352872831.swift
typo_soulmate_kotlin--canary.774.6352872831.kt
typo_soulmate_react-native--canary.774.6352872831.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]
# 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]

Version

Published prerelease version: @salutejs/[email protected]
@salutejs/[email protected]
@salutejs/[email protected]
@salutejs/[email protected]
@salutejs/[email protected]
@salutejs/[email protected]
@salutejs/[email protected]
@salutejs/[email protected]
@salutejs/[email protected]
@salutejs/[email protected]
@salutejs/[email protected]
@salutejs/[email protected]
@salutejs/[email protected]
@salutejs/[email protected]
@salutejs/[email protected]

Changelog

🐛 Bug Fix

@salutejs/plasma-b2c, @salutejs/plasma-core, @salutejs/plasma-hope, @salutejs/plasma-web
- fix(plasma-core): refactor in PopupBase/ModalBase #774 (@kayman233)
- feat(plasma-core, plasma-web, plasma-b2c): ModalBase component #774 (@kayman233)
@salutejs/plasma-new-hope
- chore(plasma-new-hope): remove plasma-old theme #782 (@Yeti-or)
- chore(plasma-new-hope): add sds_engineer theme #782 (@Yeti-or)

Authors: 2

@kayman233
Vasiliy (@Yeti-or)

Salute-Eva · 2023-09-26T10:30:34Z

Theme Builder app deployed!

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

Salute-Eva · 2023-09-26T10:53:34Z

Documentation preview deployed!

website: http://plasma.sberdevices.ru/pr/pr-774/
b2c storybook: http://plasma.sberdevices.ru/pr/pr-774/b2c-storybook/
web storybook: http://plasma.sberdevices.ru/pr/pr-774/web-storybook/
ui storybook: http://plasma.sberdevices.ru/pr/pr-774/ui-storybook/
temple storybook: http://plasma.sberdevices.ru/pr/pr-774/temple-storybook/

Salute-Eva · 2023-09-26T11:07:25Z

Component performance testing

Result: 🟢 Success

Check out report in job artifacts!

Salute-Eva · 2023-09-26T11:29:38Z

Theme Builder app deployed!

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

Salute-Eva · 2023-09-26T11:43:48Z

Component performance testing

Result: 🟢 Success

Check out report in job artifacts!

Salute-Eva · 2023-09-26T11:46:28Z

Documentation preview deployed!

website: http://plasma.sberdevices.ru/pr/pr-774/
b2c storybook: http://plasma.sberdevices.ru/pr/pr-774/b2c-storybook/
web storybook: http://plasma.sberdevices.ru/pr/pr-774/web-storybook/
ui storybook: http://plasma.sberdevices.ru/pr/pr-774/ui-storybook/
temple storybook: http://plasma.sberdevices.ru/pr/pr-774/temple-storybook/

Salute-Eva · 2023-09-26T12:35:45Z

Theme Builder app deployed!

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

Salute-Eva · 2023-09-26T12:48:25Z

Component performance testing

Result: 🟢 Success

Check out report in job artifacts!

Salute-Eva · 2023-09-26T12:56:35Z

Documentation preview deployed!

website: http://plasma.sberdevices.ru/pr/pr-774/
b2c storybook: http://plasma.sberdevices.ru/pr/pr-774/b2c-storybook/
web storybook: http://plasma.sberdevices.ru/pr/pr-774/web-storybook/
ui storybook: http://plasma.sberdevices.ru/pr/pr-774/ui-storybook/
temple storybook: http://plasma.sberdevices.ru/pr/pr-774/temple-storybook/

Salute-Eva · 2023-09-26T13:02:02Z

Theme Builder app deployed!

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

Salute-Eva · 2023-09-26T13:12:08Z

Component performance testing

Result: 🟢 Success

Check out report in job artifacts!

Salute-Eva · 2023-09-26T13:18:17Z

Documentation preview deployed!

website: http://plasma.sberdevices.ru/pr/pr-774/
b2c storybook: http://plasma.sberdevices.ru/pr/pr-774/b2c-storybook/
web storybook: http://plasma.sberdevices.ru/pr/pr-774/web-storybook/
ui storybook: http://plasma.sberdevices.ru/pr/pr-774/ui-storybook/
temple storybook: http://plasma.sberdevices.ru/pr/pr-774/temple-storybook/

packages/plasma-core/src/components/ModalBase/ModalBase.tsx

packages/plasma-core/src/components/PopupBase/PopupBaseContext.tsx

Salute-Eva · 2023-09-27T18:28:04Z

Theme Builder app deployed!

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

Yeti-or

Можно ребебейз то я уже плыву в одинаковых изменениях после radiobox/lcheckobxo/link/...

packages/plasma-b2c/src/components/ModalBase/ModalBase.stories.tsx

kayman233 · 2023-09-27T18:38:41Z

Можно ребебейз то я уже плыву в одинаковых изменениях после radiobox/lcheckobxo/link/...

вот отребейзил, мб надо обновить страницу

Salute-Eva · 2023-09-27T18:44:08Z

Documentation preview deployed!

website: http://plasma.sberdevices.ru/pr/pr-774/
b2c storybook: http://plasma.sberdevices.ru/pr/pr-774/b2c-storybook/
web storybook: http://plasma.sberdevices.ru/pr/pr-774/web-storybook/
ui storybook: http://plasma.sberdevices.ru/pr/pr-774/ui-storybook/
temple storybook: http://plasma.sberdevices.ru/pr/pr-774/temple-storybook/

Salute-Eva · 2023-09-27T19:27:48Z

Component performance testing

Result: 🔴 Fail

Check out report in job artifacts!

Top 5 significant rerender changes:
packages/plasma-ui/src/components/Pickers/Pickers.perftest.tsx#DatePicker: 5325.91%

Salute-Eva · 2023-09-28T03:18:22Z

Component performance testing

Result: 🟢 Success

Check out report in job artifacts!

Salute-Eva · 2023-09-28T11:09:35Z

Theme Builder app deployed!

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

Salute-Eva · 2023-09-28T11:26:08Z

Documentation preview deployed!

website: http://plasma.sberdevices.ru/pr/pr-774/
b2c storybook: http://plasma.sberdevices.ru/pr/pr-774/b2c-storybook/
web storybook: http://plasma.sberdevices.ru/pr/pr-774/web-storybook/
ui storybook: http://plasma.sberdevices.ru/pr/pr-774/ui-storybook/
temple storybook: http://plasma.sberdevices.ru/pr/pr-774/temple-storybook/

Salute-Eva · 2023-09-28T11:46:23Z

Component performance testing

Result: 🟢 Success

Check out report in job artifacts!

packages/plasma-core/src/components/ModalBase/ModalBaseContext.tsx

+ */
+const getLastModal = (items: ModalInfo[]) => {
+    const modals = items.filter((item: ModalInfo) => item?.info?.isModal);
+    const lastModal = modals && (modals[modals.length - 1] as ModalInfo);


Salute-Eva · 2023-09-29T14:20:51Z

Theme Builder app deployed!

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

Salute-Eva · 2023-09-29T14:34:05Z

Component performance testing

Result: 🟢 Success

Check out report in job artifacts!

Salute-Eva · 2023-09-29T14:39:57Z

Documentation preview deployed!

website: http://plasma.sberdevices.ru/pr/pr-774/
b2c storybook: http://plasma.sberdevices.ru/pr/pr-774/b2c-storybook/
web storybook: http://plasma.sberdevices.ru/pr/pr-774/web-storybook/
ui storybook: http://plasma.sberdevices.ru/pr/pr-774/ui-storybook/
temple storybook: http://plasma.sberdevices.ru/pr/pr-774/temple-storybook/

packages/plasma-core/src/components/ModalBase/ModalBase.tsx

Yeti-or · 2023-09-29T14:53:35Z

packages/plasma-core/src/components/ModalBase/ModalBase.tsx

+                popupInfo={modalInfo}
+                overlay={
+                    <StyledOverlay
+                        transparent={getIdLastModal(popupController.items) !== innerId}


типа один только оверлей оставляем ?

не очень понял вопрос. Просто теперь еще его можем прокидывать

а, про транспарент. Да, типо только самый верхний оверлей виден

Salute-Eva · 2023-09-29T16:00:05Z

🚀 This PR is included in version: @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected] 🚀

Salute-Eva · 2023-09-29T16:00:11Z

🚀 This PR is included in version: @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected] 🚀

Yakutoc added the plasma-web label Sep 26, 2023

kayman233 force-pushed the kayman233/modal-base.PLASMA-2070 branch from f71ea01 to 3b4f15d Compare September 26, 2023 11:18

kayman233 force-pushed the kayman233/modal-base.PLASMA-2070 branch from 3b4f15d to 6940969 Compare September 26, 2023 12:32

kayman233 force-pushed the kayman233/modal-base.PLASMA-2070 branch from 6940969 to 507f435 Compare September 26, 2023 12:58

kayman233 marked this pull request as ready for review September 26, 2023 12:59

kayman233 requested review from Yeti-or, neretin-trike and Yakutoc as code owners September 26, 2023 12:59

Yakutoc reviewed Sep 27, 2023

View reviewed changes

packages/plasma-core/src/components/ModalBase/ModalBase.tsx Show resolved Hide resolved

Yakutoc approved these changes Sep 27, 2023

View reviewed changes

kayman233 force-pushed the kayman233/modal-base.PLASMA-2070 branch from 507f435 to 63cfdf7 Compare September 27, 2023 18:24

github-advanced-security bot found potential problems Sep 27, 2023

View reviewed changes

packages/plasma-core/src/components/PopupBase/PopupBaseContext.tsx Fixed Show fixed Hide fixed

Yeti-or reviewed Sep 27, 2023

View reviewed changes

packages/plasma-b2c/src/components/ModalBase/ModalBase.stories.tsx Show resolved Hide resolved

kayman233 requested a review from Yeti-or September 28, 2023 12:33

Yakutoc force-pushed the dev branch from 61802c7 to 0a93781 Compare September 29, 2023 05:09

Yakutoc requested a review from LamaEats as a code owner September 29, 2023 05:09

kayman233 added 2 commits September 29, 2023 16:52

feat(plasma-core, plasma-web, plasma-b2c): ModalBase component

fe9656e

fix(plasma-core): refactor in PopupBase/ModalBase

e052d20

kayman233 force-pushed the kayman233/modal-base.PLASMA-2070 branch from b9b15b3 to e052d20 Compare September 29, 2023 14:16

github-advanced-security bot found potential problems Sep 29, 2023

View reviewed changes

LamaEats approved these changes Sep 29, 2023

View reviewed changes

Yeti-or approved these changes Sep 29, 2023

View reviewed changes

kayman233 added this pull request to the merge queue Sep 29, 2023

Merged via the queue into dev with commit 9eb47ae Sep 29, 2023
23 of 24 checks passed

kayman233 deleted the kayman233/modal-base.PLASMA-2070 branch September 29, 2023 15:20

Salute-Eva added the prerelease label Sep 29, 2023

This was referenced Oct 3, 2023

fix(plasma-web-docs): Remove button blur prop from component & docs #785

Merged

fix(plasma-ui): change sheet-handler color #786

Merged

fix(plasma-new-hope): Fix RC version for update #800

Merged

plasma-b2c: Fix typo in package.json #803

Merged

This was referenced Oct 12, 2023

feat(plasma-new-hope/b2c/web/core): Add Popover to new hope #791

Merged

feat(plasma-new-hope): Add core Tabs component #783

Merged

fix(plasma-hope/docs): update react file drop & fix docs #812

Merged

Salute-Eva mentioned this pull request Oct 19, 2023

feat(plasma-ui): add placement for Confirm #787

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(plasma-core, plasma-web, plasma-b2c): ModalBase component #774

feat(plasma-core, plasma-web, plasma-b2c): ModalBase component #774

kayman233 commented Sep 26, 2023 •

edited by Salute-Eva

Loading

Salute-Eva commented Sep 26, 2023

Salute-Eva commented Sep 26, 2023

Salute-Eva commented Sep 26, 2023

Salute-Eva commented Sep 26, 2023

Salute-Eva commented Sep 26, 2023

Salute-Eva commented Sep 26, 2023

Salute-Eva commented Sep 26, 2023

Salute-Eva commented Sep 26, 2023

Salute-Eva commented Sep 26, 2023

Salute-Eva commented Sep 26, 2023

Salute-Eva commented Sep 26, 2023

Salute-Eva commented Sep 26, 2023

Salute-Eva commented Sep 27, 2023

Yeti-or left a comment

kayman233 commented Sep 27, 2023

Salute-Eva commented Sep 27, 2023

Salute-Eva commented Sep 27, 2023

Salute-Eva commented Sep 28, 2023

Salute-Eva commented Sep 28, 2023

Salute-Eva commented Sep 28, 2023

Salute-Eva commented Sep 28, 2023

Salute-Eva commented Sep 29, 2023

Salute-Eva commented Sep 29, 2023

Salute-Eva commented Sep 29, 2023

Yeti-or Sep 29, 2023

kayman233 Sep 29, 2023

kayman233 Sep 29, 2023

Salute-Eva commented Sep 29, 2023

Salute-Eva commented Sep 29, 2023

feat(plasma-core, plasma-web, plasma-b2c): ModalBase component #774

feat(plasma-core, plasma-web, plasma-b2c): ModalBase component #774

Conversation

kayman233 commented Sep 26, 2023 • edited by Salute-Eva Loading

Version

🐛 Bug Fix

Authors: 2

Salute-Eva commented Sep 26, 2023

Salute-Eva commented Sep 26, 2023

Salute-Eva commented Sep 26, 2023

Salute-Eva commented Sep 26, 2023

Salute-Eva commented Sep 26, 2023

Salute-Eva commented Sep 26, 2023

Salute-Eva commented Sep 26, 2023

Salute-Eva commented Sep 26, 2023

Salute-Eva commented Sep 26, 2023

Salute-Eva commented Sep 26, 2023

Salute-Eva commented Sep 26, 2023

Salute-Eva commented Sep 26, 2023

Salute-Eva commented Sep 27, 2023

Yeti-or left a comment

Choose a reason for hiding this comment

kayman233 commented Sep 27, 2023

Salute-Eva commented Sep 27, 2023

Salute-Eva commented Sep 27, 2023

Salute-Eva commented Sep 28, 2023

Salute-Eva commented Sep 28, 2023

Salute-Eva commented Sep 28, 2023

Salute-Eva commented Sep 28, 2023

Salute-Eva commented Sep 29, 2023

Salute-Eva commented Sep 29, 2023

Salute-Eva commented Sep 29, 2023

Yeti-or Sep 29, 2023

Choose a reason for hiding this comment

kayman233 Sep 29, 2023

Choose a reason for hiding this comment

kayman233 Sep 29, 2023

Choose a reason for hiding this comment

Salute-Eva commented Sep 29, 2023

Salute-Eva commented Sep 29, 2023

kayman233 commented Sep 26, 2023 •

edited by Salute-Eva

Loading