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 --- 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 {row.values.identifier}; } function MinWidthCell({ row }) { + if (row.values.identifier === 'xs') { + return ( +
+ - + + The min-width for the "XS" breakpoint is 320px. + That pixel width is the smallest that designers support for mobile devices, + and also covers 16x magnification for accessibility. + + )} + > + + +
+ ); + } return {row.values.minWidth ? `${row.values.minWidth}px` : '-'}; } function MaxWidthCell({ row }) {