feat(html): add TabStrip sizing options and test

telerik · Dec 10, 2024 · 0cfbc5d · 0cfbc5d
1 parent cb698b5
commit 0cfbc5d
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 7 deletions.
diff --git a/packages/html/src/tabstrip/tabstrip.spec.tsx b/packages/html/src/tabstrip/tabstrip.spec.tsx
@@ -1,13 +1,19 @@
 import { Button, TabStripItems, TabStripItemsWrapper } from '..';
-import { classNames } from '../misc';
+import { classNames, optionClassNames, Size } from '../misc';
 
 export const TABSTRIP_CLASSNAME = `k-tabstrip`;
 
 const states = [];
 
-const options = {};
+const options = {
+    size: [ Size.small, Size.medium, Size.large ]
+};
+
+export type KendoTabStripOptions = {
+    size?: (typeof options.size)[number] | null;
+};
 
-export type KendoTabStripProps = {
+export type KendoTabStripProps = KendoTabStripOptions & {
     position?: "top" | "bottom" | "left" | "right";
     tabAlignment?: "start" | "center" | "end" | "justify" | "stretched";
     tabStripItems?: React.JSX.Element | React.JSX.Element[];
@@ -17,6 +23,7 @@ export type KendoTabStripProps = {
 };
 
 const defaultOptions = {
+    size: Size.medium,
     position: "top",
     tabAlignment: "start",
     scrollButtonsPosition: "around",
@@ -27,6 +34,7 @@ export const TabStrip = (
         React.HTMLAttributes<HTMLDivElement>
 ) => {
     const {
+        size = defaultOptions.size,
         scrollable,
         children,
         tabStripItems,
@@ -70,25 +78,26 @@ export const TabStrip = (
                     [`${TABSTRIP_CLASSNAME}-${position}`]: position,
                     [`${TABSTRIP_CLASSNAME}-scrollable`]: scrollable,
                 },
+                optionClassNames(TABSTRIP_CLASSNAME, {size})
             )}>
             {position === "bottom" && children}
             <TabStripItemsWrapper orientation={orientationMap[position]}>
                 {scrollable &&
                     (scrollButtonsPosition === 'around' || scrollButtonsPosition === 'start') &&
-                    <Button fillMode="flat" rounded={null} size="medium" icon={`caret-alt-${caretMap[position]["prev"]}`} className="k-tabstrip-prev"></Button>
+                    <Button fillMode="flat" rounded={null} size={size} icon={`caret-alt-${caretMap[position]["prev"]}`} className="k-tabstrip-prev"></Button>
                 }
                 {scrollable && scrollButtonsPosition === 'start' &&
-                    <Button fillMode="flat" rounded={null} size="medium" icon={`caret-alt-${caretMap[position]["next"]}`} className="k-tabstrip-next"></Button>
+                    <Button fillMode="flat" rounded={null} size={size} icon={`caret-alt-${caretMap[position]["next"]}`} className="k-tabstrip-next"></Button>
                 }
                 <TabStripItems tabAlignment={tabAlignmentMap[tabAlignment]}>
                     {tabStripItems}
                 </TabStripItems>
                 {scrollable && scrollButtonsPosition === 'end' &&
-                    <Button fillMode="flat" rounded={null} size="medium" icon={`caret-alt-${caretMap[position]["prev"]}`} className="k-tabstrip-prev"></Button>
+                    <Button fillMode="flat" rounded={null} size={size} icon={`caret-alt-${caretMap[position]["prev"]}`} className="k-tabstrip-prev"></Button>
                 }
                 {scrollable &&
                     (scrollButtonsPosition === 'around' || scrollButtonsPosition === 'end') &&
-                    <Button fillMode="flat" rounded={null} size="medium" icon={`caret-alt-${caretMap[position]["next"]}`} className="k-tabstrip-next"></Button>
+                    <Button fillMode="flat" rounded={null} size={size} icon={`caret-alt-${caretMap[position]["next"]}`} className="k-tabstrip-next"></Button>
                 }
             </TabStripItemsWrapper>
             {position !== "bottom" && children}

diff --git a/packages/html/src/tabstrip/tests/tabstrip-sizes.tsx b/packages/html/src/tabstrip/tests/tabstrip-sizes.tsx
@@ -0,0 +1,57 @@
+import { TabStripContent, TabStripNormal, TabStripItem } from '..';
+
+
+export default () => (
+    <>
+        <div id="test-area" className="k-d-grid k-grid-cols-3">
+
+            <section>
+                <span>Small</span>
+                <TabStripNormal scrollable size="small"
+                    tabStripItems={
+                        <>
+                            <TabStripItem first active value="First" />
+                            <TabStripItem last value="Last" />
+                        </>
+                    }
+                >
+                    <TabStripContent active>
+                        <div>Tab Content</div>
+                    </TabStripContent>
+                </TabStripNormal>
+            </section>
+
+            <section>
+                <span>Medium</span>
+                <TabStripNormal scrollable size="medium"
+                    tabStripItems={
+                        <>
+                            <TabStripItem first active value="First" />
+                            <TabStripItem last value="Last" />
+                        </>
+                    }
+                >
+                    <TabStripContent active>
+                        <div>Tab Content</div>
+                    </TabStripContent>
+                </TabStripNormal>
+            </section>
+
+            <section>
+                <span>Large</span>
+                <TabStripNormal scrollable size="large"
+                    tabStripItems={
+                        <>
+                            <TabStripItem first active value="First" />
+                            <TabStripItem last value="Last" />
+                        </>
+                    }
+                >
+                    <TabStripContent active>
+                        <div>Tab Content</div>
+                    </TabStripContent>
+                </TabStripNormal>
+            </section>
+        </div>
+    </>
+);