@ons/design-system 72.0.0 → 72.1.0

package/components/summary/_macro.spec.js

@@ -399,12 +399,6 @@ describe('macro: summary', () => {
                 expect($('#row-id-3').length).toBe(1);
             });
 
-            it('has the correct class for each row when there is a `valueList`', () => {
-                const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
-
-                expect($('.ons-summary__row--has-values').length).toBe(5);
-            });
-
             it('has custom row `titleAttributes`', () => {
                 const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
@@ -462,18 +456,16 @@ describe('macro: summary', () => {
                 const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
                 expect(
-                    $('.ons-summary__items .ons-summary__item:nth-of-type(1) .ons-summary__row .ons-summary__values .ons-summary__text')
-                        .text()
-                        .trim(),
+                    $('.ons-summary__items .ons-summary__item:nth-of-type(1) .ons-summary__values .ons-summary__text').text().trim(),
                 ).toBe('row value 1');
             });
 
             it('displays the `other` text', () => {
                 const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
-                expect(
-                    $('.ons-summary__items .ons-summary__item:nth-of-type(1) .ons-summary__row .ons-summary__values ul li').text().trim(),
-                ).toBe('other value');
+                expect($('.ons-summary__items .ons-summary__item:nth-of-type(1) .ons-summary__values ul li').text().trim()).toBe(
+                    'other value',
+                );
             });
 
             it('wraps the `valueList` in a ul if multiple values provided', () => {
@@ -601,9 +593,7 @@ describe('macro: summary', () => {
                 }),
             );
 
-            expect($('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__row .ons-summary__item-title span').text()).toBe(
-                ' — row value 2',
-            );
+            expect($('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__item-title span').text()).toBe(' — row value 2');
         });
     });
 

package/components/summary/_summary.scss

@@ -18,12 +18,10 @@ $hub-row-spacing: 1.3rem;
         }
     }
 
-    &__row {
+    &__item {
         display: flex;
         margin: 0;
-    }
-
-    &__item {
+        flex-wrap: wrap;
         &:not(:last-child),
         &:not(.ons-summary__group--card .ons-summary__item):nth-of-type(1) {
             border-bottom: 1px solid var(--ons-color-borders);
@@ -51,6 +49,7 @@ $hub-row-spacing: 1.3rem;
     &__row-title {
         padding: $summary-row-spacing 0;
         text-align: left;
+        flex: 0 0 100%;
     }
     // reduces the gap between row title and summary title when there is no group title
     &__title + &__group &__row-title--no-group-title {
@@ -95,12 +94,13 @@ $hub-row-spacing: 1.3rem;
         width: 1px;
     }
 
-    // Item Modifiers
+    // Row Modifiers
     &__item--error & {
         &__row-title--error {
             color: var(--ons-color-errors);
             font-weight: $font-weight-bold;
             padding: $summary-row-spacing $summary-col-spacing;
+            flex: 0 0 100%;
         }
 
         &__row-title,
@@ -159,7 +159,7 @@ $hub-row-spacing: 1.3rem;
             }
         }
 
-        &__row {
+        &__item {
             flex-direction: column;
         }
     }
@@ -172,14 +172,19 @@ $hub-row-spacing: 1.3rem;
             flex: 5 1 33%;
             padding-top: $summary-row-spacing;
             vertical-align: top;
-            &:not(:last-child) {
-                padding-right: $summary-col-spacing;
-            }
+        }
+
+        &__item-title,
+        &__values {
+            padding-right: $summary-col-spacing;
         }
 
         &__actions {
             display: flex;
             justify-content: right;
+            & :not(.ons-summary__item-title--error) {
+                padding-right: 0;
+            }
         }
 
         &__button {
@@ -215,7 +220,7 @@ $hub-row-spacing: 1.3rem;
             }
             .ons-summary__link {
                 padding: 0 1.25rem;
-                div {
+                &-container {
                     padding: 1rem 0;
                     border-top: 1px solid var(--ons-color-borders-light);
                 }
@@ -225,7 +230,7 @@ $hub-row-spacing: 1.3rem;
                 padding: 0.5rem 1.25rem 0;
             }
             .ons-summary__placeholder + .ons-summary__link {
-                div {
+                &-container {
                     border-top: 0;
                 }
             }