Added Split Button capabilities

lib/assets/stylesheets/css3buttons/styles.css.erb

@@ -239,6 +239,11 @@ http://github.com/necolas/css3-github-buttons
 .button.user.icon:focus:before,
 .button.user.icon:active:before { background-position: -12px -360px; }
 
+.button.dropdown.icon:before { float:right; margin: 0 -0.25em 0 0.5em; background-position: 0 -373px; }
+.button.dropdown.icon:hover:before,
+.button.dropdown.icon:focus:before,
+.button.dropdown.icon:active:before { background-position: -12px -373px; }
+
 
 /* ------------------------------------------------------------------------------------------------------------- BUTTON EXTENSIONS */
 
@@ -352,7 +357,9 @@ http://github.com/necolas/css3-github-buttons
 .button + .button,
 .button + .button-group,
 .button-group + .button,
-.button-group + .button-group {
+.button-group + .button-group,
+.split-button-group + .button,
+.split-button-group + .button-group {
     margin-left: 15px;
 }
 
@@ -426,3 +433,125 @@ http://github.com/necolas/css3-github-buttons
 .button-container .button-group {
     vertical-align: top;
 }
+
+/* --------------------------------------------------------------------------------------------------------- SPLIT BUTTON GROUPS */
+
+.split-button-group {
+  display: inline-block;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  /* IE hacks */
+  zoom: 1; 
+  *display: inline; 
+}
+
+.split-button-group ul.split-menu-wrap { 
+  margin:0;
+}
+
+.split-button-group .button {
+  float: left;
+  margin-left: -1px; 
+}
+
+.split-button-group .split {
+  display: inline;
+  position:relative;
+}
+
+.split-button-group .split.main .button {
+  -webkit-border-top-right-radius:0;
+  -webkit-border-bottom-right-radius:0;
+  -moz-border-radius-topright:0;
+  -moz-border-radius-bottomright:0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.split-button-group .split.dropdown .button.dropdown.icon:before { margin: 0 0.25em 0; }
+
+.split-button-group .split.dropdown .button {
+  margin-left:-1px;
+  float:none;
+  padding:0.5em 0.3em 0.55em;
+
+  -webkit-border-top-left-radius:0;
+  -webkit-border-bottom-left-radius:0;
+  -moz-border-radius-topleft:0;
+  -moz-border-radius-bottomleft:0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.split-button-group .split.dropdown .button:hover {
+  border-bottom:1px solid #888;
+}
+
+.split-button-group li {
+  list-style:none;
+  padding: 0;
+  margin: 0;
+}
+
+.split-button-group li ul {
+  padding: 0;
+  margin-top:-5px;
+  min-width:78px;
+  max-width:120px;
+  width: 90px;
+  list-style: none;
+  position: absolute;
+  right: -99999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
+  display:none;
+}
+
+.split-button-group .split.dropdown .button:hover,
+.split-button-group .split-menu {
+  -moz-box-shadow: 0 0 5px #888;
+  -webkit-box-shadow: 0 0 5px #888;
+  -khtml-box-shadow:  0 0 5px #888;
+  box-shadow: 0 0 5px #888;
+}
+
+
+.split-button-group .split-menu .button.icon:before {
+  margin: 0 0.75em 0 0.25em; 
+}
+
+.split-button-group .split-menu .button {
+  display: block;
+  border-top: none;
+  padding-left:1.4em;
+  -webkit-border-radius: 0; 
+  -moz-border-radius: 0; 
+  border-radius: 0; 
+}
+
+.split-button-group li:hover ul{
+	right:0; /* Bring back on-screen when needed */
+	display:block;
+	z-index:500;
+}
+
+/* ............................................................................................................. Pill */
+
+.pill-group .split.main .button {
+  -webkit-border-top-left-radius:25em;
+  -webkit-border-bottom-left-radius:25em;
+  -moz-border-radius-topleft:25em;
+  -moz-border-radius-bottomleft:25em;
+  border-top-left-radius: 25em;
+  border-bottom-left-radius: 25em;
+}
+
+/* ------------------------------------------------------------------------------------------------------------- BUTTON CONTAINER */
+/* For mixing buttons and button groups, e.g., in a navigation bar */
+
+.button-container .split-button-group {
+    vertical-align: top;
+}
+
+.button-container .split-button-group li ul {
+  margin-top:0;
+}

lib/css3buttons.rb

@@ -5,7 +5,10 @@ module Css3buttons
   require 'css3buttons/engine'
   module Helpers
     autoload :ButtonHelper, 'css3buttons/helpers/button_helper'
+    autoload :SplitButtonHelper, 'css3buttons/helpers/split_button_helper'
   end
   autoload :ButtonGroup, 'css3buttons/button_group'
+  autoload :SplitButtonGroup, 'css3buttons/split_button_group'
   ActionController::Base.helper(Css3buttons::Helpers::ButtonHelper)
+  ActionController::Base.helper(Css3buttons::Helpers::SplitButtonHelper)
 end

lib/css3buttons/helpers/button_helper.rb

@@ -63,6 +63,19 @@ def minor_button_group(*args, &block)
         group = Css3buttons::ButtonGroup.new(self, options)
         group.render(&block) if block_given?
       end
+
+      def split_button_group(*args, &block)
+        options = args.extract_options!
+        group = Css3buttons::SplitButtonGroup.new(self, options)
+        group.render(&block) if block_given?
+      end
+
+      def pill_split_button_group(*args, &block)
+        options = args.extract_options!
+        options[:pill] = true
+        group = Css3buttons::SplitButtonGroup.new(self, options)
+        group.render(&block) if block_given?
+      end
 
       protected
       def add_classes_to_html_options(classes, html_options = {})

lib/css3buttons/helpers/split_button_helper.rb

@@ -0,0 +1,53 @@
+module Css3buttons
+  module Helpers
+    module SplitButtonHelper
+      include ActionView::Helpers::TagHelper
+      include ActionView::Helpers::UrlHelper
+
+      def render_split_button(content, options)
+        html_options = options.clone
+        html_options.delete(:wrapper_tag)
+        html_options.delete(:pill)
+        html_options[:class] ||= ''
+        html_options[:class] = (html_options[:class].split(" ") + ['split-button-group']).join(" ")
+        html_options[:class] = (html_options[:class].split(" ") + ['pill-group']).join(" ") if options[:pill]
+
+        # convert the string to an array of links
+        links = content.strip.gsub(/\r*?\n+\t*?\s+/, "::").split("::")
+
+        # pass the creation of the button off to the helpers
+        split_btn = create_split_button(links, options)
+
+        # return the final split button + wrapping element
+        content_tag(options[:wrapper_tag], split_btn.html_safe, html_options)
+      end
+
+      # extracts the first link from the array and 
+      # keeps it as the main action and creates the
+      # markup for the main action + dropdown button
+      def create_split_button(links, options)
+        main_action = links.shift 
+        dropdown    = create_dropdown(links, options)
+        content_tag(:ul, content_tag(:li, main_action.html_safe, :class => 'split main') + dropdown.html_safe, :class => 'split-menu-wrap')
+      end
+
+      # creates the drop down's button + menu
+      def create_dropdown(links, options)
+        menu = create_dropdown_menu(links)
+
+        dropdown_link_classes =  "dropdown icon button"
+        dropdown_link_classes += " pill" if options[:pill]
+        dropdown_link = link_to "", "javascript:void(0);", :class => dropdown_link_classes
+
+        content_tag(:li, dropdown_link.html_safe + menu.html_safe, :class => 'split dropdown')
+      end
+
+      # wrap the remaining links in an <li> tag
+      # and insert it into a <ul> element
+      def create_dropdown_menu(links)
+        list = links.map { |link| content_tag(:li, link.html_safe, :class => 'split-menu-item') }
+        content_tag(:ul, list.join("\n").html_safe, :class => 'split-menu')
+      end
+    end
+  end
+end

lib/css3buttons/split_button_group.rb

@@ -0,0 +1,21 @@
+module Css3buttons
+  class SplitButtonGroup
+    include Css3buttons::Helpers::SplitButtonHelper
+    attr_reader :template, :button_count, :options
+
+    def initialize(template, options)
+      @button_count = 0
+      @template = template
+      @options = options
+      @options[:wrapper_tag] ||= :div
+    end
+
+    def render(&block)
+      # parse the passed in block's content
+      content = @template.capture(&block)
+
+      render_split_button(content, @options) if block_given?
+    end
+  end
+end
+

lib/css3buttons/version.rb

@@ -1,3 +1,3 @@
 module Css3buttons
-  VERSION = "1.0.1"
+  VERSION = "1.0.2"
 end

readme.md

@@ -118,6 +118,25 @@ And, of course, minor groups:
     <% end %>
 
 
+## Split Buttons (Button groups)
+
+Split Buttons (no javascript!), similar to Button Groups, are extremely easy to create by using a `split_button_group`, like so:
+
+    <%= split_button_group do %>
+      <%= primary_add_button_link_to "New Post", @post %>
+      <%= button_link_to "Edit", edit_post_path(@post) %>
+      <%= negative_trash_button_link_to "Delete", @post, :confirm => "Are you sure? %>
+    <% end %>
+
+Pill Split Buttons are also easy to do:
+
+    <%= pill_split_button_group do %>
+      <%= primary_add_button_link_to "New Post", @post %>
+      <%= button_link_to "Edit", edit_post_path(@post) %>
+      <%= negative_trash_button_link_to "Delete", @post, :confirm => "Are you sure? %>
+    <% end %>
+
+
 ## Submit tags, button tags and using icons on form buttons
 
 Submit tags were ushered in with version 0.9.2. Everything works as it does above, except instead of `button_link_to` it's `button_submit_tag`. Example:

spec/button_helper_spec.rb

@@ -4,7 +4,7 @@
 
 describe Css3buttons::Helpers::ButtonHelper do
   before :each do
-    @icons = ["book","calendar","chat","check","clock","cog","comment","cross","downarrow","fork","heart","home","key","leftarrow","lock","loop","magnifier","mail","move","pen","pin","plus","reload","rightarrow","rss","tag","trash","unlock","uparrow","user"]
+    @icons = ["book","calendar","chat","check","clock","cog","comment","cross","downarrow","fork","heart","home","key","leftarrow","lock","loop","magnifier","mail","move","pen","pin","plus","reload","rightarrow","rss","tag","trash","unlock","uparrow","user","dropdown"]
     @qualifiers = ['pill', 'negative', 'positive', 'danger', 'safe']
     @label = "Search this site"
     @path = "/search/site"