From ae75695fa6300e3cbadb8661ff3e4230f6f33e9a Mon Sep 17 00:00:00 2001 From: Ivan Kordonets Date: Sun, 21 Jan 2024 19:20:21 -0600 Subject: [PATCH 1/2] create unified searchbox --- src/css/main.css | 23 +++- src/img/global/icons/cross.svg | 3 + src/img/global/icons/search.svg | 3 + src/js/common/stories/Button.jsx | 50 -------- src/js/common/stories/Button.stories.js | 8 -- src/js/common/stories/Searchbox.stories.js | 25 ++++ src/js/components/Buttons/BaseButton.jsx | 1 + .../CampaignsHome/CampaignsHomeFilter.jsx | 12 +- src/js/components/Search/BaseSearchbox.jsx | 120 ++++++++++++++++++ src/js/components/Search/SearchBar.jsx | 40 +----- 10 files changed, 183 insertions(+), 102 deletions(-) create mode 100644 src/img/global/icons/cross.svg create mode 100644 src/img/global/icons/search.svg delete mode 100644 src/js/common/stories/Button.jsx create mode 100644 src/js/common/stories/Searchbox.stories.js create mode 100644 src/js/components/Search/BaseSearchbox.jsx diff --git a/src/css/main.css b/src/css/main.css index 17f52a675..d851914f9 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -24,7 +24,7 @@ --white:#fff; --gray:#6c757d; --gray-dark:#343a40; - --primary:#007bff; + --primary:#0858A1; --secondary:#6c757d; --success:#28a745; --info:#17a2b8; @@ -1498,7 +1498,14 @@ button::-moz-focus-inner,input::-moz-focus-inner { } input { - line-height:normal + border: none; + height: 38px; + line-height:normal; + border:1px solid #ced4da; + border-radius: 0.25rem; + width: 100%; + padding-left: 12px; + padding-right: 10px; } input[type="checkbox"],input[type="radio"] { @@ -1510,6 +1517,14 @@ input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-ou height:auto } +input:focus { + outline: var(--primary) solid 2px !important; +} + +input:focus-visible { + outline: var(--primary) solid 2px !important; +} + fieldset { border:1px solid #c0c0c0; margin:0 2px; @@ -3030,9 +3045,9 @@ h1,h2,h3,h4,h5,h6 { .search-bar { width:100%; - height:38px; overflow:hidden; - position:relative + position:relative; + padding: 4px; } .search-bar .search-bar-options { diff --git a/src/img/global/icons/cross.svg b/src/img/global/icons/cross.svg new file mode 100644 index 000000000..580911601 --- /dev/null +++ b/src/img/global/icons/cross.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/global/icons/search.svg b/src/img/global/icons/search.svg new file mode 100644 index 000000000..9390811ec --- /dev/null +++ b/src/img/global/icons/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/js/common/stories/Button.jsx b/src/js/common/stories/Button.jsx deleted file mode 100644 index a8c17f021..000000000 --- a/src/js/common/stories/Button.jsx +++ /dev/null @@ -1,50 +0,0 @@ -// import React from 'react'; -// import PropTypes from 'prop-types'; -// import './button.css'; - -// /** -// * Primary UI component for user interaction -// */ -// export const Button = ({ primary, backgroundColor, size, label, ...props }) => { -// const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; -// return ( -// -// ); -// }; - -// Button.propTypes = { -// /** -// * Is this the principal call to action on the page? -// */ -// primary: PropTypes.bool, -// /** -// * What background color to use -// */ -// backgroundColor: PropTypes.string, -// /** -// * How large should the button be? -// */ -// size: PropTypes.oneOf(['small', 'medium', 'large']), -// /** -// * Button contents -// */ -// label: PropTypes.string.isRequired, -// /** -// * Optional click handler -// */ -// onClick: PropTypes.func, -// }; - -// Button.defaultProps = { -// backgroundColor: null, -// primary: false, -// size: 'medium', -// onClick: undefined, -// }; diff --git a/src/js/common/stories/Button.stories.js b/src/js/common/stories/Button.stories.js index f0d501f0d..8dd6fbc99 100644 --- a/src/js/common/stories/Button.stories.js +++ b/src/js/common/stories/Button.stories.js @@ -2,26 +2,18 @@ import React from 'react'; import styled from 'styled-components'; import Button from '../../components/Buttons/BaseButton'; -// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export export default { title: 'Design System', component: Button, parameters: { - // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout layout: 'centered', }, - // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs tags: ['autodocs'], - // More on argTypes: https://storybook.js.org/docs/api/argtypes - // argTypes: { - // backgroundColor: { control: 'color' }, - // }, args: { primary: true, }, }; -// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args export const AllButtons = (args) => ( - )} - {(searchButton) && ( - - )} - ); } @@ -129,7 +105,3 @@ SearchBar.propTypes = { searchFunction: PropTypes.func.isRequired, searchUpdateDelayTime: PropTypes.number.isRequired, }; - -const SearchInput = styled('input')` - ${isIPhoneMiniOrSmaller() ? 'font-size: 0.8rem' : ''}; -`; From 79e7a99caa5dfc96cf0fe514f322672936b99b5f Mon Sep 17 00:00:00 2001 From: Ivan Kordonets Date: Sun, 21 Jan 2024 19:30:06 -0600 Subject: [PATCH 2/2] limit amount of charactors for search input --- src/js/components/Search/BaseSearchbox.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/js/components/Search/BaseSearchbox.jsx b/src/js/components/Search/BaseSearchbox.jsx index ce69e3cf5..ae163190a 100644 --- a/src/js/components/Search/BaseSearchbox.jsx +++ b/src/js/components/Search/BaseSearchbox.jsx @@ -56,6 +56,7 @@ const SearchInput = styled.input` padding-left: 12px; border-radius: 0.25rem; padding-right: 40px; + &:focus-visible { border: none; @@ -101,6 +102,7 @@ class BaseSearchbox extends React.Component { value={this.state.searchText} onChange={this.handleInputChange} onClear={this.handleClear} + maxLength={50} /> {this.state.searchText && }