css modules (#1302)

Created a styles.js folder inside src that uses Vite to do CSS-modules processing. After processing, the iui- prefix becomes _iui3- (for example iui-button becomes _iui3-button).

Vite will output two files: styles.css, which will need to be imported manually by users, and styles.js, which will be used inside polymorphic to get the transformed class names.

Made some tweaks in itwinui-css to remove previous scoping mechanism and added border-box on everything. Added :where to itwinui-variables and required iui-root in all global styles. Changed component code and tests as necessary.

.changeset/beige-suits-jam.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': major
+---
+
+The dependencies on `@itwin/itwinui-css` and `@itwin/itwinui-variable` have been removed. This means `@itwin/itwinui-react` will bring its own stylesheet.

.changeset/loud-adults-deny.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': major
+---
+
+All elements have had their class names changed to prevent conflict with older versions. It is strongly recommended to switch these internal classes with your own classes or data attributes.

.changeset/ninety-phones-deny.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-css': major
+---
+
+`border-box` will now be set for _all_ elements under `iui-root`.

.changeset/smart-guests-play.md

@@ -3,4 +3,4 @@
 '@itwin/itwinui-css': major
 ---
 
-Instead of cloning passed icons to set classes on them, the classes will now be set on a wrapping element. Affected components: `Header`, `Select`, `MenuItem`, `RadioTile`, `Tabs`, `ToggleSwitch`, `TreeNode`, `InputContainer` (and all input variants).
+Instead of cloning passed icons to set classes on them, the classes will now be set on a wrapping element. Affected components: `Header`, `Select`, `MenuItem`, `RadioTile`, `Tabs`, `Tile`, `ToggleSwitch`, `TreeNode`, `InputContainer` (and all input variants).

.changeset/twelve-olives-roll.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-variables': minor
+---
+
+All selectors have been wrapped with `:where` to nullify specificity.

apps/storybook/.storybook/StoryWithDecorator.jsx

@@ -20,6 +20,7 @@ export default function StoryWithDecorator(Story, context) {
       theme={theme}
       themeOptions={{ highContrast, applyBackground: false }}
       style={{ background }}
+      className='story-wrapper'
     >
       <Story />
     </ThemeProvider>

apps/storybook/.storybook/preview-body.html

@@ -2,7 +2,7 @@
   html, body {
     padding: 0 !important;
   }
-  .iui-root {
+  .story-wrapper {
     padding: 1rem;
     height: 100svh;
   }

apps/storybook/.storybook/preview.js

@@ -12,7 +12,6 @@ const prefersDark = window.matchMedia?.('(prefers-color-scheme: dark)').matches;
 export default {
   parameters: {
     darkMode: {
-      classTarget: '.iui-root',
       dark: { ...themes.dark, ...darkTheme },
       light: { ...themes.light, ...lightTheme },
     },

apps/storybook/src/AvatarGroup.test.ts

@@ -18,7 +18,7 @@ describe('AvatarGroup', () => {
       cy.visit('iframe', { qs: { id } });
 
       if (testName.includes('Tooltip')) {
-        cy.get('.iui-avatar-count').trigger('mouseenter'); // trigger tooltip
+        cy.get('abbr').contains('3').parent().trigger('mouseenter');
       }
 
       cy.compareSnapshot(testName);

apps/storybook/src/Breadcrumbs.test.ts

@@ -19,10 +19,6 @@ describe('Breadcrumbs', () => {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('iframe', { qs: { id } });
 
-      if (testName === 'Custom Overflow Back Button') {
-        cy.get('.iui-button').eq(1).trigger('mouseenter');
-      }
-
       cy.compareSnapshot(testName);
     });
   });

apps/storybook/src/ColorPicker.test.ts

@@ -10,7 +10,9 @@ describe('ColorPicker', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('iframe', { qs: { id } });
-      cy.get('.iui-button').first().click();
+      cy.get('#storybook-root').within(() => {
+        cy.get('button').first().click();
+      });
       cy.compareSnapshot(testName);
     });
   });

apps/storybook/src/ComboBox.test.ts

@@ -24,7 +24,7 @@ describe('ComboBox', () => {
       cy.compareSnapshot(`${testName} (Closed)`);
       cy.get('input').focus();
       if (testName === 'Multiple Select') {
-        cy.get('.iui-list-item').then((els) => {
+        cy.get('[role=option]').then((els) => {
           const items = Array.from(els, (el) => el);
           items[3].click();
         });

apps/storybook/src/Dialog.test.ts

@@ -16,7 +16,9 @@ describe('Dialog', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('iframe', { qs: { id } });
-      cy.get('.iui-button').first().click();
+      cy.get('#storybook-root').within(() => {
+        cy.get('button').first().click();
+      });
       cy.compareSnapshot(testName);
     });
   });

apps/storybook/src/DropdownButton.test.ts

@@ -11,7 +11,9 @@ describe('DropdownButton', () => {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('iframe', { qs: { id } });
       cy.compareSnapshot(`${testName} (Closed)`);
-      cy.get('.iui-button').click();
+      cy.get('#storybook-root').within(() => {
+        cy.get('button').click();
+      });
       cy.compareSnapshot(`${testName} (Open)`);
     });
   });

apps/storybook/src/DropdownMenu.test.ts

@@ -19,10 +19,12 @@ describe('DropdownMenu', () => {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('iframe', { qs: { id } });
       cy.compareSnapshot(`${testName} (Closed)`);
-      cy.get('.iui-button').click();
+      cy.get('#storybook-root').within(() => {
+        cy.get('button').first().click();
+      });
 
       if (testName === 'Submenu') {
-        cy.get('.iui-list-item').last().trigger('mouseenter');
+        cy.get('li[aria-expanded=false]').trigger('mouseenter');
       }
 
       cy.compareSnapshot(`${testName} (Open)`);

apps/storybook/src/ExpandableBlock.test.ts

@@ -20,7 +20,7 @@ describe('ExpandableBlock', () => {
       cy.visit('iframe', { qs: { id } });
       cy.compareSnapshot(`${testName} (Closed)`);
       if (testName !== 'Disabled') {
-        cy.get('.iui-header').first().click();
+        cy.get('[role=button]').first().click();
         cy.compareSnapshot(`${testName} (Open)`);
       }
     });

apps/storybook/src/FileUpload.test.ts

@@ -20,7 +20,7 @@ describe('FileUpload', () => {
         testName === 'Default File Upload Card' ||
         testName === 'Custom File Upload Card'
       ) {
-        cy.get('.iui-visually-hidden').selectFile(
+        cy.get('input').selectFile(
           {
             contents: Cypress.Buffer.from('file contents'),
             fileName: 'file.txt',

apps/storybook/src/Flex.stories.tsx

@@ -65,11 +65,11 @@ export default {
         <style
           dangerouslySetInnerHTML={{
             __html: /* css */ `
-            :where(.demo-flex-wrapper .iui-flex) {
+            :where(.demo-flex-wrapper > *) {
               outline: 1px solid var(--iui-color-border);
               min-height: 100px;
             }
-            :where(.demo-flex-wrapper :not([class*='iui'])) {
+            :where(.demo-flex-wrapper > * div:not([class])) {
               font-family: var(--iui-font-sans);
               color: var(--iui-color-text);
               padding: 1rem;

apps/storybook/src/InformationPanel.test.ts

@@ -10,7 +10,9 @@ describe('InformationPanel', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('iframe', { qs: { id } });
-      cy.get('.iui-button').first().click();
+      cy.get('#storybook-root').within(() => {
+        cy.get('button').first().click();
+      });
       cy.compareSnapshot(testName);
     });
   });

apps/storybook/src/Modal.test.ts

@@ -10,7 +10,9 @@ describe('Modal', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('iframe', { qs: { id } });
-      cy.get('.iui-button').first().click();
+      cy.get('#storybook-root').within(() => {
+        cy.get('button').first().click();
+      });
       cy.compareSnapshot(testName);
     });
   });

apps/storybook/src/SearchBox.test.ts

@@ -20,7 +20,9 @@ describe('SearchBox', () => {
       cy.visit('iframe', { qs: { id } });
       cy.compareSnapshot(testName);
       if (!testName.includes('Basic') && testName !== 'Small') {
-        cy.get('.iui-searchbox-open-button').first().click();
+        cy.get('#storybook-root').within(() => {
+          cy.get('button').first().click();
+        });
         cy.compareSnapshot(`${testName} (Open)`);
       }
     });

apps/storybook/src/Select.test.ts

@@ -34,17 +34,17 @@ describe('Select', () => {
       }
 
       cy.compareSnapshot(`${testName} (Closed)`);
-      cy.get('.iui-select-button').click();
+      cy.get('[role=combobox]').click();
       cy.compareSnapshot(`${testName} (Open)`);
 
       if (testName.includes('Multi')) {
-        cy.get('.iui-list-item').first().click();
-        cy.get('.iui-list-item').eq(1).click();
+        cy.get('[role=option]').first().click();
+        cy.get('[role=option]').eq(1).click();
         cy.compareSnapshot(`${testName} (Multi selected)`);
       }
 
       if (testName === 'Custom') {
-        cy.get('.iui-list-item').first().click();
+        cy.get('[role=option]').first().click();
         cy.compareSnapshot(`${testName} (Closed With Value)`);
       }
     });

apps/storybook/src/SkipToContentLink.test.ts

@@ -10,7 +10,9 @@ describe('SkipToContentLink', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('iframe', { qs: { id } });
-      cy.get('.iui-skip-to-content-link').focus();
+      cy.get('#storybook-root').within(() => {
+        cy.get('a').first().focus();
+      });
       cy.compareSnapshot(testName);
     });
   });

apps/storybook/src/SplitButton.test.ts

@@ -11,7 +11,9 @@ describe('SplitButton', () => {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('iframe', { qs: { id } });
       cy.compareSnapshot(`${testName} (Closed)`);
-      cy.get('.iui-button').last().click();
+      cy.get('#storybook-root').within(() => {
+        cy.get('button').last().click();
+      });
       cy.compareSnapshot(`${testName} (Open)`);
     });
   });

apps/storybook/src/Stepper.test.ts

@@ -12,7 +12,9 @@ describe('Stepper', () => {
       cy.visit('iframe', { qs: { id } });
 
       if (testName.includes('Tooltip')) {
-        cy.get('.iui-stepper-step').first().trigger('mouseenter'); // trigger tooltip
+        cy.get('#storybook-root').within(() => {
+          cy.get('li').first().trigger('mouseenter'); // trigger tooltip
+        });
       }
 
       cy.compareSnapshot(testName);

apps/storybook/src/Table.test.ts

@@ -41,46 +41,48 @@ describe('Table', () => {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('iframe', { qs: { id } });
 
-      switch (testName) {
-        case 'Column Manager': {
-          cy.get('.iui-slot .iui-button').click();
-          break;
+      cy.get('#storybook-root').within(() => {
+        switch (testName) {
+          case 'Column Manager': {
+            cy.get('[role=columnheader] button').last().click();
+            break;
+          }
+          case 'Condensed': {
+            cy.get('[role=rowgroup] button').first().click();
+            break;
+          }
+          case 'Custom Filter': {
+            cy.get('button').first().click({ force: true }); // force because the button is hidden
+            break;
+          }
+          case 'Customized Columns': {
+            cy.get('[role=rowgroup] button').last().click();
+            break;
+          }
+          case 'Expandable':
+          case 'Expandable Subrows': {
+            cy.get('[role=rowgroup] button').first().click();
+            break;
+          }
+          case 'Editable': {
+            cy.get('[contenteditable]').first().click().type('Test');
+            break;
+          }
+          case 'Filters': {
+            cy.get('button').first().click({ force: true }); // force because the button is hidden
+            break;
+          }
+          case 'Global Filter': {
+            cy.get('input').first().click().type('Description8');
+            break;
+          }
+          case 'Localized': {
+            cy.get('input').first().click();
+            cy.get('button').first().click({ force: true }); // force because the button is hidden
+            break;
+          }
         }
-        case 'Condensed': {
-          cy.get('.iui-table-row-expander').first().click();
-          break;
-        }
-        case 'Custom Filter': {
-          cy.get('.iui-table-filter-button').first().click({ force: true }); // force because the button is hidden
-          break;
-        }
-        case 'Customized Columns': {
-          cy.get('.iui-table-row-expander').last().click();
-          break;
-        }
-        case 'Expandable':
-        case 'Expandable Subrows': {
-          cy.get('.iui-table-row-expander').first().click();
-          break;
-        }
-        case 'Editable': {
-          cy.get('[contenteditable]').first().click().type('Test');
-          break;
-        }
-        case 'Filters': {
-          cy.get('.iui-table-filter-button').first().click({ force: true }); // force because the button is hidden
-          break;
-        }
-        case 'Global Filter': {
-          cy.get('.iui-input').first().click().type('Description8');
-          break;
-        }
-        case 'Localized': {
-          cy.get('.iui-checkbox').first().click();
-          cy.get('.iui-table-filter-button').first().click({ force: true }); // force because the button is hidden
-          break;
-        }
-      }
+      });
 
       cy.compareSnapshot(testName);
     });

apps/storybook/src/Tabs.test.ts

@@ -22,14 +22,18 @@ describe('Tabs', () => {
       cy.compareSnapshot(testName);
 
       if (testName === 'Horizontal Overflow') {
-        const tabs = cy.get('li > button.iui-tab').should('have.length', 13);
-
-        tabs.last().focus();
+        cy.get('#storybook-root').within(() => {
+          cy.get('[role=tab]').last().focus();
+        });
+        cy.wait(500);
         cy.compareSnapshot(`${testName} (Scroll end)`);
 
         // cy somehow loses tabs list and does not focus on first element so getting it again.
         cy.focused().blur();
-        cy.get('li > button.iui-tab').first().focus();
+        cy.get('#storybook-root').within(() => {
+          cy.get('[role=tab]').first().focus();
+        });
+        cy.wait(500);
         cy.compareSnapshot(`${testName} (Scroll start)`);
       }
     });

apps/storybook/src/Tile.test.ts

@@ -29,7 +29,7 @@ describe('Tile', () => {
         testName === 'Actionable' ||
         testName === 'Anchor Link'
       ) {
-        cy.get('.iui-tile-thumbnail-picture').hide();
+        cy.get('[style*=background-image]').hide();
       }
 
       cy.compareSnapshot(testName);

apps/storybook/src/TimePicker.test.ts

@@ -10,8 +10,10 @@ describe('TimePicker', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('iframe', { qs: { id } });
-      cy.get('.iui-button').last().click();
-      cy.get('.iui-input-container').hide();
+      cy.get('#storybook-root').within(() => {
+        cy.get('button').last().click();
+        cy.get('input').parent().hide();
+      });
       cy.compareSnapshot(testName);
     });
   });

apps/storybook/src/Toasts.test.ts

@@ -17,7 +17,9 @@ describe('Toasts', () => {
     it(testName, function () {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('iframe', { qs: { id } });
-      cy.get('.iui-button').first().click();
+      cy.get('#storybook-root').within(() => {
+        cy.get('button').first().click();
+      });
       cy.compareSnapshot(testName);
     });
   });