feat(card): update breakpoint sizes

carbon-design-system · Nov 20, 2020 · 5e3132a · 5e3132a
1 parent cb272f9
commit 5e3132a
Show file tree

Hide file tree

Showing 28 changed files with 674 additions and 606 deletions.
diff --git a/src/components/BarChartCard/__snapshots__/BarChartCard.story.storyshot b/src/components/BarChartCard/__snapshots__/BarChartCard.story.storyshot
@@ -16,7 +16,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
       style={
         Object {
           "margin": 20,
-          "width": "520px",
+          "width": "1056px",
         }
       }
     >
@@ -139,7 +139,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
       style={
         Object {
           "margin": 20,
-          "width": "520px",
+          "width": "1056px",
         }
       }
     >
@@ -433,7 +433,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
       style={
         Object {
           "margin": 20,
-          "width": "520px",
+          "width": "1056px",
         }
       }
     >
@@ -556,7 +556,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
       style={
         Object {
           "margin": 20,
-          "width": "520px",
+          "width": "1056px",
         }
       }
     >
@@ -724,7 +724,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
       style={
         Object {
           "margin": 20,
-          "width": "520px",
+          "width": "1056px",
         }
       }
     >
@@ -847,7 +847,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
       style={
         Object {
           "margin": 20,
-          "width": "520px",
+          "width": "1056px",
         }
       }
     >
@@ -970,7 +970,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
       style={
         Object {
           "margin": 20,
-          "width": "520px",
+          "width": "1056px",
         }
       }
     >
@@ -1138,7 +1138,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
       style={
         Object {
           "margin": 20,
-          "width": "520px",
+          "width": "1056px",
         }
       }
     >
@@ -1306,7 +1306,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
       style={
         Object {
           "margin": 20,
-          "width": "520px",
+          "width": "1056px",
         }
       }
     >
@@ -1429,7 +1429,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
       style={
         Object {
           "margin": 20,
-          "width": "520px",
+          "width": "1056px",
         }
       }
     >
@@ -1519,7 +1519,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
       style={
         Object {
           "margin": 20,
-          "width": "520px",
+          "width": "1056px",
         }
       }
     >

diff --git a/src/components/Card/__snapshots__/Card.story.storyshot b/src/components/Card/__snapshots__/Card.story.storyshot
@@ -180,7 +180,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Card
       style={
         Object {
           "margin": 20,
-          "width": "252px",
+          "width": "520px",
         }
       }
     >
@@ -346,7 +346,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Card
       style={
         Object {
           "margin": 20,
-          "width": "252px",
+          "width": "520px",
         }
       }
     >
@@ -831,7 +831,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Card
       style={
         Object {
           "margin": 20,
-          "width": "252px",
+          "width": "520px",
         }
       }
     >
@@ -964,7 +964,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Card
       style={
         Object {
           "margin": 20,
-          "width": "252px",
+          "width": "520px",
         }
       }
     >
@@ -1079,7 +1079,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Card
       style={
         Object {
           "margin": 20,
-          "width": "252px",
+          "width": "520px",
         }
       }
     >
@@ -1254,7 +1254,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Card
       style={
         Object {
           "margin": 20,
-          "width": "252px",
+          "width": "520px",
         }
       }
     >
@@ -1466,7 +1466,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Card
       style={
         Object {
           "margin": 20,
-          "width": "252px",
+          "width": "520px",
         }
       }
     >
@@ -1572,7 +1572,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Card
       style={
         Object {
           "margin": 20,
-          "width": "520px",
+          "width": "1056px",
         }
       }
     >
@@ -2032,7 +2032,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Card
       style={
         Object {
           "margin": 20,
-          "width": "252px",
+          "width": "520px",
         }
       }
     >
@@ -2163,7 +2163,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Card
       style={
         Object {
           "margin": 20,
-          "width": "252px",
+          "width": "520px",
         }
       }
     >
@@ -2361,7 +2361,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Card
       style={
         Object {
           "margin": 20,
-          "width": "252px",
+          "width": "520px",
         }
       }
     >
@@ -2503,7 +2503,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Card
       style={
         Object {
           "margin": 20,
-          "width": "252px",
+          "width": "520px",
         }
       }
     >
@@ -2621,7 +2621,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Card
       style={
         Object {
           "margin": 20,
-          "width": "252px",
+          "width": "520px",
         }
       }
     >

diff --git a/src/components/CardEditor/CardEditForm/CardEditForm.jsx b/src/components/CardEditor/CardEditForm/CardEditForm.jsx
@@ -62,6 +62,7 @@ const propTypes = {
    * @returns Array<string> error strings. return empty array if there is no errors
    */
   onValidateCardJson: PropTypes.func,
+  currentBreakpoint: PropTypes.string,
 };
 
 const defaultProps = {
@@ -91,6 +92,7 @@ const defaultProps = {
   getValidTimeRanges: null,
   dataItems: [],
   onValidateCardJson: null,
+  currentBreakpoint: 'xl',
 };
 
 /**
@@ -166,6 +168,7 @@ const CardEditForm = ({
   onValidateCardJson,
   getValidDataItems,
   getValidTimeRanges,
+  currentBreakpoint,
 }) => {
   const mergedI18n = { ...defaultProps.i18n, ...i18n };
   const [showEditor, setShowEditor] = useState(false);
@@ -208,6 +211,7 @@ const CardEditForm = ({
               dataItems={dataItems}
               getValidDataItems={getValidDataItems}
               getValidTimeRanges={getValidTimeRanges}
+              currentBreakpoint={currentBreakpoint}
             />
           </Tab>
           <Tab label={mergedI18n.settingsTabLabel}>

diff --git a/src/components/CardEditor/CardEditForm/CardEditFormContent.jsx b/src/components/CardEditor/CardEditForm/CardEditFormContent.jsx
@@ -98,6 +98,7 @@ const propTypes = {
    * this prop will be ignored if getValidDataItems is defined
    */
   dataItems: DataItemsPropTypes,
+  currentBreakpoint: PropTypes.string,
 };
 
 const defaultProps = {
@@ -138,6 +139,7 @@ const defaultProps = {
   getValidDataItems: null,
   getValidTimeRanges: null,
   dataItems: [],
+  currentBreakpoint: 'xl',
 };
 
 const defaultTimeRangeOptions = [
@@ -158,9 +160,9 @@ const defaultTimeRangeOptions = [
  * @param {Object<string>} i18n
  * @returns {string}
  */
-export const getCardSizeText = (size, i18n) => {
+export const getCardSizeText = (size, i18n, breakpoint) => {
   const sizeName = i18n[`cardSize_${size}`];
-  const sizeDimensions = `(${CARD_DIMENSIONS[size].lg.w}x${CARD_DIMENSIONS[size].lg.h})`;
+  const sizeDimensions = `(${CARD_DIMENSIONS[size][breakpoint].w}x${CARD_DIMENSIONS[size][breakpoint].h})`;
   return `${sizeName} ${sizeDimensions}`;
 };
 
@@ -171,6 +173,7 @@ const CardEditFormContent = ({
   dataItems,
   getValidDataItems,
   getValidTimeRanges,
+  currentBreakpoint,
 }) => {
   const { title, description, size, type, id } = cardConfig;
   const mergedI18n = { ...defaultProps.i18n, ...i18n };
@@ -217,11 +220,14 @@ const CardEditFormContent = ({
           ).map((cardSize) => {
             return {
               id: cardSize,
-              text: getCardSizeText(cardSize, mergedI18n),
+              text: getCardSizeText(cardSize, mergedI18n, currentBreakpoint),
             };
           })}
           light
-          selectedItem={{ id: size, text: getCardSizeText(size, mergedI18n) }}
+          selectedItem={{
+            id: size,
+            text: getCardSizeText(size, mergedI18n, currentBreakpoint),
+          }}
           onChange={({ selectedItem }) => {
             onChange({ ...cardConfig, size: selectedItem.id });
           }}

diff --git a/src/components/CardEditor/CardEditor.jsx b/src/components/CardEditor/CardEditor.jsx
@@ -73,6 +73,7 @@ const propTypes = {
     addCardButton: PropTypes.string,
     searchPlaceholderText: PropTypes.string,
   }),
+  currentBreakpoint: PropTypes.string,
 };
 
 const defaultProps = {
@@ -90,6 +91,7 @@ const defaultProps = {
   dataItems: [],
   supportedCardTypes: Object.keys(DASHBOARD_EDITOR_CARD_TYPES),
   onValidateCardJson: null,
+  currentBreakpoint: 'xl',
 };
 
 const baseClassName = `${iotPrefix}--card-editor`;
@@ -105,6 +107,7 @@ const CardEditor = ({
   onValidateCardJson,
   supportedCardTypes,
   i18n,
+  currentBreakpoint,
 }) => {
   const mergedI18n = { ...defaultProps.i18n, ...i18n };
 
@@ -141,6 +144,7 @@ const CardEditor = ({
             getValidTimeRanges={getValidTimeRanges}
             onValidateCardJson={onValidateCardJson}
             i18n={mergedI18n}
+            currentBreakpoint={currentBreakpoint}
           />
         )}
       </div>

diff --git a/src/components/CardEditor/CardEditor.test.jsx b/src/components/CardEditor/CardEditor.test.jsx
@@ -54,7 +54,7 @@ describe('CardEditor', () => {
     userEvent.click(
       screen.getByRole('button', { name: `Size Small (4x1) Open menu` })
     );
-    userEvent.click(screen.getByText('Medium wide (8x2)'));
+    userEvent.click(screen.getByText('Medium wide (16x2)'));
     expect(actions.onChange).toHaveBeenCalledWith({
       ...defaultCard,
       size: 'MEDIUMWIDE',

diff --git a/src/components/CardEditor/__snapshots__/CardEditor.story.storyshot b/src/components/CardEditor/__snapshots__/CardEditor.story.storyshot
@@ -723,7 +723,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
                       <span
                         className="bx--list-box__label"
                       >
-                        Medium wide (8x2)
+                        Medium wide (16x2)
                       </span>
                       <div
                         className="bx--list-box__menu-icon"

diff --git a/src/components/Dashboard/DashboardGrid.jsx b/src/components/Dashboard/DashboardGrid.jsx
@@ -184,7 +184,15 @@ export const findLayoutOrGenerate = (layouts, cards, supportedLayouts) => {
 
     const layoutWithResizableItems = layout.map((cardFromLayout) => {
       const matchingCard = find(cards, { id: cardFromLayout.i });
-      return { ...cardFromLayout, isResizable: matchingCard.isResizable };
+      return {
+        ...cardFromLayout,
+        // only add resizable attribute if it exists
+        ...(matchingCard.isResizable
+          ? {
+              isResizable: matchingCard.isResizable,
+            }
+          : {}),
+      };
     });
 
     return {