remove inconsistencies between dialog and popover

src/components/section/theme.ts

@@ -88,7 +88,7 @@ export default {
       base: 'px-4 lg:px-5 py-5 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-5',
       normal: 'bg-gray-300 border-b border-gray',
     },
-    popup: {
+    dialog: {
       base: 'px-4 lg:px-5 py-5 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8',
       normal: 'bg-white border-b border-gray',
     },

src/components/sectionFilter/SectionFilter.stories.mdx

@@ -27,7 +27,7 @@ import { SectionFilterAction } from './SectionFilterAction'
 # SectionFilter
 
 You can use the SectionFilter component to create a filter on a specific Section.
-It supports two modes out off the box. The popup mode shows the filter in a popup, which is very convenient on mobile devices, whereas the drop under mode shows the filter in a collapsible fashion.
+It supports two modes out off the box. The dialog mode shows the filter in a dialog, which is very convenient on mobile devices, whereas the drop under mode shows the filter in a collapsible fashion.
 
 This component is based on two libraries that you need to install in your project as well:
 
@@ -131,5 +131,5 @@ export const Template = () => {
 - `section.filter.trigger.base`: styles of the indicator of applied filters
 - `section.filter.container.base`: base styles for the pop under form container
 - `section.filter.container.normal`: color styles for the pop under form container
-- `section.filter.popup.base`: base styles for the dialog form container
-- `section.filter.popup.normal`: color styles for the dialog form container
+- `section.filter.dialog.base`: base styles for the dialog form container
+- `section.filter.dialog.normal`: color styles for the dialog form container

src/components/sectionFilter/SectionFilter.tsx

@@ -26,10 +26,10 @@ type Props<T> = ClassNameProps & {
    */
   onFilter: (values: T) => void
   /**
-   * Visualize the filter options in a popup, if it matches the provided media query.
+   * Visualize the filter options in a dialog, if it matches the provided media query.
    * e.g. '(max-width: 768px)'
    */
-  asPopupMediaQuery?: string
+  asDialogMediaQuery?: string
   /**
    * Input fields of your filter.
    */
@@ -65,14 +65,14 @@ export function SectionFilter<T>({
   className,
   initialValues,
   onFilter,
-  asPopupMediaQuery = '(max-width: 768px)',
+  asDialogMediaQuery = '(max-width: 768px)',
   dialogProps,
   children,
 }: Props<T>): ReactElement {
   const { section } = useTheme()
-  const showFilterPopup = useMatchMediaQuery(asPopupMediaQuery)
+  const showFilterDialog = useMatchMediaQuery(asDialogMediaQuery)
 
-  if (showFilterPopup && dialogProps) {
+  if (showFilterDialog && dialogProps) {
     const { confirmationButtonContent, onDismiss, ...filterDialogProps } =
       dialogProps
 
@@ -87,8 +87,8 @@ export function SectionFilter<T>({
         >
           <Form
             className={classNames(
-              section.filter.popup.base,
-              section.filter.popup.normal,
+              section.filter.dialog.base,
+              section.filter.dialog.normal,
               className
             )}
           >