Update breakpoint display to support style and flex shrink 0

near · Nov 13, 2024 · 7be8a3c · 7be8a3c
1 parent 4125314
commit 7be8a3c
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@near-pagoda/ui",
-  "version": "2.0.14",
+  "version": "2.0.15",
   "description": "A React component library that implements the official NEAR design system.",
   "license": "MIT",
   "repository": {

diff --git a/src/components/BreakpointDisplay.module.scss b/src/components/BreakpointDisplay.module.scss
@@ -1,6 +1,8 @@
 @import '../styles/variables';
 
 .breakpoint {
+  flex-shrink: 0;
+
   &[data-show='sidebar-small-screen'],
   &[data-show='smaller-than-desktop'] {
     @media (min-width: calc(#{$tabletBreakpointMaxWidth} + 1px)) {

diff --git a/src/components/BreakpointDisplay.tsx b/src/components/BreakpointDisplay.tsx
@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { CSSProperties, type ReactNode } from 'react';
 
 import s from './BreakpointDisplay.module.scss';
 
@@ -11,11 +11,12 @@ type Props = {
     | 'smaller-than-tablet'
     | 'larger-than-phone'
     | 'larger-than-tablet';
+  style?: CSSProperties;
 };
 
-export const BreakpointDisplay = ({ children, className = '', show }: Props) => {
+export const BreakpointDisplay = ({ children, className = '', show, ...props }: Props) => {
   return (
-    <div className={`${s.breakpoint} ${className}`} data-show={show}>
+    <div className={`${s.breakpoint} ${className}`} data-show={show} {...props}>
       {children}
     </div>
   );