baseui 10.0.0 → 10.3.0

package/list/list-heading.js

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactIs = _interopRequireDefault(require("react-is"));
+
+var _overrides = require("../helpers/overrides.js");
+
+var _styledComponents = require("./styled-components.js");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function RenderNode(props) {
+  var component = props.component,
+      restProps = _objectWithoutProperties(props, ["component"]);
+
+  var Component = component;
+
+  if (!Component) {
+    return null;
+  }
+
+  if (typeof Component === 'string') {
+    return Component;
+  }
+
+  if (_reactIs.default.isValidElementType(Component)) {
+    // $FlowFixMe
+    return /*#__PURE__*/_react.default.createElement(Component, restProps);
+  } // $FlowFixMe
+
+
+  return Component;
+}
+
+var ListHeading = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _props$overrides = props.overrides,
+      overrides = _props$overrides === void 0 ? {} : _props$overrides;
+  var EndEnhancer = props.endEnhancer;
+  var EndEnhancerDescription = props.endEnhancerDescription;
+  var SubHeading = props.subHeading;
+
+  var _getOverrides = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.StyledHeadingRoot),
+      _getOverrides2 = _slicedToArray(_getOverrides, 2),
+      Root = _getOverrides2[0],
+      rootProps = _getOverrides2[1];
+
+  var _getOverrides3 = (0, _overrides.getOverrides)(overrides.Content, _styledComponents.StyledHeadingContent),
+      _getOverrides4 = _slicedToArray(_getOverrides3, 2),
+      Content = _getOverrides4[0],
+      contentProps = _getOverrides4[1];
+
+  var _getOverrides5 = (0, _overrides.getOverrides)(overrides.HeadingContainer, _styledComponents.StyledHeadingMainHeading),
+      _getOverrides6 = _slicedToArray(_getOverrides5, 2),
+      HeadingContainer = _getOverrides6[0],
+      headingContainerProps = _getOverrides6[1];
+
+  var _getOverrides7 = (0, _overrides.getOverrides)(overrides.SubHeadingContainer, _styledComponents.StyledHeadingSubHeading),
+      _getOverrides8 = _slicedToArray(_getOverrides7, 2),
+      SubHeadingContainer = _getOverrides8[0],
+      subHeadingContainerProps = _getOverrides8[1];
+
+  var _getOverrides9 = (0, _overrides.getOverrides)(overrides.EndEnhancerContainer, _styledComponents.StyledHeadingEndEnhancerContainer),
+      _getOverrides10 = _slicedToArray(_getOverrides9, 2),
+      EndEnhancerContainer = _getOverrides10[0],
+      endEnhancerContainerProps = _getOverrides10[1];
+
+  var _getOverrides11 = (0, _overrides.getOverrides)(overrides.EndEnhancerDescriptionContainer, _styledComponents.StyledHeadingEndEnhancerDescriptionContainer),
+      _getOverrides12 = _slicedToArray(_getOverrides11, 2),
+      EndEnhancerDescriptionContainer = _getOverrides12[0],
+      endEnhancerDescriptionContainerProps = _getOverrides12[1];
+
+  var isEndEnhancerString = typeof EndEnhancer === 'string';
+
+  if (isEndEnhancerString && EndEnhancerDescription) {
+    console.warn('endEnhancerDescription will not be rendered if endEnhancer is not a string');
+  }
+
+  return /*#__PURE__*/_react.default.createElement(Root // eslint-disable-next-line flowtype/no-weak-types
+  , _extends({
+    ref: ref
+  }, rootProps), /*#__PURE__*/_react.default.createElement(Content, contentProps, /*#__PURE__*/_react.default.createElement(_styledComponents.StyledHeadingContentRow, null, /*#__PURE__*/_react.default.createElement(HeadingContainer, _extends({
+    $maxLines: props.maxLines
+  }, headingContainerProps), /*#__PURE__*/_react.default.createElement(RenderNode, {
+    component: props.heading
+  })), EndEnhancer && /*#__PURE__*/_react.default.createElement(EndEnhancerContainer, _extends({
+    $isText: isEndEnhancerString
+  }, endEnhancerContainerProps), /*#__PURE__*/_react.default.createElement(RenderNode, {
+    component: EndEnhancer
+  }))), (SubHeading || EndEnhancerDescription) && /*#__PURE__*/_react.default.createElement(_styledComponents.StyledHeadingContentRow, null, /*#__PURE__*/_react.default.createElement(SubHeadingContainer, _extends({
+    $maxLines: props.maxLines
+  }, subHeadingContainerProps), /*#__PURE__*/_react.default.createElement(RenderNode, {
+    component: SubHeading
+  })), EndEnhancerDescription && isEndEnhancerString && /*#__PURE__*/_react.default.createElement(EndEnhancerDescriptionContainer, endEnhancerDescriptionContainerProps, /*#__PURE__*/_react.default.createElement(RenderNode, {
+    component: EndEnhancerDescription
+  })))));
+});
+
+ListHeading.displayName = 'ListHeading';
+var _default = ListHeading;
+exports.default = _default;

package/list/list-heading.js.flow

@@ -0,0 +1,138 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+
+import React from 'react';
+import ReactIs from 'react-is';
+
+import {getOverrides} from '../helpers/overrides.js';
+
+import {
+  StyledHeadingRoot,
+  StyledHeadingContent,
+  StyledHeadingContentRow,
+  StyledHeadingEndEnhancerContainer,
+  StyledHeadingEndEnhancerDescriptionContainer,
+  StyledHeadingMainHeading,
+  StyledHeadingSubHeading,
+} from './styled-components.js';
+import type {HeadingPropsT} from './types.js';
+
+function RenderNode(props) {
+  const {component, ...restProps} = props;
+  const Component = component;
+  if (!Component) {
+    return null;
+  }
+  if (typeof Component === 'string') {
+    return Component;
+  }
+  if (ReactIs.isValidElementType(Component)) {
+    // $FlowFixMe
+    return <Component {...restProps} />;
+  }
+  // $FlowFixMe
+  return Component;
+}
+
+const ListHeading = React.forwardRef<HeadingPropsT, HTMLLIElement>(
+  (props: HeadingPropsT, ref) => {
+    const {overrides = {}} = props;
+    const EndEnhancer = props.endEnhancer;
+    const EndEnhancerDescription = props.endEnhancerDescription;
+    const SubHeading = props.subHeading;
+
+    const [Root, rootProps] = getOverrides(overrides.Root, StyledHeadingRoot);
+    const [Content, contentProps] = getOverrides(
+      overrides.Content,
+      StyledHeadingContent,
+    );
+    const [HeadingContainer, headingContainerProps] = getOverrides(
+      overrides.HeadingContainer,
+      StyledHeadingMainHeading,
+    );
+    const [SubHeadingContainer, subHeadingContainerProps] = getOverrides(
+      overrides.SubHeadingContainer,
+      StyledHeadingSubHeading,
+    );
+    const [EndEnhancerContainer, endEnhancerContainerProps] = getOverrides(
+      overrides.EndEnhancerContainer,
+      StyledHeadingEndEnhancerContainer,
+    );
+    const [
+      EndEnhancerDescriptionContainer,
+      endEnhancerDescriptionContainerProps,
+    ] = getOverrides(
+      overrides.EndEnhancerDescriptionContainer,
+      StyledHeadingEndEnhancerDescriptionContainer,
+    );
+
+    const isEndEnhancerString = typeof EndEnhancer === 'string';
+
+    if (isEndEnhancerString && EndEnhancerDescription) {
+      console.warn(
+        'endEnhancerDescription will not be rendered if endEnhancer is not a string',
+      );
+    }
+
+    return (
+      <Root
+        // eslint-disable-next-line flowtype/no-weak-types
+        ref={(ref: any)}
+        {...rootProps}
+      >
+        <Content {...contentProps}>
+          {/* ----- Top Row -------------------------- */}
+          <StyledHeadingContentRow>
+            <HeadingContainer
+              $maxLines={props.maxLines}
+              {...headingContainerProps}
+            >
+              <RenderNode component={props.heading} />
+            </HeadingContainer>
+
+            {EndEnhancer && (
+              <EndEnhancerContainer
+                $isText={isEndEnhancerString}
+                {...endEnhancerContainerProps}
+              >
+                <RenderNode component={EndEnhancer} />
+              </EndEnhancerContainer>
+            )}
+          </StyledHeadingContentRow>
+
+          {/* ----- Bottom Row ----------------------- */}
+          {(SubHeading || EndEnhancerDescription) && (
+            <StyledHeadingContentRow>
+              <SubHeadingContainer
+                $maxLines={props.maxLines}
+                {...subHeadingContainerProps}
+              >
+                <RenderNode component={SubHeading} />
+              </SubHeadingContainer>
+
+              {EndEnhancerDescription && isEndEnhancerString && (
+                <EndEnhancerDescriptionContainer
+                  {...endEnhancerDescriptionContainerProps}
+                >
+                  <RenderNode component={EndEnhancerDescription} />
+                </EndEnhancerDescriptionContainer>
+              )}
+            </StyledHeadingContentRow>
+          )}
+        </Content>
+      </Root>
+    );
+  },
+);
+ListHeading.displayName = 'ListHeading';
+
+export default ListHeading;
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;

package/list/list-item.js

@@ -87,7 +87,7 @@ var ListItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   })), /*#__PURE__*/_react.default.createElement(Content, _extends({
     $mLeft: !Artwork,
     $sublist: !!props.sublist
-  }, contentProps), props.children, EndEnhancer && /*#__PURE__*/_react.default.createElement(EndEnhancerContainer, endEnhancerContainerProps, /*#__PURE__*/_react.default.createElement(EndEnhancer, null))));
+  }, contentProps), props.children, EndEnhancer && EndEnhancer !== 0 && /*#__PURE__*/_react.default.createElement(EndEnhancerContainer, endEnhancerContainerProps, /*#__PURE__*/_react.default.createElement(EndEnhancer, null))));
 });
 
 ListItem.displayName = 'ListItem';

package/list/list-item.js.flow

@@ -81,7 +81,7 @@ const ListItem = React.forwardRef<PropsT, HTMLLIElement>(
         )}
         <Content $mLeft={!Artwork} $sublist={!!props.sublist} {...contentProps}>
           {props.children}
-          {EndEnhancer && (
+          {EndEnhancer && EndEnhancer !== 0 && (
             <EndEnhancerContainer {...endEnhancerContainerProps}>
               <EndEnhancer />
             </EndEnhancerContainer>

package/list/menu-adapter.js

@@ -11,6 +11,8 @@ var React = _interopRequireWildcard(require("react"));
 
 var _listItem = _interopRequireDefault(require("./list-item.js"));
 
+var _overrides = require("../helpers/overrides.js");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
@@ -30,7 +32,8 @@ var MenuAdapter = /*#__PURE__*/React.forwardRef(function (props, ref) {
     artwork: props.artwork,
     artworkSize: props.artworkSize,
     endEnhancer: props.endEnhancer,
-    overrides: {
+    overrides: // $FlowFixMe
+    (0, _overrides.mergeOverrides)({
       Root: {
         props: {
           onMouseEnter: props.onMouseEnter,
@@ -44,7 +47,7 @@ var MenuAdapter = /*#__PURE__*/React.forwardRef(function (props, ref) {
           };
         }
       }
-    }
+    }, props.overrides)
   }, props.children);
 });
 MenuAdapter.displayName = 'MenuAdapter';

package/list/menu-adapter.js.flow

@@ -10,6 +10,7 @@ import * as React from 'react';
 
 import ListItem from './list-item.js';
 import type {MenuAdapterPropsT} from './types.js';
+import {mergeOverrides} from '../helpers/overrides.js';
 
 const MenuAdapter = React.forwardRef<MenuAdapterPropsT, HTMLLIElement>(
   (props, ref) => {
@@ -20,17 +21,26 @@ const MenuAdapter = React.forwardRef<MenuAdapterPropsT, HTMLLIElement>(
         artwork={props.artwork}
         artworkSize={props.artworkSize}
         endEnhancer={props.endEnhancer}
-        overrides={{
-          Root: {
-            props: {onMouseEnter: props.onMouseEnter, onClick: props.onClick},
-            style: ({$theme}) => ({
-              backgroundColor: props.$isHighlighted
-                ? $theme.colors.menuFillHover
-                : null,
-              cursor: props.$disabled ? 'not-allowed' : 'pointer',
-            }),
-          },
-        }}
+        overrides={
+          // $FlowFixMe
+          mergeOverrides(
+            {
+              Root: {
+                props: {
+                  onMouseEnter: props.onMouseEnter,
+                  onClick: props.onClick,
+                },
+                style: ({$theme}) => ({
+                  backgroundColor: props.$isHighlighted
+                    ? $theme.colors.menuFillHover
+                    : null,
+                  cursor: props.$disabled ? 'not-allowed' : 'pointer',
+                }),
+              },
+            },
+            props.overrides,
+          )
+        }
       >
         {props.children}
       </ListItem>

package/list/styled-components.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledLabelSublistContent = exports.StyledLabelDescription = exports.StyledLabelContent = exports.StyledArtworkContainer = exports.StyledEndEnhancerContainer = exports.StyledContent = exports.StyledRoot = void 0;
+exports.StyledHeadingEndEnhancerDescriptionContainer = exports.StyledHeadingEndEnhancerContainer = exports.StyledHeadingSubHeading = exports.StyledHeadingMainHeading = exports.StyledHeadingContentRow = exports.StyledHeadingContent = exports.StyledHeadingRoot = exports.StyledLabelSublistContent = exports.StyledLabelDescription = exports.StyledLabelContent = exports.StyledArtworkContainer = exports.StyledEndEnhancerContainer = exports.StyledContent = exports.StyledRoot = void 0;
 
 var _index = require("../styles/index.js");
 
@@ -46,7 +46,7 @@ var StyledContent = (0, _index.styled)('div', function (_ref2) {
     borderLeftStyle: 'none',
     display: 'flex',
     flexGrow: 1,
-    minHeight: $sublist ? '48px' : '72px',
+    minHeight: $sublist ? 'initial' : $theme.sizing.scale1600,
     justifyContent: 'space-between'
   }, $theme.direction === 'rtl' ? {
     paddingLeft: $theme.sizing.scale600,
@@ -110,9 +110,112 @@ exports.StyledLabelDescription = StyledLabelDescription;
 StyledLabelDescription.displayName = "StyledLabelDescription";
 var StyledLabelSublistContent = (0, _index.styled)('p', function (_ref6) {
   var $theme = _ref6.$theme;
-  return _objectSpread(_objectSpread({}, $theme.typography.ParagraphMedium), {}, {
-    color: $theme.colors.contentPrimary
+  return _objectSpread(_objectSpread({}, $theme.typography.LabelMedium), {}, {
+    color: $theme.colors.contentPrimary,
+    marginTop: $theme.sizing.scale500,
+    marginBottom: $theme.sizing.scale500
   });
 });
 exports.StyledLabelSublistContent = StyledLabelSublistContent;
-StyledLabelSublistContent.displayName = "StyledLabelSublistContent";
+StyledLabelSublistContent.displayName = "StyledLabelSublistContent";
+var StyledHeadingRoot = (0, _index.styled)('div', function (_ref7) {
+  var $theme = _ref7.$theme;
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    backgroundColor: $theme.colors.backgroundPrimary,
+    overflow: 'hidden',
+    minHeight: $theme.sizing.scale1600
+  };
+});
+exports.StyledHeadingRoot = StyledHeadingRoot;
+StyledHeadingRoot.displayName = "StyledHeadingRoot";
+var StyledHeadingContent = (0, _index.styled)('div', function (_ref8) {
+  var $theme = _ref8.$theme;
+  return _objectSpread({
+    flexGrow: 1,
+    width: '100%',
+    minWidth: 0,
+    paddingTop: $theme.sizing.scale600,
+    paddingBottom: $theme.sizing.scale300
+  }, $theme.direction === 'rtl' ? {
+    paddingLeft: $theme.sizing.scale600,
+    marginRight: $theme.sizing.scale600
+  } : {
+    paddingRight: $theme.sizing.scale600,
+    marginLeft: $theme.sizing.scale600
+  });
+});
+exports.StyledHeadingContent = StyledHeadingContent;
+StyledHeadingContent.displayName = "StyledHeadingContent";
+var StyledHeadingContentRow = (0, _index.styled)('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  width: '100%'
+});
+exports.StyledHeadingContentRow = StyledHeadingContentRow;
+StyledHeadingContentRow.displayName = "StyledHeadingContentRow";
+var StyledHeadingMainHeading = (0, _index.styled)('p', // $FlowFixMe - suppressing due to webkit properties
+function (_ref9) {
+  var _ref9$$maxLines = _ref9.$maxLines,
+      $maxLines = _ref9$$maxLines === void 0 ? 1 : _ref9$$maxLines,
+      $theme = _ref9.$theme;
+  return _objectSpread(_objectSpread({}, $theme.typography.HeadingSmall), {}, {
+    color: $theme.colors.contentPrimary,
+    marginTop: 0,
+    marginBottom: 0,
+    marginRight: $theme.sizing.scale600,
+    display: '-webkit-box',
+    '-webkit-line-clamp': $maxLines,
+    '-webkit-box-orient': 'vertical',
+    overflow: 'hidden'
+  });
+});
+exports.StyledHeadingMainHeading = StyledHeadingMainHeading;
+StyledHeadingMainHeading.displayName = "StyledHeadingMainHeading";
+var StyledHeadingSubHeading = (0, _index.styled)('p', // $FlowFixMe - suppressing due to webkit properties
+function (_ref10) {
+  var _ref10$$maxLines = _ref10.$maxLines,
+      $maxLines = _ref10$$maxLines === void 0 ? 1 : _ref10$$maxLines,
+      $theme = _ref10.$theme;
+  return _objectSpread(_objectSpread({}, $theme.typography.ParagraphLarge), {}, {
+    color: $theme.colors.contentPrimary,
+    marginTop: 0,
+    marginBottom: 0,
+    marginRight: $theme.sizing.scale600,
+    display: '-webkit-box',
+    '-webkit-line-clamp': $maxLines,
+    '-webkit-box-orient': 'vertical',
+    overflow: 'hidden'
+  });
+});
+exports.StyledHeadingSubHeading = StyledHeadingSubHeading;
+StyledHeadingSubHeading.displayName = "StyledHeadingSubHeading";
+var StyledHeadingEndEnhancerContainer = (0, _index.styled)('div', function (_ref11) {
+  var $isText = _ref11.$isText,
+      $theme = _ref11.$theme;
+  return _objectSpread(_objectSpread({}, $theme.typography.LabelMedium), {}, {
+    display: 'flex',
+    alignItems: $isText ? 'flex-end' : 'center',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  });
+});
+exports.StyledHeadingEndEnhancerContainer = StyledHeadingEndEnhancerContainer;
+StyledHeadingEndEnhancerContainer.displayName = "StyledHeadingEndEnhancerContainer";
+var StyledHeadingEndEnhancerDescriptionContainer = (0, _index.styled)('p', function (_ref12) {
+  var $theme = _ref12.$theme;
+  return _objectSpread(_objectSpread({}, $theme.typography.ParagraphMedium), {}, {
+    marginTop: 0,
+    marginBottom: 0,
+    display: 'flex',
+    alignItems: 'flex-start',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  });
+});
+exports.StyledHeadingEndEnhancerDescriptionContainer = StyledHeadingEndEnhancerDescriptionContainer;
+StyledHeadingEndEnhancerDescriptionContainer.displayName = "StyledHeadingEndEnhancerDescriptionContainer";

package/list/styled-components.js.flow

@@ -12,6 +12,7 @@ import type {
   StyledRootPropsT,
   StyledContentPropsT,
   StyledArtworkContainerPropsT,
+  StyledHeadingHeadingPropsT,
 } from './types.js';
 import {artworkSizeToValue} from './utils.js';
 import {SHAPE} from './constants.js';
@@ -44,7 +45,7 @@ export const StyledContent = styled<StyledContentPropsT>(
       borderLeftStyle: 'none',
       display: 'flex',
       flexGrow: 1,
-      minHeight: $sublist ? '48px' : '72px',
+      minHeight: $sublist ? 'initial' : $theme.sizing.scale1600,
       justifyContent: 'space-between',
       ...($theme.direction === 'rtl'
         ? {
@@ -110,11 +111,111 @@ export const StyledLabelDescription = styled<{||}>('p', ({$theme}) => {
 
 export const StyledLabelSublistContent = styled<{||}>('p', ({$theme}) => {
   return {
-    ...$theme.typography.ParagraphMedium,
+    ...$theme.typography.LabelMedium,
     color: $theme.colors.contentPrimary,
+    marginTop: $theme.sizing.scale500,
+    marginBottom: $theme.sizing.scale500,
+  };
+});
+
+export const StyledHeadingRoot = styled<StyledRootPropsT>('div', ({$theme}) => {
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    backgroundColor: $theme.colors.backgroundPrimary,
+    overflow: 'hidden',
+    minHeight: $theme.sizing.scale1600,
   };
 });
 
+export const StyledHeadingContent = styled<{}>('div', ({$theme}) => {
+  return {
+    flexGrow: 1,
+    width: '100%',
+    minWidth: 0,
+    paddingTop: $theme.sizing.scale600,
+    paddingBottom: $theme.sizing.scale300,
+    ...($theme.direction === 'rtl'
+      ? {
+          paddingLeft: $theme.sizing.scale600,
+          marginRight: $theme.sizing.scale600,
+        }
+      : {
+          paddingRight: $theme.sizing.scale600,
+          marginLeft: $theme.sizing.scale600,
+        }),
+  };
+});
+
+export const StyledHeadingContentRow = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  width: '100%',
+});
+
+export const StyledHeadingMainHeading = styled<StyledHeadingHeadingPropsT>(
+  'p',
+  // $FlowFixMe - suppressing due to webkit properties
+  ({$maxLines = 1, $theme}) => {
+    return {
+      ...$theme.typography.HeadingSmall,
+      color: $theme.colors.contentPrimary,
+      marginTop: 0,
+      marginBottom: 0,
+      marginRight: $theme.sizing.scale600,
+      display: '-webkit-box',
+      '-webkit-line-clamp': $maxLines,
+      '-webkit-box-orient': 'vertical',
+      overflow: 'hidden',
+    };
+  },
+);
+
+export const StyledHeadingSubHeading = styled<StyledHeadingHeadingPropsT>(
+  'p',
+  // $FlowFixMe - suppressing due to webkit properties
+  ({$maxLines = 1, $theme}) => {
+    return {
+      ...$theme.typography.ParagraphLarge,
+      color: $theme.colors.contentPrimary,
+      marginTop: 0,
+      marginBottom: 0,
+      marginRight: $theme.sizing.scale600,
+      display: '-webkit-box',
+      '-webkit-line-clamp': $maxLines,
+      '-webkit-box-orient': 'vertical',
+      overflow: 'hidden',
+    };
+  },
+);
+
+export const StyledHeadingEndEnhancerContainer = styled<{$isText: boolean}>(
+  'div',
+  ({$isText, $theme}) => ({
+    ...$theme.typography.LabelMedium,
+    display: 'flex',
+    alignItems: $isText ? 'flex-end' : 'center',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  }),
+);
+
+export const StyledHeadingEndEnhancerDescriptionContainer = styled<{}>(
+  'p',
+  ({$theme}) => ({
+    ...$theme.typography.ParagraphMedium,
+    marginTop: 0,
+    marginBottom: 0,
+    display: 'flex',
+    alignItems: 'flex-start',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  }),
+);
+
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;
 declare var __BROWSER__: boolean;

package/list/types.js.flow

@@ -59,6 +59,28 @@ export type LabelPropsT = {|
   |},
 |};
 
+export type HeadingOverridesT = {|
+  Root?: OverrideT,
+  Content?: OverrideT,
+  HeadingContainer?: OverrideT,
+  SubHeadingContainer?: OverrideT,
+  EndEnhancerContainer?: OverrideT,
+  EndEnhancerDescriptionContainer?: OverrideT,
+|};
+
+export type HeadingPropsT = {|
+  heading: React.Node | React.AbstractComponent<{}>,
+  subHeading?: React.Node | React.AbstractComponent<{}>,
+  endEnhancer?: React.Node | React.AbstractComponent<{}>,
+  endEnhancerDescription?: React.Node | React.AbstractComponent<{}>,
+  overrides?: HeadingOverridesT,
+  maxLines?: 1 | 2,
+|};
+
+export type StyledHeadingHeadingPropsT = {|
+  $maxLines: number,
+|};
+
 export type MenuAdapterPropsT = {
   ...PropsT,
   // eslint-disable-next-line flowtype/no-weak-types