Merge branch 'main' into uyen/table-doc

apps/website/src/components/LiveExample.astro

@@ -50,6 +50,7 @@ const cssCode = await (async () => {
     <style is:inline>
       astro-island {
         display: block !important; /* https://github.com/iTwin/iTwinUI/pull/2353 */
+        max-inline-size: 100cqi;
       }
     </style>
     <style set:html={cssCode}></style>
@@ -112,6 +113,7 @@ const cssCode = await (async () => {
 <style lang='scss'>
   @layer components {
     demo-box {
+      container-type: inline-size;
       position: relative;
       min-height: 300px;
       max-height: 500px;

examples/Alert.main.css

@@ -1,3 +1,3 @@
 .demo-alert-wrapper {
-  min-width: min(100%, 350px);
+  min-width: min(100cqi, 350px);
 }

examples/Breadcrumbs.customOverflowDropdown.css

@@ -1,5 +1,5 @@
 .demo-container {
-  inline-size: 75%;
+  inline-size: 75cqi;
   min-inline-size: 150px;
   max-inline-size: 425px;
   border: 1px solid lightpink;

examples/Breadcrumbs.extremeTruncation.css

@@ -1,5 +1,5 @@
 .demo-container {
-  inline-size: 75%;
+  inline-size: 75cqi;
   min-inline-size: 150px;
   max-inline-size: 425px;
   border: 1px solid pink;

examples/Breadcrumbs.truncation.css

@@ -1,5 +1,5 @@
 .demo-container {
-  inline-size: 75%;
+  inline-size: 75cqi;
   min-inline-size: 150px;
   max-inline-size: 450px;
   border: 1px solid pink;

examples/ButtonGroup.overflow.css

@@ -1,3 +1,3 @@
 .demo-container {
-  max-width: 70%;
+  max-width: 70cqi;
 }

examples/ButtonGroup.usage.css

@@ -1,5 +1,5 @@
 .demo-container {
-  width: 60%;
+  width: 60cqi;
   display: flex;
   gap: var(--iui-size-xs);
 }

examples/DropdownMenu.hidemiddleware.css

@@ -1,5 +1,5 @@
 .demo-container {
-  width: 50%;
+  width: 50cqi;
 }
 
 .list {

examples/ExpandableBlock.accordion.css

@@ -1,3 +1,3 @@
 .demo-container {
-  width: min(100%, 300px);
+  width: min(100cqi, 300px);
 }

examples/ExpandableBlock.actions.css

@@ -1,3 +1,3 @@
 .demo-container {
-  width: min(100%, 300px);
+  width: min(100cqi, 300px);
 }

examples/ExpandableBlock.borderless.css

@@ -1,3 +1,3 @@
 .demo-container {
-  width: min(100%, 300px);
+  width: min(100cqi, 300px);
 }

examples/ExpandableBlock.disabled.css

@@ -1,3 +1,3 @@
 .demo-container {
-  width: min(100%, 300px);
+  width: min(100cqi, 300px);
 }

examples/ExpandableBlock.form.css

@@ -1,3 +1,3 @@
 .demo-container {
-  width: min(100%, 300px);
+  width: min(100cqi, 300px);
 }

examples/ExpandableBlock.main.css

@@ -1,3 +1,3 @@
 .demo-container {
-  width: min(100%, 300px);
+  width: min(100cqi, 300px);
 }

examples/ExpandableBlock.small.css

@@ -1,3 +1,3 @@
 .demo-container {
-  width: min(100%, 300px);
+  width: min(100cqi, 300px);
 }

examples/ExpandableBlock.status.css

@@ -1,3 +1,3 @@
 .demo-container {
-  width: min(100%, 300px);
+  width: min(100cqi, 300px);
 }

examples/ExpandableBlock.withcaption.css

@@ -1,3 +1,3 @@
 .demo-container {
-  width: min(100%, 300px);
+  width: min(100cqi, 300px);
 }

examples/Flex.spacer.css

@@ -4,5 +4,5 @@
 }
 
 .demo-container {
-  width: 100%;
+  width: 100cqi;
 }

examples/Flex.wrap.css

@@ -4,5 +4,5 @@
 }
 
 .demo-container {
-  width: 30%;
+  width: 30cqi;
 }

examples/ProgressLinear.label.css

@@ -2,5 +2,5 @@
   display: flex;
   flex-direction: column;
   gap: var(--iui-size-s);
-  width: min(100%, 200px);
+  width: min(100cqi, 200px);
 }

examples/ProgressLinear.status.css

@@ -2,5 +2,5 @@
   display: flex;
   flex-direction: column;
   gap: var(--iui-size-s);
-  width: min(100%, 200px);
+  width: min(100cqi, 200px);
 }

examples/RadioTile.color.css

@@ -1,3 +1,3 @@
 .demo-radio-tile-group {
-  width: min(100%, 350px);
+  width: min(100cqi, 350px);
 }

examples/RadioTile.main.css

@@ -1,3 +1,3 @@
 .demo-radio-tile-group {
-  width: min(100%, 350px);
+  width: min(100cqi, 350px);
 }

examples/SearchBox.basic.css

@@ -1,5 +1,5 @@
 .demo-container {
-  width: 70%;
+  width: 70cqi;
   display: flex;
   gap: var(--iui-size-xs);
 }

examples/SearchBox.borderlessexpandbutton.css

@@ -1,5 +1,5 @@
 .demo-container {
-  width: 70%;
+  width: 70cqi;
   display: flex;
   justify-content: center;
   gap: var(--iui-size-xs);

examples/SearchBox.custom.css

@@ -1,5 +1,5 @@
 .demo-container {
-  width: 70%;
+  width: 70cqi;
   display: flex;
   justify-content: center;
   gap: var(--iui-size-xs);

examples/SearchBox.customopen.css

@@ -1,5 +1,5 @@
 .demo-container {
-  width: 70%;
+  width: 70cqi;
   display: flex;
   justify-content: center;
   gap: var(--iui-size-xs);

examples/SearchBox.expandable.css

@@ -1,5 +1,5 @@
 .demo-container {
-  width: 70%;
+  width: 70cqi;
   display: flex;
   justify-content: center;
   gap: var(--iui-size-xs);

examples/SearchBox.main.css

@@ -1,5 +1,5 @@
 .demo-container {
-  width: 70%;
+  width: 70cqi;
   display: flex;
   gap: var(--iui-size-xs);
 }

examples/SearchBox.size.css

@@ -1,5 +1,5 @@
 .demo-container {
-  width: 70%;
+  width: 70cqi;
   display: flex;
   flex-direction: column;
   gap: var(--iui-size-xs);

examples/SearchBox.status.css

@@ -1,5 +1,5 @@
 .demo-container {
-  width: 70%;
+  width: 70cqi;
   display: flex;
   flex-direction: column;
   gap: var(--iui-size-xs);

examples/SkipToContentLink.main.css

@@ -3,6 +3,6 @@
   align-items: center;
   justify-content: center;
   min-height: 300px;
-  width: 100%;
+  width: 100cqi;
   transform: translateX(0); /* creates containing block for position: fixed */
 }

examples/Slider.labels.css

@@ -1,3 +1,3 @@
 .demo-input-grid {
-  width: min(100%, 300px);
+  width: min(100cqi, 300px);
 }

examples/Slider.main.css

@@ -1,3 +1,3 @@
 .demo-input-grid {
-  width: min(100%, 300px);
+  width: min(100cqi, 300px);
 }

examples/Slider.range.css

@@ -1,3 +1,3 @@
 .demo-input-grid {
-  width: min(100%, 300px);
+  width: min(100cqi, 300px);
 }

examples/Slider.rangemultiple.css

@@ -1,3 +1,3 @@
 .demo-input-grid {
-  width: min(100%, 300px);
+  width: min(100cqi, 300px);
 }

examples/Slider.thumbcustom.css

@@ -1,5 +1,5 @@
 .demo-container {
-  width: min(100%, 300px);
+  width: min(100cqi, 300px);
 }
 
 .demo-thumb {

examples/Slider.tooltipcustom.css

@@ -1,3 +1,3 @@
 .demo-input-grid {
-  width: min(100%, 300px);
+  width: min(100cqi, 300px);
 }

examples/Slider.tooltipnone.css

@@ -1,5 +1,5 @@
 .demo-input-grid {
-  width: min(100%, 300px);
+  width: min(100cqi, 300px);
 }
 
 .demo-text {

examples/Stepper.customIcon.css

@@ -1,5 +1,5 @@
 .demo-container {
-  min-width: min(100%, 400px);
+  min-width: min(100cqi, 400px);
   display: flex;
   flex-direction: column;
   gap: var(--iui-size-m);

examples/Stepper.layout.css

@@ -1,5 +1,5 @@
 .demo-container {
-  min-width: min(100%, 400px);
+  min-width: min(100cqi, 400px);
   display: flex;
   flex-direction: column;
   gap: var(--iui-size-m);

examples/Stepper.localization.css

@@ -1,5 +1,5 @@
 .demo-container {
-  min-width: min(100%, 400px);
+  min-width: min(100cqi, 400px);
   display: flex;
   flex-direction: column;
   gap: var(--iui-size-m);

examples/Stepper.long.css

@@ -1,5 +1,5 @@
 .demo-container {
-  min-width: min(100%, 400px);
+  min-width: min(100cqi, 400px);
   display: flex;
   flex-direction: column;
   gap: var(--iui-size-m);

examples/Stepper.main.css

@@ -1,5 +1,5 @@
 .demo-container {
-  min-width: min(100%, 400px);
+  min-width: min(100cqi, 400px);
   display: flex;
   flex-direction: column;
   gap: var(--iui-size-m);

examples/Stepper.short.css

@@ -1,5 +1,5 @@
 .demo-container {
-  min-width: min(100%, 400px);
+  min-width: min(100cqi, 400px);
   display: flex;
   flex-direction: column;
   gap: var(--iui-size-m);

examples/Stepper.tooltip.css

@@ -1,5 +1,5 @@
 .demo-container {
-  min-width: min(100%, 400px);
+  min-width: min(100cqi, 400px);
   display: flex;
   flex-direction: column;
   gap: var(--iui-size-m);

examples/Table.main.css

@@ -1,3 +1,3 @@
 .demo-container {
-  width: 500px;
+  min-width: min(100cqi, 350px);
 }

examples/Tabs.actions.css

@@ -0,0 +1,3 @@
+.demo-container {
+  inline-size: min(100cqi, 400px);
+}

examples/Tabs.actions.jsx

@@ -7,32 +7,34 @@ import { Tabs, Button } from '@itwin/itwinui-react';
 
 export default () => {
   return (
-    <Tabs.Wrapper>
-      <Tabs.TabList>
-        <Tabs.Tab value='apple' label='Apple' key='apple' />
-        <Tabs.Tab value='orange' label='Orange' key='orange' />
-        <Tabs.Tab value='pear' label='Pear' key='pear' />
-      </Tabs.TabList>
+    <div className='demo-container'>
+      <Tabs.Wrapper>
+        <Tabs.TabList>
+          <Tabs.Tab value='apple' label='Apple' key='apple' />
+          <Tabs.Tab value='orange' label='Orange' key='orange' />
+          <Tabs.Tab value='pear' label='Pear' key='pear' />
+        </Tabs.TabList>
 
-      <Tabs.Actions>
-        <Button size='small'>My action</Button>
-      </Tabs.Actions>
+        <Tabs.Actions>
+          <Button size='small'>My action</Button>
+        </Tabs.Actions>
 
-      <Tabs.Panel value='apple' key='apple'>
-        An apple is a round, edible fruit produced by an apple tree (Malus
-        domestica). Apple trees are cultivated worldwide and are the most widely
-        grown species in the genus Malus.
-      </Tabs.Panel>
-      <Tabs.Panel value='orange' key='orange'>
-        An orange is a fruit of various citrus species in the family Rutaceae
-        (see list of plants known as orange); it primarily refers to Citrus x
-        sinensis, which is also called sweet orange, to distinguish it from the
-        related Citrus x aurantium, referred to as bitter orange.
-      </Tabs.Panel>
-      <Tabs.Panel value='pear' key='pear'>
-        Pears are fruits produced and consumed around the world, growing on a
-        tree and harvested in late summer into mid-autumn.
-      </Tabs.Panel>
-    </Tabs.Wrapper>
+        <Tabs.Panel value='apple' key='apple'>
+          An apple is a round, edible fruit produced by an apple tree (Malus
+          domestica). Apple trees are cultivated worldwide and are the most
+          widely grown species in the genus Malus.
+        </Tabs.Panel>
+        <Tabs.Panel value='orange' key='orange'>
+          An orange is a fruit of various citrus species in the family Rutaceae
+          (see list of plants known as orange); it primarily refers to Citrus x
+          sinensis, which is also called sweet orange, to distinguish it from
+          the related Citrus x aurantium, referred to as bitter orange.
+        </Tabs.Panel>
+        <Tabs.Panel value='pear' key='pear'>
+          Pears are fruits produced and consumed around the world, growing on a
+          tree and harvested in late summer into mid-autumn.
+        </Tabs.Panel>
+      </Tabs.Wrapper>
+    </div>
   );
 };

examples/Tabs.borderless.css

@@ -0,0 +1,3 @@
+.demo-container {
+  inline-size: min(100cqi, 400px);
+}