css modules

.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);
     });
   });