Merge pull request #207 from paulcpederson/master

input groups, action bar, bump to 0.7.0
Esri · Jun 9, 2015 · 9ec315a · 9ec315a
2 parents d6d8b53 + 81b0321
commit 9ec315a
Show file tree

Hide file tree

Showing 11 changed files with 85 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,12 @@
+## 0.7.0
+
+- General documentation improvements/updates
+
+### Added
+
+- `input-group` component
+- `action-bar` component
+
 ## 0.6.1
 
 ### Added

diff --git a/docs/source/components/_action-bar.md b/docs/source/components/_action-bar.md
@@ -0,0 +1 @@
+Action bars are used to display multiple actions horizontally. Actions are meant to be used with buttons. They are clearfixed and floated right by default.
diff --git a/docs/source/components/_input-groups.md b/docs/source/components/_input-groups.md
@@ -0,0 +1 @@
+It is very common to have an input and a button attached to one another. The `input-group` component allows you to accomplish this with three classes.
diff --git a/docs/source/components/sample-code/_action-bar.html b/docs/source/components/sample-code/_action-bar.html
@@ -0,0 +1,4 @@
+<div class="action-bar {{modifier}}">
+  <button type="button" class="btn action-bar-btn">Submit</button>
+  <button type="button" class="btn btn-transparent action-bar-btn">Cancel</button>
+</div>
diff --git a/docs/source/components/sample-code/_input-groups.html b/docs/source/components/sample-code/_input-groups.html
@@ -0,0 +1,6 @@
+<div class="input-group">
+  <input class="input-group-input" type="text" placeholder="Username">
+  <span class="input-group-button">
+    <button class="btn">Yay</button>
+  </span>
+</div>
diff --git a/docs/source/table_of_contents.yml b/docs/source/table_of_contents.yml
@@ -435,6 +435,15 @@ components:
             - 'input-error'
             - 'input-warning'
             - 'input-success'
+        - title: 'Input Groups'
+          id: 'bce1cce3-ec43-4a8d-b14d-0dbeb4893259'
+          link: input-groups
+          modifiers: true
+        - title: 'Action Bar'
+          id: 'b25ed3c9-10a1-4998-9f3e-296c00c9d976'
+          link: action-bar
+          modifiers:
+            - action-bar-left
         - title: 'Selects'
           id: '7326581a-f2f5-42be-9a46-d79faec27253'
           link: selects

diff --git a/lib/js/calcite-web.js b/lib/js/calcite-web.js
@@ -5,7 +5,7 @@
   // └────────────┘
   // define all public api methods (excluding patterns)
   var calcite = {
-    version: 'v0.6.0',
+    version: 'v0.7.0',
     click: click,
     addEvent: addEvent,
     removeEvent: removeEvent,

diff --git a/lib/sass/calcite-web.scss b/lib/sass/calcite-web.scss
@@ -40,6 +40,8 @@ $include-dropdowns:                   $generate-css    !default;
 $include-breadcrumbs:                 $generate-css    !default;
 $include-tooltip:                     $generate-css    !default;
 $include-forms:                       $generate-css    !default;
+$include-input-groups:                $generate-css    !default;
+$include-action-bar:                  $generate-css    !default;
 $include-loader:                      $generate-css    !default;
 $include-search-bar:                  $generate-css    !default;
 $include-logo:                        $generate-css    !default;
@@ -107,6 +109,8 @@ $include-sticky:                      $generate-css    !default;
 @import "calcite-web/components/panel";
 @import "calcite-web/components/table";
 @import "calcite-web/components/form";
+@import "calcite-web/components/input-group";
+@import "calcite-web/components/action-bar";
 @import "calcite-web/components/loader";
 @import "calcite-web/components/search-bar";
 

diff --git a/lib/sass/calcite-web/components/_action-bar.scss b/lib/sass/calcite-web/components/_action-bar.scss
@@ -0,0 +1,23 @@
+@mixin action-bar() {
+  @include clearfix();
+}
+
+@mixin action-bar-btn() {
+  float: right;
+  margin-left: $baseline * .5;
+}
+
+@mixin action-bar-left() {
+  @include clearfix();
+  .action-bar-btn {
+    float: left;
+    margin-left: 0;
+    margin-right: $baseline * .5;
+  }
+}
+
+@if $include-action-bar == true {
+  .action-bar {@include action-bar();}
+    .action-bar-btn {@include action-bar-btn();}
+    .action-bar-left {@include action-bar-left();}
+}
diff --git a/lib/sass/calcite-web/components/_input-group.scss b/lib/sass/calcite-web/components/_input-group.scss
@@ -0,0 +1,26 @@
+@mixin input-group() {
+  display: table;
+  margin-top: $baseline*.25;
+}
+
+@mixin input-group-input() {
+  display: table-cell;
+  position: relative;
+  margin-top: 0;
+  width: 100%;
+}
+
+@mixin input-group-button() {
+  width: 1%;
+  vertical-align: middle;
+  display: table-cell;
+  .btn {
+    margin-left: -1px;
+  }
+}
+
+@if $include-input-groups == true {
+  .input-group {@include input-group();}
+    .input-group-input {@include input-group-input();}
+    .input-group-button {@include input-group-button();}
+}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "calcite-web",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "SASS & CSS Framework for Esri websites",
   "private": true,
   "homepage": "https://github.com/esri/calcite-web",
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Action bars are used to display multiple actions horizontally. Actions are meant to be used with buttons. They are clearfixed and floated right by default.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		It is very common to have an input and a button attached to one another. The `input-group` component allows you to accomplish this with three classes.