From a84693a471d2f4a674d1c871f91378befc375384 Mon Sep 17 00:00:00 2001
From: Uyen Doan <uyen.doan@bentley.com>
Date: Mon, 30 Sep 2024 14:56:54 -0500
Subject: [PATCH] Added Select for order and placemenet

---
 examples/Toast.order.css     |  6 ++++++
 examples/Toast.order.jsx     | 15 ++++++++++++---
 examples/Toast.placement.css |  1 +
 examples/Toast.placement.jsx | 21 +++++++++++++++++----
 4 files changed, 36 insertions(+), 7 deletions(-)
 create mode 100644 examples/Toast.order.css

diff --git a/examples/Toast.order.css b/examples/Toast.order.css
new file mode 100644
index 00000000000..a94f5c6e618
--- /dev/null
+++ b/examples/Toast.order.css
@@ -0,0 +1,6 @@
+.demo-container {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: var(--iui-size-xs);
+}
diff --git a/examples/Toast.order.jsx b/examples/Toast.order.jsx
index 711757f1bf6..9713d9d4a8e 100644
--- a/examples/Toast.order.jsx
+++ b/examples/Toast.order.jsx
@@ -3,21 +3,30 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { useToaster, Button } from '@itwin/itwinui-react';
+import { useToaster, Button, Select } from '@itwin/itwinui-react';
 
 export default () => {
   const toaster = useToaster();
+  const [selectedOrder, setSelectedOrder] = React.useState('auto');
 
   React.useEffect(() => {
     toaster.setSettings({
-      order: 'ascending',
+      order: selectedOrder,
     });
   }, []);
 
   return (
     <div className='demo-container'>
+      <Select
+        placeholder='Select order'
+        options={[
+          { value: 'ascending', label: 'Ascending' },
+          { value: 'descending', label: 'Descending' },
+          { value: 'auto', label: 'Auto' },
+        ]}
+      ></Select>
       <Button onClick={() => toaster.informational('This is a toast message.')}>
-        Ascending toast
+        Open toast
       </Button>
     </div>
   );
diff --git a/examples/Toast.placement.css b/examples/Toast.placement.css
index e059575c674..a94f5c6e618 100644
--- a/examples/Toast.placement.css
+++ b/examples/Toast.placement.css
@@ -2,4 +2,5 @@
   display: flex;
   align-items: center;
   flex-direction: column;
+  gap: var(--iui-size-xs);
 }
diff --git a/examples/Toast.placement.jsx b/examples/Toast.placement.jsx
index 88393f0fa1b..16214a52acc 100644
--- a/examples/Toast.placement.jsx
+++ b/examples/Toast.placement.jsx
@@ -3,21 +3,34 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { useToaster, Button } from '@itwin/itwinui-react';
+import { useToaster, Button, Select } from '@itwin/itwinui-react';
 
 export default () => {
   const toaster = useToaster();
+  const [selectedPlacement, setSelectedPlacement] = React.useState('top');
 
   React.useEffect(() => {
     toaster.setSettings({
-      placement: 'bottom-end',
+      placement: selectedPlacement,
     });
-  }, []);
+  }, [selectedPlacement]);
 
   return (
     <div className='demo-container'>
+      <Select
+        placeholder='Select placement'
+        options={[
+          { value: 'top', label: 'Top' },
+          { value: 'top-start', label: 'Top start' },
+          { value: 'top-end', label: 'Top end' },
+          { value: 'bottom', label: 'Bottom' },
+          { value: 'bottom-start', label: 'Bottom start' },
+          { value: 'bottom-end', label: 'Bottom end' },
+        ]}
+        onChange={(value) => setSelectedPlacement(value)}
+      ></Select>
       <Button onClick={() => toaster.informational('This is a toast message.')}>
-        Bottom-end toast
+        Open toast
       </Button>
     </div>
   );