@flodesk/grain 11.61.2 → 11.62.0

package/es/components/text/index.js

@@ -1,4 +1,4 @@
-const _excluded = ["children", "size", "weight", "color", "tag", "display", "hasEllipsis", "ellipsisLines", "align", "letterSpacing", "textTransform", "variant", "trimTop", "trimBottom", "className", "style"];
+const _excluded = ["children", "size", "weight", "color", "tag", "display", "hasEllipsis", "ellipsisLines", "align", "letterSpacing", "textTransform", "variant", "trimTop", "trimBottom", "wrap", "className", "style"];
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -39,6 +39,7 @@ export const Text = /*#__PURE__*/forwardRef(function Text(_ref, ref) {
     variant,
     trimTop,
     trimBottom,
+    wrap: textWrap,
     className,
     style
   } = _ref,
@@ -69,7 +70,8 @@ export const Text = /*#__PURE__*/forwardRef(function Text(_ref, ref) {
       color,
       weight,
       display: !ellipsisLines ? display : undefined,
-      textTransform
+      textTransform,
+      textWrap
     },
     breakpoints
   });
@@ -98,5 +100,6 @@ Text.propTypes = {
   variant: PropTypes.oneOf(['caps']),
   trimTop: PropTypes.bool,
   trimBottom: PropTypes.bool,
-  display: types.textDisplay
+  display: types.textDisplay,
+  wrap: types.textWrap
 };

package/es/styles/utilities.js

@@ -71,6 +71,7 @@ const {
   zIndexProps,
   letterSpacingProps,
   textTransformProps,
+  textWrapProps,
   autoFlowProps,
   gridTemplateProps,
   itemAlignmentProps,
@@ -79,7 +80,7 @@ const {
   flexWrapProps
 } = styleConfig;
 const classAndStyleDeclarationProps = [spaceProps, colorProps, shadowProps, radiusProps, transitionProps, sizeProps, borderColorProps, alignProps, flexWrapProps, autoFlowProps, itemAlignmentProps, contentPositionProps, flexDirectionProps, alignSelfProps];
-const classDeclarationProps = [...classAndStyleDeclarationProps, positionProps, overflowProps, cursorProps, borderWidthProps, weightProps, textDisplayProps, borderSideProps, textTransformProps];
+const classDeclarationProps = [...classAndStyleDeclarationProps, positionProps, overflowProps, cursorProps, borderWidthProps, weightProps, textDisplayProps, borderSideProps, textTransformProps, textWrapProps];
 const styleDeclarationProps = [...classAndStyleDeclarationProps, dimensionProps, aspectRatioProps, orderProps, flexProps, opacityProps, zIndexProps, letterSpacingProps, gridTemplateProps];
 const defaultBorder = "\n  [class*=\"bd\"] {\n    border-color: var(--grn-color-border);\n    border-width: 1px;\n  }\n";
 export const generateUtilitiesCss = _ref2 => {

package/es/types/components/button.d.ts

@@ -17,6 +17,7 @@ export interface ButtonProps extends ComponentBaseProps {
   onClick?: (
     event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLSpanElement>,
   ) => void;
+  size?: 'm' | 'l';
 }
 
 export const Button: FC<ButtonProps>;

package/es/types/components/text-input.d.ts

@@ -19,6 +19,7 @@ export interface TextInputProps extends React.InputHTMLAttributes<HTMLInputEleme
   backgroundColor?: ColorPropType;
   onClear?: () => void;
   children?: React.ReactNode;
+  size?: 'm' | 'l';
 }
 
 export const TextInput: React.ForwardRefExoticComponent<

package/es/types/shared.d.ts

@@ -18,6 +18,7 @@ import {
   sides,
   borderWidths,
   textTransforms,
+  textWraps,
   textDisplays,
   textAlignments,
 } from '../types';
@@ -41,6 +42,7 @@ export type CursorType = (typeof cursors)[number];
 export type SideType = (typeof sides)[number];
 export type BorderWidthType = (typeof borderWidths)[number];
 export type TextTransformType = (typeof textTransforms)[number];
+export type TextWrapType = (typeof textWraps)[number];
 export type TextDisplayType = (typeof textDisplays)[number];
 export type TextAlignType = (typeof textAlignments)[number];
 export type IconSizePropType = number | string | keyof IconTokens;

package/es/types.js

@@ -25,6 +25,7 @@ export const borderWidths = ['1px', '2px', '3px', '4px'];
 export const textTransforms = ['capitalize', 'uppercase', 'lowercase'];
 export const textDisplays = ['block', 'inline-block', 'inline'];
 export const textAlignments = ['left', 'center', 'right'];
+export const textWraps = ['nowrap', 'balance', 'pretty'];
 export const spaces = Object.keys(vars.spaces);
 export const types = {
   space: PropTypes.oneOfType([PropTypes.oneOf(spaces), PropTypes.number, PropTypes.string]),
@@ -68,7 +69,8 @@ export const types = {
   hint: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   transition: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.transitions)), PropTypes.string]),
   cursor: PropTypes.oneOf(cursors),
-  borderWidth: PropTypes.oneOf(borderWidths)
+  borderWidth: PropTypes.oneOf(borderWidths),
+  textWrap: PropTypes.oneOf(textWraps)
 };
 export const defaultProps = {
   menuMaxHeight: '468px',

package/es/utilities/style-config.js

@@ -1,4 +1,4 @@
-import { alignSelfs, autoFlows, axisAlignments, borderWidths, contentPositions, cursors, flexDirections, flexWraps, overflows, positions, sides, textAlignments, textDisplays, textTransforms } from '../types';
+import { alignSelfs, autoFlows, axisAlignments, borderWidths, contentPositions, cursors, flexDirections, flexWraps, overflows, positions, sides, textAlignments, textDisplays, textTransforms, textWraps } from '../types';
 import { vars } from '../variables';
 import { getDimension, getSpace, getTextSize, isSpaceVar } from './responsive';
 import { getColor, getRadius, getShadow, getTransition, getWeight, isColorVar, isRadiusVar, isShadowVar, isTrasitionVar } from './styles';
@@ -281,6 +281,15 @@ export const styleConfig = {
     valueTransformer: getTextSize,
     variableChecker: value => sizes.includes(value)
   },
+  textWrapProps: {
+    props: [{
+      propName: 'textWrap',
+      property: 'text-wrap',
+      short: 'txtw'
+    }],
+    variables: textWraps,
+    variableChecker: value => textWraps.includes(value)
+  },
   opacityProps: {
     props: [{
       propName: 'opacity',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "11.61.2",
+  "version": "11.62.0",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "types": "es/types/index.d.ts",