@recursica/mantine-adapter 0.14.0 → 0.16.0

package/src/components/Panel/PANEL_IMPLEMENTATION_NOTES.md

@@ -86,11 +86,11 @@ Mantine's Drawer content does not set `border-style` natively. Without this, the
 
 ---
 
-## 7. header-style Token Reference Bug
+## 7. `header-style` Typography Utility Class
 
-**Decision:** The `header-style: "h3"` token currently outputs as a raw string in the UI kit JSON, breaking our PostCSS compiler when mapped as CSS variable fallbacks. We have explicitly removed these fallbacks.
+**Decision:** The `header-style` token exports as the string `"h3"`, so we use the generated global utility class `.recursica_brand_typography_h3`.
 
-**Implementation:** The design system intended for the `header-style` token to act as a proper typography reference, which would compile into fully expanded properties like `--recursica_ui-kit_components_panel_properties_header-style_fontFamily`. Because the JSON export currently passes it as the raw string `"h3"`, attempting to bind to the non-existent variables breaks the build plugin. Until the JSON export is fixed to compile proper reference nodes, we are stripping typography bindings from the `.title` class and relying purely on `color` and Mantine's defaults.
+**Implementation:** The PostCSS compiler generates `.recursica_brand_typography_<typeName>` classes at the bottom of the scoped variables file to apply full typography definitions without assigning variables inline. We apply this to the `.title` class via `composes: recursica_brand_typography_h3 from global;`.
 
 ---
 

package/src/components/Panel/Panel.module.css

@@ -64,6 +64,17 @@
 
 .title {
   color: var(--recursica_ui-kit_components_panel_properties_colors_title);
+  composes: recursica_brand_typography_h3 from global;
+}
+
+.titleTruncate {
+  composes: title;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  flex: 1;
+  min-width: 0;
 }
 
 /* ======================================

package/src/components/Panel/Panel.stories.tsx

@@ -29,6 +29,11 @@ const meta: Meta = {
       control: "boolean",
       description: "Whether to display the close button in the header.",
     },
+    wrapHeaderText: {
+      control: "boolean",
+      description:
+        "If true, forces the header text to a single line and truncates with an ellipsis.",
+    },
     // Hide auto-detected HTML attributes
     defaultChecked: { table: { disable: true } },
     defaultValue: { table: { disable: true } },
@@ -77,8 +82,9 @@ export const Default: Story = {
     title: "Panel Title",
     withOverlay: true,
     withCloseButton: true,
+    wrapHeaderText: false,
   },
-  render: () => {
+  render: ({ wrapHeaderText, ...args }: PanelStoryArgs) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const [opened, setOpened] = useState(false);
 
@@ -92,6 +98,8 @@ export const Default: Story = {
           onClose={() => setOpened(false)}
           title="Panel Title"
           position="right"
+          wrapHeaderText={wrapHeaderText}
+          {...(args as PanelProps)}
         >
           <Text>
             This is the panel body content area. Panels slide in from the edge
@@ -116,6 +124,7 @@ export const LeftPosition: Story = {
     title: "Navigation",
     withOverlay: true,
     withCloseButton: true,
+    wrapHeaderText: false,
   },
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render: ({ withLayer, layer, ...args }: PanelStoryArgs) => {
@@ -148,6 +157,7 @@ export const ScrollableContent: Story = {
     title: "Scrollable Panel",
     withOverlay: true,
     withCloseButton: true,
+    wrapHeaderText: false,
   },
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render: ({ withLayer, layer, ...args }: PanelStoryArgs) => {
@@ -190,6 +200,7 @@ export const LongTitle: Story = {
       "This is a ridiculously long panel title designed to test how the header CSS handles text overflow and whether it truncates correctly or breaks the layout",
     withOverlay: true,
     withCloseButton: true,
+    wrapHeaderText: true,
   },
   render: ({ ...args }: PanelStoryArgs) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks

package/src/components/Panel/Panel.tsx

@@ -13,10 +13,19 @@ import styles from "./Panel.module.css";
 // PANEL (Drawer)
 // ============================================================
 
+export interface RecursicaPanelProps extends MantineDrawerProps {
+  /**
+   * If true, forces the header text to a single line and truncates with an ellipsis.
+   * Note: While the prop is named `wrapHeaderText` for backward compatibility,
+   * setting it to `true` actually PREVENTS wrapping (it forces truncation).
+   */
+  wrapHeaderText?: boolean;
+}
+
 /**
  * Recursica Panel root props. Extends Mantine Drawer.
  */
-export type PanelProps = RecursicaOverStyled<MantineDrawerProps>;
+export type PanelProps = RecursicaOverStyled<RecursicaPanelProps>;
 
 /**
  * Recursica Panel component wrapping Mantine's Drawer.
@@ -48,6 +57,7 @@ const PanelBase = function Panel({
   overStyled = false,
   position = "right",
   keepMounted = true,
+  wrapHeaderText = false,
   ...rest
 }: PanelProps) {
   const sanitizedProps = filterStylingProps(rest, overStyled);
@@ -56,7 +66,7 @@ const PanelBase = function Panel({
   const mergedClassNames: Partial<Record<string, string>> = {
     content: styles.content,
     header: styles.header,
-    title: styles.title,
+    title: wrapHeaderText ? styles.titleTruncate : styles.title,
     body: styles.body,
     inner: styles.inner,
   };