@snack-uikit/modal 0.10.3 → 0.11.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.11.0 (2024-06-11)
+
+
+### Features
+
+* **FF-4725:** add truncate prop ([b8ab633](https://github.com/cloud-ru-tech/snack-uikit/commit/b8ab633cfc672bcaea95b413a635956d96711f3e))
+* **FF-4725:** set default footer appearances; add barHideStrategy never ([a1476a7](https://github.com/cloud-ru-tech/snack-uikit/commit/a1476a72af183c3293bb8aef313c2b5be62bb05b))
+
+
+
+
+
 ## 0.10.3 (2024-06-11)
 
 ### Only dependencies have been changed

package/README.md

@@ -66,6 +66,7 @@
 | cancelButton | `Omit<ButtonOutlineProps, "data-test-id" \| "size">` | - | Кнопка отмены |
 | additionalButton | `Omit<ButtonSimpleProps, "data-test-id" \| "size">` | - | Вторая кнопка действия |
 | disclaimer | `{ text: string; link?: Pick<LinkProps, "text" \| "href" \| "target" \| "external">; }` | - | Небольшой текст под кнопками футера с возможностью передать дополнительно ссылку |
+| truncate | `{ title?: number; subtitle?: number; }` | '{ <br>title: 1; <br>subtitle: 2; }' | Максимальное кол-во строк <br> - `title` - в заголовке <br> - `subtitle` - в подзаголовке |
 | size | "s" \| "m" \| "l" | s | Размер |
 | align | enum Align: `"vertical"`, `"default"`, `"center"` | default | Выравнивание, для разных размеров доступны разные значения <br> для size=`s` - все <br> для size=`m` - align=`default \| center` <br> для size=`l` - align=`default` |
 | picture | `JSXElementConstructor<{ size?: number; className?: string; }> \| ModalHeaderImage` | - | Можно передать иконку из пакета `@snack-uikit/icon-predefined`, или путь к картинке и атрибут `alt` |

package/dist/components/Modal/Modal.d.ts

@@ -1,3 +1,3 @@
 import { ModalLProps, ModalMProps, ModalSProps } from './types';
 export type ModalProps = ModalSProps | ModalMProps | ModalLProps;
-export declare function Modal({ open, onClose, size, mode, align, title, titleTooltip, subtitle, picture: pictureProp, content, approveButton, cancelButton, additionalButton, disclaimer, className, ...rest }: ModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function Modal({ open, onClose, size, mode, align, title, titleTooltip, subtitle, picture: pictureProp, content, approveButton, cancelButton, additionalButton, disclaimer, truncate, className, ...rest }: ModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Modal/Modal.js

@@ -19,9 +19,9 @@ import { getAlignProps, getButtonsSize, getPicture } from '../../utils';
 import { ModalCustom } from '../ModalCustom';
 import styles from './styles.module.css';
 export function Modal(_a) {
-    var { open, onClose, size = SIZE.S, mode = MODE.Regular, align = ALIGN.Default, title, titleTooltip, subtitle, picture: pictureProp, content, approveButton, cancelButton, additionalButton, disclaimer, className } = _a, rest = __rest(_a, ["open", "onClose", "size", "mode", "align", "title", "titleTooltip", "subtitle", "picture", "content", "approveButton", "cancelButton", "additionalButton", "disclaimer", "className"]);
+    var { open, onClose, size = SIZE.S, mode = MODE.Regular, align = ALIGN.Default, title, titleTooltip, subtitle, picture: pictureProp, content, approveButton, cancelButton, additionalButton, disclaimer, truncate, className } = _a, rest = __rest(_a, ["open", "onClose", "size", "mode", "align", "title", "titleTooltip", "subtitle", "picture", "content", "approveButton", "cancelButton", "additionalButton", "disclaimer", "truncate", "className"]);
     const aligns = getAlignProps({ align, size });
     const buttonsSize = getButtonsSize({ align, size });
     const picture = getPicture({ size, picture: pictureProp });
-    return (_jsxs(ModalCustom, Object.assign({ open: open, onClose: onClose, size: size, mode: mode, className: className }, rest, { children: [_jsx(ModalCustom.Header, { title: _jsx(TruncateString, { text: title }), titleTooltip: titleTooltip, subtitle: subtitle, picture: picture, align: aligns.header }), Boolean(content) && _jsx(ModalCustom.Body, { content: content, align: aligns.body }), _jsx(ModalCustom.Footer, { actions: _jsxs(_Fragment, { children: [_jsx(ButtonFilled, Object.assign({}, approveButton, { size: buttonsSize, className: styles.footerButton, "data-test-id": TEST_IDS.approveButton })), cancelButton && (_jsx(ButtonOutline, Object.assign({}, cancelButton, { size: buttonsSize, className: styles.footerButton, "data-test-id": TEST_IDS.cancelButton }))), additionalButton && (_jsx(ButtonSimple, Object.assign({}, additionalButton, { size: buttonsSize, className: styles.footerButton, "data-test-id": TEST_IDS.additionalButton })))] }), disclaimer: disclaimer && (_jsxs(_Fragment, { children: [_jsx(Typography.SansBodyS, { "data-test-id": TEST_IDS.disclaimerText, children: disclaimer.text }), disclaimer.link && (_jsx(Link, Object.assign({ external: true }, disclaimer.link, { size: 's', "data-test-id": TEST_IDS.disclaimerLink })))] })), align: aligns.footer, className: styles.modalFooter })] })));
+    return (_jsxs(ModalCustom, Object.assign({ open: open, onClose: onClose, size: size, mode: mode, className: className }, rest, { children: [_jsx(ModalCustom.Header, { title: _jsx(TruncateString, { text: title, maxLines: (truncate === null || truncate === void 0 ? void 0 : truncate.title) || 1 }), titleTooltip: titleTooltip, subtitle: subtitle ? _jsx(TruncateString, { text: subtitle, maxLines: (truncate === null || truncate === void 0 ? void 0 : truncate.subtitle) || 2 }) : undefined, picture: picture, align: aligns.header }), Boolean(content) && _jsx(ModalCustom.Body, { content: content, align: aligns.body }), _jsx(ModalCustom.Footer, { actions: _jsxs(_Fragment, { children: [_jsx(ButtonFilled, Object.assign({ appearance: 'primary' }, approveButton, { size: buttonsSize, className: styles.footerButton, "data-test-id": TEST_IDS.approveButton })), cancelButton && (_jsx(ButtonOutline, Object.assign({ appearance: 'neutral' }, cancelButton, { size: buttonsSize, className: styles.footerButton, "data-test-id": TEST_IDS.cancelButton }))), additionalButton && (_jsx(ButtonSimple, Object.assign({ appearance: 'neutral' }, additionalButton, { size: buttonsSize, className: styles.footerButton, "data-test-id": TEST_IDS.additionalButton })))] }), disclaimer: disclaimer && (_jsxs(_Fragment, { children: [_jsx(Typography.SansBodyS, { "data-test-id": TEST_IDS.disclaimerText, children: disclaimer.text }), disclaimer.link && (_jsx(Link, Object.assign({ external: true }, disclaimer.link, { size: 's', "data-test-id": TEST_IDS.disclaimerLink })))] })), align: aligns.footer, className: styles.modalFooter })] })));
 }

package/dist/components/Modal/types.d.ts

@@ -24,6 +24,16 @@ type BaseModalProps = Omit<ModalCustomProps, 'children' | 'size'> & {
         text: string;
         link?: Pick<LinkProps, 'text' | 'href' | 'target' | 'external'>;
     };
+    /**
+     *  Максимальное кол-во строк
+     * <br> - `title` - в заголовке
+     * <br> - `subtitle` - в подзаголовке
+     * @default '{ <br>title: 1; <br>subtitle: 2; }'
+     */
+    truncate?: {
+        title?: number;
+        subtitle?: number;
+    };
 };
 export type ModalSProps = BaseModalProps & {
     /** Размер */

package/dist/helperComponents/Body/Body.js

@@ -17,5 +17,5 @@ import { CONTENT_ALIGN, TEST_IDS } from '../../constants';
 import styles from './styles.module.css';
 export function ModalBody(_a) {
     var { content, align = CONTENT_ALIGN.Default, className } = _a, rest = __rest(_a, ["content", "align", "className"]);
-    return (_jsx(Scroll, Object.assign({ size: 'm', className: cn(styles.modalBody, className) }, extractSupportProps(rest), { "data-align": align, "data-test-id": TEST_IDS.content, children: content })));
+    return (_jsx(Scroll, Object.assign({ size: 'm', barHideStrategy: 'never', className: cn(styles.modalBody, className) }, extractSupportProps(rest), { "data-align": align, "data-test-id": TEST_IDS.content, children: content })));
 }

package/dist/helperComponents/Footer/styles.module.css

@@ -2,7 +2,7 @@
   gap:var(--space-modal-footer-action-row-gap, 8px);
   display:flex;
   flex-direction:row-reverse;
-  flex-wrap:wrap;
+  flex-wrap:wrap-reverse;
   align-items:center;
 }
 

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Modal",
-  "version": "0.10.3",
+  "version": "0.11.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -47,5 +47,5 @@
   "devDependencies": {
     "@types/react-modal": "3.16.0"
   },
-  "gitHead": "d19da5dedbb93af1e6d86330b6f2590ef117a7c9"
+  "gitHead": "f226092b402335a7839f0e476b7371fd21c2509c"
 }

package/src/components/Modal/Modal.tsx

@@ -26,6 +26,7 @@ export function Modal({
   cancelButton,
   additionalButton,
   disclaimer,
+  truncate,
   className,
   ...rest
 }: ModalProps) {
@@ -36,9 +37,9 @@ export function Modal({
   return (
     <ModalCustom open={open} onClose={onClose} size={size} mode={mode} className={className} {...rest}>
       <ModalCustom.Header
-        title={<TruncateString text={title} />}
+        title={<TruncateString text={title} maxLines={truncate?.title || 1} />}
         titleTooltip={titleTooltip}
-        subtitle={subtitle}
+        subtitle={subtitle ? <TruncateString text={subtitle} maxLines={truncate?.subtitle || 2} /> : undefined}
         picture={picture}
         align={aligns.header}
       />
@@ -49,6 +50,7 @@ export function Modal({
         actions={
           <>
             <ButtonFilled
+              appearance='primary'
               {...approveButton}
               size={buttonsSize}
               className={styles.footerButton}
@@ -57,6 +59,7 @@ export function Modal({
 
             {cancelButton && (
               <ButtonOutline
+                appearance='neutral'
                 {...cancelButton}
                 size={buttonsSize}
                 className={styles.footerButton}
@@ -66,6 +69,7 @@ export function Modal({
 
             {additionalButton && (
               <ButtonSimple
+                appearance='neutral'
                 {...additionalButton}
                 size={buttonsSize}
                 className={styles.footerButton}

package/src/components/Modal/types.ts

@@ -26,6 +26,16 @@ type BaseModalProps = Omit<ModalCustomProps, 'children' | 'size'> & {
     text: string;
     link?: Pick<LinkProps, 'text' | 'href' | 'target' | 'external'>;
   };
+  /**
+   *  Максимальное кол-во строк
+   * <br> - `title` - в заголовке
+   * <br> - `subtitle` - в подзаголовке
+   * @default '{ <br>title: 1; <br>subtitle: 2; }'
+   */
+  truncate?: {
+    title?: number;
+    subtitle?: number;
+  };
 };
 
 export type ModalSProps = BaseModalProps & {

package/src/helperComponents/Body/Body.tsx

@@ -20,6 +20,7 @@ export function ModalBody({ content, align = CONTENT_ALIGN.Default, className, .
   return (
     <Scroll
       size='m'
+      barHideStrategy='never'
       className={cn(styles.modalBody, className)}
       {...extractSupportProps(rest)}
       data-align={align}

package/src/helperComponents/Footer/styles.module.scss

@@ -5,7 +5,7 @@
 
   display: flex;
   flex-direction: row-reverse;
-  flex-wrap: wrap;
+  flex-wrap: wrap-reverse;
   align-items: center;
 }