[@mantine/demos] Add withinPortal to all Select demos

mantinedev · Nov 17, 2022 · 517439e · 517439e
1 parent 9dd3cb2
commit 517439e
Show file tree

Hide file tree

Showing 20 changed files with 24 additions and 2 deletions.
diff --git a/src/mantine-demos/src/demos/core/Select/Select.demo.animations.tsx b/src/mantine-demos/src/demos/core/Select/Select.demo.animations.tsx
@@ -26,6 +26,7 @@ function Demo() {
         transition="pop-top-left"
         transitionDuration={80}
         transitionTimingFunction="ease"
+        withinPortal
       />
     </div>
   );

diff --git a/src/mantine-demos/src/demos/core/Select/Select.demo.clearable.tsx b/src/mantine-demos/src/demos/core/Select/Select.demo.clearable.tsx
@@ -22,6 +22,7 @@ function Demo() {
         label="Your favorite framework/library"
         placeholder="Pick one"
         clearable
+        withinPortal
         data={[
           { value: 'react', label: 'React' },
           { value: 'ng', label: 'Angular' },
@@ -35,7 +36,8 @@ function Demo() {
         placeholder="Pick one"
         clearable
         searchable
-        style={{ marginTop: 15 }}
+        withinPortal
+        mt="md"
         data={[
           { value: 'react', label: 'React' },
           { value: 'ng', label: 'Angular' },

diff --git a/src/mantine-demos/src/demos/core/Select/Select.demo.configurator.tsx b/src/mantine-demos/src/demos/core/Select/Select.demo.configurator.tsx
@@ -18,7 +18,7 @@ function Demo() {
 export const configurator: MantineDemo = {
   type: 'configurator',
   component: (props: SelectProps) => (
-    <Select data={['React', 'Angular', 'Svelte', 'Vue']} {...props} />
+    <Select data={['React', 'Angular', 'Svelte', 'Vue']} withinPortal {...props} />
   ),
   codeTemplate,
   configuratorProps: { multiline: 3 },

diff --git a/src/mantine-demos/src/demos/core/Select/Select.demo.creatable.tsx b/src/mantine-demos/src/demos/core/Select/Select.demo.creatable.tsx
@@ -46,6 +46,7 @@ export function Demo() {
         nothingFound="Nothing found"
         searchable
         creatable
+        withinPortal
         getCreateLabel={(query) => `+ Create ${query}`}
         onCreate={(query) => {
           const item = { value: query, label: query };

diff --git a/src/mantine-demos/src/demos/core/Select/Select.demo.deselect.tsx b/src/mantine-demos/src/demos/core/Select/Select.demo.deselect.tsx
@@ -17,6 +17,7 @@ function Demo() {
         label="Your favorite framework/library"
         placeholder="Pick one"
         allowDeselect
+        withinPortal
         defaultValue="react"
         data={[
           { value: 'react', label: 'React' },

diff --git a/src/mantine-demos/src/demos/core/Select/Select.demo.disabled.tsx b/src/mantine-demos/src/demos/core/Select/Select.demo.disabled.tsx
@@ -18,6 +18,7 @@ function Demo() {
         label="Disabled without value"
         placeholder="Pick all that you like"
         disabled
+        withinPortal
       />
 
       <Select
@@ -26,6 +27,7 @@ function Demo() {
         label="Disabled with value"
         placeholder="Pick all that you like"
         disabled
+        withinPortal
         value="React"
       />
     </div>

diff --git a/src/mantine-demos/src/demos/core/Select/Select.demo.disabledItems.tsx b/src/mantine-demos/src/demos/core/Select/Select.demo.disabledItems.tsx
@@ -27,6 +27,7 @@ export function Demo() {
       <Select
         label="Select with disabled items"
         placeholder="Select something"
+        withinPortal
         data={[
           { value: 'react', label: 'React', disabled: true },
           { value: 'ng', label: 'Angular', disabled: true },

diff --git a/src/mantine-demos/src/demos/core/Select/Select.demo.flip.tsx b/src/mantine-demos/src/demos/core/Select/Select.demo.flip.tsx
@@ -16,6 +16,7 @@ export const flip: MantineDemo = {
     <Select
       placeholder="Pick one"
       label="Your favorite framework/library"
+      withinPortal
       data={[
         { value: 'react', label: 'React' },
         { value: 'ng', label: 'Angular' },

diff --git a/src/mantine-demos/src/demos/core/Select/Select.demo.group.tsx b/src/mantine-demos/src/demos/core/Select/Select.demo.group.tsx
@@ -27,6 +27,7 @@ function Demo() {
       <Select
         label="Your favorite Rick and Morty character"
         placeholder="Pick one"
+        withinPortal
         data={[
           { value: 'rick', label: 'Rick', group: 'Used to be a pickle' },
           { value: 'morty', label: 'Morty', group: 'Never was a pickle' },

diff --git a/src/mantine-demos/src/demos/core/Select/Select.demo.icon.tsx b/src/mantine-demos/src/demos/core/Select/Select.demo.icon.tsx
@@ -27,6 +27,7 @@ function Demo() {
         placeholder="Pick a hashtag"
         data={['React', 'Angular', 'Svelte', 'Vue']}
         icon={<IconHash size={14} />}
+        withinPortal
       />
     </div>
   );

diff --git a/src/mantine-demos/src/demos/core/Select/Select.demo.itemComponent.tsx b/src/mantine-demos/src/demos/core/Select/Select.demo.itemComponent.tsx
@@ -137,6 +137,7 @@ export function CustomSelectDemo(props: any) {
       searchable
       maxDropdownHeight={400}
       nothingFound="Nobody here"
+      withinPortal
       filter={(value, item) =>
         item.label.toLowerCase().includes(value.toLowerCase().trim()) ||
         item.description.toLowerCase().includes(value.toLowerCase().trim())

diff --git a/src/mantine-demos/src/demos/core/Select/Select.demo.large.tsx b/src/mantine-demos/src/demos/core/Select/Select.demo.large.tsx
@@ -34,6 +34,7 @@ function Demo() {
         searchable
         nothingFound="No options"
         maxDropdownHeight={280}
+        withinPortal
         data={data}
       />
     </div>

diff --git a/src/mantine-demos/src/demos/core/Select/Select.demo.readOnly.tsx b/src/mantine-demos/src/demos/core/Select/Select.demo.readOnly.tsx
@@ -31,6 +31,7 @@ function Demo() {
         placeholder="Pick one"
         defaultValue="react"
         readOnly
+        withinPortal
         data={[
           { value: 'react', label: 'React' },
           { value: 'ng', label: 'Angular' },

diff --git a/src/mantine-demos/src/demos/core/Select/Select.demo.rightSection.tsx b/src/mantine-demos/src/demos/core/Select/Select.demo.rightSection.tsx
@@ -31,6 +31,7 @@ function Demo() {
         rightSectionWidth={30}
         styles={{ rightSection: { pointerEvents: 'none' } }}
         data={['React', 'Angular', 'Svelte', 'Vue']}
+        withinPortal
       />
     </div>
   );

diff --git a/src/mantine-demos/src/demos/core/Select/Select.demo.scrollbars.tsx b/src/mantine-demos/src/demos/core/Select/Select.demo.scrollbars.tsx
@@ -31,6 +31,7 @@ function Demo() {
         label="Select with native scrollbars"
         placeholder="Dropdown with native scrollbars"
         dropdownComponent="div"
+        withinPortal
       />
     </div>
   );

diff --git a/src/mantine-demos/src/demos/core/Select/Select.demo.searchable.tsx b/src/mantine-demos/src/demos/core/Select/Select.demo.searchable.tsx
@@ -27,6 +27,7 @@ function Demo() {
         searchable
         nothingFound="No options"
         data={['React', 'Angular', 'Svelte', 'Vue']}
+        withinPortal
       />
     </div>
   );

diff --git a/src/mantine-demos/src/demos/core/Select/Select.demo.searchableControlled.tsx b/src/mantine-demos/src/demos/core/Select/Select.demo.searchableControlled.tsx
@@ -35,6 +35,7 @@ function Demo() {
         searchValue={searchValue}
         nothingFound="No options"
         data={['React', 'Angular', 'Svelte', 'Vue']}
+        withinPortal
       />
     </div>
   );

diff --git a/src/mantine-demos/src/demos/core/Select/Select.demo.stylesApi.tsx b/src/mantine-demos/src/demos/core/Select/Select.demo.stylesApi.tsx
@@ -40,6 +40,7 @@ function Demo() {
         label="Custom active styles"
         defaultValue="Vue"
         data={['React', 'Angular', 'Vue', 'Svelte']}
+        withinPortal
         styles={(theme) => ({
           item: {
             // applies styles to selected item

diff --git a/src/mantine-demos/src/demos/core/Select/Select.demo.usage.tsx b/src/mantine-demos/src/demos/core/Select/Select.demo.usage.tsx
@@ -27,6 +27,7 @@ function Demo() {
       <Select
         label="Your favorite framework/library"
         placeholder="Pick one"
+        withinPortal
         data={[
           { value: 'react', label: 'React' },
           { value: 'ng', label: 'Angular' },

diff --git a/src/mantine-demos/src/demos/core/Select/Select.demo.validation.tsx b/src/mantine-demos/src/demos/core/Select/Select.demo.validation.tsx
@@ -17,6 +17,7 @@ function Demo() {
         data={['React', 'Angular', 'Svelte', 'Vue']}
         label="Your favorite frameworks/libraries"
         placeholder="Pick all that you like"
+        withinPortal
         error
       />
 
@@ -26,6 +27,7 @@ function Demo() {
         label="Your favorite frameworks/libraries"
         placeholder="Pick all that you like"
         error="Pick at least one item"
+        withinPortal
       />
     </div>
   );