feat(styling): Change the way to styling is done

Disable all <input /> border/shadow/padding styling, we want to fix the page styles. Add a new `style: boolean` option to control whether the input and dropdown menu should be styled or not. Fix #91
algolia · Apr 13, 2016 · 11707da · 11707da
1 parent 641e151
commit 11707da
Show file tree

Hide file tree

Showing 13 changed files with 46 additions and 100 deletions.
diff --git a/docs/source/layouts/nostyle.erb b/docs/source/layouts/nostyle.erb
@@ -4,16 +4,12 @@
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta charset="utf-8">
  <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 
  <!-- Always force latest IE rendering engine or request Chrome Frame -->
  <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
  <title>Algolia Places | No style test</title>
  <%= javascript_include_tag config[:places_lib_url] %>
- <style>
- body {
- font-family: Sans
- }
- </style>
  </head>
 
  <body>

diff --git a/docs/source/nostyle.html.erb b/docs/source/nostyle.html.erb
diff --git a/docs/source/partials/documentation.md.erb b/docs/source/partials/documentation.md.erb
@@ -42,7 +42,7 @@ var placesAutocomplete = places({
 
 As a result, you will get the Algolia Places autocompletion menu:
 
-<input type="text" id="docs-getting-started-demo" placeholder="Where are we going?" />
+<input type="text" id="docs-getting-started-demo" class="form-control" placeholder="Where are we going?" />
 
 ## API
 
@@ -126,6 +126,22 @@ if you want to configure this.
 **Default**: Search in all types.
 
 FIXME: not implemented
+</td>
+ </tr>
+ <tr>
+<td markdown="1">
+`style`
+
+Type: object
+
+`{input}`
+
+required: no
+</td>
+<td markdown="1">
+Control whether the default styles should be used.
+
+**Default**: All styles are enabled.
 </td>
  </tr>
  </tbody>

diff --git a/docs/source/partials/examples/_address_form.html.erb b/docs/source/partials/examples/_address_form.html.erb
@@ -1,4 +1,4 @@
-<form action="/billing" class="billing-form">
+<form action="/billing" class="form">
  <div class="form-group">
  <label for="form-address">Address*</label>
  <input type="text" class="form-control" id="form-address" placeholder="Where do you live?" />
@@ -15,7 +15,6 @@
  <label for="form-zip">Zip Code*</label>
  <input type="text" class="form-control" id="form-zip" placeholder="Zip Code">
  </div>
- <button type="submit" class="btn btn-default">Save</button>
 </form>
 
 <script>

diff --git a/docs/source/partials/examples/_address_map.html.erb b/docs/source/partials/examples/_address_map.html.erb
@@ -1,8 +1,8 @@
 <link rel="stylesheet" href="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
 <script src="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
-<div id="map-example">
+<div id="map-example" class="form-group">
  <div class="left-column">
- <input type="text" id="input-map" placeholder="Where are we going?" />
+ <input type="text" id="input-map" class="form-control" placeholder="Where are we going?" />
  </div>
  <div class="right-column">
  <div id="map"></div>

diff --git a/docs/source/partials/examples/_address_search.html.erb b/docs/source/partials/examples/_address_search.html.erb
@@ -1,8 +1,4 @@
-<input
- type="text"
- id="address"
- placeholder="Where are we going?"
-/>
+<input type="text" id="address" class="form-control" placeholder="Where are we going?" />
 
 <script>
  var placesAutocomplete = places({

diff --git a/docs/source/partials/examples/_city_search.html.erb b/docs/source/partials/examples/_city_search.html.erb
@@ -1,4 +1,4 @@
-<input type="text" id="city" placeholder="In which city do you live?" />
+<input type="text" id="city" class="form-control" placeholder="In which city do you live?" />
 
 <script>
  var placesAutocomplete = places({

diff --git a/docs/source/partials/examples/_country_search.html.erb b/docs/source/partials/examples/_country_search.html.erb
@@ -1,4 +1,4 @@
-<input type="text" id="country" placeholder="What's your favorite country?" />
+<input type="text" id="country" class="form-control" placeholder="What's your favorite country?" />
 
 <script>
  var placesAutocomplete = places({

diff --git a/docs/source/partials/hero.html.haml b/docs/source/partials/hero.html.haml
@@ -14,4 +14,4 @@
  %div.fl-right
  = partial("/images/svg/places-illustration.svg")
  - if current_page.path == 'index.html'
- %input{type: "text", id: "landing-demo", class: "hero-searchbar", autofocus: true, placeholder: "Search a city or address"}
+ %input{type: "text", id: "landing-demo", class: "hero-searchbar form-control", autofocus: true, placeholder: "Search a city or address"}
diff --git a/docs/source/partials/navigation.html.haml b/docs/source/partials/navigation.html.haml
@@ -16,8 +16,6 @@
  %a{href: "documentation.html", title: "Documentation", :data => {:path => "documentation.html"}} Documentation
  %li{nav_active("examples.html")}
  %a{href: "examples.html", title: "Examples", :data => {:path => "examples.html"}} Examples
- %li{nav_active("nostyle.html")}
- %a{href: "nostyle.html", title: "Nostyle test", :data => {:path => "nostyle.html"}} <small>No style test</small>
  %li
  %a{href: "https:/algolia/places", title: "GitHub repository"}
  = partial("/images/svg/icon-github.svg")
diff --git a/docs/source/stylesheets/components/_examples.scss b/docs/source/stylesheets/components/_examples.scss
@@ -1,43 +1,22 @@
-.billing-form {
- position: relative;
-
- .form-group {
- margin-bottom: 1em;
-
- label {
- display: block;
- float: left;
- width: 28%;
- margin-right: 2%;
- line-height: 40px;
- text-align: right;
- }
-
- .form-control {
- width: 50%;
- box-sizing: border-box;
- padding-left: 16px;
- line-height: 40px;
- height: 40px;
- border: 1px solid #cccccc;
- border-radius: 3px;
- outline: none;
- }
-
- .algolia-places {
- width: 50% !important;
-
- .form-control {
- width: 100%;
- }
- }
+.form-control {
+ width: 100%;
+ box-sizing: border-box;
+ padding-left: 16px;
+ line-height: 40px;
+ height: 40px;
+ border: 1px solid #cccccc;
+ border-radius: 3px;
+ outline: none;
+}
 
- }
+.form-group {
+ margin-bottom: 1em;
+ clear: both;
 
- button {
- float: right;
- margin-right: 20%;
- margin-bottom: 2em;
+ label {
+ display: block;
+ font-weight: bold;
+ font-size: .8em;
  }
 
 }
diff --git a/src/places.js b/src/places.js
@@ -19,7 +19,8 @@ const hitFormatter = createHitFormatter({
 export default function places({
  countries,
  language = navigator.language.split('-')[0],
- container
+ container,
+ style
 }) {
  const placesInstance = new EventEmitter();
  const client = algoliasearch.initPlaces(
@@ -34,7 +35,7 @@ export default function places({
  autoselect: true,
  hint: true,
  cssClasses: {
- root: 'algolia-places',
+ root: 'algolia-places' + (style === false ? '' : ' algolia-places-styled'),
  prefix: 'ap'
  }
  };

diff --git a/src/places.scss b/src/places.scss
@@ -9,43 +9,15 @@
 
 // all em units are computed given a font of 16px
 // see http://pxtoem.com/ to change/add values
-.algolia-places {
+.algolia-places.algolia-places-styled {
  width: 100%;
 
- .ap-input,
- .ap-hint {
- box-sizing: border-box;
- width: 100%;
- padding-left: 16px;
- padding-right: 30px;
- line-height: 40px;
- height: 40px;
- // it's necessary to specify border for both inputs to get the exact same dimensions and
- // avoid font overlaps
- border: 1px solid #cccccc;
- border-radius: 3px;
- outline: none;
- }
-
  .ap-input:hover ~ .ap-input-icon svg,
  .ap-input:focus ~ .ap-input-icon svg,
  .ap-input-icon:hover svg {
  fill: #aaaaaa;
  }
 
- .ap-input {
- color: #555555;
-
- &:hover,
- &:focus {
- border-color: #999999;
- }
-
- @include placeholder {
- color: #cccccc;
- }
- }
-
  .ap-hint {
  color: #cccccc;
  background: #ffffff;