Skip to content
This repository has been archived by the owner on Jun 12, 2024. It is now read-only.

Commit

Permalink
create new theme for search button (#189)
Browse files Browse the repository at this point in the history 
* new theme for search button

* clean up test case

* Update CHANGELOG.md
  • Loading branch information
Katy DeCorah authored Nov 6, 2019
1 parent 09bf8ae commit 3a8f0e2
Show file tree
Hide file tree
Showing 4 changed files with 109 additions and 40 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

* Add a CSS highlighter option to the `Highlight` component. [#191](https://github.com/mapbox/dr-ui/pull/191)
* Add `GlossaryCard`, `GlossarySection`, and `GlossaryPage` components. [#192](https://github.com/mapbox/dr-ui/pull/192)
* Creates new theme for `Search` button. [#189](https://github.com/mapbox/dr-ui/pull/189)

## 0.21.2

Expand Down
118 changes: 89 additions & 29 deletions src/components/search/__tests__/__snapshots__/search.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,15 @@ exports[`search Basic search renders as expected 1`] = `
<div>
<div>
<button
className="flex-parent flex-parent--center-cross flex-parent--center-main h36 px12 round color-gray color-gray-dark-on-hover bg-gray-faint"
className="flex-parent flex-parent--center-cross flex-parent--center-main btn btn--stroke "
onClick={[Function]}
style={Object {}}
>
<span
className="mr6"
>
<svg
className="icon"
className="icon w18 h18"
>
<use
xlinkHref="#icon-search"
Expand All @@ -36,14 +37,15 @@ exports[`search Basic search with \`site\` set to show filter toggle renders as
<div>
<div>
<button
className="flex-parent flex-parent--center-cross flex-parent--center-main h36 px12 round color-gray color-gray-dark-on-hover bg-gray-faint"
className="flex-parent flex-parent--center-cross flex-parent--center-main btn btn--stroke "
onClick={[Function]}
style={Object {}}
>
<span
className="mr6"
>
<svg
className="icon"
className="icon w18 h18"
>
<use
xlinkHref="#icon-search"
Expand Down Expand Up @@ -121,14 +123,20 @@ exports[`search Search with \`narrow\` option set renders as expected 1`] = `
<div>
<div>
<button
className="flex-parent flex-parent--center-cross flex-parent--center-main h36 px12 round color-gray color-gray-dark-on-hover bg-gray-faint"
className="flex-parent flex-parent--center-cross flex-parent--center-main btn btn--stroke "
onClick={[Function]}
style={
Object {
"paddingLeft": "12px",
"paddingRight": "12px",
}
}
>
<span
className=""
>
<svg
className="icon"
className="icon w18 h18"
>
<title>
Search
Expand Down Expand Up @@ -192,31 +200,81 @@ exports[`search Search with \`narrow\` option set renders as expected 2`] = `
</div>
</div>
<div
className="col col--7-mm col--12 flex-parent flex-parent--main-mm flex-parent--center-cross align-r mb12 mb0-mm"
className="col col--6-mm col--12 flex-parent flex-parent--main-mm flex-parent--center-cross align-r mb12 mb0-mm"
>
<div
className="inline-block"
className="clearfix"
>
Overview
</div>
<div
className="ml18 inline-block"
>
Examples
</div>
<div
className="ml18 inline-block"
>
Help
</div>
<div
className="ml18 inline-block"
>
API Reference
<div
className="fl"
>
<button
className="px6 mr24 fl-mm align-center-mm align-l py12 border-b-mm border-b--2 inline-block border-b border--transparent "
data-test="one"
onClick={[Function]}
type="button"
>
Label one
</button>
</div>
<div
className="fl"
>
<button
className="px6 mr24 fl-mm align-center-mm align-l py12 border-b-mm border-b--2 inline-block border-b border--transparent "
data-test="two"
onClick={[Function]}
type="button"
>
Label two
</button>
</div>
<div
className="fl"
>
<button
className="px6 mr24 fl-mm align-center-mm align-l py12 border-b-mm border-b--2 inline-block-mm none border--transparent "
data-test="three"
onClick={[Function]}
type="button"
>
Label three
</button>
</div>
<div
className="fl"
>
<button
className="px6 mr24 fl-mm align-center-mm align-l py12 border-b-mm border-b--2 inline-block-mm none border--transparent "
data-test="four"
onClick={[Function]}
type="button"
>
Label four
</button>
</div>
<div
className="fl"
>
<div
className="inline-block"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
>
<button
className="px6 py12 mr12 align-l cursor-pointer none-mm"
type="button"
>
More +
</button>
</div>
</div>
</div>
</div>
<div
className="col col--1-mm col--12 flex-parent flex-parent--end-main-mm flex-parent--center-cross"
className="col col--2-mm col--12 flex-parent flex-parent--end-main-mm flex-parent--center-cross"
>
<div
className="w-full mb12 mb0-mm mr36"
Expand All @@ -227,14 +285,15 @@ exports[`search Search with \`narrow\` option set renders as expected 2`] = `
<div>
<div>
<button
className="flex-parent flex-parent--center-cross flex-parent--center-main h36 px12 round color-gray color-gray-dark-on-hover bg-gray-faint"
className="flex-parent flex-parent--center-cross flex-parent--center-main btn btn--stroke "
onClick={[Function]}
style={Object {}}
>
<span
className="mr6"
>
<svg
className="icon"
className="icon w18 h18"
>
<use
xlinkHref="#icon-search"
Expand Down Expand Up @@ -464,14 +523,15 @@ exports[`search Search with dark background, custom placeholder renders as expec
<div>
<div>
<button
className="flex-parent flex-parent--center-cross flex-parent--center-main h36 px12 round color-white color-lighten50-on-hover bg-lighten10"
className="flex-parent flex-parent--center-cross flex-parent--center-main btn btn--stroke btn--white"
onClick={[Function]}
style={Object {}}
>
<span
className="mr6"
>
<svg
className="icon"
className="icon w18 h18"
>
<use
xlinkHref="#icon-search"
Expand Down
17 changes: 11 additions & 6 deletions src/components/search/__tests__/search-test-cases.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import PageLayout from '../../page-layout/page-layout';
import NavigationAccordion from '../../navigation-accordion/navigation-accordion';
import TopbarSticker from '../../topbar-sticker/topbar-sticker';
import ProductMenu from '../../product-menu/product-menu';
import TabList from '@mapbox/mr-ui/tab-list';

const testCases = {};

Expand Down Expand Up @@ -65,14 +66,18 @@ testCases.withLayout = {
<ProductMenu productName="API Documentation" homePage="/api/" />
</div>
</div>
<div className="col col--7-mm col--12 flex-parent flex-parent--main-mm flex-parent--center-cross align-r mb12 mb0-mm">
<div className="inline-block">Overview</div>
<div className="ml18 inline-block">Examples</div>
<div className="ml18 inline-block">Help</div>
<div className="ml18 inline-block">API Reference</div>
<div className="col col--6-mm col--12 flex-parent flex-parent--main-mm flex-parent--center-cross align-r mb12 mb0-mm">
<TabList
items={[
{ id: 'one', label: 'Label one' },
{ id: 'two', label: 'Label two' },
{ id: 'three', label: 'Label three' },
{ id: 'four', label: 'Label four' }
]}
/>
</div>

<div className="col col--1-mm col--12 flex-parent flex-parent--end-main-mm flex-parent--center-cross">
<div className="col col--2-mm col--12 flex-parent flex-parent--end-main-mm flex-parent--center-cross">
<div className="w-full mb12 mb0-mm mr36">
<Search inputId="search4" />
</div>
Expand Down
13 changes: 8 additions & 5 deletions src/components/search/search-box.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -247,15 +247,18 @@ class SearchBox extends React.Component {
) : (
<div>
<button
className={`flex-parent flex-parent--center-cross flex-parent--center-main h36 px12 round ${
this.props.background === 'light'
? 'color-gray color-gray-dark-on-hover bg-gray-faint'
: 'color-white color-lighten50-on-hover bg-lighten10'
className={`flex-parent flex-parent--center-cross flex-parent--center-main btn btn--stroke ${
this.props.background !== 'light' ? 'btn--white' : ''
}`}
style={
this.props.narrow
? { paddingLeft: '12px', paddingRight: '12px' }
: {}
}
onClick={this.openModal}
>
<span className={!this.props.narrow ? 'mr6' : ''}>
<svg className="icon">
<svg className="icon w18 h18">
{this.props.narrow && <title>Search</title>}
<use xlinkHref="#icon-search" />
</svg>
Expand Down

0 comments on commit 3a8f0e2

Please sign in to comment.