@crystallize/design-system 1.21.1 → 1.22.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @crystallize/design-system
 
+## 1.22.0
+
+### Minor Changes
+
+- 497d580: Change toast component data-testid to include the toast type so we can use that to assert on it.
+
+## 1.21.2
+
+### Patch Changes
+
+- 2ad694c: Extend the Tag component to support `xxs` size.
+
 ## 1.21.1
 
 ### Patch Changes

package/dist/{chunk-QVHGXWBD.mjs → chunk-PB47BT3T.mjs}

@@ -5674,18 +5674,14 @@ function confirm(config) {
   const container = document.createDocumentFragment();
   let currentConfig = { ...config, close, open: true };
   let timeoutId;
-  function close(...args) {
+  function close() {
     currentConfig = {
       ...currentConfig,
-      open: false,
-      afterClose: () => {
-        if (typeof config.afterClose === "function") {
-          config.afterClose();
-        }
-        destroy.apply(this, args);
-      }
+      open: false
     };
     render(currentConfig);
+    config.afterClose?.();
+    destroy();
   }
   function destroy(...args) {
     const triggerCancel = args.some((param) => param && param.triggerCancel);

package/dist/index.css

@@ -1773,6 +1773,13 @@
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
+.c-tag-xxs {
+  height: 1.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
 .c-tag-xs {
   height: 1.5rem;
   padding-left: 0.5rem;
@@ -2294,7 +2301,6 @@
   margin: 0px auto;
   position: relative;
   line-height: 1.7;
-  --c-rte-min-height: 150px;
 }
 .c-rich-text-editor > * {
   box-sizing: border-box;
@@ -2321,7 +2327,7 @@
   color: rgb(var(--c-color-gray-900-50) / var(--tw-text-opacity));
 }
 .c-rich-text-editor .c-rte-editor-scroller {
-  min-height: var(--c-rte-min-height);
+  min-height: var(--c-rte-min-height, 150px);
   border: 0;
   resize: none;
   cursor: text;
@@ -2436,7 +2442,6 @@
 .c-rich-text-editor .c-rte-placeholder {
   pointer-events: none;
   position: absolute;
-  left: 1.5rem;
   right: 2.5rem;
   top: 0px;
   display: inline-block;
@@ -2449,6 +2454,7 @@
   --tw-text-opacity: 1;
   color: rgb(var(--c-color-gray-300-600) / var(--tw-text-opacity));
   font-style: italic;
+  left: var(--c-rte-content-pl, 1.5rem);
 }
 @keyframes CursorBlink {
   to {
@@ -2469,7 +2475,7 @@
   outline-width: 0px;
   tab-size: 1;
   padding-bottom: 8px;
-  min-height: calc(var(--c-rte-min-height) - 8px);
+  min-height: calc(var(--c-rte-min-height, 150px) - 8px);
   padding-top: var(--c-rte-content-pt, 0);
   padding-left: var(--c-rte-content-pl, 1.5rem);
   padding-right: var(--c-rte-content-pr, 1.5rem);

package/dist/index.d.ts

@@ -203,23 +203,23 @@ declare namespace DialogBase {
 type DialogType = typeof DialogBase & DialogFuncProps;
 declare const Dialog: DialogType;
 declare function showDialog(delegated: DialogFuncProps): {
-    destroy: (...args: any[]) => void;
+    destroy: () => void;
     update: (configUpdate: ConfigUpdate) => void;
 };
 declare function showWarning(delegated: DialogFuncProps): {
-    destroy: (...args: any[]) => void;
+    destroy: () => void;
     update: (configUpdate: ConfigUpdate) => void;
 };
 declare function showConfirm(delegated: DialogFuncProps): {
-    destroy: (...args: any[]) => void;
+    destroy: () => void;
     update: (configUpdate: ConfigUpdate) => void;
 };
 declare function showError(delegated: DialogFuncProps): {
-    destroy: (...args: any[]) => void;
+    destroy: () => void;
     update: (configUpdate: ConfigUpdate) => void;
 };
 declare function showInfo(delegated: DialogFuncProps): {
-    destroy: (...args: any[]) => void;
+    destroy: () => void;
     update: (configUpdate: ConfigUpdate) => void;
 };
 declare function destroyAll(): void;
@@ -316,7 +316,7 @@ declare function StackIcon({ type, children, size }: StackIconProps): JSX.Elemen
 type TagStylesProps = VariantProps<typeof tagStyles>;
 declare const tagStyles: (props?: ({
     variant?: "default" | "elevate" | null | undefined;
-    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xxs" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 type TagProps = React.ComponentProps<'div'> & TagStylesProps & {
     prepend?: React.ReactNode;

package/dist/index.js

@@ -6540,18 +6540,14 @@ function confirm(config) {
   const container = document.createDocumentFragment();
   let currentConfig = { ...config, close, open: true };
   let timeoutId;
-  function close(...args) {
+  function close() {
     currentConfig = {
       ...currentConfig,
-      open: false,
-      afterClose: () => {
-        if (typeof config.afterClose === "function") {
-          config.afterClose();
-        }
-        destroy.apply(this, args);
-      }
+      open: false
     };
     render(currentConfig);
+    config.afterClose?.();
+    destroy();
   }
   function destroy(...args) {
     const triggerCancel = args.some((param) => param && param.triggerCancel);
@@ -39117,6 +39113,7 @@ function RichTextEditorWithoutContext({
       slotPreContent,
       /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)("div", {
         className: `c-rte-editor-container ${disabled ? "disabled" : ""}`,
+        "data-testid": "rich-text-editor",
         children: [
           maxLength != null ? /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(MaxLengthPlugin, {
             maxLength
@@ -39579,6 +39576,7 @@ var tagStyles = (0, import_class_variance_authority19.cva)("c-tag", {
       elevate: "c-tag-elevate"
     },
     size: {
+      xxs: "c-tag-xxs",
       xs: "c-tag-xs",
       sm: "c-tag-sm",
       md: "c-tag-md",
@@ -39669,7 +39667,7 @@ var toast = ({ title, message, type = "success", timeout = 6e3 }) => {
   const toastId = Date.now().toString();
   import_sonner.toast.custom(
     (id) => /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)("div", {
-      "data-testid": "toast-content",
+      "data-testid": `toast-${type}`,
       className: (0, import_class_variance_authority20.cx)(toastStyles({ type }), withMessage ? "c-toast-with-message" : "c-toast-title-only"),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime144.jsx)("div", {

package/dist/index.mjs

@@ -17,7 +17,7 @@ import {
   showError,
   showInfo,
   showWarning
-} from "./chunk-QVHGXWBD.mjs";
+} from "./chunk-PB47BT3T.mjs";
 import "./chunk-NIH5ZMPE.mjs";
 
 // src/card/card.tsx
@@ -321,6 +321,7 @@ var tagStyles = cva5("c-tag", {
       elevate: "c-tag-elevate"
     },
     size: {
+      xxs: "c-tag-xxs",
       xs: "c-tag-xs",
       sm: "c-tag-sm",
       md: "c-tag-md",
@@ -367,7 +368,7 @@ function Tag({ children, className, variant, size, prepend, onRemove, ...delegat
 // src/rich-text-editor/index.tsx
 import { lazy, Suspense } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
-var LazyRichTextEditor = lazy(() => import("./rich-text-editor-VCJEH7QE.mjs"));
+var LazyRichTextEditor = lazy(() => import("./rich-text-editor-UNPP4LX5.mjs"));
 var RichTextEditor = (props) => {
   return /* @__PURE__ */ jsx12(Suspense, {
     fallback: null,
@@ -409,7 +410,7 @@ var toast = ({ title, message, type = "success", timeout = 6e3 }) => {
   const toastId = Date.now().toString();
   sonnerToast.custom(
     (id) => /* @__PURE__ */ jsxs7("div", {
-      "data-testid": "toast-content",
+      "data-testid": `toast-${type}`,
       className: cx4(toastStyles({ type }), withMessage ? "c-toast-with-message" : "c-toast-title-only"),
       children: [
         /* @__PURE__ */ jsx13("div", {

package/dist/{rich-text-editor-HJ3MS6B5.css → rich-text-editor-OUGDPSPV.css}

@@ -490,7 +490,6 @@
   margin: 0px auto;
   position: relative;
   line-height: 1.7;
-  --c-rte-min-height: 150px;
 }
 .c-rich-text-editor > * {
   box-sizing: border-box;
@@ -517,7 +516,7 @@
   color: rgb(var(--c-color-gray-900-50) / var(--tw-text-opacity));
 }
 .c-rich-text-editor .c-rte-editor-scroller {
-  min-height: var(--c-rte-min-height);
+  min-height: var(--c-rte-min-height, 150px);
   border: 0;
   resize: none;
   cursor: text;
@@ -632,7 +631,6 @@
 .c-rich-text-editor .c-rte-placeholder {
   pointer-events: none;
   position: absolute;
-  left: 1.5rem;
   right: 2.5rem;
   top: 0px;
   display: inline-block;
@@ -645,6 +643,7 @@
   --tw-text-opacity: 1;
   color: rgb(var(--c-color-gray-300-600) / var(--tw-text-opacity));
   font-style: italic;
+  left: var(--c-rte-content-pl, 1.5rem);
 }
 @keyframes CursorBlink {
   to {
@@ -665,7 +664,7 @@
   outline-width: 0px;
   tab-size: 1;
   padding-bottom: 8px;
-  min-height: calc(var(--c-rte-min-height) - 8px);
+  min-height: calc(var(--c-rte-min-height, 150px) - 8px);
   padding-top: var(--c-rte-content-pt, 0);
   padding-left: var(--c-rte-content-pl, 1.5rem);
   padding-right: var(--c-rte-content-pr, 1.5rem);

package/dist/{rich-text-editor-VCJEH7QE.mjs → rich-text-editor-UNPP4LX5.mjs}

@@ -6,7 +6,7 @@ import {
   Icon,
   IconButton,
   InputWithLabel
-} from "./chunk-QVHGXWBD.mjs";
+} from "./chunk-PB47BT3T.mjs";
 import "./chunk-NIH5ZMPE.mjs";
 
 // src/rich-text-editor/rich-text-editor.tsx
@@ -3164,6 +3164,7 @@ function RichTextEditorWithoutContext({
       slotPreContent,
       /* @__PURE__ */ jsxs10("div", {
         className: `c-rte-editor-container ${disabled ? "disabled" : ""}`,
+        "data-testid": "rich-text-editor",
         children: [
           maxLength != null ? /* @__PURE__ */ jsx15(MaxLengthPlugin, {
             maxLength

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.21.1",
+  "version": "1.22.0",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -73,9 +73,10 @@
     "@storybook/react": "7.6.2",
     "@storybook/react-vite": "7.6.2",
     "@storybook/theming": "7.6.2",
-    "@testing-library/jest-dom": "6.1.5",
-    "@testing-library/react": "14.1.2",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "14.5.1",
+    "@types/testing-library__jest-dom": "^5.14.5",
     "@types/prettier": "2.7.2",
     "@types/react": "17.0.1",
     "@types/react-dom": "17.0.1",

package/src/dialog/config.tsx

@@ -9,21 +9,15 @@ export function confirm(config: DialogFuncProps) {
   let currentConfig = { ...config, close, open: true };
   let timeoutId: NodeJS.Timeout;
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  function close(...args: any[]) {
+  function close() {
     currentConfig = {
       ...currentConfig,
       open: false,
-      afterClose: () => {
-        if (typeof config.afterClose === 'function') {
-          config.afterClose();
-        }
-
-        destroy.apply(this, args);
-      },
     };
 
     render(currentConfig);
+    config.afterClose?.();
+    destroy();
   }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/src/dialog/types.ts

@@ -62,7 +62,6 @@ export type DialogFunc = (props: DialogFuncProps) => {
 export type ModalStaticFunctions = Record<NonNullable<DialogFuncProps['type']>, DialogFunc>;
 
 export interface ConfirmDialogProps extends DialogFuncProps {
-  afterClose?: () => void;
   close: (...args: unknown[]) => void;
   autoFocusButton?: null | 'ok' | 'cancel';
   rootPrefixCls: string;

package/src/rich-text-editor/rich-text-editor.css

@@ -17,8 +17,6 @@
   position: relative;
   line-height: 1.7;
 
-  --c-rte-min-height: 150px;
-
   > * {
     box-sizing: border-box;
   }
@@ -26,7 +24,7 @@
   @apply !font-sans font-normal text-gray-900-50;
 
   .c-rte-editor-scroller {
-    min-height: var(--c-rte-min-height);
+    min-height: var(--c-rte-min-height, 150px);
     border: 0;
     resize: none;
     cursor: text;
@@ -148,8 +146,9 @@
   }
 
   .c-rte-placeholder {
-    @apply pointer-events-none absolute left-6 right-10 top-0 inline-block select-none overflow-hidden text-ellipsis whitespace-nowrap text-[14px] font-normal text-gray-300-600;
+    @apply pointer-events-none absolute right-10 top-0 inline-block select-none overflow-hidden text-ellipsis whitespace-nowrap text-[14px] font-normal text-gray-300-600;
     font-style: italic;
+    left: var(--c-rte-content-pl, 1.5rem);
   }
 
   @keyframes CursorBlink {
@@ -163,7 +162,7 @@
   @apply relative block border-0 px-6 py-2 !pt-0 text-sm outline-0;
   tab-size: 1;
   padding-bottom: 8px;
-  min-height: calc(var(--c-rte-min-height) - 8px);
+  min-height: calc(var(--c-rte-min-height, 150px) - 8px);
 
   /* Allow for customization from the outside */
   padding-top: var(--c-rte-content-pt, 0);

package/src/rich-text-editor/rich-text-editor.tsx

@@ -142,7 +142,7 @@ function RichTextEditorWithoutContext({
         actionsMenuAppend={actionsMenuAppend}
       />
       {slotPreContent}
-      <div className={`c-rte-editor-container ${disabled ? 'disabled' : ''}`}>
+      <div className={`c-rte-editor-container ${disabled ? 'disabled' : ''}`} data-testid="rich-text-editor">
         {maxLength != null ? <MaxLengthPlugin maxLength={maxLength} /> : null}
         {!autoFocus ? null : <AutoFocusPlugin />}
         <ClearEditorPlugin />

package/src/tag/tag.css

@@ -24,6 +24,10 @@
   @apply bg-elevate shadow;
 }
 
+.c-tag-xxs {
+  @apply h-5 px-2 text-xs;
+}
+
 .c-tag-xs {
   @apply h-6 px-2 text-xs;
 }

package/src/tag/tag.tsx

@@ -11,6 +11,7 @@ const tagStyles = cva('c-tag', {
       elevate: 'c-tag-elevate',
     },
     size: {
+      xxs: 'c-tag-xxs',
       xs: 'c-tag-xs',
       sm: 'c-tag-sm',
       md: 'c-tag-md',

package/src/toast/toast.tsx

@@ -44,7 +44,7 @@ export const toast = ({ title, message, type = 'success', timeout = 6000 }: Toas
   sonnerToast.custom(
     id => (
       <div
-        data-testid="toast-content"
+        data-testid={`toast-${type}`}
         className={cx(toastStyles({ type }), withMessage ? 'c-toast-with-message' : 'c-toast-title-only')}
       >
         <div>{<ToastIcon width={26} height={26} />}</div>