feat(common-css): add CSS container quesries to common-css [ci visual]

SAP · Dec 12, 2023 · a9c5268 · a9c5268
1 parent c913c4b
commit a9c5268
Show file tree

Hide file tree

Showing 9 changed files with 300 additions and 50 deletions.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -3,6 +3,7 @@
   "plugins": ["stylelint-scss"],
   "rules": {
     "at-rule-no-unknown": null,
+    "property-no-unknown": null,
     "at-rule-empty-line-before": [
       "always",
       {
@@ -28,7 +29,7 @@
     "scss/at-import-no-partial-leading-underscore": true,
     "scss/at-mixin-argumentless-call-parentheses": "always",
     "scss/at-mixin-parentheses-space-before": "never",
-    "scss/at-rule-no-unknown": true,
+    "scss/at-rule-no-unknown": null,
     "scss/declaration-nested-properties-no-divided-groups": true,
     "scss/declaration-nested-properties": "never",
     "scss/dollar-variable-colon-space-after": "always",

diff --git a/packages/common-css/src/_common-mixins.scss b/packages/common-css/src/_common-mixins.scss
@@ -341,46 +341,6 @@
   @content;
 }
 
-// Content paddings
-@mixin sap-set-content-paddings($type, $value) {
-  @if ($type == 'home') {
-    padding-left: map-get($sap-content-paddings-home, $value) !important;
-    padding-right: map-get($sap-content-paddings-home, $value) !important;
-  } @else if ($type == 'container') {
-    padding-left: map-get($sap-content-paddings-container, $value) !important;
-    padding-right: map-get($sap-content-paddings-container, $value) !important;
-  } @else {
-    padding-left: map-get($sap-content-paddings-nav, $value) !important;
-    padding-right: map-get($sap-content-paddings-nav, $value) !important;
-  }
-}
-
-@mixin sap-set-dynamic-content-paddings($type) {
-  @include sap-media-sm() {
-    @include sap-set-content-paddings($type, 'sm');
-  }
-
-  @include sap-media-md() {
-    @include sap-set-content-paddings($type, 'md');
-  }
-
-  @include sap-media-lg() {
-    @include sap-set-content-paddings($type, 'lg');
-  }
-
-  @include sap-media-xl() {
-    @include sap-set-content-paddings($type, 'xl');
-  }
-}
-
-@mixin sap-content-paddings($type: home, $size: default) {
-  @if ($size == default) {
-    @include sap-set-dynamic-content-paddings($type);
-  } @else {
-    @include sap-set-content-paddings($type, $size);
-  }
-}
-
 // Flex
 @mixin sap-flex($direction: row) {
   display: flex;
@@ -659,6 +619,60 @@
   }
 }
 
+@mixin sap-media-from($width) {
+  @media screen and (min-width: $width) {
+    @content;
+  }
+}
+
+@mixin sap-media-until($width) {
+  @media screen and (max-width: $width) {
+    @content;
+  }
+}
+
+// Container Queries
+@mixin sap-container-type($type: normal) {
+  container-type: $type;
+  @content;
+}
+
+@mixin sap-container-query-from($width) {
+  @container (min-width: $width) {
+    @content;
+  }
+}
+
+@mixin sap-container-query-until($width) {
+  @container (max-width: $width) {
+    @content;
+  }
+}
+
+@mixin sap-container-query-sm() {
+  @container (max-width: 599px) {
+    @content;
+  }
+}
+
+@mixin sap-container-query-md() {
+  @container (600px <= width <= 1023px) {
+    @content;
+  }
+}
+
+@mixin sap-container-query-lg() {
+  @container (1024px <= width <= 1439px) {
+    @content;
+  }
+}
+
+@mixin sap-container-query-xl() {
+  @container (min-width: 1440px) {
+    @content;
+  }
+}
+
 // Paddings
 @mixin sap-set-padding-all($value: 0) {
   padding: $value;
@@ -763,6 +777,68 @@
   }
 }
 
+@mixin sap-padding-container-responsive() {
+  @include sap-container-query-sm() {
+    @include sap-padding(small, x);
+    @include sap-padding(0, y);
+  }
+
+  @include sap-container-query-md() {
+    @include sap-padding(medium, x);
+    @include sap-padding(0, y);
+  }
+
+  @include sap-container-query-lg() {
+    @include sap-padding(medium, x);
+    @include sap-padding(0, y);
+  }
+
+  @include sap-container-query-xl() {
+    @include sap-padding(large, x);
+    @include sap-padding(0, y);
+  }
+}
+
+// Content paddings
+@mixin sap-set-content-paddings($type, $value) {
+  @if ($type == 'home') {
+    padding-left: map-get($sap-content-paddings-home, $value) !important;
+    padding-right: map-get($sap-content-paddings-home, $value) !important;
+  } @else if ($type == 'container') {
+    padding-left: map-get($sap-content-paddings-container, $value) !important;
+    padding-right: map-get($sap-content-paddings-container, $value) !important;
+  } @else {
+    padding-left: map-get($sap-content-paddings-nav, $value) !important;
+    padding-right: map-get($sap-content-paddings-nav, $value) !important;
+  }
+}
+
+@mixin sap-set-dynamic-content-paddings($type) {
+  @include sap-container-query-sm() {
+    @include sap-set-content-paddings($type, 'sm');
+  }
+
+  @include sap-container-query-md() {
+    @include sap-set-content-paddings($type, 'md');
+  }
+
+  @include sap-container-query-lg() {
+    @include sap-set-content-paddings($type, 'lg');
+  }
+
+  @include sap-container-query-xl() {
+    @include sap-set-content-paddings($type, 'xl');
+  }
+}
+
+@mixin sap-content-paddings($type: home, $size: default) {
+  @if ($size == default) {
+    @include sap-set-dynamic-content-paddings($type);
+  } @else {
+    @include sap-set-content-paddings($type, $size);
+  }
+}
+
 // Shadows
 @mixin sap-set-box-shadow($value) {
   box-shadow: $value;

diff --git a/packages/common-css/src/sap-container-type.scss b/packages/common-css/src/sap-container-type.scss
@@ -0,0 +1,20 @@
+@import 'common-settings';
+@import 'common-mixins';
+
+$block: #{$sap-namespace}-container-type;
+
+.#{$block} {
+  @include sap-container-type(normal);
+
+  &-normal {
+    @include sap-container-type(normal);
+  }
+
+  &-size {
+    @include sap-container-type(size);
+  }
+
+  &-inline-size {
+    @include sap-container-type(inline-size);
+  }
+}
diff --git a/packages/common-css/src/sap-padding.scss b/packages/common-css/src/sap-padding.scss
@@ -16,6 +16,10 @@ $block: #{$sap-namespace}-padding;
     @include sap-padding-responsive();
   }
 
+  &-responsive-container {
+    @include sap-padding-container-responsive();
+  }
+
   &-none {
     @include sap-padding(0);
   }

diff --git a/packages/common-css/stories/container-queries/container-queries.stories.js b/packages/common-css/stories/container-queries/container-queries.stories.js
@@ -0,0 +1,69 @@
+import containerQueriesExampleExampleHtml from './container-queries.story.description.html?raw';
+
+export default {
+    title: 'Container Queries',
+    parameters: {
+        description: `Container queries are similar to media queries, but they allow you to apply styles to an element based on the dimensions of the element's container rather than the device’s viewport. For more information please visit the <a target="_blank" title="MDN documentation website" href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries">MDN website</a>.   
+        <br><br><br>
+        <h3>Containment Context</h3>
+        To define a container, you need to specify the <code>container-type</code> property on the element. The container-type can accept three options: size, inline-size, and normal. <br>
+<table style="width: 100%; border-collapse: collapse; margin-top: 1rem;">
+    <tbody>
+    <tr>
+        <td style="padding: 0.25rem;"><b>normal</b></td>
+        <td style="padding: 0.25rem;">the element is not a query container for any container size, but it can be used to apply styles to the element</td>
+        <td style="padding: 0.25rem;"><code>.sap-container-type-normal</code></td>
+        <td style="padding: 0.25rem;"><code>@include sap-container-type(normal)</code></td>
+    </tr>
+    <tr>
+        <td style="padding: 0.25rem;"><b>size</b></td>
+        <td style="padding: 0.25rem;">the container will not assume the position it has on the viewport, you must explicitly set the height and width of the container</td>
+        <td style="padding: 0.25rem;"><code>.sap-container-type-size</code></td>
+        <td style="padding: 0.25rem;"><code>@include sap-container-type(size)</code></td>
+    </tr>
+    <tr>
+        <td style="padding: 0.25rem;"><b>inline-size</b></td>
+        <td style="padding: 0.25rem;">the element assumes the position it has on the viewport</td>
+        <td style="padding: 0.25rem;"><code>.sap-container-type-inline-size</code></td>
+        <td style="padding: 0.25rem;"><code>@include sap-container-type(inline-size)</code></td>
+    </tr>
+    </tbody>
+</table>
+<br>
+<h3>Mixins</h3>
+<table style="width: 60%; border-collapse: collapse; margin-top: 1rem;text-align: left;">
+    <tr>
+        <th style="padding: 0.25rem;">Mixin</th>
+        <th style="padding: 0.25rem;">Container width</th>
+    </tr>
+    <tr>
+        <td style="padding: 0.25rem;"><code>@include sap-container-query-sm()</code></td>
+        <td style="padding: 0.25rem;">max-width: 599px</td>
+    </tr>
+    <tr>
+        <td style="padding: 0.25rem;"><code>@include sap-container-query-md()</code></td>
+        <td style="padding: 0.25rem;">600px <= width <= 1023px</td>
+    </tr>
+    <tr>
+        <td style="padding: 0.25rem;"><code>@include sap-container-query-lg()</code></td>
+        <td style="padding: 0.25rem;">1024px <= width <= 1439px</td>
+    </tr>
+    <tr>
+        <td style="padding: 0.25rem;"><code>@include sap-container-query-xl()</code></td>
+        <td style="padding: 0.25rem;">min-width: 1440px</td>
+    </tr>
+    <tr>
+        <td style="padding: 0.25rem;"><code>@include sap-container-query-from($width)</code></td>
+        <td style="padding: 0.25rem;">user defined</td>
+    </tr>
+    <tr>
+        <td style="padding: 0.25rem;"><code>@include sap-container-query-until($width)</code></td>
+        <td style="padding: 0.25rem;">user defined</td>
+    </tr>
+</table>
+      `,
+    }
+};
+
+
+export const UsingTheMixins = () => containerQueriesExampleExampleHtml;
diff --git a/packages/common-css/stories/container-queries/container-queries.story.description.html b/packages/common-css/stories/container-queries/container-queries.story.description.html
@@ -0,0 +1,13 @@
+<pre>
+    .article-container {
+        @include sap-container-type(inline-size);
+    }
+
+
+    @include sap-container-query-from(640px) {
+        .article {
+            font-size: 20px;
+        }
+    }
+
+</pre>
diff --git a/packages/common-css/stories/content-paddings/content-paddings.stories.js b/packages/common-css/stories/content-paddings/content-paddings.stories.js
@@ -1,4 +1,6 @@
 import '../../src/sap-content-paddings.scss';
+import '../../src/sap-container-type.scss';
+
 export default {
     title: 'Content Paddings',
     parameters: {
@@ -23,8 +25,10 @@ const localStyles = `
 `;
 export const HomeExample = () => `${localStyles}
 <h3>Responsive</h3>
-<div class="demo sap-content-paddings-home">
-    <div></div>
+<div class="sap-container-type-inline-size">
+    <div class="demo sap-content-paddings-home">
+        <div></div>
+    </div>
 </div>
 <br>
 <h3>Size SM</h3>
@@ -65,28 +69,28 @@ HomeExample.parameters = {
     <tbody>
     <tr>
         <td style="padding: 0.25rem;">SM</td>
-        <td style="padding: 0.25rem;">max-widtd: 599px</td>
+        <td style="padding: 0.25rem;">max-width: 599px</td>
         <td style="padding: 0.25rem;">padding-left: 0.5rem; <br>padding-right: 0.5rem;</td>
         <td style="padding: 0.25rem;">.sap-content-paddings-home-sm</td>
         <td style="padding: 0.25rem;">@include sap-content-paddings(home, sm);</td>
     </tr>
     <tr>
         <td style="padding: 0.25rem;">MD</td>
-        <td style="padding: 0.25rem;">min-widtd: 600px, <br>max-widtd: 1023px</td>
+        <td style="padding: 0.25rem;">min-width: 600px, <br>max-width: 1023px</td>
         <td style="padding: 0.25rem;">padding-left: 2rem; <br>padding-right: 2rem;</td>
         <td style="padding: 0.25rem;">.sap-content-paddings-home-md</td>
         <td style="padding: 0.25rem;">@include sap-content-paddings(home, md);</td>
     </tr>
     <tr>
         <td style="padding: 0.25rem;">LG</td>
-        <td style="padding: 0.25rem;">min-widtd: 1024px, <br>max-widtd: 1439px</td>
+        <td style="padding: 0.25rem;">min-width: 1024px, <br>max-width: 1439px</td>
         <td style="padding: 0.25rem;">padding-left: 2rem; <br>padding-right: 2rem;</td>
         <td style="padding: 0.25rem;">.sap-content-paddings-home-lg</td>
         <td style="padding: 0.25rem;">@include sap-content-paddings(home, lg);</td>
     </tr>
     <tr>
         <td style="padding: 0.25rem;">XL</td>
-        <td style="padding: 0.25rem;">min-widtd: 1440px</td>
+        <td style="padding: 0.25rem;">min-width: 1440px</td>
         <td style="padding: 0.25rem;">padding-left: 3rem; <br>padding-right: 3rem;</td>
         <td style="padding: 0.25rem;">.sap-content-paddings-home-xl</td>
         <td style="padding: 0.25rem;">@include sap-content-paddings(home, xl);</td>
@@ -106,8 +110,10 @@ HomeExample.parameters = {
 
 export const ContainerExample = () => `${localStyles}
 <h3>Responsive</h3>
-<div class="demo sap-content-paddings-container">
-    <div></div>
+<div class="sap-container-type-inline-size">
+    <div class="demo sap-content-paddings-container">
+        <div></div>
+    </div>
 </div>
 <br>
 <h3>Size SM</h3>