dce-reactkit 4.2.2 → 4.2.3

package/dist/esm/types/components/TabBox.d.ts

@@ -9,6 +9,7 @@ type Props = {
     topRightChildren?: React.ReactNode;
     noBottomMargin?: boolean;
     noBottomPadding?: boolean;
+    minTitleWidth?: string;
 };
 declare const TabBox: React.FC<Props>;
 export default TabBox;

package/dist/index.d.ts

@@ -232,6 +232,7 @@ type Props$k = {
     topRightChildren?: React$1.ReactNode;
     noBottomMargin?: boolean;
     noBottomPadding?: boolean;
+    minTitleWidth?: string;
 };
 declare const TabBox: React$1.FC<Props$k>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/TabBox.tsx

@@ -21,6 +21,8 @@ type Props = {
   noBottomMargin?: boolean,
   // If true, don't add padding to bottom of tab box
   noBottomPadding?: boolean,
+  // Minimum width of the tab part of the box that contains the title (css units)
+  minTitleWidth?: string,
 };
 
 /*------------------------------------------------------------------------*/
@@ -121,6 +123,7 @@ const TabBox: React.FC<Props> = (props) => {
     topRightChildren,
     noBottomPadding,
     noBottomMargin,
+    minTitleWidth,
   } = props;
 
   /*------------------------------------------------------------------------*/
@@ -134,7 +137,10 @@ const TabBox: React.FC<Props> = (props) => {
 
       {/* Title Row with Left and Right sections */}
       <div className="TabBox-title-container">
-        <div className="TabBox-title">
+        <div
+          className="TabBox-title"
+          style={{ minWidth: minTitleWidth }}
+        >
           {title}
         </div>
         {topRightChildren && (