From fae10e1e616a910b72a276368fc27e17622194f4 Mon Sep 17 00:00:00 2001
From: monteri <36768631+monteri@users.noreply.github.com>
Date: Fri, 14 Jul 2023 12:05:40 +0300
Subject: [PATCH] docs: add info about xs min-width (#2400)

* docs: add info about xs min-width

* docs: update responsive v2

---------

Co-authored-by: monteri <lansevermore>
---
 www/src/pages/foundations/responsive.jsx | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/www/src/pages/foundations/responsive.jsx b/www/src/pages/foundations/responsive.jsx
index dc33c1c216..44ff50b7d1 100644
--- a/www/src/pages/foundations/responsive.jsx
+++ b/www/src/pages/foundations/responsive.jsx
@@ -1,6 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { DataTable, Container, breakpoints } from '~paragon-react';
+import {
+  DataTable, Container, breakpoints, OverlayTrigger, Tooltip, Icon,
+} from '~paragon-react';
+import { QuestionMark } from '~paragon-icons';
 import SEO from '../../components/SEO';
 import Layout from '../../components/PageLayout';
 import CodeBlock from '../../components/CodeBlock';
@@ -20,6 +23,25 @@ function IdentifierCell({ row }) {
   return <code>{row.values.identifier}</code>;
 }
 function MinWidthCell({ row }) {
+  if (row.values.identifier === 'xs') {
+    return (
+      <div className="d-flex align-items-center">
+        <code>-</code>
+        <OverlayTrigger
+          placement="top"
+          overlay={(
+            <Tooltip id={`tooltip-${row.values.identifier}`}>
+              The min-width for the &quot;XS&quot; breakpoint is <strong>320px</strong>.
+              That pixel width is the smallest that designers support for mobile devices,
+              and also covers 16x magnification for accessibility.
+            </Tooltip>
+          )}
+        >
+          <Icon src={QuestionMark} size="xs" />
+        </OverlayTrigger>
+      </div>
+    );
+  }
   return <code>{row.values.minWidth ? `${row.values.minWidth}px` : '-'}</code>;
 }
 function MaxWidthCell({ row }) {