iTwin · mayank99 · Jun 7, 2023 · May 18, 2023 · May 25, 2023 · May 25, 2023
diff --git a/apps/storybook/src/Flex.stories.tsx b/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 > * > *) {
               font-family: var(--iui-font-sans);
               color: var(--iui-color-text);
               padding: 1rem;

diff --git a/packages/itwinui-css/src/global.scss b/packages/itwinui-css/src/global.scss
@@ -7,16 +7,6 @@
   font-size: var(--iui-font-size-1);
   line-height: 1.5;
   font-family: var(--iui-font-sans);
-
-  // border-box on iui-root, all iui- elements and their descendants under it, excluding any nested iui-root elements
-  &,
-  :where([class*='iui-'], [class*='_iui3-']):where(:not(.iui-root)) {
-    &,
-    &::before,
-    &::after {
-      box-sizing: border-box;
-    }
-  }
 }
 
 // reset margin only for <body> element.
@@ -30,9 +20,14 @@
   background-color: var(--iui-color-background-backdrop);
 }
 
-// text selection and scrollbar styling on iui-root and all elements under it
-:where(.iui-root),
-:where(.iui-root *) {
+// box-sizing, text selection and scrollbar styling on iui-root and all elements under it
+:where(.iui-root, .iui-root *) {
   @include mixins.iui-text-selection;
   @include mixins.iui-scrollbar;
+
+  &,
+  &::before,
+  &::after {
+    box-sizing: border-box;
+  }
 }
diff --git a/packages/itwinui-react/src/core/Slider/Track.tsx b/packages/itwinui-react/src/core/Slider/Track.tsx
@@ -3,6 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
+import { Box } from '../utils/index.js';
 import type { SliderProps, TrackDisplayMode } from './Slider.js';
 
 function shouldDisplaySegment(segmentIndex: number, mode: TrackDisplayMode) {
@@ -79,7 +80,7 @@ export const Track = (props: TrackProps) => {
           return (
             <React.Fragment key={index}>
               {shouldDisplaySegment(index, trackDisplayMode) ? (
-                <div
+                <Box
                   className='iui-slider-track'
                   style={{
                     ...(orientation === 'horizontal'

diff --git a/packages/itwinui-react/src/core/Tabs/Tabs.tsx b/packages/itwinui-react/src/core/Tabs/Tabs.tsx
@@ -14,6 +14,7 @@ import {
   Box,
 } from '../utils/index.js';
 import { Tab } from './Tab.js';
+import styles from '../../styles.js';
 
 export type OverflowOptions = {
   /**
@@ -244,7 +245,9 @@ export const Tabs = (props: TabsProps) => {
   const [focusedIndex, setFocusedIndex] = React.useState<number | undefined>();
   React.useEffect(() => {
     if (tablistRef.current && focusedIndex !== undefined) {
-      const tab = tablistRef.current.querySelectorAll('.iui-tab')[focusedIndex];
+      const tab = tablistRef.current.querySelectorAll(`.${styles['iui-tab']}`)[
+        focusedIndex
+      ];
       (tab as HTMLElement)?.focus();
     }
   }, [focusedIndex]);
@@ -253,7 +256,9 @@ export const Tabs = (props: TabsProps) => {
   useIsomorphicLayoutEffect(() => {
     setHasSublabel(
       type !== 'pill' && // pill tabs should never have sublabels
-        !!tablistRef.current?.querySelector('.iui-tab-description'), // check directly for the sublabel class
+        !!tablistRef.current?.querySelector(
+          `.${styles['iui-tab-description']}`, // check directly for the sublabel class
+        ),
     );
   }, [type]);
 

diff --git a/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.tsx b/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.tsx
@@ -78,15 +78,15 @@ export const ToggleSwitch = React.forwardRef((props, ref) => {
 
   const inputElementRef = React.useRef<HTMLInputElement>(null);
   const refs = useMergedRefs<HTMLInputElement>(inputElementRef, ref);
-  const WrapperComponent = label ? 'label' : 'div';
 
   React.useEffect(() => {
     if (inputElementRef.current && setFocus) {
       inputElementRef.current.focus();
     }
   }, [setFocus]);
   return (
-    <WrapperComponent
+    <Box
+      as={label ? 'label' : 'div'}
       className={cx(
         'iui-toggle-switch-wrapper',
         {
@@ -118,7 +118,7 @@ export const ToggleSwitch = React.forwardRef((props, ref) => {
           {label}
         </Box>
       )}
-    </WrapperComponent>
+    </Box>
   );
 }) as PolymorphicForwardRefComponent<'input', ToggleSwitchProps>;