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

new theme for search button #189

Merged
merged 4 commits into from
Nov 6, 2019
Merged

new theme for search button #189

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a6c016b
new theme for search button
Sep 20, 2019
cd5d72c
clean up test case
Oct 31, 2019
ee1a608
Merge branch 'master' into search-button
Nov 6, 2019
18fa298
Update CHANGELOG.md
Nov 6, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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