Standardise padding and margin utility classes (#3272)

* update padding * update component * approve test * add important keyword to utility class * update utility class * update summary macro
ONSdigital · Jul 25, 2024 · 75c7901 · 75c7901
1 parent b1570ab
commit 75c7901
Showing 15 changed files with 23 additions and 23 deletions.
diff --git a/...onents_input_example-input-search-with-character-check_0_document_0_desktop.png b/...onents_input_example-input-search-with-character-check_0_document_0_desktop.png
diff --git a/...ponents_input_example-input-search-with-character-check_0_document_1_tablet.png b/...ponents_input_example-input-search-with-character-check_0_document_1_tablet.png
diff --git a/...ponents_input_example-input-search-with-character-check_0_document_2_mobile.png b/...ponents_input_example-input-search-with-character-check_0_document_2_mobile.png
diff --git a/...ence/ds-vr-test__components_input_example-input-search_0_document_0_desktop.png b/...ence/ds-vr-test__components_input_example-input-search_0_document_0_desktop.png
diff --git a/...rence/ds-vr-test__components_input_example-input-search_0_document_1_tablet.png b/...rence/ds-vr-test__components_input_example-input-search_0_document_1_tablet.png
diff --git a/...rence/ds-vr-test__components_input_example-input-search_0_document_2_mobile.png b/...rence/ds-vr-test__components_input_example-input-search_0_document_2_mobile.png
diff --git a/lib/render-example.js b/lib/render-example.js
@@ -16,7 +16,7 @@ export default function renderExample(templatePath, nunjucksEnvironment) {
                 {% extends 'layout/_template.njk' %}
 
                 {% block body %}
-                    <div class="ons-u-p-m">
+                    <div class="ons-u-p-l">
                         ${data.body}
                     </div>
                 {% endblock %}

diff --git a/lib/render-page-list.js b/lib/render-page-list.js
@@ -7,7 +7,7 @@ export default function renderPageList(pages, title, pageSearch = '') {
                 <title>${title}</title>
                 <link rel="stylesheet" href="/css/main.css">
             </head>
-            <body class="ons-u-p-m">
+            <body class="ons-u-p-l">
                 <h1>${title}</h1>
                 ${pageSearch}
                 <ul class="ons-list ons-list--dashed ons-u-pb-l">

diff --git a/src/components/header/_macro.spec.js b/src/components/header/_macro.spec.js
@@ -924,7 +924,7 @@ describe('mode: with site search autosuggest', () => {
                 autocomplete: 'off',
                 classes: 'ons-input-search ons-input-search--icon',
                 label: {
-                    classes: 'ons-u-pl-m ons-label--white',
+                    classes: 'ons-u-pl-l ons-label--white',
                     id: 'ons-site-search-label',
                     text: 'label',
                 },

diff --git a/src/components/navigation/_macro.njk b/src/components/navigation/_macro.njk
@@ -8,7 +8,7 @@
             {% if params.siteSearchAutosuggest %}
                 <div class="ons-navigation-search ons-js-navigation-search">
                     {% set autosuggestClasses = "ons-input-search ons-input-search--icon" %}
-                    {% set autosuggestLabelClasses = "ons-u-pl-m" %}
+                    {% set autosuggestLabelClasses = "ons-u-pl-l" %}
                     {% if params.variants == "neutral" %}
                         {% set autosuggestClasses = autosuggestClasses + ' ons-input-search--dark' %}
                     {% else %}

diff --git a/src/components/navigation/_macro.spec.js b/src/components/navigation/_macro.spec.js
@@ -138,7 +138,7 @@ describe('macro: navigation', () => {
                     classes: 'ons-input-search ons-input-search--icon',
                     label: {
                         id: 'ons-site-search-label',
-                        classes: 'ons-u-pl-m ons-label--white',
+                        classes: 'ons-u-pl-l ons-label--white',
                     },
                 },
             });

diff --git a/src/components/summary/_macro.njk b/src/components/summary/_macro.njk
@@ -135,7 +135,7 @@
 
                     {% if group.summaryLink %}
                         <div
-                            class="ons-summary__link{{ ' ons-u-pt-s' if group.placeholderText or group.rows }}{{ ' ons-u-bt' if group.placeholderText is not defined and group.rows | length > 1 and params.variant != 'card' }}{{ ' ons-u-mb-xl' if not group.last }}"
+                            class="ons-summary__link{{ ' ons-u-pt-s' if params.variant != 'card' and (group.placeholderText or group.rows) }}{{ ' ons-u-bt' if group.placeholderText is not defined and group.rows | length > 1 and params.variant != 'card' }}{{ ' ons-u-mb-xl' if not group.last }}"
                         >
                             {% set link %}
                                 <a

diff --git a/src/layout/_dsTemplate.njk b/src/layout/_dsTemplate.njk
@@ -6,7 +6,7 @@
         "label": {
             "text": "Search",
             "id": "search-field-label",
-            "classes": "ons-u-pl-m"
+            "classes": "ons-u-pl-l"
         },
         "classes": "ons-input-search ons-input-search--icon ons-input-search--dark ons-u-mb-s",
         "accessiblePlaceholder": true,

diff --git a/src/scss/utilities/_index.scss b/src/scss/utilities/_index.scss
@@ -5,7 +5,7 @@
 @import './grid';
 @import './highlight';
 @import './margin';
-@import './pad';
+@import './padding';
 @import './typography';
 @import './utilities';
 @import './visibility';
diff --git a/src/scss/utilities/_pad.scss → src/scss/utilities/_padding.scss b/src/scss/utilities/_pad.scss → src/scss/utilities/_padding.scss
@@ -1,11 +1,11 @@
-// e.g ons-u-pl-m
 $sizes: (
-    no: 0 !important,
-    xxs: 0.3rem,
+    no: 0,
+    xxs: 0.25rem,
     xs: 0.5rem,
     s: 1rem,
-    m: 2rem,
-    l: 3rem,
+    m: 1.5rem,
+    l: 2rem,
+    xl: 3rem,
 );
 
 $padding: (
@@ -19,7 +19,7 @@ $padding: (
 @each $key, $value in $sizes {
     @each $abbr, $dec in $padding {
         @include bp-suffix(ons-u-#{$abbr}-#{$key}, $create-between-breakpoints: true) {
-            #{$dec}: #{$value};
+            #{$dec}: #{$value} !important;
         }
     }
 }