@gravity-ui/page-constructor 2.18.0 → 2.19.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.19.0](https://github.com/gravity-ui/page-constructor/compare/v2.18.0...v2.19.0) (2023-05-23)
+
+
+### Features
+
+* **Button:** add prop width ([#346](https://github.com/gravity-ui/page-constructor/issues/346)) ([f4b1ba8](https://github.com/gravity-ui/page-constructor/commit/f4b1ba85f56ef2de435bd91ae1fc35fbea0a177b))
+
 ## [2.18.0](https://github.com/gravity-ui/page-constructor/compare/v2.18.0...v2.18.0) (2023-05-15)
 
 

package/build/cjs/components/Button/Button.css

@@ -45,4 +45,7 @@ unpredictable css rules order in build */
 }
 .pc-button-block_size_xl {
   --btn-image-margin: 25px;
+}
+.pc-button-block_width_max .pc-button-block__text {
+  width: 100%;
 }

package/build/cjs/components/Button/Button.js

@@ -15,7 +15,7 @@ const b = (0, utils_1.block)('button-block');
 const Button = (props) => {
     const handleMetrika = (0, useMetrika_1.useMetrika)();
     const { lang, tld } = (0, react_1.useContext)(localeContext_1.LocaleContext);
-    const { className, metrikaGoals, pixelEvents, analyticsEvents, size = 'l', theme = 'normal', url, img, onClick: onClickOrigin, text } = props, rest = tslib_1.__rest(props, ["className", "metrikaGoals", "pixelEvents", "analyticsEvents", "size", "theme", "url", "img", "onClick", "text"]);
+    const { className, metrikaGoals, pixelEvents, analyticsEvents, size = 'l', theme = 'normal', url, img, onClick: onClickOrigin, text, width } = props, rest = tslib_1.__rest(props, ["className", "metrikaGoals", "pixelEvents", "analyticsEvents", "size", "theme", "url", "img", "onClick", "text", "width"]);
     const defaultImgPosition = 'left';
     const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.Button, url);
     const onClick = (0, react_1.useCallback)((e) => {
@@ -25,12 +25,13 @@ const Button = (props) => {
             onClickOrigin(e);
         }
     }, [handleMetrika, metrikaGoals, pixelEvents, handleAnalytics, analyticsEvents, onClickOrigin]);
+    const buttonModifiers = { size, theme, width };
     const buttonImg = img instanceof Object
         ? { url: img.url, position: img.position || defaultImgPosition, alt: img.alt }
         : { url: img, position: defaultImgPosition };
     const buttonClass = img
-        ? b({ position: buttonImg.position, size, theme }, className)
-        : b({ size, theme }, className);
+        ? b(Object.assign({ position: buttonImg.position }, buttonModifiers), className)
+        : b(Object.assign({}, buttonModifiers), className);
     const buttonProps = Object.assign(Object.assign({}, rest), { onClick });
     if (theme === 'app-store' || theme === 'google-play') {
         const platform = theme === 'app-store' ? uikit_1.Platform.IOS : uikit_1.Platform.ANDROID;
@@ -43,7 +44,7 @@ const Button = (props) => {
         image = undefined;
     }
     const buttonTheme = theme === 'scale' ? 'accent' : theme;
-    return (react_1.default.createElement(uikit_1.Button, Object.assign({ className: buttonClass, view: (0, utils_2.toCommonView)(buttonTheme), size: (0, utils_2.toCommonSize)(size), href: url ? (0, utils_1.setUrlTld)(url, tld) : undefined }, buttonProps),
+    return (react_1.default.createElement(uikit_1.Button, Object.assign({ className: buttonClass, view: (0, utils_2.toCommonView)(buttonTheme), size: (0, utils_2.toCommonSize)(size), href: url ? (0, utils_1.setUrlTld)(url, tld) : undefined, width: width }, buttonProps),
         icon && buttonImg.position === 'left' ? icon : null,
         react_1.default.createElement("span", { className: b('content') },
             image && buttonImg.position === 'left' ? image : null,

package/build/cjs/models/constructor-items/common.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactNode } from 'react';
-import { ButtonSize, ButtonView } from '@gravity-ui/uikit';
+import { ButtonView, ButtonProps as UikitButtonProps } from '@gravity-ui/uikit';
 import { ThemeSupporting } from '../../utils/theme';
 import { AnalyticsEventsBase, ClassNameProps, PixelEventType } from '../common';
 export declare enum AuthorType {
@@ -131,11 +131,10 @@ export interface FileLinkProps extends ClassNameProps {
     onClick?: () => void;
 }
 export type ButtonTheme = ButtonView | 'github' | 'app-store' | 'google-play' | 'scale' | 'monochrome';
-export interface ButtonProps extends AnalyticsEventsBase {
+export interface ButtonProps extends AnalyticsEventsBase, Pick<UikitButtonProps, 'size' | 'width'> {
     text: string;
     url: string;
     primary?: boolean;
-    size?: ButtonSize;
     theme?: ButtonTheme;
     img?: ButtonImageProps | string;
     metrikaGoals?: MetrikaGoal;

package/build/esm/components/Button/Button.css

@@ -45,4 +45,7 @@ unpredictable css rules order in build */
 }
 .pc-button-block_size_xl {
   --btn-image-margin: 25px;
+}
+.pc-button-block_width_max .pc-button-block__text {
+  width: 100%;
 }

package/build/esm/components/Button/Button.js

@@ -14,7 +14,7 @@ const b = block('button-block');
 const Button = (props) => {
     const handleMetrika = useMetrika();
     const { lang, tld } = useContext(LocaleContext);
-    const { className, metrikaGoals, pixelEvents, analyticsEvents, size = 'l', theme = 'normal', url, img, onClick: onClickOrigin, text } = props, rest = __rest(props, ["className", "metrikaGoals", "pixelEvents", "analyticsEvents", "size", "theme", "url", "img", "onClick", "text"]);
+    const { className, metrikaGoals, pixelEvents, analyticsEvents, size = 'l', theme = 'normal', url, img, onClick: onClickOrigin, text, width } = props, rest = __rest(props, ["className", "metrikaGoals", "pixelEvents", "analyticsEvents", "size", "theme", "url", "img", "onClick", "text", "width"]);
     const defaultImgPosition = 'left';
     const handleAnalytics = useAnalytics(DefaultEventNames.Button, url);
     const onClick = useCallback((e) => {
@@ -24,12 +24,13 @@ const Button = (props) => {
             onClickOrigin(e);
         }
     }, [handleMetrika, metrikaGoals, pixelEvents, handleAnalytics, analyticsEvents, onClickOrigin]);
+    const buttonModifiers = { size, theme, width };
     const buttonImg = img instanceof Object
         ? { url: img.url, position: img.position || defaultImgPosition, alt: img.alt }
         : { url: img, position: defaultImgPosition };
     const buttonClass = img
-        ? b({ position: buttonImg.position, size, theme }, className)
-        : b({ size, theme }, className);
+        ? b(Object.assign({ position: buttonImg.position }, buttonModifiers), className)
+        : b(Object.assign({}, buttonModifiers), className);
     const buttonProps = Object.assign(Object.assign({}, rest), { onClick });
     if (theme === 'app-store' || theme === 'google-play') {
         const platform = theme === 'app-store' ? Platform.IOS : Platform.ANDROID;
@@ -42,7 +43,7 @@ const Button = (props) => {
         image = undefined;
     }
     const buttonTheme = theme === 'scale' ? 'accent' : theme;
-    return (React.createElement(CommonButton, Object.assign({ className: buttonClass, view: toCommonView(buttonTheme), size: toCommonSize(size), href: url ? setUrlTld(url, tld) : undefined }, buttonProps),
+    return (React.createElement(CommonButton, Object.assign({ className: buttonClass, view: toCommonView(buttonTheme), size: toCommonSize(size), href: url ? setUrlTld(url, tld) : undefined, width: width }, buttonProps),
         icon && buttonImg.position === 'left' ? icon : null,
         React.createElement("span", { className: b('content') },
             image && buttonImg.position === 'left' ? image : null,

package/build/esm/models/constructor-items/common.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactNode } from 'react';
-import { ButtonSize, ButtonView } from '@gravity-ui/uikit';
+import { ButtonView, ButtonProps as UikitButtonProps } from '@gravity-ui/uikit';
 import { ThemeSupporting } from '../../utils/theme';
 import { AnalyticsEventsBase, ClassNameProps, PixelEventType } from '../common';
 export declare enum AuthorType {
@@ -131,11 +131,10 @@ export interface FileLinkProps extends ClassNameProps {
     onClick?: () => void;
 }
 export type ButtonTheme = ButtonView | 'github' | 'app-store' | 'google-play' | 'scale' | 'monochrome';
-export interface ButtonProps extends AnalyticsEventsBase {
+export interface ButtonProps extends AnalyticsEventsBase, Pick<UikitButtonProps, 'size' | 'width'> {
     text: string;
     url: string;
     primary?: boolean;
-    size?: ButtonSize;
     theme?: ButtonTheme;
     img?: ButtonImageProps | string;
     metrikaGoals?: MetrikaGoal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "2.18.0",
+  "version": "2.19.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

package/server/models/constructor-items/common.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactNode } from 'react';
-import { ButtonSize, ButtonView } from '@gravity-ui/uikit';
+import { ButtonView, ButtonProps as UikitButtonProps } from '@gravity-ui/uikit';
 import { ThemeSupporting } from '../../utils/theme';
 import { AnalyticsEventsBase, ClassNameProps, PixelEventType } from '../common';
 export declare enum AuthorType {
@@ -131,11 +131,10 @@ export interface FileLinkProps extends ClassNameProps {
     onClick?: () => void;
 }
 export type ButtonTheme = ButtonView | 'github' | 'app-store' | 'google-play' | 'scale' | 'monochrome';
-export interface ButtonProps extends AnalyticsEventsBase {
+export interface ButtonProps extends AnalyticsEventsBase, Pick<UikitButtonProps, 'size' | 'width'> {
     text: string;
     url: string;
     primary?: boolean;
-    size?: ButtonSize;
     theme?: ButtonTheme;
     img?: ButtonImageProps | string;
     metrikaGoals?: MetrikaGoal;