use data attributes

primer · Nov 13, 2024 · fa7f11c · fa7f11c
1 parent 078ad33
commit fa7f11c
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/packages/react/src/DialogV1/Dialog.module.css b/packages/react/src/DialogV1/Dialog.module.css
@@ -24,8 +24,6 @@
   top: 0;
   left: 50%;
   z-index: 999;
-  /* stylelint-disable-next-line primer/responsive-widths */
-  width: 440px;
   max-height: 80vh;
   margin: 10vh auto;
   background-color: var(--bgColor-default);
@@ -34,11 +32,16 @@
   box-shadow: var(--shadow-floating-large);
   transform: translateX(-50%);
 
-  @media screen and (--viewportRange-narrow) {
+  &:where([data-width='default']) {
+    /* stylelint-disable-next-line primer/responsive-widths */
+    width: 440px;
+  }
+
+  &:where([data-width='narrow']) {
     width: 320px;
   }
 
-  @media screen and (--viewportRange-wide) {
+  &:where([data-width='wide']) {
     /* stylelint-disable-next-line primer/responsive-widths */
     width: 640px;
   }

diff --git a/packages/react/src/DialogV1/Dialog.tsx b/packages/react/src/DialogV1/Dialog.tsx
@@ -163,6 +163,7 @@ const Dialog = forwardRef<HTMLDivElement, InternalDialogProps>(
           {...props}
           {...getDialogProps()}
           className={clsx({[classes.Dialog]: enabled}, className)}
+          data-width={props.wide ? 'wide' : props.narrow ? 'narrow' : 'default'}
         >
           <IconButton
             icon={XIcon}