Merge remote-tracking branch 'origin/next' into carbon-upgrade-10.53

carbon-design-system · Feb 23, 2022 · f766123 · f766123
2 parents 95ae36b + 503ae17
commit f766123
Show file tree

Hide file tree

Showing 56 changed files with 21,402 additions and 2,053 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,57 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.149.0-next.9](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.149.0-next.8...v2.149.0-next.9) (2022-02-22)
+
+
+### Bug Fixes
+
+* **stateful-table:** fix multi-sort and advanced filters cooperatively ([c6c01ef](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/c6c01ef1619dfc7acdf3c1e80c7ee8f4a302c2e1))
+* **table:** maintain correct filtering when toggling multisort direction ([8b149aa](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/8b149aa739de2606fd7b7032c19c998d89d0407c))
+
+
+### Features
+
+* **card:** add padding knob to custom card story ([0220544](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/0220544f3034f2473789bd038a9162baa4af9370))
+* **card:** add padding prop to card ([214c082](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/214c0827115d3f5c4fe6c0405fdd558205b56ca9))
+* **tableviewdropdown:** add prop isHidingStandardActions ([b4e5990](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/b4e59903317eea177908fd37806a00a5f0cd0484))
+
+
+
+
+
+# [2.149.0-next.8](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.149.0-next.7...v2.149.0-next.8) (2022-02-21)
+
+**Note:** Version bump only for package ibm-ai-applications
+
+
+
+
+
+# [2.149.0-next.7](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.149.0-next.6...v2.149.0-next.7) (2022-02-21)
+
+**Note:** Version bump only for package ibm-ai-applications
+
+
+
+
+
+# [2.149.0-next.6](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.149.0-next.5...v2.149.0-next.6) (2022-02-18)
+
+
+### Bug Fixes
+
+* **card:** fix overflow tooltip for card ([68611c4](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/68611c412345ccfe29861fef1dfa17eeb9e32aed))
+
+
+### Features
+
+* **hierarchy-list:** call onExpandedChange after rows are expanded ([f6811a8](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/f6811a89909d0de4df663883924429e6f4242b38))
+
+
+
+
+
 # [2.149.0-next.5](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.149.0-next.4...v2.149.0-next.5) (2022-02-16)
 
 **Note:** Version bump only for package ibm-ai-applications

diff --git a/lerna.json b/lerna.json
@@ -3,6 +3,6 @@
     "packages/*"
   ],
   "useWorkspaces": true,
-  "version": "2.149.0-next.5",
+  "version": "2.149.0-next.9",
   "npmClient": "yarn"
 }
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -3,6 +3,57 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.149.0-next.9](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.149.0-next.8...v2.149.0-next.9) (2022-02-22)
+
+
+### Bug Fixes
+
+* **stateful-table:** fix multi-sort and advanced filters cooperatively ([c6c01ef](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/c6c01ef1619dfc7acdf3c1e80c7ee8f4a302c2e1))
+* **table:** maintain correct filtering when toggling multisort direction ([8b149aa](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/8b149aa739de2606fd7b7032c19c998d89d0407c))
+
+
+### Features
+
+* **card:** add padding knob to custom card story ([0220544](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/0220544f3034f2473789bd038a9162baa4af9370))
+* **card:** add padding prop to card ([214c082](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/214c0827115d3f5c4fe6c0405fdd558205b56ca9))
+* **tableviewdropdown:** add prop isHidingStandardActions ([b4e5990](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/b4e59903317eea177908fd37806a00a5f0cd0484))
+
+
+
+
+
+# [2.149.0-next.8](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.149.0-next.7...v2.149.0-next.8) (2022-02-21)
+
+**Note:** Version bump only for package carbon-addons-iot-react
+
+
+
+
+
+# [2.149.0-next.7](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.149.0-next.6...v2.149.0-next.7) (2022-02-21)
+
+**Note:** Version bump only for package carbon-addons-iot-react
+
+
+
+
+
+# [2.149.0-next.6](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.149.0-next.5...v2.149.0-next.6) (2022-02-18)
+
+
+### Bug Fixes
+
+* **card:** fix overflow tooltip for card ([68611c4](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/68611c412345ccfe29861fef1dfa17eeb9e32aed))
+
+
+### Features
+
+* **hierarchy-list:** call onExpandedChange after rows are expanded ([f6811a8](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/f6811a89909d0de4df663883924429e6f4242b38))
+
+
+
+
+
 # [2.149.0-next.5](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.149.0-next.4...v2.149.0-next.5) (2022-02-16)
 
 **Note:** Version bump only for package carbon-addons-iot-react

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -339,7 +339,7 @@
     "whatwg-fetch": "^3.0.0"
   },
   "sideEffects": false,
-  "version": "2.149.0-next.5",
+  "version": "2.149.0-next.9",
   "resolutions": {
     "chokidar": "3.3.1",
     "react-grid-layout": "1.2.2"

diff --git a/packages/react/src/components/BarChartCard/__snapshots__/BarChartCard.story.storyshot b/packages/react/src/components/BarChartCard/__snapshots__/BarChartCard.story.storyshot
@@ -34,6 +34,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/B
         >
           <div
             className="iot--card--title--text"
+            data-testid="Card-title-notip"
           >
             Particles and temperature in cities
           </div>
@@ -136,6 +137,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/B
         >
           <div
             className="iot--card--title--text"
+            data-testid="Card-title-notip"
           >
             Particles by city
           </div>
@@ -238,6 +240,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/B
         >
           <div
             className="iot--card--title--text"
+            data-testid="Card-title-notip"
           >
             Particles over 4 days
           </div>
@@ -389,6 +392,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/B
         >
           <div
             className="iot--card--title--text"
+            data-testid="Card-title-notip"
           >
             Temperature over time
           </div>
@@ -491,6 +495,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/B
         >
           <div
             className="iot--card--title--text"
+            data-testid="Card-title-notip"
           >
             Particles and temperature in cities
           </div>
@@ -593,6 +598,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/B
         >
           <div
             className="iot--card--title--text"
+            data-testid="Card-title-notip"
           >
             Particles / emissions over 4 days
           </div>
@@ -744,6 +750,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/B
         >
           <div
             className="iot--card--title--text"
+            data-testid="Card-title-notip"
           >
             Particles by city over time
           </div>

diff --git a/packages/react/src/components/Card/Card.jsx b/packages/react/src/components/Card/Card.jsx
@@ -104,14 +104,15 @@ export const CardTitle = (
 );
 
 const CardContent = (props) => {
-  const { children, dimensions, isExpanded, className, testId } = props;
+  const { children, dimensions, isExpanded, className, testId, noPadding } = props;
   const height = `${dimensions.y - CARD_TITLE_HEIGHT}px`;
   return (
     <div
       data-testid={testId}
       style={{ [`--card-content-height`]: height }}
       className={classnames(className, `${iotPrefix}--card--content`, {
         [`${iotPrefix}--card--content--expanded`]: isExpanded,
+        [`${iotPrefix}--card__content--no-padding`]: noPadding,
       })}
     >
       {children}
@@ -171,8 +172,14 @@ CardContent.propTypes = {
   children: PropTypes.node,
   dimensions: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }).isRequired,
   isExpanded: CardPropTypes.isExpanded.isRequired,
+  noPadding: PropTypes.bool,
+};
+CardContent.defaultProps = {
+  children: undefined,
+  className: '',
+  testId: 'card-content',
+  noPadding: false,
 };
-CardContent.defaultProps = { children: undefined, className: '', testId: 'card-content' };
 EmptyMessageWrapper.propTypes = {
   children: PropTypes.node.isRequired,
 };
@@ -252,6 +259,7 @@ export const defaultProps = {
   testId: CardWrapper.defaultProps.testId,
   footerContent: undefined,
   dateTimeMask: 'YYYY-MM-DD HH:mm',
+  padding: 'default',
 };
 
 /** Dumb component that renders the card basics */
@@ -291,6 +299,7 @@ const Card = (props) => {
     footerContent: CardFooter,
     dateTimeMask,
     extraActions,
+    padding,
     ...others
   } = props;
 
@@ -386,8 +395,8 @@ const Card = (props) => {
   // Ensure the title and subtitle have a tooltip only if their text is truncated
   const titleRef = useRef();
   const subTitleRef = useRef();
-  const hasTitleTooltip = useHasTextOverflow(titleRef);
-  const hasSubTitleTooltip = useHasTextOverflow(subTitleRef);
+  const hasTitleTooltip = useHasTextOverflow(titleRef, title);
+  const hasSubTitleTooltip = useHasTextOverflow(subTitleRef, subtitle);
   const visibilityRef = useRef(null);
   const [isVisible] = useVisibilityObserver(visibilityRef, {
     unobserveAfterVisible: true,
@@ -473,6 +482,7 @@ const Card = (props) => {
             ) : (
               <div
                 ref={titleRef}
+                data-testid={`${testId}-title-notip`}
                 className={classnames(`${iotPrefix}--card--title--text`, {
                   [`${iotPrefix}--card--title--text--wrapped`]: hasTitleWrap && !subtitle,
                 })}
@@ -525,6 +535,7 @@ const Card = (props) => {
         dimensions={dimensions}
         isExpanded={isExpanded}
         className={contentClassName}
+        noPadding={padding === 'none'}
       >
         {!isVisible && isLazyLoading ? ( // if not visible don't show anything
           ''

diff --git a/packages/react/src/components/Card/Card.mdx b/packages/react/src/components/Card/Card.mdx
@@ -645,6 +645,7 @@ You can use extraActions on a Card. Which can be used in the card toolbar to eit
 | availableActions.extra          | bool                                                                                                                                                  |                                                                           |                                                                                                                                                    |
 | renderExpandIcon                | function, node                                                                                                                                        | undefined                                                                 |                                                                                                                                                    |
 | footerContent                   | elementType                                                                                                                                           | undefined                                                                 | footer content is limited to 2.5rem (40px)                                                                                                         |
+| padding                         | enum: 'default', 'none'                                                                                                                               | 'default'                                                                 | Should inner padding be added to the card content or not                                                                                           |
 | rowHeight                       | shape                                                                                                                                                 |                                                                           | Row height in pixels for each layout                                                                                                               |
 | rowHeight.lg                    | number                                                                                                                                                |                                                                           |                                                                                                                                                    |
 | rowHeight.md                    | number                                                                                                                                                |                                                                           |                                                                                                                                                    |
@@ -662,7 +663,7 @@ You can use extraActions on a Card. Which can be used in the card toolbar to eit
 | dashboardColumns.sm             | number                                                                                                                                                |                                                                           |                                                                                                                                                    |
 | dashboardColumns.xs             | number                                                                                                                                                |                                                                           |                                                                                                                                                    |
 | cardDimensions                  | shape [see cardDimensions Prop](#carddimensions-prop)                                                                                                 |                                                                           | array of configurable sizes to dimensions. The numbered sizes represent the number of columns and rows the card spans at that size and breakpoint. |
-| extraActions                    | shape                                                                                                                                                 |                                                                           | extra action object to either display single icon or array of items to be displayed as overflow items.                                                |
+| extraActions                    | shape                                                                                                                                                 |                                                                           | extra action object to either display single icon or array of items to be displayed as overflow items.                                             |
 | i18n                            | shape                                                                                                                                                 |                                                                           |                                                                                                                                                    |
 | i18n.noDataLabel                | string                                                                                                                                                | 'No data is available for this time range.'                               |                                                                                                                                                    |
 | i18n.noDataShortLabel           | string                                                                                                                                                | 'No data'                                                                 |                                                                                                                                                    |

diff --git a/packages/react/src/components/Card/Card.story.jsx b/packages/react/src/components/Card/Card.story.jsx
@@ -112,6 +112,11 @@ export const Basic = () => {
           renderExpandIcon={Tree16}
           onFocus={action('onFocus')}
           tabIndex={0}
+          padding={select(
+            'Apply padding to the card content or not (padding)',
+            ['default', 'none'],
+            'default'
+          )}
         />
       </CardStoryStateManager>
     </div>
@@ -423,11 +428,15 @@ export const ImplementingACustomCard = () => {
         availableActions={{ range: size !== CARD_SIZES.SMALL, expand: true }}
         onCardAction={action('onCardAction')}
         hideHeader
+        padding={select(
+          'Apply padding to the card content or not (padding)',
+          ['default', 'none'],
+          'none'
+        )}
       >
         {!isEditable
           ? (_$, { cardToolbar, values }) => (
               <Table
-                style={{ width: 'calc(100% + 2rem)', transform: 'translateX(-1rem)' }}
                 id="my table"
                 secondaryTitle={title}
                 columns={[

diff --git a/packages/react/src/components/Card/Card.test.e2e.jsx b/packages/react/src/components/Card/Card.test.e2e.jsx
@@ -37,4 +37,36 @@ describe('Card', () => {
     cy.scrollTo('bottom', { duration: 1000 });
     cy.findAllByText(/renderprop/).should('have.length', 8);
   });
+
+  it('should render tooltip if the text is too long', () => {
+    cy.viewport(1680, 900);
+    const aLongTitle =
+      'A very very long title which will almost certainly overflow and require a tooltip and we must test these things, you know.';
+    mount(
+      <Card
+        style={{ width: '400px', height: '360px' }}
+        id="myCard"
+        title={aLongTitle}
+        size={CARD_SIZES.MEDIUM}
+      />
+    );
+
+    cy.findByRole('button', { name: aLongTitle }).should('exist');
+  });
+
+  it('should not render tooltip if the text is not too long', () => {
+    cy.viewport(1680, 900);
+    const aShortTitle = 'A short title';
+    mount(
+      <Card
+        style={{ width: '600px', height: '360px' }}
+        id="myCard"
+        title={aShortTitle}
+        size={CARD_SIZES.MEDIUM}
+        breakpoint="lg"
+      />
+    );
+
+    cy.findByRole('button', { name: aShortTitle }).should('not.exist');
+  });
 });