Merge branch 'main' into mayank/skeleton

iTwin · Feb 16, 2024 · e56e53a · e56e53a
2 parents b5c47db + cf3e767
commit e56e53a
Show file tree

Hide file tree

Showing 246 changed files with 1,081 additions and 531 deletions.
diff --git a/.changeset/four-hairs-hear.md b/.changeset/four-hairs-hear.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-variables': minor
+---
+
+`data-iui-theme` will now automatically specify an `accent-color` to match the current theme.
diff --git a/.changeset/fresh-bananas-judge.md b/.changeset/fresh-bananas-judge.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': minor
+---
+
+`ThemeProvider` will now automatically specify an `accent-color` to match the current theme.
diff --git a/.changeset/neat-walls-fix.md b/.changeset/neat-walls-fix.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': minor
+---
+
+`Select` will now correctly reset its `value` if `null` is passed.
diff --git a/.changeset/sour-masks-sleep.md b/.changeset/sour-masks-sleep.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+Added `width`/`height` attributes to inlined svgs, to make them more resilient in case CSS fails.
diff --git a/apps/website/src/components/OpenInCodePen.astro b/apps/website/src/components/OpenInCodePen.astro
@@ -8,25 +8,7 @@ const { code, ...rest } = Astro.props;
 code.js ||= 'export default () => "hello";';
 code.css ||= '';
 
-const css = outdent`
-  @layer reset, itwinui;
-
-  .app-wrapper {
-    height: 100dvh;
-    padding: 1rem;
-  }
-
-  ${code.css.trim()}
-
-  @layer reset {
-    * {
-      box-sizing: border-box;
-    }
-    body {
-      margin: 0;
-    }
-  }
-`;
+const css = code.css.trim();
 const js = outdent`
   ${code.js.replace('export default () =>', 'const App = () =>')}
 
@@ -36,7 +18,7 @@ const js = outdent`
   import { ThemeProvider } from '@itwin/itwinui-react';
 
   createRoot(document.body).render(
-    <ThemeProvider className='app-wrapper'>
+    <ThemeProvider style={{height: '100dvh', padding: '1rem'}}>
       <App />
     </ThemeProvider>
   );
@@ -49,6 +31,7 @@ const js = outdent`
   )
   .replaceAll(`'react'`, `'https://esm.sh/react@18'`)
   .replaceAll(`react-dom`, `https://esm.sh/react-dom@18`);
+const html = '<body style="margin: 0"></body>';
 ---
 
 <form
@@ -67,6 +50,7 @@ const js = outdent`
       css_external: 'https://esm.sh/@itwin/itwinui-react@3/styles.css',
       css,
       js,
+      html,
     }).replace(/"/g, '&quot;')}
   />
 

diff --git a/examples/Alert.main.css b/examples/Alert.main.css
@@ -0,0 +1,3 @@
+.demo-alert-wrapper {
+  min-width: min(100%, 350px);
+}
diff --git a/examples/Alert.main.jsx b/examples/Alert.main.jsx
@@ -7,7 +7,7 @@ import { Alert } from '@itwin/itwinui-react';
 
 export default () => {
   return (
-    <Alert.Wrapper style={{ minWidth: 'min(100%, 350px)' }}>
+    <Alert.Wrapper className='demo-alert-wrapper'>
       <Alert.Icon />
       <Alert.Message>
         This is an alert

diff --git a/examples/Alert.sticky.css b/examples/Alert.sticky.css
@@ -0,0 +1,9 @@
+.demo-container {
+  height: 150px;
+  overflow: auto;
+  border: solid 0.5px;
+}
+
+.demo-text {
+  padding: 8px;
+}
diff --git a/examples/Alert.sticky.jsx b/examples/Alert.sticky.jsx
@@ -7,7 +7,7 @@ import { Alert, Text } from '@itwin/itwinui-react';
 
 export default () => {
   return (
-    <div style={{ height: 150, overflow: 'auto', border: 'solid 0.5px' }}>
+    <div className='demo-container'>
       <Alert.Wrapper isSticky>
         <Alert.Icon />
         <Alert.Message>
@@ -18,7 +18,7 @@ export default () => {
         </Alert.Message>
         <Alert.CloseButton onClick={() => console.log('CLOSED')} />
       </Alert.Wrapper>
-      <Text style={{ padding: 8 }}>
+      <Text className='demo-text'>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
         veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea

diff --git a/examples/Alert.types.css b/examples/Alert.types.css
@@ -0,0 +1,5 @@
+.demo-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--iui-size-xs);
+}
diff --git a/examples/Alert.types.jsx b/examples/Alert.types.jsx
@@ -3,11 +3,11 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Alert, Flex } from '@itwin/itwinui-react';
+import { Alert } from '@itwin/itwinui-react';
 
 export default () => {
   return (
-    <Flex flexDirection='column'>
+    <div className='demo-container'>
       {['positive', 'warning', 'negative'].map((type) => (
         <Alert.Wrapper key={type} type={type}>
           <Alert.Icon />
@@ -20,6 +20,6 @@ export default () => {
           <Alert.CloseButton onClick={() => console.log('CLOSED')} />
         </Alert.Wrapper>
       ))}
-    </Flex>
+    </div>
   );
 };
diff --git a/examples/Avatar.groupoverflowtooltip.css b/examples/Avatar.groupoverflowtooltip.css
@@ -0,0 +1,3 @@
+.demo-tooltip {
+  white-space: pre;
+}
diff --git a/examples/Avatar.sizes.css b/examples/Avatar.sizes.css
@@ -0,0 +1,5 @@
+.demo-container {
+  display: flex;
+  gap: var(--iui-size-s);
+  place-items: center;
+}
diff --git a/examples/Avatar.sizes.jsx b/examples/Avatar.sizes.jsx
@@ -7,13 +7,7 @@ import { Avatar, getUserColor } from '@itwin/itwinui-react';
 
 export default () => {
   return (
-    <div
-      style={{
-        display: 'flex',
-        gap: 'var(--iui-size-s)',
-        placeItems: 'center',
-      }}
-    >
+    <div className='demo-container'>
       <Avatar
         abbreviation='TR'
         backgroundColor={getUserColor('Terry Rivers')}

diff --git a/examples/Avatar.statuses.css b/examples/Avatar.statuses.css
@@ -0,0 +1,5 @@
+.demo-container {
+  display: flex;
+  gap: var(--iui-size-s);
+  place-items: center;
+}
diff --git a/examples/Avatar.statuses.jsx b/examples/Avatar.statuses.jsx
@@ -7,13 +7,7 @@ import { Avatar, getUserColor } from '@itwin/itwinui-react';
 
 export default () => {
   return (
-    <div
-      style={{
-        display: 'flex',
-        gap: 'var(--iui-size-s)',
-        placeItems: 'center',
-      }}
-    >
+    <div className='demo-container'>
       <Avatar
         abbreviation='TR'
         backgroundColor={getUserColor('Terry Rivers')}

diff --git a/examples/Avatar.types.css b/examples/Avatar.types.css
@@ -0,0 +1,4 @@
+.demo-container {
+  display: flex;
+  gap: var(--iui-size-xs);
+}
diff --git a/examples/Avatar.types.jsx b/examples/Avatar.types.jsx
diff --git a/examples/Badge.soft.css b/examples/Badge.soft.css
@@ -0,0 +1,8 @@
+.demo-container {
+  display: flex;
+  column-gap: 4px;
+  place-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin: 10px;
+}
diff --git a/examples/Badge.soft.jsx b/examples/Badge.soft.jsx
@@ -7,16 +7,7 @@ import { Badge } from '@itwin/itwinui-react';
 
 export default () => {
   return (
-    <div
-      style={{
-        display: 'flex',
-        columnGap: 4,
-        placeItems: 'center',
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-        margin: '10px',
-      }}
-    >
+    <div className='demo-container'>
       <Badge backgroundColor='skyblue'>Skyblue</Badge>
       <Badge backgroundColor='celery'>Celery</Badge>
       <Badge backgroundColor='froly'>Froly</Badge>

diff --git a/examples/Badge.statuses.css b/examples/Badge.statuses.css
@@ -0,0 +1,6 @@
+.demo-container {
+  display: flex;
+  column-gap: 4px;
+  place-items: center;
+  flex-wrap: wrap;
+}
diff --git a/examples/Badge.statuses.jsx b/examples/Badge.statuses.jsx
@@ -7,14 +7,7 @@ import { Badge } from '@itwin/itwinui-react';
 
 export default () => {
   return (
-    <div
-      style={{
-        display: 'flex',
-        columnGap: 4,
-        placeItems: 'center',
-        flexWrap: 'wrap',
-      }}
-    >
+    <div className='demo-container'>
       <Badge>Default</Badge>
       <Badge backgroundColor='primary'>Informational</Badge>
       <Badge backgroundColor='positive'>Positive</Badge>

diff --git a/examples/Breadcrumbs.customOverflowDropdown.css b/examples/Breadcrumbs.customOverflowDropdown.css
@@ -0,0 +1,7 @@
+.demo-container {
+  inline-size: 75%;
+  min-inline-size: 150px;
+  max-inline-size: 425px;
+  border: 1px solid lightpink;
+  padding: 8px;
+}
diff --git a/examples/Breadcrumbs.customOverflowDropdown.jsx b/examples/Breadcrumbs.customOverflowDropdown.jsx
@@ -21,15 +21,7 @@ export default () => {
     ));
 
   return (
-    <div
-      style={{
-        inlineSize: '75%',
-        minInlineSize: 150,
-        maxInlineSize: 425,
-        border: '1px solid lightpink',
-        padding: 8,
-      }}
-    >
+    <div className='demo-container'>
       <Breadcrumbs
         overflowButton={(visibleCount) => (
           <DropdownMenu

diff --git a/examples/Breadcrumbs.extremeTruncation.css b/examples/Breadcrumbs.extremeTruncation.css
@@ -0,0 +1,11 @@
+.demo-container {
+  inline-size: 75%;
+  min-inline-size: 150px;
+  max-inline-size: 425px;
+  border: 1px solid pink;
+  padding: 8px;
+}
+
+.demo-breadcrumbs-item {
+  max-width: 90px;
+}
diff --git a/examples/Breadcrumbs.extremeTruncation.jsx b/examples/Breadcrumbs.extremeTruncation.jsx
@@ -7,29 +7,21 @@ import { Breadcrumbs, MiddleTextTruncation } from '@itwin/itwinui-react';
 
 export default () => {
   return (
-    <div
-      style={{
-        inlineSize: '75%',
-        minInlineSize: 150,
-        maxInlineSize: 425,
-        border: '1px solid pink',
-        padding: 8,
-      }}
-    >
+    <div className='demo-container'>
       <Breadcrumbs>
-        <Breadcrumbs.Item onClick={() => {}} style={{ maxWidth: 90 }}>
+        <Breadcrumbs.Item onClick={() => {}} className='demo-breadcrumbs-item'>
           <MiddleTextTruncation text='Root' endCharsCount={7} />
         </Breadcrumbs.Item>
-        <Breadcrumbs.Item onClick={() => {}} style={{ maxWidth: 90 }}>
+        <Breadcrumbs.Item onClick={() => {}} className='demo-breadcrumbs-item'>
           <MiddleTextTruncation text='My files' endCharsCount={7} />
         </Breadcrumbs.Item>
-        <Breadcrumbs.Item onClick={() => {}} style={{ maxWidth: 90 }}>
+        <Breadcrumbs.Item onClick={() => {}} className='demo-breadcrumbs-item'>
           <MiddleTextTruncation text='Documents' endCharsCount={7} />
         </Breadcrumbs.Item>
-        <Breadcrumbs.Item onClick={() => {}} style={{ maxWidth: 90 }}>
+        <Breadcrumbs.Item onClick={() => {}} className='demo-breadcrumbs-item'>
           <MiddleTextTruncation text='Status reports' endCharsCount={7} />
         </Breadcrumbs.Item>
-        <Breadcrumbs.Item onClick={() => {}} style={{ maxWidth: 90 }}>
+        <Breadcrumbs.Item onClick={() => {}} className='demo-breadcrumbs-item'>
           <MiddleTextTruncation text='December' endCharsCount={7} />
         </Breadcrumbs.Item>
       </Breadcrumbs>

diff --git a/examples/Breadcrumbs.folder.css b/examples/Breadcrumbs.folder.css
@@ -0,0 +1,5 @@
+.demo-container {
+  display: inline-flex;
+  width: 418px;
+  justify-content: center;
+}
diff --git a/examples/Breadcrumbs.folder.jsx b/examples/Breadcrumbs.folder.jsx
@@ -40,9 +40,7 @@ export default () => {
   );
 
   return (
-    <div
-      style={{ display: 'inline-flex', width: 418, justifyContent: 'center' }}
-    >
+    <div className='demo-container'>
       <DropdownButton
         startIcon={<SvgFolder aria-hidden />}
         styleType='borderless'

diff --git a/examples/Breadcrumbs.truncation.css b/examples/Breadcrumbs.truncation.css
@@ -0,0 +1,7 @@
+.demo-container {
+  inline-size: 75%;
+  min-inline-size: 150px;
+  max-inline-size: 450px;
+  border: 1px solid pink;
+  padding: 8px;
+}
diff --git a/examples/Breadcrumbs.truncation.jsx b/examples/Breadcrumbs.truncation.jsx
@@ -7,15 +7,7 @@ import { Breadcrumbs } from '@itwin/itwinui-react';
 
 export default () => {
   return (
-    <div
-      style={{
-        inlineSize: '75%',
-        minInlineSize: 150,
-        maxInlineSize: 450,
-        border: '1px solid pink',
-        padding: 8,
-      }}
-    >
+    <div className='demo-container'>
       <Breadcrumbs>
         <Breadcrumbs.Item onClick={() => {}}>Root</Breadcrumbs.Item>
         <Breadcrumbs.Item onClick={() => {}}>My files</Breadcrumbs.Item>

diff --git a/examples/Button.borderless.css b/examples/Button.borderless.css
@@ -0,0 +1,4 @@
+.demo-container {
+  display: flex;
+  gap: var(--iui-size-xs);
+}
diff --git a/examples/Button.borderless.jsx b/examples/Button.borderless.jsx
@@ -3,12 +3,12 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Button, Flex } from '@itwin/itwinui-react';
+import { Button } from '@itwin/itwinui-react';
 import { SvgAdd, SvgCheckmarkSmall } from '@itwin/itwinui-icons-react';
 
 export default () => {
   return (
-    <Flex>
+    <div className='demo-container'>
       <Button styleType='borderless'>Default</Button>
       <Button styleType='borderless' disabled>
         Disabled
@@ -19,6 +19,6 @@ export default () => {
       <Button styleType='borderless' endIcon={<SvgCheckmarkSmall />}>
         With endIcon
       </Button>
-    </Flex>
+    </div>
   );
 };
diff --git a/examples/Button.cta.css b/examples/Button.cta.css
@@ -0,0 +1,4 @@
+.demo-container {
+  display: flex;
+  gap: var(--iui-size-xs);
+}