Leftover

iTwin · Nov 18, 2024 · acab7f6 · acab7f6
1 parent d39bd4e
commit acab7f6
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 71 deletions.
diff --git a/apps/react-workshop/src/Panels.stories.tsx b/apps/react-workshop/src/Panels.stories.tsx
@@ -71,7 +71,7 @@ export const MultiPanelInformationPanel = () => {
     >
       <Panels.Panel id={initialActiveId}>
         <Surface.Header as={Panels.Header}>Root</Surface.Header>
-        <Surface.Body as={List}>
+        <Surface.Body as={List} style={{ height: '100%' }}>
           {panels.map((panel) => (
             <ListItem key={panel.id}>
               <ListItem.Content>
@@ -203,34 +203,32 @@ export const MultiLevelList = () => {
           blockSize: 'min(250px, 50vh)',
         }}
       >
-        <Panels.Panel id={initialActiveId}>
-          <List>
-            <ListItem>
-              <ListItem.Content as='label' htmlFor={toggleSwitchId}>
-                Repeat
-              </ListItem.Content>
-              <ToggleSwitch
-                id={toggleSwitchId}
-                onChange={(e) => setRepeat(e.target.checked)}
-                checked={repeat}
-              />
-            </ListItem>
-            <ListItem>
-              <Panels.Trigger for={qualityPanelId}>
-                <ListItem.Action>Quality</ListItem.Action>
-              </Panels.Trigger>
-            </ListItem>
-            <ListItem>
-              <Panels.Trigger for={speedPanelId}>
-                <ListItem.Action>Speed</ListItem.Action>
-              </Panels.Trigger>
-            </ListItem>
-            <ListItem>
-              <Panels.Trigger for={accessibilityPanelId}>
-                <ListItem.Action>Accessibility</ListItem.Action>
-              </Panels.Trigger>
-            </ListItem>
-          </List>
+        <Panels.Panel as={List} id={initialActiveId}>
+          <ListItem>
+            <ListItem.Content as='label' htmlFor={toggleSwitchId}>
+              Repeat
+            </ListItem.Content>
+            <ToggleSwitch
+              id={toggleSwitchId}
+              onChange={(e) => setRepeat(e.target.checked)}
+              checked={repeat}
+            />
+          </ListItem>
+          <ListItem>
+            <Panels.Trigger for={qualityPanelId}>
+              <ListItem.Action>Quality</ListItem.Action>
+            </Panels.Trigger>
+          </ListItem>
+          <ListItem>
+            <Panels.Trigger for={speedPanelId}>
+              <ListItem.Action>Speed</ListItem.Action>
+            </Panels.Trigger>
+          </ListItem>
+          <ListItem>
+            <Panels.Trigger for={accessibilityPanelId}>
+              <ListItem.Action>Accessibility</ListItem.Action>
+            </Panels.Trigger>
+          </ListItem>
         </Panels.Panel>
 
         <Panels.Panel id={qualityPanelId}>

diff --git a/examples/Panels.main.jsx b/examples/Panels.main.jsx
@@ -16,7 +16,7 @@ export default () => {
 
   return (
     <Panels.Wrapper as={Surface} className='demo-panels-wrapper'>
-      <Panels.Panel id={panelIdRoot} as={Surface} border={false} elevation={0}>
+      <Panels.Panel id={panelIdRoot}>
         <Surface.Header as={Panels.Header}>Root</Surface.Header>
         <Surface.Body as={List}>
           <ListItem>
@@ -27,12 +27,7 @@ export default () => {
         </Surface.Body>
       </Panels.Panel>
 
-      <Panels.Panel
-        id={panelIdMoreInfo}
-        as={Surface}
-        border={false}
-        elevation={0}
-      >
+      <Panels.Panel id={panelIdMoreInfo}>
         <Surface.Header as={Panels.Header}>More details</Surface.Header>
         <Surface.Body isPadded>
           <Text>Content</Text>

diff --git a/examples/Panels.multiLevelList.jsx b/examples/Panels.multiLevelList.jsx
@@ -124,12 +124,7 @@ export default () => {
           </ListItem>
         </Panels.Panel>
 
-        <Panels.Panel
-          id={qualityPanelId}
-          as={Surface}
-          border={false}
-          elevation={0}
-        >
+        <Panels.Panel id={qualityPanelId}>
           <Surface.Header as={Panels.Header}>Quality</Surface.Header>
           <Surface.Body as={List}>
             {qualities.map((quality) => (
@@ -138,12 +133,7 @@ export default () => {
           </Surface.Body>
         </Panels.Panel>
 
-        <Panels.Panel
-          id={speedPanelId}
-          as={Surface}
-          border={false}
-          elevation={0}
-        >
+        <Panels.Panel id={speedPanelId}>
           <Surface.Header as={Panels.Header}>Speed</Surface.Header>
           <Surface.Body as={List}>
             {speeds.map((speed) => (
@@ -152,12 +142,7 @@ export default () => {
           </Surface.Body>
         </Panels.Panel>
 
-        <Panels.Panel
-          as={Surface}
-          id={accessibilityPanelId}
-          border={false}
-          elevation={0}
-        >
+        <Panels.Panel id={accessibilityPanelId}>
           <Surface.Header as={Panels.Header}>Accessibility</Surface.Header>
           <Surface.Body as={List}>
             <_ItemAccessibility content='High contrast' />

diff --git a/examples/Panels.multiPanelInformationPanel.css b/examples/Panels.multiPanelInformationPanel.css
@@ -2,3 +2,7 @@
   inline-size: 200px;
   block-size: 300px;
 }
+
+.demo-initial-panel-body {
+  height: 100%;
+}
diff --git a/examples/Panels.multiPanelInformationPanel.jsx b/examples/Panels.multiPanelInformationPanel.jsx
@@ -22,14 +22,9 @@ export default () => {
 
   return (
     <Panels.Wrapper as={Surface} className='demo-panels-wrapper'>
-      <Panels.Panel
-        id={initialActiveId}
-        as={Surface}
-        border={false}
-        elevation={0}
-      >
+      <Panels.Panel id={initialActiveId}>
         <Surface.Header as={Panels.Header}>Root</Surface.Header>
-        <Surface.Body as={List}>
+        <Surface.Body as={List} className='demo-initial-panel-body'>
           {panels.map((panel) => (
             <ListItem key={panel.id}>
               <ListItem.Content>
@@ -44,11 +39,11 @@ export default () => {
 
       {panels.map((panel) => (
         <Panels.Panel
+          as={Flex}
           key={panel.id}
           id={panel.id}
-          as={Surface}
-          border={false}
-          elevation={0}
+          flexDirection='column'
+          alignItems='stretch'
         >
           <Surface.Header as={Panels.Header}>{panel.label}</Surface.Header>
           <Surface.Body as={Flex} flexDirection='column'>

diff --git a/examples/Panels.nestedPanels.jsx b/examples/Panels.nestedPanels.jsx
@@ -30,13 +30,7 @@ export default () => {
         className='demo-panels-wrapper'
       >
         {panelIds.map((id, index) => (
-          <Panels.Panel
-            key={id}
-            id={id}
-            as={Surface}
-            border={false}
-            elevation={0}
-          >
+          <Panels.Panel key={id} id={id}>
             <Surface.Header as={Panels.Header}>{id}</Surface.Header>
             <Surface.Body isPadded>
               <Panels.Trigger for={panelIds[index + 1]}>