use only data attribute for variables (#1359)

Removed `iui-root` class from variables because the class will change between major versions, whereas the data attribute won't. This change will help iTwinUI-variables v3 to be compatible with components from iTwinUI-react v2, v3, v4.
iTwin · Jun 16, 2023 · 2a73b0e · 2a73b0e
1 parent 0f6c10e
commit 2a73b0e
Show file tree

Hide file tree

Showing 58 changed files with 224 additions and 80 deletions.
diff --git a/.changeset/few-ghosts-judge.md b/.changeset/few-ghosts-judge.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-variables': major
+---
+
+`iui-root` has been removed. `data-iui-theme` must now always be set in order to use variables.
diff --git a/apps/portal/src/pages/index.astro b/apps/portal/src/pages/index.astro
@@ -32,7 +32,7 @@ const links = [
     </style>
   </head>
 
-  <body class='iui-root'>
+  <body class='iui-root' data-iui-theme>
     <h1 class='iui-text-title'>
       <span class='iui-visually-hidden'>iTwinUI</span>{titleSuffix}
     </h1>

diff --git a/apps/website/src/components/variables/_wrapper.astro b/apps/website/src/components/variables/_wrapper.astro
@@ -1,10 +1,8 @@
 ---
 import '@itwin/itwinui-variables';
-
-const { class: className, ...props } = Astro.props;
 ---
 
-<article {...props} data-iui-theme='dark' class:list={['iui-root', className]}>
+<article data-iui-theme='dark' {...Astro.props}>
   <slot />
 </article>
 

diff --git a/apps/website/src/pages/_global.astro b/apps/website/src/pages/_global.astro
@@ -236,7 +236,7 @@ const { content = {} } = Astro.props;
     </style>
   </head>
 
-  <body class='_iui3-root' data-iui-theme='dark'>
+  <body data-iui-theme='dark'>
     <slot />
 
     <!-- Util classes/styles and scripts -->

diff --git a/packages/itwinui-css/backstop/tests/alert.html b/packages/itwinui-css/backstop/tests/alert.html
@@ -46,7 +46,10 @@
       }
     </style>
   </head>
-  <body class="iui-root">
+  <body
+    class="iui-root"
+    data-iui-theme
+  >
     <theme-button></theme-button>
     <h1>Alert</h1>
     <hr />

diff --git a/packages/itwinui-css/backstop/tests/anchor.html b/packages/itwinui-css/backstop/tests/anchor.html
@@ -28,7 +28,10 @@
       }
     </style>
   </head>
-  <body class="iui-root">
+  <body
+    class="iui-root"
+    data-iui-theme
+  >
     <theme-button></theme-button>
     <h1>Anchor</h1>
     <hr />

diff --git a/packages/itwinui-css/backstop/tests/avatar.html b/packages/itwinui-css/backstop/tests/avatar.html
@@ -41,7 +41,10 @@
       }
     </style>
   </head>
-  <body class="iui-root">
+  <body
+    class="iui-root"
+    data-iui-theme
+  >
     <theme-button></theme-button>
     <h1>Avatar</h1>
     <hr />

diff --git a/packages/itwinui-css/backstop/tests/badge.html b/packages/itwinui-css/backstop/tests/badge.html
@@ -30,7 +30,10 @@
       }
     </style>
   </head>
-  <body class="iui-root">
+  <body
+    class="iui-root"
+    data-iui-theme
+  >
     <theme-button></theme-button>
     <h1>Badge</h1>
     <hr />

diff --git a/packages/itwinui-css/backstop/tests/blockquote.html b/packages/itwinui-css/backstop/tests/blockquote.html
@@ -27,7 +27,10 @@
       }
     </style>
   </head>
-  <body class="iui-root">
+  <body
+    class="iui-root"
+    data-iui-theme
+  >
     <theme-button></theme-button>
     <h1>Blockquote</h1>
     <hr />

diff --git a/packages/itwinui-css/backstop/tests/breadcrumbs.html b/packages/itwinui-css/backstop/tests/breadcrumbs.html
@@ -36,7 +36,10 @@
       }
     </style>
   </head>
-  <body class="iui-root">
+  <body
+    class="iui-root"
+    data-iui-theme
+  >
     <theme-button></theme-button>
     <h1>Breadcrumbs</h1>
     <hr />

diff --git a/packages/itwinui-css/backstop/tests/button.html b/packages/itwinui-css/backstop/tests/button.html
@@ -61,7 +61,10 @@
       }
     </style>
   </head>
-  <body class="iui-root">
+  <body
+    class="iui-root"
+    data-iui-theme
+  >
     <theme-button></theme-button>
     <h1>Button</h1>
     <hr />

diff --git a/packages/itwinui-css/backstop/tests/carousel.html b/packages/itwinui-css/backstop/tests/carousel.html
@@ -54,7 +54,10 @@
 
     </style>
   </head>
-  <body class="iui-root">
+  <body
+    class="iui-root"
+    data-iui-theme
+  >
     <theme-button></theme-button>
     <h1>Carousel</h1>
     <hr />

diff --git a/packages/itwinui-css/backstop/tests/checkbox.html b/packages/itwinui-css/backstop/tests/checkbox.html
@@ -37,7 +37,10 @@
     </style>
   </head>
 
-  <body class="iui-root">
+  <body
+    class="iui-root"
+    data-iui-theme
+  >
     <theme-button></theme-button>
     <h1>Checkbox</h1>
     <hr />

diff --git a/packages/itwinui-css/backstop/tests/code.html b/packages/itwinui-css/backstop/tests/code.html
@@ -25,7 +25,10 @@
       @import url("@itwin/itwinui-css/css/all.css") layer(itwinui);
     </style>
   </head>
-  <body class="iui-root">
+  <body
+    class="iui-root"
+    data-iui-theme
+  >
     <theme-button></theme-button>
     <h1>Code</h1>
     <hr />

diff --git a/packages/itwinui-css/backstop/tests/color-picker.html b/packages/itwinui-css/backstop/tests/color-picker.html
@@ -25,7 +25,10 @@
       @import url("@itwin/itwinui-css/css/all.css") layer(itwinui);
     </style>
   </head>
-  <body class="iui-root">
+  <body
+    class="iui-root"
+    data-iui-theme
+  >
     <theme-button></theme-button>
     <h1>Color Picker</h1>
     <hr />

diff --git a/packages/itwinui-css/backstop/tests/color.html b/packages/itwinui-css/backstop/tests/color.html
@@ -115,7 +115,10 @@
       }
     </style>
   </head>
-  <body class="iui-root">
+  <body
+    class="iui-root"
+    data-iui-theme
+  >
     <theme-button></theme-button>
     <h1>Color</h1>
 

diff --git a/packages/itwinui-css/backstop/tests/column-filter.html b/packages/itwinui-css/backstop/tests/column-filter.html
@@ -29,7 +29,10 @@
       }
     </style>
   </head>
-  <body class="iui-root">
+  <body
+    class="iui-root"
+    data-iui-theme
+  >
     <theme-button></theme-button>
     <h1>Column filter</h1>
     <hr />

diff --git a/packages/itwinui-css/backstop/tests/date-picker.html b/packages/itwinui-css/backstop/tests/date-picker.html
@@ -30,7 +30,10 @@
       section {padding: 12px;}
     </style>
   </head>
-  <body class="iui-root">
+  <body
+    class="iui-root"
+    data-iui-theme
+  >
     <theme-button></theme-button>
     <h1>Date picker</h1>
     <hr />

diff --git a/packages/itwinui-css/backstop/tests/dialog.html b/packages/itwinui-css/backstop/tests/dialog.html
@@ -42,7 +42,10 @@
       }
     </style>
   </head>
-  <body class="iui-root">
+  <body
+    class="iui-root"
+    data-iui-theme
+  >
     <theme-button></theme-button>
     <h1>Dialog</h1>
     <hr />

diff --git a/packages/itwinui-css/backstop/tests/expandable-block.html b/packages/itwinui-css/backstop/tests/expandable-block.html
@@ -38,7 +38,10 @@
       })
     </script>
   </head>
-  <body class="iui-root">
+  <body
+    class="iui-root"
+    data-iui-theme
+  >
     <theme-button></theme-button>
     <h1>Expandable block</h1>
     <hr />

diff --git a/packages/itwinui-css/backstop/tests/fieldset.html b/packages/itwinui-css/backstop/tests/fieldset.html
@@ -32,7 +32,10 @@
       }
     </style>
   </head>
-  <body class="iui-root">
+  <body
+    class="iui-root"
+    data-iui-theme
+  >
     <theme-button></theme-button>
     <h1>Fieldset</h1>
     <hr />

diff --git a/packages/itwinui-css/backstop/tests/file-upload.html b/packages/itwinui-css/backstop/tests/file-upload.html
@@ -65,7 +65,10 @@
       });
     </script>
   </head>
-  <body class="iui-root">
+  <body
+    class="iui-root"
+    data-iui-theme
+  >
     <theme-button></theme-button>
     <h1>File upload</h1>
     <hr />

diff --git a/packages/itwinui-css/backstop/tests/footer.html b/packages/itwinui-css/backstop/tests/footer.html
@@ -31,7 +31,10 @@
       }
     </style>
   </head>
-  <body class="iui-root">
+  <body
+    class="iui-root"
+    data-iui-theme
+  >
     <theme-button></theme-button>
     <h1>Footer</h1>
     <hr />

diff --git a/packages/itwinui-css/backstop/tests/header.html b/packages/itwinui-css/backstop/tests/header.html
@@ -59,7 +59,10 @@
     </style>
   </head>
 
-  <body class="iui-root">
+  <body
+    class="iui-root"
+    data-iui-theme
+  >
     <theme-button></theme-button>
     <h1>Header</h1>
     <hr />

diff --git a/packages/itwinui-css/backstop/tests/iModel-loader.html b/packages/itwinui-css/backstop/tests/iModel-loader.html
@@ -41,7 +41,10 @@
       }
     </style>
   </head>
-  <body class="iui-root">
+  <body
+    class="iui-root"
+    data-iui-theme
+  >
     <theme-button></theme-button>
     <section>
       <div id="imodel-loader-page">

diff --git a/packages/itwinui-css/backstop/tests/icon.html b/packages/itwinui-css/backstop/tests/icon.html
@@ -45,7 +45,10 @@
       }
     </style>
   </head>
-  <body class="iui-root">
+  <body
+    class="iui-root"
+    data-iui-theme
+  >
     <theme-button></theme-button>
     <h1>Icon</h1>
     <hr />

diff --git a/packages/itwinui-css/backstop/tests/index.html b/packages/itwinui-css/backstop/tests/index.html
@@ -104,7 +104,10 @@
   </style>
   </head>
 
-  <body class="iui-root">
+  <body
+    class="iui-root"
+    data-iui-theme
+  >
     <a
       href="https://github.com/iTwin/iTwinUI"
       class="github-corner"

diff --git a/packages/itwinui-css/backstop/tests/information-panel.html b/packages/itwinui-css/backstop/tests/information-panel.html
@@ -119,7 +119,10 @@
     </style>
   </head>
 
-  <body class="iui-root">
+  <body
+    class="iui-root"
+    data-iui-theme
+  >
     <theme-button></theme-button>
     <h1>Information panel</h1>
     <hr />

diff --git a/packages/itwinui-css/backstop/tests/input.html b/packages/itwinui-css/backstop/tests/input.html
@@ -52,7 +52,10 @@
       }
     </style>
   </head>
-  <body class="iui-root">
+  <body
+    class="iui-root"
+    data-iui-theme
+  >
     <theme-button></theme-button>
     <h1>Input</h1>
     <hr />

diff --git a/packages/itwinui-css/backstop/tests/keyboard.html b/packages/itwinui-css/backstop/tests/keyboard.html
@@ -25,7 +25,10 @@
       kbd.iui-keyboard { margin: 0 2px; }
     </style>
   </head>
-  <body class="iui-root">
+  <body
+    class="iui-root"
+    data-iui-theme
+  >
     <theme-button></theme-button>
     <h1>Keyboard</h1>
     <hr />

diff --git a/packages/itwinui-css/backstop/tests/location-marker.html b/packages/itwinui-css/backstop/tests/location-marker.html
@@ -31,7 +31,10 @@
       }
     </style>
   </head>
-  <body class="iui-root">
+  <body
+    class="iui-root"
+    data-iui-theme
+  >
     <theme-button></theme-button>
     <h1>Location Marker</h1>
     <hr />

diff --git a/packages/itwinui-css/backstop/tests/menu.html b/packages/itwinui-css/backstop/tests/menu.html
@@ -47,7 +47,10 @@
     </style>
   </head>
 
-  <body class="iui-root">
+  <body
+    class="iui-root"
+    data-iui-theme
+  >
     <theme-button></theme-button>
     <h1>Menu</h1>
     <hr />

diff --git a/packages/itwinui-css/backstop/tests/non-ideal-state.html b/packages/itwinui-css/backstop/tests/non-ideal-state.html
@@ -40,7 +40,10 @@
       }
     </style>
   </head>
-  <body class="iui-root">
+  <body
+    class="iui-root"
+    data-iui-theme
+  >
     <theme-button style="position:fixed"></theme-button>
     <div
       id="nis-401"

diff --git a/packages/itwinui-css/backstop/tests/progress-indicator.html b/packages/itwinui-css/backstop/tests/progress-indicator.html
@@ -46,7 +46,10 @@
       }
     </style>
   </head>
-  <body class="iui-root">
+  <body
+    class="iui-root"
+    data-iui-theme
+  >
     <theme-button></theme-button>
     <h1>Progress indicator</h1>
     <hr />