playbook_ui 12.28.0.pre.alpha.PLAY837MapCustomButton868 → 12.28.0.pre.alpha.20230613implementbakesupport865

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a11d84418c9c01374cd74d38a154f76d034ff440cd3a8580ffdace764232279e
-  data.tar.gz: fbf756271614a013e06861498022157b2a6c585f7402a6d14c2c1a34052745cd
+  metadata.gz: 62eedbdec361bff235a7ebde79c752faa859b91299c6f95eaa2c3ec23e91abf2
+  data.tar.gz: 550f326d274477581aa51f988951324a83431324e67a7e08f5c46563af295b26
 SHA512:
-  metadata.gz: 366d06de731005646685950b3bd763a791716076d22bb077265dee3ed18727fb7d6eefdc5063e1cb02b4246fee19cf8d692260294fd2c91c422cff8fec7dc0d6
-  data.tar.gz: ca19bd5db001368a141c1fa553313170d5fdc6ec1badb596160027f9c105cb97f7e117f9c3915b8cd039d7e8c0014dac4ba816a93e6f3cdbb90cbdb7860f6cd2
+  metadata.gz: 3c2068cc5d7a0a63feee16c002e6e4b9b5ec441d937753f7e35bd80a2f4dc3af6946f4c05d9d74a44a3003fa8d4ff94a34b4e1767eb1ae3f1d7d8eaa2bc72435
+  data.tar.gz: 866b7ce2934c27dcec593eeb6cea2e3728f81f0ce4b7590483e2e4f17f62c09843da42b26507a5f11246df25aa2ff93692c1b5301804013f2f1d1fed2aba9a42

data/app/pb_kits/playbook/index.js

@@ -60,7 +60,6 @@ export { default as List } from './pb_list/_list'
 export { default as ListItem } from './pb_list/_list_item'
 export { default as LoadingInline } from './pb_loading_inline/_loading_inline'
 export { default as Map} from './pb_map/_map'
-export { default as MapCustomButton } from './pb_map/_map_custom_button'
 export { default as Message } from './pb_message/_message'
 export { default as MultiLevelSelect} from './pb_multi_level_select/_multi_level_select'
 export { default as MultipleUsers } from './pb_multiple_users/_multiple_users'

data/app/pb_kits/playbook/pb_map/_map.scss

@@ -5,21 +5,6 @@
 @import "./_pb_map_button_mixin.scss";
 
 [class*="pb_map"] {
-  .pb_map-custom-button {
-    @include pb_map_button;
-    position: relative;
-    margin-top: $space_xs;
-    box-shadow: $shadow_deep;
-    .pb_icon_kit {
-      width: $space_sm - 2;
-      height: $space_sm;
-    }
-
-    .pb_button_content {
-      height: $space_sm;
-    }
-  }
-
   .mapboxgl-map,
   .maplibregl-map {
     font-family: $font_family_base !important;
@@ -200,7 +185,7 @@
     }
     .map-zoom-in-button,
     .map-zoom-out-button,
-    .map-flyto-button, .pb_map-custom-button {
+    .map-flyto-button {
       @include pb_map_button_dark;
     }
 

data/app/pb_kits/playbook/pb_map/_map.tsx

@@ -3,7 +3,9 @@ import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 
-import MapControls from './_map_controls';
+import Flex  from "../pb_flex/_flex"
+import Icon from '../pb_icon/_icon'
+import Button from '../pb_button/_button'
 
 type MapProps = {
   aria?: { [key: string]: string },
@@ -45,13 +47,29 @@ const Map = (props: MapProps) => {
     >
       {
         zoomBtns ? (
-          <Map.Controls
-          flyTo={flyTo}
-          flyToClick={flyToClick}
-          zoomBtns={zoomBtns}
-          zoomInClick={zoomInClick}
-          zoomOutClick={zoomOutClick}
-          />
+          <Flex className="custom-nav-control" orientation='column'>
+            <div className="custom-nav-control-zoom">
+              <Button className='map-zoom-in-button'
+                  onClick={zoomInClick}
+              >
+                    <Icon icon="plus"/>
+              </Button>
+              <Button className='map-zoom-out-button'
+                 onClick={zoomOutClick}
+              >
+                    <Icon icon="minus"/>
+              </Button>
+            </div>
+            {
+              flyTo ? (
+                <Button className='map-flyto-button'
+                  onClick={flyToClick}
+                >
+                      <Icon icon="eye"/>
+                </Button>
+              ) : null
+            }
+         </Flex>
          ) : null
       }
       {children}
@@ -59,5 +77,4 @@ const Map = (props: MapProps) => {
   )
 }
 
-Map.Controls = MapControls
 export default Map

data/app/pb_kits/playbook/pb_map/docs/example.yml

@@ -4,4 +4,3 @@ examples:
   react:
   - map_default: Default
   - map_with_plugin: Map With Polygon Draw Plugin
-  - map_with_custom_button: Map With Custom Button

data/app/pb_kits/playbook/pb_map/docs/index.js

@@ -1,3 +1,2 @@
 export { default as MapDefault } from './_map_default.jsx'
 export { default as MapWithPlugin } from './_map_with_plugin.jsx'
-export {default as MapWithCustomButton} from './_map_with_custom_button.jsx'