Addressing comments related to excluding Button from Material UI

bcgov · Dec 27, 2024 · c7ec38c · c7ec38c
1 parent 2798b00
commit c7ec38c
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 31 deletions.
diff --git a/frontend/src/app/features/map/DropDownButton.tsx b/frontend/src/app/features/map/DropDownButton.tsx
@@ -1,11 +1,13 @@
 import { MouseEvent, MouseEventHandler, ReactNode, useState } from 'react';
-import { Button, ButtonProps, MenuProps } from '@mui/material';
+import { ButtonProps, MenuProps } from '@mui/material';
+
 import Menu from '@mui/material/Menu';
 import clsx from 'clsx';
 
 import { ArrowDownIcon } from '../../components/common/icon';
 
 import './DropdownButton.css';
+import { Button } from '../../components/button/Button';
 
 const defaultButtonStyles = {
   display: 'flex',
@@ -40,7 +42,6 @@ export function DropdownButton({
   ...rest
 }: Readonly<ButtonDropdownProps>) {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
-
   const isOpen = Boolean(anchorEl);
 
   const handleClick = (ev: MouseEvent<HTMLElement>) => {
@@ -58,23 +59,9 @@ export function DropdownButton({
 
   return (
     <div>
-      <Button
-        id={id}
-        className={clsx(className, isOpen && openClassName)}
-        style={{
-          ...defaultButtonStyles,
-          ...style,
-        }}
-        aria-label={typeof children === 'string' ? children : undefined}
-        endIcon={
-          showArrow ? (
-            <ArrowDownIcon title="Down arrow" {...arrowProps} />
-          ) : undefined
-        }
-        {...buttonProps}
-        onClick={handleClick}
-      >
+      <Button onClick={handleClick} size="medium">
         {children}
+        <ArrowDownIcon title="Down arrow" />
       </Button>
       <Menu
         anchorOrigin={{

diff --git a/frontend/src/app/features/map/MapSearch.css b/frontend/src/app/features/map/MapSearch.css
@@ -201,6 +201,7 @@ p.point-search-slider-text {
 
 .point-search-menu .MuiPaper-root {
   overflow: visible;
+  width: 400px;
 }
 
 .search-autocomplete .search-input {

diff --git a/frontend/src/app/features/map/search/RadiusSearch.tsx b/frontend/src/app/features/map/search/RadiusSearch.tsx
@@ -1,10 +1,12 @@
-import { Button, Slider, Typography } from '@mui/material';
+import { Slider, Typography } from '@mui/material';
+
 import clsx from 'clsx';
 import { ActiveToolEnum, MIN_CIRCLE_RADIUS } from '../../../constants/Constant';
 import { XmarkIcon } from '../../../components/common/icon';
 import DropdownButton from '../DropDownButton';
 import { formatDistance } from '../../../helpers/utility';
 import { useState } from 'react';
+import { Button } from '../../../components/button/Button';
 
 interface Props {
   isSmall?: boolean;
@@ -67,23 +69,13 @@ export function RadiusSearch({
     <div className={clsx('point-search', className)}>
       {isVisible && (
         <>
-          <Button
-            color="primary"
-            variant="contained"
-            size="medium"
-            onClick={onCancel}
-            className="radius-search-cancel-button"
-            startIcon={<XmarkIcon className="point-cancel-icon" />}
-          >
+          <Button size="medium" onClick={onCancel}>
+            <XmarkIcon />
             Cancel
           </Button>
           <DropdownButton
             id="pointSearchSetRadiusButton"
-            color="primary"
-            variant="contained"
-            size="medium"
             menuClassName="point-search-menu"
-            className="radius-search-set-radius"
             dropdownContent={sliderBox}
           >
             Set Radius