@box/blueprint-web 6.33.1 → 6.34.0

package/lib-esm/content-field/content-field.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { type ContentFieldProps } from './types';
 export declare const contentFieldButtonTestId = "ContentField-button";
-export declare const ContentField: ({ hintText, onClick, onClickClearButton, isSharedFolder, title }: ContentFieldProps) => JSX.Element;
+export declare const ContentField: ({ hintText, onClick, onClickClearButton, isSharedFolder, title, error, }: ContentFieldProps) => JSX.Element;

package/lib-esm/content-field/content-field.js

@@ -8,6 +8,7 @@ import { createRef } from 'react';
 import { useFullTextTooltip } from '../utils/useFullTextTooltip.js';
 import styles from './content-field.module.js';
 import { messages } from './messages.js';
+import { InlineError } from '../primitives/inline-error/inline-error.js';
 
 const ContentIconContainer = ({
   children
@@ -42,7 +43,8 @@ const ContentField = ({
   onClick,
   onClickClearButton,
   isSharedFolder,
-  title
+  title,
+  error
 }) => {
   const ref = /*#__PURE__*/createRef();
   const {
@@ -54,39 +56,49 @@ const ContentField = ({
   });
   return jsxs("div", {
     className: styles.contentFieldWrapper,
-    children: [jsx(Tooltip, {
-      ...wrapperProps,
-      children: jsxs(Button, {
-        className: clsx(styles.contentButton, {
-          [styles.hasSelection]: title
+    children: [jsxs("div", {
+      className: styles.contentField,
+      children: [jsx(Tooltip, {
+        ...wrapperProps,
+        children: jsxs(Button, {
+          className: clsx(styles.contentButton, {
+            [styles.hasSelection]: title,
+            [styles.error]: !!error
+          }),
+          "data-testid": contentFieldButtonTestId,
+          onClick: onClick,
+          type: "button",
+          children: [jsx(ContentIcon, {
+            isSharedFolder: isSharedFolder
+          }), jsx("div", {
+            className: styles.contentLabelWrapper,
+            children: jsx("div", {
+              ref: ref,
+              className: styles.contentLabel,
+              children: title ?? hintText
+            })
+          })]
+        })
+      }), title && jsx(Button, {
+        "aria-label": messages.clearContentFieldButtonLabel,
+        className: clsx(styles.clearButton, {
+          [styles.hasSelection]: title,
+          [styles.error]: !!error
+        }),
+        onClick: handleOnClickClearButton({
+          ref,
+          onClickClearButton
         }),
-        "data-testid": contentFieldButtonTestId,
-        onClick: onClick,
         type: "button",
-        children: [jsx(ContentIcon, {
-          isSharedFolder: isSharedFolder
-        }), jsx("div", {
-          className: styles.contentLabelWrapper,
-          children: jsx("div", {
-            ref: ref,
-            className: styles.contentLabel,
-            children: title ?? hintText
-          })
-        })]
-      })
-    }), title && jsx(Button, {
-      "aria-label": messages.clearContentFieldButtonLabel,
-      className: styles.clearButton,
-      onClick: handleOnClickClearButton({
-        ref,
-        onClickClearButton
-      }),
-      type: "button",
-      children: jsx(XMark, {
-        "aria-label": messages.clearContentFieldIconLabel,
-        height: Space6,
-        width: Space6
-      })
+        children: jsx(XMark, {
+          "aria-label": messages.clearContentFieldIconLabel,
+          height: Space6,
+          width: Space6
+        })
+      })]
+    }), jsx(InlineError, {
+      className: styles.inlineError,
+      children: error
     })]
   });
 };

package/lib-esm/content-field/content-field.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"contentFieldWrapper":"bp_content_field_module_contentFieldWrapper--d616b","contentButton":"bp_content_field_module_contentButton--d616b","hasSelection":"bp_content_field_module_hasSelection--d616b","contentIconContainer":"bp_content_field_module_contentIconContainer--d616b","contentIconShared":"bp_content_field_module_contentIconShared--d616b","contentLabelWrapper":"bp_content_field_module_contentLabelWrapper--d616b","contentLabel":"bp_content_field_module_contentLabel--d616b","clearButton":"bp_content_field_module_clearButton--d616b"};
+var styles = {"contentFieldWrapper":"bp_content_field_module_contentFieldWrapper--557cc","contentField":"bp_content_field_module_contentField--557cc","inlineError":"bp_content_field_module_inlineError--557cc","contentButton":"bp_content_field_module_contentButton--557cc","error":"bp_content_field_module_error--557cc","hasSelection":"bp_content_field_module_hasSelection--557cc","contentIconContainer":"bp_content_field_module_contentIconContainer--557cc","contentIconShared":"bp_content_field_module_contentIconShared--557cc","contentLabelWrapper":"bp_content_field_module_contentLabelWrapper--557cc","contentLabel":"bp_content_field_module_contentLabel--557cc","clearButton":"bp_content_field_module_clearButton--557cc"};
 
 export { styles as default };

package/lib-esm/content-field/types.d.ts

@@ -20,4 +20,8 @@ export interface ContentFieldProps {
      * title of the selected content selected content
      */
     title?: string;
+    /**
+     * The content of the error message
+     */
+    error?: React.ReactNode;
 }

package/lib-esm/index.css

@@ -2886,15 +2886,23 @@
 .bp_content_card_module_pillGhost--7794a{
   margin-inline-end:var(--size-2);
 }
-.bp_content_field_module_contentFieldWrapper--d616b{
+.bp_content_field_module_contentFieldWrapper--557cc{
+  width:100%;
+}
+
+.bp_content_field_module_contentField--557cc{
   border-radius:var(--radius-2);
   box-shadow:var(--dropshadow-2);
   display:flex;
+  flex-direction:row;
   justify-content:space-between;
-  width:100%;
 }
 
-.bp_content_field_module_contentButton--d616b{
+.bp_content_field_module_inlineError--557cc{
+  margin-block-start:var(--space-2);
+}
+
+.bp_content_field_module_contentButton--557cc{
   all:unset;
   align-items:center;
   background:var(--surface-cta-surface-secondary);
@@ -2908,21 +2916,38 @@
   min-width:0;
   padding:var(--border-1) var(--space-3);
 }
-.bp_content_field_module_contentButton--d616b.bp_content_field_module_hasSelection--d616b{
+.bp_content_field_module_contentButton--557cc.bp_content_field_module_error--557cc{
+  border:var(--border-2) solid var(--border-dropdown-border-error);
+  position:relative;
+}
+.bp_content_field_module_contentButton--557cc.bp_content_field_module_error--557cc.bp_content_field_module_hasSelection--557cc:hover::after{
+  background-color:var(--border-cta-border-secondary);
+  content:"";
+  height:100%;
+  position:absolute;
+  right:0;
+  top:0;
+  width:1px;
+}
+.bp_content_field_module_contentButton--557cc.bp_content_field_module_hasSelection--557cc{
   border-radius:var(--radius-2) 0 0 var(--radius-2);
   border-right:none;
 }
-.bp_content_field_module_contentButton--d616b:hover{
+.bp_content_field_module_contentButton--557cc:hover{
   background:var(--surface-cta-surface-secondary-hover);
+}
+.bp_content_field_module_contentButton--557cc:not(.bp_content_field_module_error--557cc):hover{
   border:var(--border-1) solid var(--border-cta-border-secondary-hover);
 }
-.bp_content_field_module_contentButton--d616b:focus-visible{
+.bp_content_field_module_contentButton--557cc:focus-visible{
   background:var(--surface-cta-surface-secondary-hover);
   border:var(--border-2) solid var(--outline-focus-on-light);
+}
+.bp_content_field_module_contentButton--557cc:focus-visible:not(.bp_content_field_module_error--557cc){
   padding:calc(var(--border-1) - var(--border-1)) calc(var(--space-3) - var(--border-1));
 }
 
-.bp_content_field_module_contentIconContainer--d616b{
+.bp_content_field_module_contentIconContainer--557cc{
   align-items:center;
   background:var(--surface-cta-surface-icon-utility);
   border-radius:50%;
@@ -2932,25 +2957,25 @@
   width:var(--space-6);
 }
 
-.bp_content_field_module_contentIconShared--d616b{
+.bp_content_field_module_contentIconShared--557cc{
   min-height:var(--space-6);
   min-width:var(--space-6);
 }
 
-.bp_content_field_module_contentLabelWrapper--d616b{
+.bp_content_field_module_contentLabelWrapper--557cc{
   align-items:center;
   display:flex;
   flex-grow:1;
   min-width:0;
 }
 
-.bp_content_field_module_contentLabel--d616b{
+.bp_content_field_module_contentLabel--557cc{
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
 }
 
-.bp_content_field_module_clearButton--d616b{
+.bp_content_field_module_clearButton--557cc{
   all:unset;
   align-items:center;
   background:var(--surface-cta-surface-secondary);
@@ -2961,13 +2986,31 @@
   display:flex;
   padding:var(--border-1) var(--space-2);
 }
-.bp_content_field_module_clearButton--d616b:hover{
+.bp_content_field_module_clearButton--557cc:hover{
   background:var(--surface-cta-surface-secondary-hover);
+}
+.bp_content_field_module_clearButton--557cc:not(.bp_content_field_module_error--557cc):hover{
   border:var(--border-1) solid var(--border-cta-border-secondary-hover);
 }
-.bp_content_field_module_clearButton--d616b:focus-visible{
+.bp_content_field_module_clearButton--557cc.bp_content_field_module_error--557cc{
+  border:var(--border-2) solid var(--border-dropdown-border-error);
+  border-left:none;
+  position:relative;
+}
+.bp_content_field_module_clearButton--557cc.bp_content_field_module_error--557cc.bp_content_field_module_hasSelection--557cc:hover::after{
+  background-color:var(--border-cta-border-secondary);
+  content:"";
+  height:100%;
+  left:-1px;
+  position:absolute;
+  top:0;
+  width:1px;
+}
+.bp_content_field_module_clearButton--557cc:focus-visible{
   background:var(--surface-cta-surface-secondary-hover);
   border:var(--border-2) solid var(--outline-focus-on-light);
+}
+.bp_content_field_module_clearButton--557cc:focus-visible:not(.bp_content_field_module_error--557cc){
   padding:calc(var(--border-1) - var(--border-1)) calc(var(--space-2) - var(--border-1));
 }
 .bp_scrollable_container_module_scrollableContainer--074ff{

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "6.33.1",
+    "version": "6.34.0",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
         "access": "public",
@@ -57,7 +57,7 @@
     "devDependencies": {
         "@box/storybook-utils": "^0.0.7"
     },
-    "gitHead": "e6204fec0c0aa02d916e994e704b330b7629a13b",
+    "gitHead": "da9fd4c4deb54df54f51c390869ac86c721cd94f",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {