@box/blueprint-web 12.60.1 → 12.61.0

package/dist/lib-esm/content-card/content-card.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Size1, Size14, Size6, Size4, Size5, Size18 } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { Ghost } from '../ghost/ghost.js';
 import { ContentCardBody } from './content-card-body.js';
 import { ContentCardFooter } from './content-card-footer.js';
@@ -9,8 +10,12 @@ import { ContentCardTitle } from './content-card-title.js';
 import styles from './content-card.module.js';
 
 const GhostContentCard = () => {
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   return jsxs("div", {
     className: styles.ghostCard,
+    "data-modern": enableModernizedComponents,
     "data-testid": "ghost-content-card",
     children: [jsx(Ghost, {
       borderRadius: Size1,
@@ -61,6 +66,9 @@ const ContentCardComponent = ({
   onSelect,
   ...rest
 }) => {
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   const handleKeyDown = event => {
     if (event.key === 'Enter') {
       onSelect(event);
@@ -72,6 +80,7 @@ const ContentCardComponent = ({
   return jsx("div", {
     ...rest,
     className: clsx(styles.card, className),
+    "data-modern": enableModernizedComponents,
     onClick: onSelect,
     onKeyDown: handleKeyDown,
     role: "link",

package/dist/lib-esm/content-card/content-card.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"card":"bp_content_card_module_card--adb8d","cardContent":"bp_content_card_module_cardContent--adb8d","cardTitle":"bp_content_card_module_cardTitle--adb8d","cardTitleText":"bp_content_card_module_cardTitleText--adb8d","cardBody":"bp_content_card_module_cardBody--adb8d","cardBodyText":"bp_content_card_module_cardBodyText--adb8d","cardIcon":"bp_content_card_module_cardIcon--adb8d","cardBackground":"bp_content_card_module_cardBackground--adb8d","image":"bp_content_card_module_image--adb8d","ghostCard":"bp_content_card_module_ghostCard--adb8d","iconGhost":"bp_content_card_module_iconGhost--adb8d","titleGhost":"bp_content_card_module_titleGhost--adb8d","bodyGhost":"bp_content_card_module_bodyGhost--adb8d","pillGhostContainer":"bp_content_card_module_pillGhostContainer--adb8d","pillGhost":"bp_content_card_module_pillGhost--adb8d"};
+var styles = {"card":"bp_content_card_module_card--cb1ea","ghostCard":"bp_content_card_module_ghostCard--cb1ea","cardContent":"bp_content_card_module_cardContent--cb1ea","cardTitle":"bp_content_card_module_cardTitle--cb1ea","cardTitleText":"bp_content_card_module_cardTitleText--cb1ea","cardBody":"bp_content_card_module_cardBody--cb1ea","cardBodyText":"bp_content_card_module_cardBodyText--cb1ea","cardIcon":"bp_content_card_module_cardIcon--cb1ea","cardBackground":"bp_content_card_module_cardBackground--cb1ea","image":"bp_content_card_module_image--cb1ea","iconGhost":"bp_content_card_module_iconGhost--cb1ea","titleGhost":"bp_content_card_module_titleGhost--cb1ea","bodyGhost":"bp_content_card_module_bodyGhost--cb1ea","pillGhostContainer":"bp_content_card_module_pillGhostContainer--cb1ea","pillGhost":"bp_content_card_module_pillGhost--cb1ea"};
 
 export { styles as default };

package/dist/lib-esm/ellipsizable-text/ellipsizable-text.js

@@ -26,7 +26,9 @@ const EllipsizableText = /*#__PURE__*/forwardRef(({
         display: '-webkit-box',
         overflow: 'hidden',
         WebkitBoxOrient: 'vertical',
-        WebkitLineClamp: lineClamp.toString()
+        WebkitLineClamp: lineClamp.toString(),
+        whiteSpace: lineClamp === 1 ? 'nowrap' : 'normal',
+        textOverflow: 'ellipsis'
       },
       children: children
     })

package/dist/lib-esm/index.css

@@ -3275,80 +3275,124 @@
   margin-block:var(--select-content-viewport-option-separator-margin-block);
 }
 
-.bp_content_card_module_card--adb8d{
-  background-color:var(--surface-surface);
-  border:var(--border-1) solid var(--border-card-border);
-  border-radius:var(--size-3);
+.bp_content_card_module_card--cb1ea[data-modern=false],.bp_content_card_module_ghostCard--cb1ea[data-modern=false]{
+  --content-card-background-color:var(--surface-surface);
+  --content-card-background-height:var(--size-15);
+  --content-card-border-radius:var(--size-3);
+  --content-card-border-size:var(--border-1);
+  --content-card-content-gap:var(--size-2);
+  --content-card-dropshadow:var(--dropshadow-3);
+  --content-card-focused-border-color:var(--outline-focus-on-light);
+  --content-card-focused-border-size:var(--border-2);
+  --content-card-icon-border-size:var(--size-1);
+  --content-card-icon-position:var(--size-3);
+  --content-card-icon-size:var(--size-14);
+  --content-card-max-width:27.8125rem;
+  --content-card-min-width:13.75rem;
+  --content-card-padding:var(--size-4);
+  --content-card-pressed-background-color:var(--surface-card-surface-pressed);
+  --content-card-text-height:var(--size-12);
+  --content-card-border:var(--border-1) solid var(--border-card-border);
+  --content-card-focused-border:var(--border-2) solid var(--outline-focus-on-light);
+  --content-card-pressed-border:var(--border-1) solid var(--border-card-border);
+}
+
+.bp_content_card_module_card--cb1ea[data-modern=true],.bp_content_card_module_ghostCard--cb1ea[data-modern=true]{
+  --content-card-background-color:var(--bp-surface-card-surface);
+  --content-card-background-height:var(--bp-size-150);
+  --content-card-border-radius:var(--bp-radius-10);
+  --content-card-border-size:var(--bp-border-01);
+  --content-card-content-gap:var(--bp-space-020);
+  --content-card-dropshadow:var(--dropshadow-3);
+  --content-card-focused-border-color:var(--bp-outline-focus-on-light);
+  --content-card-focused-border-size:var(--bp-border-02);
+  --content-card-icon-border-size:var(--bp-size-010);
+  --content-card-icon-position:var(--bp-size-030);
+  --content-card-icon-size:var(--bp-size-140);
+  --content-card-max-width:27.8125rem;
+  --content-card-min-width:13.75rem;
+  --content-card-padding:var(--bp-space-040);
+  --content-card-pressed-background-color:var(--bp-surface-card-surface-pressed);
+  --content-card-text-height:var(--bp-size-120);
+  --content-card-border:var(--bp-border-01) solid var(--bp-border-card-border);
+  --content-card-focused-border:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
+  --content-card-pressed-border:var(--bp-border-01) solid var(--bp-border-card-border);
+}
+
+.bp_content_card_module_card--cb1ea{
+  background-color:var(--content-card-background-color);
+  border:var(--content-card-border);
+  border-radius:var(--content-card-border-radius);
   cursor:pointer;
-  max-width:calc(27.8125rem - var(--size-4) - var(--border-1));
-  min-width:calc(13.75rem - var(--size-4) - var(--border-1));
+  max-width:calc(var(--content-card-max-width) - var(--content-card-padding) - var(--content-card-border-size));
+  min-width:calc(var(--content-card-min-width) - var(--content-card-padding) - var(--content-card-border-size));
   overflow:hidden;
-  padding:var(--size-4);
+  padding:var(--content-card-padding);
   position:relative;
 }
-.bp_content_card_module_card--adb8d:hover{
-  box-shadow:var(--dropshadow-3);
+.bp_content_card_module_card--cb1ea:hover{
+  box-shadow:var(--content-card-dropshadow);
 }
-.bp_content_card_module_card--adb8d:focus-visible{
-  border:var(--border-2) solid var(--outline-focus-on-light);
-  box-shadow:var(--dropshadow-3);
+.bp_content_card_module_card--cb1ea:focus-visible{
+  border:var(--content-card-focused-border);
+  box-shadow:var(--content-card-dropshadow);
   outline:none;
 }
-.bp_content_card_module_card--adb8d:active{
-  background-color:var(--surface-card-surface-pressed);
-  border:var(--border-1) solid var(--border-card-border);
+.bp_content_card_module_card--cb1ea:active{
+  background-color:var(--content-card-pressed-background-color);
+  border:var(--content-card-pressed-border);
   box-shadow:none;
 }
 
-.bp_content_card_module_cardContent--adb8d{
+.bp_content_card_module_cardContent--cb1ea{
   display:flex;
   flex-direction:column;
-  gap:var(--size-2);
+  gap:var(--content-card-content-gap);
   height:100%;
   justify-content:space-between;
-  padding-block-start:calc(var(--size-14) + var(--size-2) + var(--size-1));
+  padding-block-start:calc(var(--content-card-icon-size) + var(--content-card-content-gap) + var(--content-card-icon-border-size));
 }
 
-.bp_content_card_module_cardTitle--adb8d{
+.bp_content_card_module_cardTitle--cb1ea{
   align-items:center;
   display:flex;
-  height:var(--size-12);
+  height:var(--content-card-text-height);
 }
 
-.bp_content_card_module_cardTitleText--adb8d{
+.bp_content_card_module_cardTitleText--cb1ea{
   -webkit-box-orient:vertical;
   -webkit-line-clamp:2;
   display:-webkit-inline-box;
   overflow:hidden;
 }
 
-.bp_content_card_module_cardBody--adb8d{
-  height:var(--size-12);
-  margin-block-end:var(--size-2);
+.bp_content_card_module_cardBody--cb1ea{
+  height:var(--content-card-text-height);
+  margin-block-end:var(--content-card-content-gap);
 }
 
-.bp_content_card_module_cardBodyText--adb8d{
+.bp_content_card_module_cardBodyText--cb1ea{
   -webkit-box-orient:vertical;
   -webkit-line-clamp:2;
   display:-webkit-inline-box;
   overflow:hidden;
 }
 
-.bp_content_card_module_cardIcon--adb8d{
-  background-color:var(--surface-surface);
-  border:var(--size-1) solid var(--surface-surface);
-  border-radius:var(--size-3);
-  height:var(--size-14);
-  left:var(--size-3);
+.bp_content_card_module_cardIcon--cb1ea{
+  background-color:var(--content-card-background-color);
+  border:var(--content-card-icon-border-size) solid var(--content-card-background-color);
+  border-radius:var(--content-card-border-radius);
+  height:var(--content-card-icon-size);
+  left:var(--content-card-icon-position);
   overflow:hidden;
   position:absolute;
-  top:var(--size-3);
-  width:var(--size-14);
+  top:var(--content-card-icon-position);
+  width:var(--content-card-icon-size);
   z-index:1;
 }
 
-.bp_content_card_module_cardBackground--adb8d{
-  height:var(--size-15);
+.bp_content_card_module_cardBackground--cb1ea{
+  height:var(--content-card-background-height);
   left:0;
   overflow:hidden;
   position:absolute;
@@ -3356,36 +3400,36 @@
   width:100%;
 }
 
-.bp_content_card_module_image--adb8d{
+.bp_content_card_module_image--cb1ea{
   height:100%;
   width:100%;
 }
 
-.bp_content_card_module_ghostCard--adb8d{
+.bp_content_card_module_ghostCard--cb1ea{
   display:flex;
   flex-direction:column;
-  max-width:calc(27.8125rem - var(--size-4));
-  min-width:calc(13.75rem - var(--size-4));
-  padding:var(--size-4);
+  max-width:calc(var(--content-card-max-width) - var(--content-card-padding));
+  min-width:calc(var(--content-card-min-width) - var(--content-card-padding));
+  padding:var(--content-card-padding);
   position:relative;
 }
 
-.bp_content_card_module_iconGhost--adb8d,.bp_content_card_module_titleGhost--adb8d{
-  margin-block-end:var(--size-4);
+.bp_content_card_module_iconGhost--cb1ea,.bp_content_card_module_titleGhost--cb1ea{
+  margin-block-end:var(--content-card-padding);
 }
 
-.bp_content_card_module_bodyGhost--adb8d{
-  margin-block-end:var(--size-2);
+.bp_content_card_module_bodyGhost--cb1ea{
+  margin-block-end:var(--content-card-content-gap);
 }
 
-.bp_content_card_module_pillGhostContainer--adb8d{
+.bp_content_card_module_pillGhostContainer--cb1ea{
   display:flex;
-  margin-block-end:var(--size-4);
-  margin-block-start:var(--size-2);
+  margin-block-end:var(--content-card-padding);
+  margin-block-start:var(--content-card-content-gap);
 }
 
-.bp_content_card_module_pillGhost--adb8d{
-  margin-inline-end:var(--size-2);
+.bp_content_card_module_pillGhost--cb1ea{
+  margin-inline-end:var(--content-card-content-gap);
 }
 .bp_content_field_module_contentFieldWrapper--dabac{
   width:100%;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.60.1",
+    "version": "12.61.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {