@crystallize/design-system 1.19.0 → 1.19.2

package/package.json

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

package/src/action-menu/action-menu.css

@@ -1,5 +1,5 @@
 .c-action-menu {
-  @apply flex shrink-0 rotate-0 cursor-pointer flex-col items-center justify-center gap-[2px] rounded-md border-none bg-transparent -outline-offset-1 transition;
+  @apply flex shrink-0 cursor-pointer flex-col items-center justify-center gap-[2px] rounded-md border-none bg-transparent -outline-offset-1 transition;
 
   &-dot {
     @apply rounded-full bg-gray;

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/archive.tsx

@@ -0,0 +1,29 @@
+import { forwardRef, SVGProps } from 'react';
+
+type ArchiveProps = SVGProps<SVGSVGElement>;
+
+type ArchiveRef = SVGSVGElement;
+
+export const Archive = forwardRef<ArchiveRef, ArchiveProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="currentColor" {...delegated}>
+      <svg width="23" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M11.0308 9.33234V12.2464L12.7792 13.8006"
+          stroke="#528693"
+          strokeWidth="0.697782"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M15.2861 5.20269C14.0809 4.39737 12.6759 3.94619 11.2307 3.89751L11.2307 3.48958C11.2307 2.9983 10.68 2.7082 10.2748 2.98605L7.76996 4.70378C7.41666 4.94607 7.41621 5.46738 7.7691 5.71026L10.2739 7.43428C10.679 7.71309 11.2307 7.42309 11.2307 6.93134L11.2307 6.52714C12.1561 6.57428 13.0533 6.8707 13.8264 7.38728C14.6723 7.95243 15.3315 8.7557 15.7208 9.69551C16.11 10.6353 16.2119 11.6695 16.0134 12.6671C15.815 13.6648 15.3251 14.5813 14.6058 15.3006C13.8865 16.0199 12.9701 16.5097 11.9724 16.7082C10.9747 16.9066 9.94057 16.8048 9.00076 16.4155C8.06095 16.0262 7.25768 15.367 6.69253 14.5212C6.19432 13.7756 5.90088 12.9145 5.83837 12.024C5.81857 11.742 5.7386 11.454 5.57104 11.2033C5.24004 10.7082 4.55958 10.5956 4.08671 10.9577L3.99464 11.0282C3.58114 11.3449 3.32047 11.8449 3.358 12.3849C3.44631 13.6555 3.78246 14.8951 4.50794 15.9809C5.36179 17.2588 6.5754 18.2547 7.9953 18.8429C9.4152 19.431 10.9776 19.5849 12.485 19.2851C13.9923 18.9853 15.3769 18.2452 16.4637 17.1584C17.5504 16.0717 18.2905 14.6871 18.5903 13.1797C18.8902 11.6724 18.7363 10.11 18.1481 8.69005C17.56 7.27015 16.564 6.05654 15.2861 5.20269Z"
+          fill="#BFF6F8"
+          stroke="#528693"
+          strokeWidth="0.523337"
+        />
+      </svg>
+    </svg>
+  );
+});
+
+Archive.displayName = 'ArchiveIcon';

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

@@ -1,5 +1,6 @@
 import { Add } from './add';
 import { App } from './app';
+import { Archive } from './archive';
 import { Arrow } from './arrow';
 import { Atom } from './atom';
 import { Bell } from './bell';
@@ -30,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';
@@ -95,6 +97,7 @@ import { Warning } from './warning';
 
 export const Icon = {
   Add,
+  Archive,
   App,
   BillingPayments,
   Bin,
@@ -170,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>