@hyphen/hyphen-components 5.7.4 → 5.8.0

package/dist/types/index.d.ts

@@ -29,8 +29,10 @@ export type CssAlignContentValue = 'flex-start' | 'flex-end' | 'center' | 'stret
 export type CssFlexDirectionValue = 'column' | 'column-reverse' | 'row' | 'row-reverse' | undefined;
 export type CssAlignItemsValue = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
 export type CssFlexValue = 'auto' | 'initial' | 'none' | 'inherit' | 'unset';
-export type CssOverflowValue = 'visible' | 'hidden' | 'clip' | 'scroll' | 'auto' | 'inherit' | 'initial' | 'unset';
+export type CssOverflowValue = 'visible' | 'hidden' | 'clip' | 'auto' | 'scroll' | 'inherit' | 'initial' | 'unset';
 export type CssDisplayValue = 'none' | 'flex' | 'inline-flex' | 'block' | 'inline-block' | 'inline' | 'inherit' | 'grid' | 'table-cell' | 'contents';
+export type CssWhiteSpaceValue = 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line';
+export type CssWordBreakValue = 'normal' | 'break-all' | 'keep-all';
 export type CssTextAlignValue = 'left' | 'center' | 'right';
 export type BaseSpacing = SpacingSize | string | undefined;
 export type BorderRadiusSize = BorderRadius | string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "5.7.4",
+  "version": "5.8.0",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -62,7 +62,7 @@
   ],
   "dependencies": {
     "@emotion/react": "^11.14.0",
-    "@hyphen/hyphen-design-tokens": "^4.39.1",
+    "@hyphen/hyphen-design-tokens": "^4.40.0",
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-collapsible": "^1.1.11",
     "@radix-ui/react-dropdown-menu": "^2.1.15",

package/src/components/Box/Box.stories.tsx

@@ -9,6 +9,9 @@ const meta: Meta<typeof Box> = {
 
 export default meta;
 
+const placeholderText =
+  'Built by developers, for developers, Hyphen automates access management and connects your team with the services and cloud resources they need to ship great software.';
+
 export const Overview = () => (
   <Box gap="md">
     <Box
@@ -964,6 +967,71 @@ export const Shadow = () => (
   </Box>
 );
 
+export const WhiteSpace = () => (
+  <Box gap="lg">
+    <Box padding="md" gap="md" width="8xl" background="secondary">
+      <Box>Normal</Box>
+      <Box
+        as="p"
+        display="block"
+        whiteSpace="normal"
+        borderWidth="0 sm"
+        borderColor="danger"
+      >
+        {placeholderText}
+      </Box>
+    </Box>
+    <Box padding="md" gap="md" width="8xl" background="secondary">
+      <Box>Nowrap</Box>
+      <Box
+        as="p"
+        display="block"
+        whiteSpace="nowrap"
+        borderWidth="0 sm"
+        borderColor="danger"
+      >
+        {placeholderText}
+      </Box>
+    </Box>
+    <Box padding="md" gap="md" width="8xl" background="secondary">
+      <Box>Pre</Box>
+      <Box
+        as="p"
+        display="block"
+        whiteSpace="pre"
+        borderWidth="0 sm"
+        borderColor="danger"
+      >
+        {placeholderText}
+      </Box>
+    </Box>
+    <Box padding="md" gap="md" width="8xl" background="secondary">
+      <Box>Pre-wrap</Box>
+      <Box
+        as="p"
+        display="block"
+        whiteSpace="pre-wrap"
+        borderWidth="0 sm"
+        borderColor="danger"
+      >
+        {placeholderText}
+      </Box>
+    </Box>
+    <Box padding="md" gap="md" width="8xl" background="secondary">
+      <Box>Pre-line</Box>
+      <Box
+        as="p"
+        display="block"
+        whiteSpace="pre-line"
+        borderWidth="0 sm"
+        borderColor="danger"
+      >
+        {placeholderText}
+      </Box>
+    </Box>
+  </Box>
+);
+
 export const Width = () => (
   <Box background="secondary" gap="xs">
     <Box background="tertiary" width="227px">
@@ -1115,6 +1183,49 @@ export const WidthMin = () => (
   </Box>
 );
 
+export const WordBreak = () => (
+  <Box gap="lg">
+    <Box padding="3xl" gap="md" width="8xl" background="secondary">
+      <Box>Normal</Box>
+      <Box
+        as="p"
+        display="block"
+        wordBreak="normal"
+        borderWidth="0 sm 0 sm"
+        borderColor="danger"
+      >
+        {placeholderText}
+      </Box>
+    </Box>
+
+    <Box padding="3xl" gap="md" width="8xl" background="secondary">
+      <Box>Break-All</Box>
+      <Box
+        as="p"
+        display="block"
+        wordBreak="break-all"
+        borderWidth="0 sm 0 sm"
+        borderColor="danger"
+      >
+        {placeholderText}
+      </Box>
+    </Box>
+
+    <Box padding="3xl" gap="md" width="8xl" background="secondary">
+      <Box>Keep-All</Box>
+      <Box
+        as="p"
+        display="block"
+        wordBreak="keep-all"
+        borderWidth="0 sm 0 sm"
+        borderColor="danger"
+      >
+        {placeholderText}
+      </Box>
+    </Box>
+  </Box>
+);
+
 export const Height = () => (
   <Box background="secondary" gap="xs">
     <Box

package/src/components/Box/Box.tsx

@@ -25,6 +25,8 @@ import {
   ZIndexSize,
   BackgroundColor,
   BorderColor,
+  CssWhiteSpaceValue,
+  CssWordBreakValue,
 } from '../../types';
 import {
   CSSProperties,
@@ -249,6 +251,10 @@ export interface BoxProps {
    * the alignment of the text
    */
   textAlign?: CssTextAlignValue | ResponsiveProp<CssTextAlignValue>;
+  /**
+   * Control the whitespace behavior of the Box
+   */
+  whiteSpace?: CssWhiteSpaceValue | ResponsiveProp<CssWhiteSpaceValue>;
   /**
    * By default, a Box's items will all try to fit onto one line.
    * Change that and allow the items to wrap as needed wrap
@@ -259,6 +265,10 @@ export interface BoxProps {
    * or a [width token](/?path=/docs/foundation-design-tokens--docs#width)
    */
   width?: DimensionSize | ResponsiveProp<DimensionSize> | string;
+  /**
+   * Control the word break behavior of the Box
+   */
+  wordBreak?: CssWordBreakValue | ResponsiveProp<CssWordBreakValue>;
   /**
    * ZIndex value for the element. Can be one of the predetermined token values.
    * Can be responsive.
@@ -315,7 +325,9 @@ export const Box: FC<BoxProps> = forwardRef(
       style = {},
       textAlign = undefined,
       wrap = undefined,
+      whiteSpace = undefined,
       width = undefined,
+      wordBreak = undefined,
       zIndex = undefined,
       ...restProps
     },
@@ -414,6 +426,8 @@ export const Box: FC<BoxProps> = forwardRef(
       generateResponsiveClasses('text-align', textAlign),
       generateResponsiveClasses('position', position),
       generateResponsiveClasses('z-index', zIndex),
+      generateResponsiveClasses('whitespace', whiteSpace),
+      generateResponsiveClasses('break', wordBreak),
       ...(hoverClasses ?? []),
       ...(focusClasses ?? []),
       {

package/src/types/index.ts

@@ -104,8 +104,8 @@ export type CssOverflowValue =
   | 'visible'
   | 'hidden'
   | 'clip'
-  | 'scroll'
   | 'auto'
+  | 'scroll'
   | 'inherit'
   | 'initial'
   | 'unset';
@@ -122,6 +122,15 @@ export type CssDisplayValue =
   | 'table-cell'
   | 'contents';
 
+export type CssWhiteSpaceValue =
+  | 'normal'
+  | 'nowrap'
+  | 'pre'
+  | 'pre-wrap'
+  | 'pre-line';
+
+export type CssWordBreakValue = 'normal' | 'break-all' | 'keep-all';
+
 export type CssTextAlignValue = 'left' | 'center' | 'right';
 
 export type BaseSpacing = SpacingSize | string | undefined;