feat(Gallery): added max-width and min-width responsive props

Author: mtorromeo

apps/docs/src/stories/Layouts/Gallery.story.vue

@@ -21,5 +21,16 @@
         <pf-gallery-item>Gallery Item</pf-gallery-item>
       </pf-gallery>
     </story-canvas>
+
+    <story-canvas title="Responsive widths">
+      <pf-gallery gutter min-width-sm="100px" max-width-2xl="390px">
+        <pf-gallery-item>Gallery Item</pf-gallery-item>
+        <pf-gallery-item>Gallery Item</pf-gallery-item>
+        <pf-gallery-item>Gallery Item</pf-gallery-item>
+        <pf-gallery-item>Gallery Item</pf-gallery-item>
+        <pf-gallery-item>Gallery Item</pf-gallery-item>
+        <pf-gallery-item>Gallery Item</pf-gallery-item>
+      </pf-gallery>
+    </story-canvas>
   </doc-page>
 </template>

packages/core/src/layouts/Gallery/Gallery.vue

@@ -1,12 +1,23 @@
 <template>
-  <component :is="component" :class="[styles.gallery, { [styles.modifiers.gutter]: gutter }]">
+  <component
+    :is="component"
+    :class="[styles.gallery, { [styles.modifiers.gutter]: gutter }]"
+    :style="{
+      ...cssVarsFromBreakpointProps($props, 'minWidth', cssGridTemplateColumnsMin.name),
+      ...cssVarsFromBreakpointProps($props, 'maxWidth', cssGridTemplateColumnsMax.name),
+    }"
+  >
     <slot />
   </component>
 </template>
 
 <script lang="ts" setup>
 import styles from '@patternfly/react-styles/css/layouts/Gallery/gallery';
+import cssGridTemplateColumnsMin from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
+import cssGridTemplateColumnsMax from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_max';
+
 import type { Component, HTMLAttributes } from 'vue';
+import { cssVarsFromBreakpointProps } from '../../breakpoints';
 
 defineOptions({
   name: 'PfGallery',
@@ -15,6 +26,32 @@ defineOptions({
 export interface Props extends /* @vue-ignore */ HTMLAttributes {
   component?: string | Component;
   gutter?: boolean;
+
+  /** Minimum width */
+  minWidth?: string;
+  /** Minimum width at Sm breakpoint */
+  minWidthSm?: string;
+  /** Minimum width at Md breakpoint */
+  minWidthMd?: string;
+  /** Minimum width at Lg breakpoint */
+  minWidthLg?: string;
+  /** Minimum width at Xl breakpoint */
+  minWidthXl?: string;
+  /** Minimum width at Xl2 breakpoint */
+  minWidth2xl?: string;
+
+  /** Maximum width */
+  maxWidth?: string;
+  /** Maximum width at Sm breakpoint */
+  maxWidthSm?: string;
+  /** Maximum width at Md breakpoint */
+  maxWidthMd?: string;
+  /** Maximum width at Lg breakpoint */
+  maxWidthLg?: string;
+  /** Maximum width at Xl breakpoint */
+  maxWidthXl?: string;
+  /** Maximum width at Xl2 breakpoint */
+  maxWidth2xl?: string;
 }
 
 withDefaults(defineProps<Props>(), {