@cloudflare/component-button 2.12.17 → 2.13.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.13.0](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-button@2.12.17...@cloudflare/component-button@2.13.0) (2022-03-11)
+
+
+### Features
+
+* **component-button:** UI-5128 add noWrapText prop to set white-space: ([0398540](http://stash.cfops.it:7999/fe/stratus/commits/0398540))
+
+
+
+
+
 ## [2.12.17](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-button@2.12.16...@cloudflare/component-button@2.12.17) (2022-03-09)
 
 

package/dist/Button.d.ts

@@ -90,7 +90,7 @@ export declare const buttonStyles: (props: PropsWithTheme) => {
     readonly userSelect: "none";
     readonly maxWidth: "initial";
     readonly float: "none";
-    readonly whiteSpace: "normal";
+    readonly whiteSpace: "normal" | "nowrap";
     readonly width: "auto" | "100%";
 };
 declare type Props = {
@@ -108,6 +108,7 @@ declare type Props = {
     iconSize?: number;
     ariaLabel?: string;
     stretch?: boolean;
+    noWrapText?: boolean;
 } & Pick<JSX.IntrinsicElements['button'], 'onClick' | 'disabled' | 'form' | 'tabIndex' | 'className'>;
 declare type PropsWithTheme = Props & ThemeProp;
 declare const _default: React.ComponentType<{
@@ -131,6 +132,7 @@ declare const _default: React.ComponentType<{
     iconLabel?: string | undefined;
     iconSize?: number | undefined;
     ariaLabel?: string | undefined;
+    noWrapText?: boolean | undefined;
     p?: import("csstype").PaddingProperty<string | number> | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | undefined;
     color?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
     height?: import("csstype").HeightProperty<string | number> | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | undefined;

package/es/Button.js

@@ -153,7 +153,8 @@ export const buttonStyles = props => {
         space = _props$space === void 0 ? 2 : _props$space,
         _props$type = props.type,
         type = _props$type === void 0 ? 'default' : _props$type,
-        stretch = props.stretch;
+        stretch = props.stretch,
+        noWrapText = props.noWrapText;
   const normalStyles = buttonColors(theme).normal;
   const hoverStyles = interactionStyleAccessor('hover', props);
   const activeStyles = interactionStyleAccessor('active', props);
@@ -232,7 +233,7 @@ export const buttonStyles = props => {
     userSelect: 'none',
     maxWidth: 'initial',
     float: 'none',
-    whiteSpace: 'normal',
+    whiteSpace: noWrapText ? 'nowrap' : 'normal',
     width: direction === 'column' ? '100%' : 'auto'
   };
 };
@@ -290,7 +291,8 @@ Button.propTypes = {
   form: PropTypes.string,
   tabIndex: PropTypes.number,
   ariaLabel: PropTypes.string,
-  stretch: PropTypes.bool
+  stretch: PropTypes.bool,
+  noWrapText: PropTypes.bool
 };
 Button.displayName = 'Button';
 export default createStyledComponent(buttonStyles, Button);

package/lib/Button.js

@@ -169,7 +169,8 @@ var buttonStyles = function buttonStyles(props) {
       space = _props$space === void 0 ? 2 : _props$space,
       _props$type = props.type,
       type = _props$type === void 0 ? 'default' : _props$type,
-      stretch = props.stretch;
+      stretch = props.stretch,
+      noWrapText = props.noWrapText;
   var normalStyles = buttonColors(theme).normal;
   var hoverStyles = interactionStyleAccessor('hover', props);
   var activeStyles = interactionStyleAccessor('active', props);
@@ -248,7 +249,7 @@ var buttonStyles = function buttonStyles(props) {
     userSelect: 'none',
     maxWidth: 'initial',
     float: 'none',
-    whiteSpace: 'normal',
+    whiteSpace: noWrapText ? 'nowrap' : 'normal',
     width: direction === 'column' ? '100%' : 'auto'
   };
 };
@@ -312,7 +313,8 @@ Button.propTypes = {
   form: _propTypes.default.string,
   tabIndex: _propTypes.default.number,
   ariaLabel: _propTypes.default.string,
-  stretch: _propTypes.default.bool
+  stretch: _propTypes.default.bool,
+  noWrapText: _propTypes.default.bool
 };
 Button.displayName = 'Button';
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudflare/component-button",
   "description": "Cloudflare Button Component",
-  "version": "2.12.17",
+  "version": "2.13.0",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "James Kyle <jkyle@cloudflare.com>",
@@ -32,5 +32,5 @@
     "test-coverage": "stratus test --coverage",
     "test-watch": "stratus test --watch"
   },
-  "gitHead": "5f559644050fc502ee487e85d04b5e8886bc52a8"
+  "gitHead": "47e7f66ce88de7857a3565c6a7cbeba09e5ef6d3"
 }