From a07bb583904c3084acdd4bf11b5244de786040f7 Mon Sep 17 00:00:00 2001 From: steveoh Date: Tue, 18 Jun 2024 12:44:05 -0600 Subject: [PATCH 1/2] feat(sherlock): remove bootstrap --- packages/sherlock/package.json | 4 +-- .../sherlock/src/Sherlock-InMap.stories.jsx | 1 - packages/sherlock/src/Sherlock.css | 31 +++++++++++++++++-- packages/sherlock/src/Sherlock.jsx | 24 +++++++------- 4 files changed, 43 insertions(+), 17 deletions(-) diff --git a/packages/sherlock/package.json b/packages/sherlock/package.json index e358daa1..cc9b3536 100644 --- a/packages/sherlock/package.json +++ b/packages/sherlock/package.json @@ -57,12 +57,10 @@ "@fortawesome/react-fontawesome": "^0.2.0", "downshift": "^9.0.4", "lodash-es": "^4.17.21", - "react-fast-compare": "^3.2.2", - "reactstrap": "^9.2.2" + "react-fast-compare": "^3.2.2" }, "peerDependencies": { "@arcgis/core": "^4.20.0", - "bootstrap": "^4.5.3", "prop-types": "^15.8.1", "react": ">=16.8.0" } diff --git a/packages/sherlock/src/Sherlock-InMap.stories.jsx b/packages/sherlock/src/Sherlock-InMap.stories.jsx index cf11f0df..1b010c75 100644 --- a/packages/sherlock/src/Sherlock-InMap.stories.jsx +++ b/packages/sherlock/src/Sherlock-InMap.stories.jsx @@ -4,7 +4,6 @@ import Map from '@arcgis/core/Map'; import MapView from '@arcgis/core/views/MapView'; import '@arcgis/core/assets/esri/themes/light/main.css'; import * as reactiveUtils from '@arcgis/core/core/reactiveUtils'; -import 'bootstrap/dist/css/bootstrap.min.css'; import './Sherlock.css'; import PropTypes from 'prop-types'; diff --git a/packages/sherlock/src/Sherlock.css b/packages/sherlock/src/Sherlock.css index 679dc93c..0bb00ae1 100644 --- a/packages/sherlock/src/Sherlock.css +++ b/packages/sherlock/src/Sherlock.css @@ -11,7 +11,30 @@ opacity: 1; background-color: var(--highlight-color); } - +.sherlock button { + background: white; + border-radius: 999px; + font-size: 1rem; + cursor: pointer; + transition: + all 200ms ease-in-out, + scale 100ms ease, + box-shadow 100ms ease; + text-decoration: none; + position: relative; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + scale: 1; + text-shadow: none; + box-shadow: none; +} +.sherlock__input-group { + border: 1px #bbb solid; + padding: 0.5em; + border-radius: 999em; +} +.sherlock__container { + padding-bottom: 1em; +} .sherlock__match-dropdown { width: var(--width); background-color: #fff; @@ -19,6 +42,9 @@ font-size: 12px; position: absolute; z-index: 9999; + margin-top: 0.5rem; + border-radius: 0.5em; + overflow: hidden; } .sherlock__matches { display: block; @@ -27,12 +53,13 @@ margin-bottom: 0; } .sherlock__match-item { - padding: 2px 12px; + padding: 0.5em 12px; display: flex; justify-content: space-between; } .sherlock mark { padding: 0; + background-color: #ffdc00; } .sherlock__match-item:hover, .sherlock__match-item--selected { diff --git a/packages/sherlock/src/Sherlock.jsx b/packages/sherlock/src/Sherlock.jsx index 33fda997..fbda2d5e 100644 --- a/packages/sherlock/src/Sherlock.jsx +++ b/packages/sherlock/src/Sherlock.jsx @@ -7,7 +7,6 @@ import Downshift from 'downshift'; import { escapeRegExp, sortBy, uniqWith } from 'lodash-es'; import PropTypes from 'prop-types'; import { useCallback, useEffect, useState } from 'react'; -import { Button, Input, InputGroup } from 'reactstrap'; const defaultSymbols = { polygon: { @@ -38,7 +37,7 @@ export default function Sherlock({ provider, onSherlockMatch, label, - placeHolder, + placeHolder = 'Search', maxResultsToDisplay, }) { const handleStateChange = async (feature) => { @@ -83,17 +82,20 @@ export default function Sherlock({ }) => (

{label}

-
- - +
+ + - - + autoComplete="off" + style={{ + outline: 'none', + }} + /> +
    {!isOpen ? null : ( From 1b770a374409ed318b63981f138d0a8f7a52b0af Mon Sep 17 00:00:00 2001 From: steveoh Date: Tue, 18 Jun 2024 14:02:49 -0600 Subject: [PATCH 2/2] chore: remove bootstrap alert classes --- packages/sherlock/src/Sherlock.css | 14 +++++++++--- packages/sherlock/src/Sherlock.jsx | 36 +++++++++++++++++++----------- 2 files changed, 34 insertions(+), 16 deletions(-) diff --git a/packages/sherlock/src/Sherlock.css b/packages/sherlock/src/Sherlock.css index 0bb00ae1..03bf5f61 100644 --- a/packages/sherlock/src/Sherlock.css +++ b/packages/sherlock/src/Sherlock.css @@ -13,6 +13,7 @@ } .sherlock button { background: white; + border: 0; border-radius: 999px; font-size: 1rem; cursor: pointer; @@ -32,17 +33,23 @@ padding: 0.5em; border-radius: 999em; } +.sherlock input { + outline: none; + border: 0; + font-size: 1em; +} .sherlock__container { padding-bottom: 1em; + white-space: nowrap; } .sherlock__match-dropdown { - width: var(--width); + width: calc(var(--width) - 50px); background-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); font-size: 12px; position: absolute; z-index: 9999; - margin-top: 0.5rem; + margin: 0.5rem; border-radius: 0.5em; overflow: hidden; } @@ -50,7 +57,8 @@ display: block; width: 100%; padding-inline-start: 0; - margin-bottom: 0; + margin: 0; + font-size: 1.2em; } .sherlock__match-item { padding: 0.5em 12px; diff --git a/packages/sherlock/src/Sherlock.jsx b/packages/sherlock/src/Sherlock.jsx index fbda2d5e..940a8e45 100644 --- a/packages/sherlock/src/Sherlock.jsx +++ b/packages/sherlock/src/Sherlock.jsx @@ -91,14 +91,11 @@ export default function Sherlock({ {...getInputProps()} placeholder={placeHolder} autoComplete="off" - style={{ - outline: 'none', - }} />
-
-
    - {!isOpen ? null : ( + {!isOpen ? null : ( +
    +
      Type more than 2 letters. @@ -119,8 +119,11 @@ export default function Sherlock({ if (error) { return (
    • Error! ${error}
      • @@ -130,8 +133,11 @@ export default function Sherlock({ if (!data.length) { return (
    • No items found.
      • @@ -166,8 +172,12 @@ export default function Sherlock({ items.push(
    • More than {maxResultsToDisplay} items found.
      • , @@ -177,9 +187,9 @@ export default function Sherlock({ return items; }}       - )} -
    -
    +
+
+ )}
)}