feat: use SimplePage instead of ScreenshotArea

Author: SpyZzey

pages/multiselect/custom-render-option.page.tsx

@@ -3,10 +3,9 @@
 import * as React from 'react';
 
 import { Multiselect, MultiselectProps } from '~components';
-import Box from '~components/box';
 import { SelectProps } from '~components/select';
 
-import ScreenshotArea from '../utils/screenshot-area';
+import { SimplePage } from '../app/templates';
 import { i18nStrings } from './constants';
 const lotsOfOptions: SelectProps.Options = [...Array(50)].map((_, index) => ({
   value: `Option ${index}`,
@@ -48,24 +47,21 @@ export default function SelectPage() {
   };
 
   return (
-    <ScreenshotArea>
-      <Box variant="h1">Multiselect with custom item renderer</Box>
-      <Box padding="l">
-        <div style={{ width: '400px' }}>
-          <Multiselect
-            enableSelectAll={true}
-            i18nStrings={{ ...i18nStrings, selectAllText: 'Select all' }}
-            filteringType={'auto'}
-            renderOption={renderOptionItem}
-            placeholder="Choose option"
-            selectedOptions={selectedOptions}
-            onChange={event => {
-              setSelectedOptions(event.detail.selectedOptions);
-            }}
-            options={options}
-          />
-        </div>
-      </Box>
-    </ScreenshotArea>
+    <SimplePage title="Multiselect with custom item renderer" screenshotArea={{}}>
+      <div style={{ width: '400px' }}>
+        <Multiselect
+          enableSelectAll={true}
+          i18nStrings={{ ...i18nStrings, selectAllText: 'Select all' }}
+          filteringType={'auto'}
+          renderOption={renderOptionItem}
+          placeholder="Choose option"
+          selectedOptions={selectedOptions}
+          onChange={event => {
+            setSelectedOptions(event.detail.selectedOptions);
+          }}
+          options={options}
+        />
+      </div>
+    </SimplePage>
   );
 }

pages/select/custom-render-option.page.tsx

@@ -3,10 +3,9 @@
 import * as React from 'react';
 import { useState } from 'react';
 
-import Box from '~components/box';
 import Select, { SelectProps } from '~components/select';
 
-import ScreenshotArea from '../utils/screenshot-area';
+import { SimplePage } from '../app/templates';
 
 const lotsOfOptions = [...Array(50).keys()].map(n => {
   const numberToDisplay = (n + 5).toString();
@@ -51,21 +50,18 @@ export default function SelectPage() {
   };
 
   return (
-    <ScreenshotArea>
-      <Box variant="h1">Select with custom item renderer</Box>
-      <Box padding="l">
-        <div style={{ width: '400px' }}>
-          <Select
-            filteringType="auto"
-            renderOption={renderOption}
-            placeholder="Choose option"
-            selectedOption={selectedOption}
-            onChange={({ detail }) => setSelectedOption(detail.selectedOption)}
-            options={options}
-            triggerVariant="option"
-          />
-        </div>
-      </Box>
-    </ScreenshotArea>
+    <SimplePage title="Select with custom item renderer" screenshotArea={{}}>
+      <div style={{ width: '400px' }}>
+        <Select
+          filteringType="auto"
+          renderOption={renderOption}
+          placeholder="Choose option"
+          selectedOption={selectedOption}
+          onChange={({ detail }) => setSelectedOption(detail.selectedOption)}
+          options={options}
+          triggerVariant="option"
+        />
+      </div>
+    </SimplePage>
   );
 }

src/select/interfaces.ts

@@ -191,7 +191,7 @@ export interface SelectProps extends BaseSelectProps {
    */
   autoFocus?: boolean;
   /**
-   * Specifies a render function to render custom options in the dropdown menu.
+   * Specifies a render function to render custom options in the dropdown menu or trigger.
    *
    * @awsuiSystem core
    */