@crystallize/design-system 1.19.1 → 1.19.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.19.1",
+  "version": "1.19.2",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/dropdown-menu/dropdown-menu-root.tsx

@@ -32,7 +32,7 @@ export function DropdownMenuRoot({
 
   return (
     <DropdownMenuPrimitive.Root onOpenChange={onOpenChange} modal={modal}>
-      <DropdownMenuPrimitive.Trigger disabled={disabled} asChild>
+      <DropdownMenuPrimitive.Trigger disabled={disabled} asChild className="c-dropdown-menu-trigger">
         {children}
       </DropdownMenuPrimitive.Trigger>
       {container === null ? (

package/src/dropdown-menu/dropdown-menu.css

@@ -1,7 +1,7 @@
 .c-dropdown-menu-content {
   animation-duration: 0.4s;
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-  @apply z-[100] shadow;
+  @apply z-[100] rounded border border-solid border-purple-200-700 shadow;
 }
 
 .c-dropdown-menu-content[data-side='top'] {
@@ -11,6 +11,16 @@
   animation-name: slideDown;
 }
 
+.c-dropdown-menu-trigger {
+  .c-dropdown-menu-arrow {
+    @apply transition-transform;
+  }
+
+  &[data-state='open'] .c-dropdown-menu-arrow {
+    @apply -scale-y-100;
+  }
+}
+
 .c-dropdown-menu-label {
   @apply bg-elevate px-4 pb-1 pt-3 font-sans text-[11px] font-bold text-gray-500-400;
   @apply first:rounded-tl first:rounded-tr;

package/src/iconography/filename.tsx

@@ -0,0 +1,52 @@
+import { forwardRef, SVGProps } from 'react';
+
+type FilenameProps = SVGProps<SVGSVGElement>;
+
+type FilenameRef = SVGSVGElement;
+
+export const Filename = forwardRef<FilenameRef, FilenameProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
+      <path
+        d="M5.6 19H16.4C16.7314 19 17 18.7314 17 18.4V6.64853C17 6.4894 16.9368 6.33679 16.8243 6.22426L13.7757 3.17574C13.6632 3.06321 13.5106 3 13.3515 3H5.6C5.26863 3 5 3.26863 5 3.6V18.4C5 18.7314 5.26863 19 5.6 19Z"
+        fill="#BFF6F8"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.8243 6.22429L17.2485 5.80003C17.4736 6.02507 17.6 6.33029 17.6 6.64855V18.4C17.6 19.0628 17.0627 19.6 16.4 19.6H5.59999C4.93725 19.6 4.39999 19.0628 4.39999 18.4V3.60002C4.39999 2.93728 4.93725 2.40002 5.59999 2.40002H13.3515C13.6697 2.40002 13.975 2.52645 14.2 2.7515L17.2485 5.80002L16.8243 6.22429ZM16.4 19H5.59999C5.26862 19 4.99999 18.7314 4.99999 18.4V3.60002C4.99999 3.26865 5.26862 3.00002 5.59999 3.00002H13.3515C13.5106 3.00002 13.6632 3.06324 13.7757 3.17576L16.8243 6.22429C16.9368 6.33681 17 6.48942 17 6.64855V18.4C17 18.7314 16.7314 19 16.4 19Z"
+        fill="#528693"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.7 2.79999V5.40001C13.7 5.78661 14.0134 6.10001 14.4 6.10001L17.4 6.10001V6.70001L14.4 6.70001C13.6821 6.70001 13.1 6.11798 13.1 5.40001V2.79999H13.7Z"
+        fill="#528693"
+      />
+      <path
+        d="M13.8671 19.2454C11.9003 19.4533 4.99042 19.0573 4.99042 19.0573L4.66389 16.2528C4.66389 16.2528 7.75568 13.7734 11.5081 13.952C11.5081 13.952 10.6331 15.4935 12.9208 16.7152C12.9208 16.7152 14.4213 16.6927 15.3399 16.2528C16.0156 15.9292 17.0386 15.0214 17.0386 15.0214V19.0573L13.8671 19.2454Z"
+        fill="#528693"
+      />
+      <path
+        d="M8.42816 6.03619C8.42816 6.60752 7.96501 7.07068 7.39368 7.07068C6.82235 7.07068 6.35919 6.60752 6.35919 6.03619C6.35919 5.46486 6.82235 5.00171 7.39368 5.00171C7.96501 5.00171 8.42816 5.46486 8.42816 6.03619Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.85929 6.03623C8.85929 6.84566 8.20312 7.50184 7.39368 7.50184C6.58425 7.50184 5.92807 6.84566 5.92807 6.03623C5.92807 5.22679 6.58425 4.57062 7.39368 4.57062C8.20312 4.57062 8.85929 5.22679 8.85929 6.03623ZM7.39368 7.07071C7.96501 7.07071 8.42817 6.60756 8.42817 6.03623C8.42817 5.4649 7.96501 5.00174 7.39368 5.00174C6.82235 5.00174 6.3592 5.4649 6.3592 6.03623C6.3592 6.60756 6.82235 7.07071 7.39368 7.07071Z"
+        fill="#528693"
+      />
+      <path
+        d="M16.9107 15.7C16.9147 16.6132 16.9221 17.5263 16.9377 18.4385C16.9429 18.7467 16.6953 19 16.387 18.9997C13.2185 18.9959 9.37711 18.9623 6.30848 18.9606C6.15186 18.9606 5.89178 18.9606 5.64068 18.9606C5.25931 18.9606 4.95167 18.6489 4.95616 18.2675C4.96198 17.774 4.96852 17.1279 4.96852 16.717V16.652C4.99014 16.6526 4.95616 16.5938 5.0291 16.5318C6.67181 15.4626 8.20173 14.5456 10.1686 14.3378C9.48583 14.5849 9.16631 14.9169 9.24148 15.7181C9.34495 16.8085 10.6092 17.069 11.4918 17.1216C13.2587 17.2313 15.5399 16.9531 16.9107 15.7Z"
+        fill="white"
+      />
+      <path
+        d="M10.9785 14.4427C10.9319 14.9497 11.0599 15.4573 11.3413 15.8815C11.6226 16.3058 12.0405 16.6212 12.5256 16.7755C12.447 16.7812 12.3705 16.7861 12.2919 16.7889C11.568 16.8162 10.6272 16.8553 10.012 16.4225C9.89296 16.3505 9.79184 16.2523 9.71632 16.1354C9.6408 16.0186 9.59287 15.886 9.57616 15.7478C9.55944 15.6097 9.57439 15.4695 9.61986 15.338C9.66533 15.2065 9.74014 15.087 9.83861 14.9887C10.1648 14.7109 10.5576 14.5227 10.9785 14.4427Z"
+        fill="white"
+      />
+    </svg>
+  );
+});
+
+Filename.displayName = 'FilenameIcon';

package/src/iconography/index.ts

@@ -31,6 +31,7 @@ import { ErrorWhite } from './error-white';
 import { EyeClosed } from './eye-closed';
 import { EyeOpen } from './eye-open';
 import { FileUpload } from './file-upload';
+import { Filename } from './filename';
 import { FixedPropertyTable } from './fixed-property-table';
 import { Folder } from './folder';
 import { Frontends } from './frontends';
@@ -172,6 +173,7 @@ export const Icon = {
   Date,
   Relation,
   Numeric,
+  Filename,
   FileUpload,
   /**
    * Misc

package/src/input-with-label/input-with-label.tsx

@@ -45,12 +45,14 @@ export const InputWithLabel = forwardRef<InputWithLabelRef, InputWithLabelProps>
           {label}
           <span className="c-input-with-label-input-wrap">
             <Input className={cx('c-input-with-label-input', className)} ref={ref} id={id} {...delegated} />
-            {!append && !errorMessage ? null : (
+            {!!errorMessage ? (
               <Tooltip content={errorMessage}>
                 <div data-testid="input-with-label-error-message" className="c-input-with-label-append">
-                  {errorMessage ? <Triangle /> : append}
+                  <Triangle />
                 </div>
               </Tooltip>
+            ) : (
+              !!append && <div className="c-input-with-label-append">{append}</div>
             )}
           </span>
         </Label>