From fae0aeeedc8d2d64dc778cb9f88eb307e286b2ba Mon Sep 17 00:00:00 2001
From: Jonathan Meyer <jonathan.meyer@ni.com>
Date: Tue, 29 Oct 2024 11:20:42 -0500
Subject: [PATCH] Fix issue with tab panel not sizing to height of tabs
 component. (#2458)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Pull Request

## 🤨 Rationale

The update to the `Tabs` component introducing scroll buttons #2440 also
updated the `display` setting to `flex`. This resulted in a missed
change in behavior with how the `TabPanel` might size to the height of
the `Tabs` component. See [this
discussion](https://dev.azure.com/ni/DevCentral/_git/Skyline/pullrequest/821815?discussionId=7029412).

## 👩‍💻 Implementation

Just needed to set a style on `[part="tabpanel"]` to have `flex: 1;`.

## 🧪 Testing

Added a Chromatic test that would fail without the style change.

## ✅ Checklist

<!--- Review the list and put an x in the boxes that apply or ~~strike
through~~ around items that don't (along with an explanation). -->

- [ ] I have updated the project documentation to reflect my changes or
determined no changes are needed.
---
 ...-components-a42ee4bf-86ac-4208-83d2-4e3dc091a204.json | 7 +++++++
 packages/nimble-components/src/patterns/tabs/styles.ts   | 4 ++++
 .../storybook/src/nimble/tabs/tabs-matrix.stories.ts     | 9 +++++++++
 3 files changed, 20 insertions(+)
 create mode 100644 change/@ni-nimble-components-a42ee4bf-86ac-4208-83d2-4e3dc091a204.json

diff --git a/change/@ni-nimble-components-a42ee4bf-86ac-4208-83d2-4e3dc091a204.json b/change/@ni-nimble-components-a42ee4bf-86ac-4208-83d2-4e3dc091a204.json
new file mode 100644
index 0000000000..5e41bccd2a
--- /dev/null
+++ b/change/@ni-nimble-components-a42ee4bf-86ac-4208-83d2-4e3dc091a204.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix issue with tab panel not sizing to height of tabs component.",
+  "packageName": "@ni/nimble-components",
+  "email": "26874831+atmgrifter00@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/nimble-components/src/patterns/tabs/styles.ts b/packages/nimble-components/src/patterns/tabs/styles.ts
index f77de85841..c38325156d 100644
--- a/packages/nimble-components/src/patterns/tabs/styles.ts
+++ b/packages/nimble-components/src/patterns/tabs/styles.ts
@@ -36,4 +36,8 @@ export const styles = css`
     [part='end'] {
         flex: 1;
     }
+
+    [part='tabpanel'] {
+        flex: 1;
+    }
 `;
diff --git a/packages/storybook/src/nimble/tabs/tabs-matrix.stories.ts b/packages/storybook/src/nimble/tabs/tabs-matrix.stories.ts
index 47038c88f2..466f6d9e4c 100644
--- a/packages/storybook/src/nimble/tabs/tabs-matrix.stories.ts
+++ b/packages/storybook/src/nimble/tabs/tabs-matrix.stories.ts
@@ -89,3 +89,12 @@ export const panelOverflow: StoryFn = createStory(html`
         <${tabPanelTag} style="width: 450px;">${loremIpsum}</${tabPanelTag}>
     </${tabsTag}>
 `);
+
+export const panelSizeToContent: StoryFn = createStory(html`
+    <${tabsTag} style="width: 400px; height: 400px">
+        <${tabTag}>Tab One</${tabTag}>
+        <${tabPanelTag} style="width: 400px; height: 100%;">
+            <div style="width: 250px; height: 100%; background: red;"></div>
+        </${tabPanelTag}>
+    </${tabsTag}>
+`);