@instructure/ui-tabs 8.9.2-snapshot.7 → 8.10.1-snapshot.8

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.10.0](https://github.com/instructure/instructure-ui/compare/v8.9.1...v8.10.0) (2021-09-28)
+
+### Bug Fixes
+
+- **ui-tabs:** Fix small typo in ui-tabs readme ([6a2a770](https://github.com/instructure/instructure-ui/commit/6a2a7703791c742cbc3ea00dc66ccec21f2810d6))
+
+### Features
+
+- **ui-tabs:** add 'fixHeight' prop to Tabs ([b63e6e7](https://github.com/instructure/instructure-ui/commit/b63e6e71705efa7880195ea1e40b3eac67db06b9))
+
 ## [8.9.1](https://github.com/instructure/instructure-ui/compare/v8.9.0...v8.9.1) (2021-09-16)
 
 **Note:** Version bump only for package @instructure/ui-tabs

package/es/Tabs/Panel/styles.js

@@ -33,20 +33,28 @@
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const maxHeight = props.maxHeight;
+  const maxHeight = props.maxHeight,
+        isSelected = props.isSelected;
   return {
     panel: {
       label: 'panel',
       boxSizing: 'border-box',
+      flexShrink: 0,
+      flexGrow: 0,
       fontFamily: componentTheme.fontFamily,
       fontWeight: componentTheme.fontWeight,
       lineHeight: componentTheme.lineHeight,
-      fontSize: componentTheme.fontSize
+      fontSize: componentTheme.fontSize,
+      ...(isSelected && {
+        flexGrow: 1,
+        height: '100%'
+      })
     },
     content: {
       label: 'panel__content',
       boxSizing: 'border-box',
       width: '100%',
+      height: '100%',
       borderWidth: componentTheme.borderWidth,
       borderStyle: componentTheme.borderStyle,
       background: componentTheme.background,
@@ -55,6 +63,7 @@ const generateStyle = (componentTheme, props) => {
       borderLeft: 'none',
       borderRight: 'none',
       borderBottom: 'none',
+      overflowY: 'auto',
       ...(maxHeight && {
         overflow: 'auto'
       })

package/es/Tabs/index.js

@@ -284,7 +284,9 @@ let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = bid
   }
 
   clonePanel(index, generatedId, selected, panel) {
-    const id = panel.props.id || generatedId;
+    const id = panel.props.id || generatedId; // fixHeight can be 0, so simply `fixheight` could return falsy value
+
+    const hasFixedHeight = typeof this.props.fixHeight !== 'undefined';
     return safeCloneElement(panel, {
       id: panel.props.id || `panel-${id}`,
       labelledBy: `tab-${id}`,
@@ -293,8 +295,8 @@ let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = bid
       variant: this.props.variant,
       padding: panel.props.padding || this.props.padding,
       textAlign: panel.props.textAlign || this.props.textAlign,
-      maxHeight: panel.maxHeight || this.props.maxHeight,
-      minHeight: panel.minHeight || this.props.minHeight
+      maxHeight: panel.maxHeight || (!hasFixedHeight ? this.props.maxHeight : void 0),
+      minHeight: panel.minHeight || (!hasFixedHeight ? this.props.minHeight : '100%')
     });
   }
 
@@ -366,7 +368,9 @@ let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = bid
       css: styles === null || styles === void 0 ? void 0 : styles.tabList,
       "aria-label": screenReaderLabel,
       elementRef: this.handleTabListRef
-    }, tabs, withScrollFade && scrollFadeEls))), panels);
+    }, tabs, withScrollFade && scrollFadeEls))), jsx("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.panelsContainer
+    }, panels));
   }
 
 }, _class2.displayName = "Tabs", _class2.componentId = 'Tabs', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {

package/es/Tabs/props.js

@@ -44,6 +44,7 @@ const propTypes = {
   maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  fixHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
   /**
    * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
@@ -68,5 +69,5 @@ const propTypes = {
   tabOverflow: PropTypes.oneOf(['stack', 'scroll']),
   shouldFocusOnRender: PropTypes.bool
 };
-const allowedProps = ['children', 'variant', 'screenReaderLabel', 'onRequestTabChange', 'maxWidth', 'maxHeight', 'minHeight', 'margin', 'padding', 'textAlign', 'elementRef', 'tabOverflow', 'shouldFocusOnRender'];
+const allowedProps = ['children', 'variant', 'screenReaderLabel', 'onRequestTabChange', 'maxWidth', 'maxHeight', 'minHeight', 'fixHeight', 'margin', 'padding', 'textAlign', 'elementRef', 'tabOverflow', 'shouldFocusOnRender'];
 export { propTypes, allowedProps };

package/es/Tabs/styles.js

@@ -34,7 +34,10 @@
  */
 const generateStyle = (componentTheme, props) => {
   const variant = props.variant,
-        tabOverflow = props.tabOverflow;
+        tabOverflow = props.tabOverflow,
+        fixHeight = props.fixHeight; // fixHeight can be 0, so simply `fixheight` could return falsy value
+
+  const hasFixedHeight = typeof fixHeight !== 'undefined';
   const variants = {
     default: {
       container: {
@@ -84,10 +87,15 @@ const generateStyle = (componentTheme, props) => {
   return {
     tabs: {
       label: 'tabs',
+      flexShrink: 0,
+      flexGrow: 0,
       ...variants[variant].tabs
     },
     container: {
       label: 'tabs__container',
+      display: 'flex',
+      flexDirection: 'column',
+      height: fixHeight,
       ...variants[variant].container
     },
     tabList: {
@@ -96,6 +104,16 @@ const generateStyle = (componentTheme, props) => {
       width: '100%',
       ...tabOverflowVariants[tabOverflow]
     },
+    panelsContainer: {
+      label: 'tabs__panelsContainer',
+      flexShrink: 1,
+      flexGrow: 1,
+      display: 'flex',
+      flexDirection: 'column',
+      ...(hasFixedHeight && {
+        overflowY: 'hidden'
+      })
+    },
     scrollOverlay: {
       label: 'tabs__scrollOverlay',
       height: `calc(100% - (${componentTheme.tabVerticalOffset} + 0.25rem))`,

package/lib/Tabs/Panel/styles.js

@@ -40,20 +40,28 @@ exports.default = void 0;
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const maxHeight = props.maxHeight;
+  const maxHeight = props.maxHeight,
+        isSelected = props.isSelected;
   return {
     panel: {
       label: 'panel',
       boxSizing: 'border-box',
+      flexShrink: 0,
+      flexGrow: 0,
       fontFamily: componentTheme.fontFamily,
       fontWeight: componentTheme.fontWeight,
       lineHeight: componentTheme.lineHeight,
-      fontSize: componentTheme.fontSize
+      fontSize: componentTheme.fontSize,
+      ...(isSelected && {
+        flexGrow: 1,
+        height: '100%'
+      })
     },
     content: {
       label: 'panel__content',
       boxSizing: 'border-box',
       width: '100%',
+      height: '100%',
       borderWidth: componentTheme.borderWidth,
       borderStyle: componentTheme.borderStyle,
       background: componentTheme.background,
@@ -62,6 +70,7 @@ const generateStyle = (componentTheme, props) => {
       borderLeft: 'none',
       borderRight: 'none',
       borderBottom: 'none',
+      overflowY: 'auto',
       ...(maxHeight && {
         overflow: 'auto'
       })

package/lib/Tabs/index.js

@@ -299,7 +299,9 @@ let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
   }
 
   clonePanel(index, generatedId, selected, panel) {
-    const id = panel.props.id || generatedId;
+    const id = panel.props.id || generatedId; // fixHeight can be 0, so simply `fixheight` could return falsy value
+
+    const hasFixedHeight = typeof this.props.fixHeight !== 'undefined';
     return (0, _safeCloneElement.safeCloneElement)(panel, {
       id: panel.props.id || `panel-${id}`,
       labelledBy: `tab-${id}`,
@@ -308,8 +310,8 @@ let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
       variant: this.props.variant,
       padding: panel.props.padding || this.props.padding,
       textAlign: panel.props.textAlign || this.props.textAlign,
-      maxHeight: panel.maxHeight || this.props.maxHeight,
-      minHeight: panel.minHeight || this.props.minHeight
+      maxHeight: panel.maxHeight || (!hasFixedHeight ? this.props.maxHeight : void 0),
+      minHeight: panel.minHeight || (!hasFixedHeight ? this.props.minHeight : '100%')
     });
   }
 
@@ -383,7 +385,9 @@ let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
       css: styles === null || styles === void 0 ? void 0 : styles.tabList,
       "aria-label": screenReaderLabel,
       elementRef: this.handleTabListRef
-    }, tabs, withScrollFade && scrollFadeEls))), panels);
+    }, tabs, withScrollFade && scrollFadeEls))), (0, _emotion.jsx)("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.panelsContainer
+    }, panels));
   }
 
 }, _class2.displayName = "Tabs", _class2.componentId = 'Tabs', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {

package/lib/Tabs/props.js

@@ -57,6 +57,7 @@ const propTypes = {
   maxWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   maxHeight: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   minHeight: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  fixHeight: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
 
   /**
    * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
@@ -82,5 +83,5 @@ const propTypes = {
   shouldFocusOnRender: _propTypes.default.bool
 };
 exports.propTypes = propTypes;
-const allowedProps = ['children', 'variant', 'screenReaderLabel', 'onRequestTabChange', 'maxWidth', 'maxHeight', 'minHeight', 'margin', 'padding', 'textAlign', 'elementRef', 'tabOverflow', 'shouldFocusOnRender'];
+const allowedProps = ['children', 'variant', 'screenReaderLabel', 'onRequestTabChange', 'maxWidth', 'maxHeight', 'minHeight', 'fixHeight', 'margin', 'padding', 'textAlign', 'elementRef', 'tabOverflow', 'shouldFocusOnRender'];
 exports.allowedProps = allowedProps;

package/lib/Tabs/styles.js

@@ -41,7 +41,10 @@ exports.default = void 0;
  */
 const generateStyle = (componentTheme, props) => {
   const variant = props.variant,
-        tabOverflow = props.tabOverflow;
+        tabOverflow = props.tabOverflow,
+        fixHeight = props.fixHeight; // fixHeight can be 0, so simply `fixheight` could return falsy value
+
+  const hasFixedHeight = typeof fixHeight !== 'undefined';
   const variants = {
     default: {
       container: {
@@ -91,10 +94,15 @@ const generateStyle = (componentTheme, props) => {
   return {
     tabs: {
       label: 'tabs',
+      flexShrink: 0,
+      flexGrow: 0,
       ...variants[variant].tabs
     },
     container: {
       label: 'tabs__container',
+      display: 'flex',
+      flexDirection: 'column',
+      height: fixHeight,
       ...variants[variant].container
     },
     tabList: {
@@ -103,6 +111,16 @@ const generateStyle = (componentTheme, props) => {
       width: '100%',
       ...tabOverflowVariants[tabOverflow]
     },
+    panelsContainer: {
+      label: 'tabs__panelsContainer',
+      flexShrink: 1,
+      flexGrow: 1,
+      display: 'flex',
+      flexDirection: 'column',
+      ...(hasFixedHeight && {
+        overflowY: 'hidden'
+      })
+    },
     scrollOverlay: {
       label: 'tabs__scrollOverlay',
       height: `calc(100% - (${componentTheme.tabVerticalOffset} + 0.25rem))`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-tabs",
-  "version": "8.9.2-snapshot.7+1a56581cd",
+  "version": "8.10.1-snapshot.8+21f46f4e3",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,28 +24,28 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/ui-color-utils": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/ui-test-locator": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/ui-test-utils": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/ui-themes": "8.9.2-snapshot.7+1a56581cd"
+    "@instructure/ui-babel-preset": "8.10.1-snapshot.8+21f46f4e3",
+    "@instructure/ui-color-utils": "8.10.1-snapshot.8+21f46f4e3",
+    "@instructure/ui-test-locator": "8.10.1-snapshot.8+21f46f4e3",
+    "@instructure/ui-test-utils": "8.10.1-snapshot.8+21f46f4e3",
+    "@instructure/ui-themes": "8.10.1-snapshot.8+21f46f4e3"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/debounce": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/emotion": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/shared-types": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/ui-dom-utils": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/ui-focusable": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/ui-i18n": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/ui-motion": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/ui-prop-types": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/ui-react-utils": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/ui-testable": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/ui-utils": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/ui-view": "8.9.2-snapshot.7+1a56581cd",
-    "@instructure/uid": "8.9.2-snapshot.7+1a56581cd",
+    "@instructure/console": "8.10.1-snapshot.8+21f46f4e3",
+    "@instructure/debounce": "8.10.1-snapshot.8+21f46f4e3",
+    "@instructure/emotion": "8.10.1-snapshot.8+21f46f4e3",
+    "@instructure/shared-types": "8.10.1-snapshot.8+21f46f4e3",
+    "@instructure/ui-dom-utils": "8.10.1-snapshot.8+21f46f4e3",
+    "@instructure/ui-focusable": "8.10.1-snapshot.8+21f46f4e3",
+    "@instructure/ui-i18n": "8.10.1-snapshot.8+21f46f4e3",
+    "@instructure/ui-motion": "8.10.1-snapshot.8+21f46f4e3",
+    "@instructure/ui-prop-types": "8.10.1-snapshot.8+21f46f4e3",
+    "@instructure/ui-react-utils": "8.10.1-snapshot.8+21f46f4e3",
+    "@instructure/ui-testable": "8.10.1-snapshot.8+21f46f4e3",
+    "@instructure/ui-utils": "8.10.1-snapshot.8+21f46f4e3",
+    "@instructure/ui-view": "8.10.1-snapshot.8+21f46f4e3",
+    "@instructure/uid": "8.10.1-snapshot.8+21f46f4e3",
     "keycode": "^2",
     "prop-types": "^15"
   },
@@ -56,5 +56,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "1a56581cde6bd3b4f9fe5cd11ae420bd1222fe15"
+  "gitHead": "21f46f4e342898b019ab943a7e69a455621d9576"
 }

package/src/Tabs/Panel/props.ts

@@ -27,8 +27,12 @@ import PropTypes from 'prop-types'
 
 import { ThemeablePropTypes } from '@instructure/emotion'
 
-import type { Spacing, WithStyleProps } from '@instructure/emotion'
-import type { PropValidators } from '@instructure/shared-types'
+import type {
+  Spacing,
+  WithStyleProps,
+  ComponentStyle
+} from '@instructure/emotion'
+import type { PropValidators, TabsPanelTheme } from '@instructure/shared-types'
 
 type TabsPanelOwnProps = {
   renderTitle: React.ReactNode | ((...args: any[]) => any)
@@ -49,7 +53,10 @@ type PropKeys = keyof TabsPanelOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type TabsPanelProps = TabsPanelOwnProps & WithStyleProps
+type TabsPanelProps = TabsPanelOwnProps &
+  WithStyleProps<TabsPanelTheme, TabsPanelStyle>
+
+type TabsPanelStyle = ComponentStyle<'panel' | 'content'>
 
 const propTypes: PropValidators<PropKeys> = {
   /**
@@ -85,5 +92,5 @@ const allowedProps: AllowedPropKeys = [
   'elementRef'
 ]
 
-export type { TabsPanelProps }
+export type { TabsPanelProps, TabsPanelStyle }
 export { propTypes, allowedProps }

package/src/Tabs/Panel/styles.ts

@@ -22,8 +22,8 @@
  * SOFTWARE.
  */
 
-import { TabsPanelTheme } from '@instructure/shared-types'
-import { TabsPanelProps } from './props'
+import type { TabsPanelTheme } from '@instructure/shared-types'
+import type { TabsPanelProps, TabsPanelStyle } from './props'
 
 /**
  * ---
@@ -38,22 +38,29 @@ import { TabsPanelProps } from './props'
 const generateStyle = (
   componentTheme: TabsPanelTheme,
   props: TabsPanelProps
-) => {
-  const { maxHeight } = props
+): TabsPanelStyle => {
+  const { maxHeight, isSelected } = props
 
   return {
     panel: {
       label: 'panel',
       boxSizing: 'border-box',
+      flexShrink: 0,
+      flexGrow: 0,
       fontFamily: componentTheme.fontFamily,
       fontWeight: componentTheme.fontWeight,
       lineHeight: componentTheme.lineHeight,
-      fontSize: componentTheme.fontSize
+      fontSize: componentTheme.fontSize,
+      ...(isSelected && {
+        flexGrow: 1,
+        height: '100%'
+      })
     },
     content: {
       label: 'panel__content',
       boxSizing: 'border-box',
       width: '100%',
+      height: '100%',
       borderWidth: componentTheme.borderWidth,
       borderStyle: componentTheme.borderStyle,
       background: componentTheme.background,
@@ -62,6 +69,7 @@ const generateStyle = (
       borderLeft: 'none',
       borderRight: 'none',
       borderBottom: 'none',
+      overflowY: 'auto',
       ...(maxHeight && { overflow: 'auto' })
     }
   }

package/src/Tabs/README.md

@@ -4,8 +4,6 @@ describes: Tabs
 
 `<Tabs />` is an accessible tabbed navigation component. Use the TAB key to focus the component and arrow keys to navigate between panels of content. To set a default panel that should be selected on initial render, set the `selected` prop on that `<Tabs.Panel>`.
 
-To restrict the width of `<Tabs />`, use the `maxWidth` prop. Add space around the entire component using the `margin` prop. Adjust the padding around the panel content via `padding` (default is `small`) on each `<Tabs.Panel>`. Restrict the height of the panel using `minHeight` or `maxHeight`. Finally, switch the text alignment of the panel content with `textAlign`.
-
 ```js
 ---
 example: true
@@ -33,7 +31,7 @@ class Example extends React.Component {
           renderTitle="Tab A"
           textAlign="center"
           padding="large"
-          iSelected={selectedIndex === 0}
+          isSelected={selectedIndex === 0}
         >
           <Button>Focus Me</Button>
         </Tabs.Panel>
@@ -158,6 +156,106 @@ class Example extends React.Component {
 render(<Example />)
 ```
 
+### Controlling the size and the spacing
+
+To restrict the width of `<Tabs />`, use the `maxWidth` prop. Add space around the entire component using the `margin` prop. Adjust the padding around the panel content via `padding` (default is `small`) on each `<Tabs.Panel>`.
+
+Set the height of the Tabs component with the `fixHeight` property (set to '100%' to fill out it's parent element). You can also restrict the height of the **panels** using the `minHeight` and `maxHeight` properties (they don't work if you set `fixHeight` on the whole Tabs component).
+
+Finally, switch the text alignment of the panel content with `textAlign`.
+
+```js
+---
+example: true
+render: false
+---
+class Example extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      selectedIndex: 0,
+      heightOption: 'fixHeight: 100%'
+    }
+
+    this.heightOptions = {
+      ['fixHeight: 100%']: { fixHeight: '100%' },
+      ['fixHeight: 15rem']: { fixHeight: '15rem' },
+      ['minHeight: 17rem']: { minHeight: '17rem' },
+      ['maxHeight: 10rem']: { maxHeight: '10rem' }
+    }
+  }
+
+  handleTabChange = (event, { index, id }) => {
+    this.setState({
+      selectedIndex: index
+    })
+  }
+
+  handleHeightOptionSelect = (e, heightOption) => {
+    this.setState({ heightOption })
+  }
+
+  render () {
+    const { selectedIndex, heightOption } = this.state
+    const { heightOptions } = this
+
+    const containerProps = {
+      as: 'div',
+      ...(heightOption.includes('fixHeight') && {
+        height: "22rem",
+        withVisualDebug: true
+      })
+    }
+
+    return (
+      <>
+        <View display="block" margin="none none medium">
+          <RadioInputGroup
+            name="tabsHeightOptions"
+            defaultValue="fixHeight: 100%"
+            description={<ScreenReaderContent>Tabs height selector</ScreenReaderContent>}
+            variant="toggle"
+            onChange={this.handleHeightOptionSelect}
+          >
+            {Object.keys(heightOptions).map((heightOption) => <RadioInput key={heightOption} label={heightOption} value={heightOption} />)}
+          </RadioInputGroup>
+        </View>
+
+        <View {...containerProps}>
+          <Tabs
+            margin="large auto"
+            padding="medium"
+            onRequestTabChange={this.handleTabChange}
+            {...heightOptions[heightOption]}
+          >
+            <Tabs.Panel
+              id="tabA"
+              renderTitle="Tab A"
+              textAlign="center"
+              padding="large"
+              iSelected={selectedIndex === 0}
+            >
+              <Button>Focus Me</Button>
+            </Tabs.Panel>
+            <Tabs.Panel id="tabB" renderTitle="Disabled Tab" isDisabled>
+              {lorem.paragraphs()}
+            </Tabs.Panel>
+            <Tabs.Panel id="tabC" renderTitle="Tab C" isSelected={selectedIndex === 2}>
+              {lorem.paragraphs()}
+            </Tabs.Panel>
+            <Tabs.Panel id="tabD" renderTitle="Tab D" isSelected={selectedIndex === 3}>
+              {lorem.paragraphs()}
+            </Tabs.Panel>
+          </Tabs>
+        </View>
+      </>
+    )
+  }
+}
+
+render(<Example />)
+```
+
 ### Guidelines
 
 ```js

package/src/Tabs/Tab/props.ts

@@ -21,11 +21,12 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import type { PropValidators } from '@instructure/shared-types'
-import type { WithStyleProps } from '@instructure/emotion'
+import type { PropValidators, TabsTabTheme } from '@instructure/shared-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 type TabsTabOwnProps = {
   variant?: 'default' | 'secondary'
@@ -43,7 +44,9 @@ type PropKeys = keyof TabsTabOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type TabsTabProps = TabsTabOwnProps & WithStyleProps
+type TabsTabProps = TabsTabOwnProps & WithStyleProps<TabsTabTheme, TabsTabStyle>
+
+type TabsTabStyle = ComponentStyle<'tab'>
 
 const propTypes: PropValidators<PropKeys> = {
   variant: PropTypes.oneOf(['default', 'secondary']),
@@ -69,5 +72,5 @@ const allowedProps: AllowedPropKeys = [
   'children'
 ]
 
-export type { TabsTabProps }
+export type { TabsTabProps, TabsTabStyle }
 export { propTypes, allowedProps }

package/src/Tabs/Tab/styles.ts

@@ -23,8 +23,9 @@
  */
 
 import { keyframes } from '@instructure/emotion'
-import { TabsTabTheme } from '@instructure/shared-types'
-import { TabsTabProps } from './props'
+
+import type { TabsTabTheme } from '@instructure/shared-types'
+import type { TabsTabProps, TabsTabStyle } from './props'
 
 // keyframes have to be outside of 'generateStyle',
 // since it is causing problems in style recalculation
@@ -47,7 +48,7 @@ const selectedTab = keyframes`
 const generateStyle = (
   componentTheme: TabsTabTheme,
   props: TabsTabProps
-): any => {
+): TabsTabStyle => {
   const { variant, isSelected, isDisabled } = props
 
   const variants = {

package/src/Tabs/index.tsx

@@ -365,6 +365,9 @@ class Tabs extends Component<TabsProps> {
   clonePanel(index, generatedId, selected, panel) {
     const id = panel.props.id || generatedId
 
+    // fixHeight can be 0, so simply `fixheight` could return falsy value
+    const hasFixedHeight = typeof this.props.fixHeight !== 'undefined'
+
     return safeCloneElement(panel, {
       id: panel.props.id || `panel-${id}`,
       labelledBy: `tab-${id}`,
@@ -373,8 +376,10 @@ class Tabs extends Component<TabsProps> {
       variant: this.props.variant,
       padding: panel.props.padding || this.props.padding,
       textAlign: panel.props.textAlign || this.props.textAlign,
-      maxHeight: panel.maxHeight || this.props.maxHeight,
-      minHeight: panel.minHeight || this.props.minHeight
+      maxHeight:
+        panel.maxHeight || (!hasFixedHeight ? this.props.maxHeight : undefined),
+      minHeight:
+        panel.minHeight || (!hasFixedHeight ? this.props.minHeight : '100%')
     })
   }
 
@@ -492,8 +497,11 @@ class Tabs extends Component<TabsProps> {
             </View>
           )}
         </Focusable>
-        {/* @ts-expect-error ts-migrate(7005) FIXME: Variable 'panels' implicitly has an 'any[]' type. */}
-        {panels}
+
+        <div css={styles?.panelsContainer}>
+          {/* @ts-expect-error ts-migrate(7005) FIXME: Variable 'panels' implicitly has an 'any[]' type. */}
+          {panels}
+        </div>
       </View>
     )
   }

package/src/Tabs/props.ts

@@ -29,8 +29,12 @@ import { ThemeablePropTypes } from '@instructure/emotion'
 
 import { Panel } from './Panel'
 
-import type { Spacing, WithStyleProps } from '@instructure/emotion'
-import type { PropValidators } from '@instructure/shared-types'
+import type {
+  Spacing,
+  WithStyleProps,
+  ComponentStyle
+} from '@instructure/emotion'
+import type { PropValidators, TabsTheme } from '@instructure/shared-types'
 import type { BidirectionalProps } from '@instructure/ui-i18n'
 
 type TabsOwnProps = {
@@ -40,6 +44,7 @@ type TabsOwnProps = {
   maxWidth?: string | number
   maxHeight?: string | number
   minHeight?: string | number
+  fixHeight?: string | number
   margin?: Spacing
   padding?: Spacing
   textAlign?: 'start' | 'center' | 'end'
@@ -49,12 +54,25 @@ type TabsOwnProps = {
   children?: React.ReactNode // TODO: oneOf([Panel, null])
 }
 
-type TabsProps = TabsOwnProps & BidirectionalProps & WithStyleProps
-
 type PropKeys = keyof TabsOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
+type TabsProps = TabsOwnProps &
+  BidirectionalProps &
+  WithStyleProps<TabsTheme, TabsStyle>
+
+type TabsStyle = ComponentStyle<
+  | 'tabs'
+  | 'container'
+  | 'tabList'
+  | 'panelsContainer'
+  | 'scrollOverlay'
+  | 'scrollSpacer'
+  | 'scrollOverlayWidthDefault'
+  | 'scrollOverlayWidthSecondary'
+>
+
 const propTypes: PropValidators<PropKeys> = {
   /**
    * children of type `Tabs.Panel`
@@ -72,6 +90,7 @@ const propTypes: PropValidators<PropKeys> = {
   maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  fixHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /**
    * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
    * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
@@ -102,6 +121,7 @@ const allowedProps: AllowedPropKeys = [
   'maxWidth',
   'maxHeight',
   'minHeight',
+  'fixHeight',
   'margin',
   'padding',
   'textAlign',
@@ -110,5 +130,5 @@ const allowedProps: AllowedPropKeys = [
   'shouldFocusOnRender'
 ]
 
-export type { TabsProps }
+export type { TabsProps, TabsStyle }
 export { propTypes, allowedProps }

package/src/Tabs/styles.ts

@@ -22,8 +22,8 @@
  * SOFTWARE.
  */
 
-import { TabsTheme } from '@instructure/shared-types'
-import { TabsProps } from './props'
+import type { TabsTheme } from '@instructure/shared-types'
+import type { TabsProps, TabsStyle } from './props'
 
 /**
  * ---
@@ -35,8 +35,14 @@ import { TabsProps } from './props'
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (componentTheme: TabsTheme, props: TabsProps) => {
-  const { variant, tabOverflow } = props
+const generateStyle = (
+  componentTheme: TabsTheme,
+  props: TabsProps
+): TabsStyle => {
+  const { variant, tabOverflow, fixHeight } = props
+
+  // fixHeight can be 0, so simply `fixheight` could return falsy value
+  const hasFixedHeight = typeof fixHeight !== 'undefined'
 
   const variants = {
     default: {
@@ -79,11 +85,16 @@ const generateStyle = (componentTheme: TabsTheme, props: TabsProps) => {
   return {
     tabs: {
       label: 'tabs',
+      flexShrink: 0,
+      flexGrow: 0,
       ...variants[variant!].tabs
     },
 
     container: {
       label: 'tabs__container',
+      display: 'flex',
+      flexDirection: 'column',
+      height: fixHeight,
       ...variants[variant!].container
     },
 
@@ -94,6 +105,17 @@ const generateStyle = (componentTheme: TabsTheme, props: TabsProps) => {
       ...tabOverflowVariants[tabOverflow!]
     },
 
+    panelsContainer: {
+      label: 'tabs__panelsContainer',
+      flexShrink: 1,
+      flexGrow: 1,
+      display: 'flex',
+      flexDirection: 'column',
+      ...(hasFixedHeight && {
+        overflowY: 'hidden'
+      })
+    },
+
     scrollOverlay: {
       label: 'tabs__scrollOverlay',
       height: `calc(100% - (${componentTheme.tabVerticalOffset} + 0.25rem))`,

package/types/Tabs/Panel/props.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { Spacing, WithStyleProps } from '@instructure/emotion';
-import type { PropValidators } from '@instructure/shared-types';
+import type { Spacing, WithStyleProps, ComponentStyle } from '@instructure/emotion';
+import type { PropValidators, TabsPanelTheme } from '@instructure/shared-types';
 declare type TabsPanelOwnProps = {
     renderTitle: React.ReactNode | ((...args: any[]) => any);
     variant?: 'default' | 'secondary';
@@ -17,9 +17,10 @@ declare type TabsPanelOwnProps = {
 };
 declare type PropKeys = keyof TabsPanelOwnProps;
 declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
-declare type TabsPanelProps = TabsPanelOwnProps & WithStyleProps;
+declare type TabsPanelProps = TabsPanelOwnProps & WithStyleProps<TabsPanelTheme, TabsPanelStyle>;
+declare type TabsPanelStyle = ComponentStyle<'panel' | 'content'>;
 declare const propTypes: PropValidators<PropKeys>;
 declare const allowedProps: AllowedPropKeys;
-export type { TabsPanelProps };
+export type { TabsPanelProps, TabsPanelStyle };
 export { propTypes, allowedProps };
 //# sourceMappingURL=props.d.ts.map

package/types/Tabs/Panel/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/Tabs/Panel/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AACnE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAE/D,aAAK,iBAAiB,GAAG;IACvB,WAAW,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IACxD,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IACjC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IACtC,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,iBAAiB,CAAA;AAEvC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,cAAc,GAAG,iBAAiB,GAAG,cAAc,CAAA;AAExD,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAiBvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAanB,CAAA;AAED,YAAY,EAAE,cAAc,EAAE,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/Tabs/Panel/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACf,MAAM,sBAAsB,CAAA;AAC7B,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAE/E,aAAK,iBAAiB,GAAG;IACvB,WAAW,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IACxD,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IACjC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IACtC,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,iBAAiB,CAAA;AAEvC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,cAAc,GAAG,iBAAiB,GACrC,cAAc,CAAC,cAAc,EAAE,cAAc,CAAC,CAAA;AAEhD,aAAK,cAAc,GAAG,cAAc,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;AAEzD,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAiBvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAanB,CAAA;AAED,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,CAAA;AAC9C,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}

package/types/Tabs/Panel/styles.d.ts

@@ -1,5 +1,5 @@
-import { TabsPanelTheme } from '@instructure/shared-types';
-import { TabsPanelProps } from './props';
+import type { TabsPanelTheme } from '@instructure/shared-types';
+import type { TabsPanelProps, TabsPanelStyle } from './props';
 /**
  * ---
  * private: true
@@ -10,29 +10,6 @@ import { TabsPanelProps } from './props';
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-declare const generateStyle: (componentTheme: TabsPanelTheme, props: TabsPanelProps) => {
-    panel: {
-        label: string;
-        boxSizing: string;
-        fontFamily: string;
-        fontWeight: number;
-        lineHeight: string | number;
-        fontSize: string | 0;
-    };
-    content: {
-        overflow?: string | undefined;
-        label: string;
-        boxSizing: string;
-        width: string;
-        borderWidth: string | 0;
-        borderStyle: string;
-        background: string;
-        borderColor: string;
-        color: string;
-        borderLeft: string;
-        borderRight: string;
-        borderBottom: string;
-    };
-};
+declare const generateStyle: (componentTheme: TabsPanelTheme, props: TabsPanelProps) => TabsPanelStyle;
 export default generateStyle;
 //# sourceMappingURL=styles.d.ts.map

package/types/Tabs/Panel/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Tabs/Panel/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAExC;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBACD,cAAc,SACvB,cAAc;;;;;;;;;;;;;;;;;;;;;;;CA4BtB,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Tabs/Panel/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7D;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBACD,cAAc,SACvB,cAAc,KACpB,cAmCF,CAAA;AAED,eAAe,aAAa,CAAA"}

package/types/Tabs/Tab/index.d.ts

@@ -18,6 +18,12 @@ declare class Tab extends Component<TabsTabProps> {
         isDisabled?: boolean | undefined;
         isSelected?: boolean | undefined;
         onClick?: ((...args: any[]) => any) | undefined;
+        /**
+        ---
+        parent: Tabs
+        id: Tabs.Tab
+        ---
+        **/
         onKeyDown?: ((...args: any[]) => any) | undefined;
         children?: import("react").ReactNode | ((...args: any[]) => import("react").ReactNode);
     })[];
@@ -29,6 +35,12 @@ declare class Tab extends Component<TabsTabProps> {
         isDisabled?: boolean | undefined;
         isSelected?: boolean | undefined;
         onClick?: ((...args: any[]) => any) | undefined;
+        /**
+        ---
+        parent: Tabs
+        id: Tabs.Tab
+        ---
+        **/
         onKeyDown?: ((...args: any[]) => any) | undefined;
         children?: import("react").ReactNode | ((...args: any[]) => import("react").ReactNode);
     }>;

package/types/Tabs/Tab/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Tabs/Tab/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAIrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAG3C;;;;;GAKG;AACH,cACM,GAAI,SAAQ,SAAS,CAAC,YAAY,CAAC;IACvC,MAAM,CAAC,QAAQ,CAAC,WAAW,cAAa;IAExC,MAAM,CAAC,YAAY;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,SAAS;;;;;;;;;;OAAY;IAE5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;MASlB;IAED,iBAAiB;IAKjB,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IAKjD,WAAW,uBASV;IAGD,aAAa,uBASZ;IAED,MAAM;CA+BP;AAED,eAAe,GAAG,CAAA;AAClB,OAAO,EAAE,GAAG,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Tabs/Tab/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAIrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAG3C;;;;;GAKG;AACH,cACM,GAAI,SAAQ,SAAS,CAAC,YAAY,CAAC;IACvC,MAAM,CAAC,QAAQ,CAAC,WAAW,cAAa;IAExC,MAAM,CAAC,YAAY;;;;;;;;QAVrB;;;;;WAKG;;;SAKiC;IAClC,MAAM,CAAC,SAAS;;;;;;;;QAXlB;;;;;WAKG;;;OAM2B;IAE5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;MASlB;IAED,iBAAiB;IAKjB,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IAKjD,WAAW,uBASV;IAGD,aAAa,uBASZ;IAED,MAAM;CA+BP;AAED,eAAe,GAAG,CAAA;AAClB,OAAO,EAAE,GAAG,EAAE,CAAA"}

package/types/Tabs/Tab/props.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { PropValidators } from '@instructure/shared-types';
-import type { WithStyleProps } from '@instructure/emotion';
+import type { PropValidators, TabsTabTheme } from '@instructure/shared-types';
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion';
 declare type TabsTabOwnProps = {
     variant?: 'default' | 'secondary';
     id: string;
@@ -14,9 +14,10 @@ declare type TabsTabOwnProps = {
 };
 declare type PropKeys = keyof TabsTabOwnProps;
 declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
-declare type TabsTabProps = TabsTabOwnProps & WithStyleProps;
+declare type TabsTabProps = TabsTabOwnProps & WithStyleProps<TabsTabTheme, TabsTabStyle>;
+declare type TabsTabStyle = ComponentStyle<'tab'>;
 declare const propTypes: PropValidators<PropKeys>;
 declare const allowedProps: AllowedPropKeys;
-export type { TabsTabProps };
+export type { TabsTabProps, TabsTabStyle };
 export { propTypes, allowedProps };
 //# sourceMappingURL=props.d.ts.map

package/types/Tabs/Tab/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/Tabs/Tab/props.ts"],"names":[],"mappings":"AAuBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1D,aAAK,eAAe,GAAG;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IACjC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACjC,SAAS,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;CACnE,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,eAAe,CAAA;AAErC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,YAAY,GAAG,eAAe,GAAG,cAAc,CAAA;AAEpD,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAUvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAUnB,CAAA;AAED,YAAY,EAAE,YAAY,EAAE,CAAA;AAC5B,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/Tabs/Tab/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAC7E,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1E,aAAK,eAAe,GAAG;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IACjC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACjC,SAAS,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;CACnE,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,eAAe,CAAA;AAErC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,YAAY,GAAG,eAAe,GAAG,cAAc,CAAC,YAAY,EAAE,YAAY,CAAC,CAAA;AAEhF,aAAK,YAAY,GAAG,cAAc,CAAC,KAAK,CAAC,CAAA;AAEzC,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAUvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAUnB,CAAA;AAED,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,CAAA;AAC1C,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}

package/types/Tabs/Tab/styles.d.ts

@@ -1,5 +1,5 @@
-import { TabsTabTheme } from '@instructure/shared-types';
-import { TabsTabProps } from './props';
+import type { TabsTabTheme } from '@instructure/shared-types';
+import type { TabsTabProps, TabsTabStyle } from './props';
 /**
  * ---
  * private: true
@@ -10,6 +10,6 @@ import { TabsTabProps } from './props';
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-declare const generateStyle: (componentTheme: TabsTabTheme, props: TabsTabProps) => any;
+declare const generateStyle: (componentTheme: TabsTabTheme, props: TabsTabProps) => TabsTabStyle;
 export default generateStyle;
 //# sourceMappingURL=styles.d.ts.map

package/types/Tabs/Tab/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Tabs/Tab/styles.ts"],"names":[],"mappings":"AAyBA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAUtC;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBACD,YAAY,SACrB,YAAY,KAClB,GAsFF,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Tabs/Tab/styles.ts"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAUzD;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBACD,YAAY,SACrB,YAAY,KAClB,YAsFF,CAAA;AAED,eAAe,aAAa,CAAA"}

package/types/Tabs/index.d.ts

@@ -18,6 +18,7 @@ declare class Tabs extends Component<TabsProps> {
         maxWidth?: string | number | undefined;
         maxHeight?: string | number | undefined;
         minHeight?: string | number | undefined;
+        fixHeight?: string | number | undefined;
         margin?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
         padding?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
         textAlign?: "start" | "center" | "end" | undefined;
@@ -33,6 +34,7 @@ declare class Tabs extends Component<TabsProps> {
         maxWidth?: string | number | undefined;
         maxHeight?: string | number | undefined;
         minHeight?: string | number | undefined;
+        fixHeight?: string | number | undefined;
         margin?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
         padding?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
         textAlign?: "start" | "center" | "end" | undefined;

package/types/Tabs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Tabs/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,KAAK,EAAE,EAAE,SAAS,EAAiB,MAAM,OAAO,CAAA;AAmBvD,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAKrD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAGxC;;;;GAIG;AACH,cAGM,IAAK,SAAQ,SAAS,CAAC,SAAS,CAAC;IACrC,MAAM,CAAC,QAAQ,CAAC,WAAW,UAAS;IAEpC,MAAM,CAAC,YAAY;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,SAAS;;;;;;;;;;;;;;OAAY;IAE5B,MAAM,CAAC,YAAY;;;;;;;;;;MAQlB;IAED,MAAM,CAAC,KAAK,eAAQ;IACpB,MAAM,CAAC,GAAG,aAAM;gBAGJ,KAAK,KAAA;IAajB,iBAAiB;IAcjB,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IA+CjD,oBAAoB;IAIpB,mBAAmB;IA2BnB,oBAAoB;IAepB,eAAe;IAaf,wBAAwB,CAAC,WAAW,KAAA;IAiDpC,cAAc;;;eAGb;IAGD,gBAAgB;;eAoBf;IAED,YAAY,aAQX;IAGD,UAAU,CAAC,UAAU,KAAA,EAAE,IAAI,KAAA;;;;IA8B3B,YAAY,CAAC,KAAK,KAAA,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;;;KAAA;IAYjC,SAAS,CAAC,KAAK,KAAA,EAAE,WAAW,KAAA,EAAE,QAAQ,KAAA,EAAE,KAAK,KAAA;IAmB7C,UAAU,CAAC,KAAK,KAAA,EAAE,WAAW,KAAA,EAAE,QAAQ,KAAA,EAAE,KAAK,KAAA;;;;;;;;;;;IAiB9C,kBAAkB,oBAGjB;IAGD,gBAAgB,oBAGf;IAED,KAAK;IASL,MAAM;CAkGP;AAED,eAAe,IAAI,CAAA;AACnB,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Tabs/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,KAAK,EAAE,EAAE,SAAS,EAAiB,MAAM,OAAO,CAAA;AAmBvD,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAKrD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAGxC;;;;GAIG;AACH,cAGM,IAAK,SAAQ,SAAS,CAAC,SAAS,CAAC;IACrC,MAAM,CAAC,QAAQ,CAAC,WAAW,UAAS;IAEpC,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;OAAY;IAE5B,MAAM,CAAC,YAAY;;;;;;;;;;MAQlB;IAED,MAAM,CAAC,KAAK,eAAQ;IACpB,MAAM,CAAC,GAAG,aAAM;gBAGJ,KAAK,KAAA;IAajB,iBAAiB;IAcjB,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IA+CjD,oBAAoB;IAIpB,mBAAmB;IA2BnB,oBAAoB;IAepB,eAAe;IAaf,wBAAwB,CAAC,WAAW,KAAA;IAiDpC,cAAc;;;eAGb;IAGD,gBAAgB;;eAoBf;IAED,YAAY,aAQX;IAGD,UAAU,CAAC,UAAU,KAAA,EAAE,IAAI,KAAA;;;;IA8B3B,YAAY,CAAC,KAAK,KAAA,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;;;KAAA;IAYjC,SAAS,CAAC,KAAK,KAAA,EAAE,WAAW,KAAA,EAAE,QAAQ,KAAA,EAAE,KAAK,KAAA;IAmB7C,UAAU,CAAC,KAAK,KAAA,EAAE,WAAW,KAAA,EAAE,QAAQ,KAAA,EAAE,KAAK,KAAA;;;;;;;;;;;IAsB9C,kBAAkB,oBAGjB;IAGD,gBAAgB,oBAGf;IAED,KAAK;IASL,MAAM;CAqGP;AAED,eAAe,IAAI,CAAA;AACnB,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,CAAA"}

package/types/Tabs/props.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { Spacing, WithStyleProps } from '@instructure/emotion';
-import type { PropValidators } from '@instructure/shared-types';
+import type { Spacing, WithStyleProps, ComponentStyle } from '@instructure/emotion';
+import type { PropValidators, TabsTheme } from '@instructure/shared-types';
 import type { BidirectionalProps } from '@instructure/ui-i18n';
 declare type TabsOwnProps = {
     variant?: 'default' | 'secondary';
@@ -9,6 +9,7 @@ declare type TabsOwnProps = {
     maxWidth?: string | number;
     maxHeight?: string | number;
     minHeight?: string | number;
+    fixHeight?: string | number;
     margin?: Spacing;
     padding?: Spacing;
     textAlign?: 'start' | 'center' | 'end';
@@ -17,11 +18,12 @@ declare type TabsOwnProps = {
     shouldFocusOnRender?: boolean;
     children?: React.ReactNode;
 };
-declare type TabsProps = TabsOwnProps & BidirectionalProps & WithStyleProps;
 declare type PropKeys = keyof TabsOwnProps;
 declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
+declare type TabsProps = TabsOwnProps & BidirectionalProps & WithStyleProps<TabsTheme, TabsStyle>;
+declare type TabsStyle = ComponentStyle<'tabs' | 'container' | 'tabList' | 'panelsContainer' | 'scrollOverlay' | 'scrollSpacer' | 'scrollOverlayWidthDefault' | 'scrollOverlayWidthSecondary'>;
 declare const propTypes: PropValidators<PropKeys>;
 declare const allowedProps: AllowedPropKeys;
-export type { TabsProps };
+export type { TabsProps, TabsStyle };
 export { propTypes, allowedProps };
 //# sourceMappingURL=props.d.ts.map

package/types/Tabs/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Tabs/props.ts"],"names":[],"mappings":"AAuBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AACnE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC/D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAE9D,aAAK,YAAY,GAAG;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IACjC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,kBAAkB,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAC5C,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IACtC,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACpC,WAAW,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAChC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED,aAAK,SAAS,GAAG,YAAY,GAAG,kBAAkB,GAAG,cAAc,CAAA;AAEnE,aAAK,QAAQ,GAAG,MAAM,YAAY,CAAA;AAElC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAqCvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAcnB,CAAA;AAED,YAAY,EAAE,SAAS,EAAE,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Tabs/props.ts"],"names":[],"mappings":"AAuBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACf,MAAM,sBAAsB,CAAA;AAC7B,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAC1E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAE9D,aAAK,YAAY,GAAG;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IACjC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,kBAAkB,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAC5C,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IACtC,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACpC,WAAW,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAChC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,YAAY,CAAA;AAElC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,SAAS,GAAG,YAAY,GAC3B,kBAAkB,GAClB,cAAc,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;AAEtC,aAAK,SAAS,GAAG,cAAc,CAC3B,MAAM,GACN,WAAW,GACX,SAAS,GACT,iBAAiB,GACjB,eAAe,GACf,cAAc,GACd,2BAA2B,GAC3B,6BAA6B,CAChC,CAAA;AAED,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAsCvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAenB,CAAA;AAED,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,CAAA;AACpC,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}

package/types/Tabs/styles.d.ts

@@ -1,5 +1,5 @@
-import { TabsTheme } from '@instructure/shared-types';
-import { TabsProps } from './props';
+import type { TabsTheme } from '@instructure/shared-types';
+import type { TabsProps, TabsStyle } from './props';
 /**
  * ---
  * private: true
@@ -10,74 +10,6 @@ import { TabsProps } from './props';
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-declare const generateStyle: (componentTheme: TabsTheme, props: TabsProps) => {
-    tabs: {
-        marginBottom?: string | undefined;
-        label: string;
-    };
-    container: {
-        background?: string | undefined;
-        label: string;
-    };
-    tabList: {
-        flexFlow: string;
-        label: string;
-        display: string;
-        width: string;
-    } | {
-        '&::-webkit-scrollbar-track'?: {
-            backgroundColor: string;
-        } | undefined;
-        '&::-webkit-scrollbar'?: {
-            height: string;
-            backgroundColor: string;
-        } | undefined;
-        '&::-webkit-scrollbar-thumb'?: {
-            backgroundColor: string;
-        } | undefined;
-        overflowX: string;
-        label: string;
-        display: string;
-        width: string;
-    };
-    scrollOverlay: {
-        '[dir="rtl"] &': {
-            background: string;
-        };
-        width: string;
-        label: string;
-        height: string;
-        position: string;
-        zIndex: number;
-        top: string;
-        insetInlineEnd: string;
-        background: string;
-        pointerEvents: string;
-    } | {
-        '[dir="rtl"] &': {
-            background: string;
-        };
-        width: string;
-        label: string;
-        height: string;
-        position: string;
-        zIndex: number;
-        top: string;
-        insetInlineEnd: string;
-        background: string;
-        pointerEvents: string;
-    };
-    scrollSpacer: {
-        flexBasis: string;
-        label: string;
-        flexShrink: number;
-    } | {
-        flexBasis: string;
-        label: string;
-        flexShrink: number;
-    };
-    scrollOverlayWidthDefault: string;
-    scrollOverlayWidthSecondary: string;
-};
+declare const generateStyle: (componentTheme: TabsTheme, props: TabsProps) => TabsStyle;
 export default generateStyle;
 //# sourceMappingURL=styles.d.ts.map

package/types/Tabs/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Tabs/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAEnC;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBAAoB,SAAS,SAAS,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoFjE,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Tabs/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAEnD;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBACD,SAAS,SAClB,SAAS,KACf,SAuGF,CAAA;AAED,eAAe,aAAa,CAAA"}