From e7726be277872f40ba12c060eb916500f12a7bb5 Mon Sep 17 00:00:00 2001
From: Vitaly Rtishchev <rtivital@gmail.com>
Date: Wed, 14 Aug 2024 14:53:33 +0400
Subject: [PATCH] [mantine.dev] Update size component based on media query
 example

---
 .../src/pages/styles/responsive.mdx           |  2 +-
 .../styles/Styles.demo.sizesMedia.module.css  | 13 -----
 .../demos/styles/Styles.demo.sizesMedia.tsx   | 51 ++-----------------
 3 files changed, 6 insertions(+), 60 deletions(-)
 delete mode 100644 packages/@docs/demos/src/demos/styles/Styles.demo.sizesMedia.module.css

diff --git a/apps/mantine.dev/src/pages/styles/responsive.mdx b/apps/mantine.dev/src/pages/styles/responsive.mdx
index 1a5adf9d087..a4a92552523 100644
--- a/apps/mantine.dev/src/pages/styles/responsive.mdx
+++ b/apps/mantine.dev/src/pages/styles/responsive.mdx
@@ -132,7 +132,7 @@ function CustomComponent() {
 Some components support `size` prop, which changes various aspects of component appearance.
 `size` prop is not responsive – it is not possible to define different component sizes for different
 screen sizes. Instead, you can render multiple components with different sizes and show/hide them
-based on media query:
+based on media query with `className` or `hiddenFrom`/`visibleFrom` props:
 
 <Demo data={StylesDemos.sizesMedia} />
 
diff --git a/packages/@docs/demos/src/demos/styles/Styles.demo.sizesMedia.module.css b/packages/@docs/demos/src/demos/styles/Styles.demo.sizesMedia.module.css
deleted file mode 100644
index 9eacaa57174..00000000000
--- a/packages/@docs/demos/src/demos/styles/Styles.demo.sizesMedia.module.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.input-mobile {
-  @media (min-width: em(750px)) {
-    display: none;
-  }
-}
-
-.input-desktop {
-  display: none;
-
-  @media (min-width: em(750px)) {
-    display: block;
-  }
-}
diff --git a/packages/@docs/demos/src/demos/styles/Styles.demo.sizesMedia.tsx b/packages/@docs/demos/src/demos/styles/Styles.demo.sizesMedia.tsx
index 12c56ae3c13..5c8e27805e5 100644
--- a/packages/@docs/demos/src/demos/styles/Styles.demo.sizesMedia.tsx
+++ b/packages/@docs/demos/src/demos/styles/Styles.demo.sizesMedia.tsx
@@ -1,62 +1,24 @@
 import { TextInput } from '@mantine/core';
 import { MantineDemo } from '@mantinex/demo';
-import classes from './Styles.demo.sizesMedia.module.css';
 
 const code = `
 import { TextInput } from '@mantine/core';
-import classes from './Demo.module.css';
 
 function Demo() {
   return (
     <>
-      <TextInput
-        label="My input"
-        placeholder="My input"
-        size="xs"
-        className={classes['input-mobile']}
-      />
-      <TextInput
-        label="My input"
-        placeholder="My input"
-        size="xl"
-        className={classes['input-desktop']}
-      />
+      <TextInput size="xs" hiddenFrom="sm" label="My input" placeholder="My input" />
+      <TextInput size="xl" visibleFrom="sm" label="My input" placeholder="My input" />
     </>
   );
 }
 `;
 
-const cssCode = `
-.input-mobile {
-  @media (min-width: em(750px)) {
-    display: none;
-  }
-}
-
-.input-desktop {
-  display: none;
-
-  @media (min-width: em(750px)) {
-    display: block;
-  }
-}
-`;
-
 function Demo() {
   return (
     <>
-      <TextInput
-        label="My input"
-        placeholder="My input"
-        size="xs"
-        className={classes['input-mobile']}
-      />
-      <TextInput
-        label="My input"
-        placeholder="My input"
-        size="xl"
-        className={classes['input-desktop']}
-      />
+      <TextInput size="xs" hiddenFrom="sm" label="My input" placeholder="My input" />
+      <TextInput size="xl" visibleFrom="sm" label="My input" placeholder="My input" />
     </>
   );
 }
@@ -64,8 +26,5 @@ function Demo() {
 export const sizesMedia: MantineDemo = {
   type: 'code',
   component: Demo,
-  code: [
-    { fileName: 'Demo.tsx', code, language: 'tsx' },
-    { fileName: 'Demo.module.css', code: cssCode, language: 'scss' },
-  ],
+  code: { fileName: 'Demo.tsx', code, language: 'tsx' },
 };