control-group: abstract helper for grouping different controls (close #…

…540)
bem · Jun 18, 2014 · 89d9fed · 89d9fed
1 parent deb284d
commit 89d9fed
Show file tree

Hide file tree

Showing 7 changed files with 136 additions and 21 deletions.
diff --git a/common.blocks/checkbox-group/checkbox-group.bemhtml b/common.blocks/checkbox-group/checkbox-group.bemhtml
@@ -3,6 +3,8 @@ block('checkbox-group')(
 
     js()(true),
 
+    mix()([{ block : 'control-group' }]),
+
     content()(function() {
         var mods = this.mods,
             ctx = this.ctx;

diff --git a/common.blocks/checkbox-group/checkbox-group.bh.js b/common.blocks/checkbox-group/checkbox-group.bh.js
@@ -3,12 +3,13 @@ module.exports = function(bh) {
     bh.match('checkbox-group', function(ctx, json) {
         ctx
             .tag('span')
-            .js(true);
+            .js(true)
+            .mix({ block : 'control-group' });
 
         var mods = ctx.mods();
         ctx.content((json.options || []).map(function(option, i) {
             return [
-                !!i && !ctx.mods().type && { tag : 'br' },
+                !!i && !mods.type && { tag : 'br' },
                 {
                     block : 'checkbox',
                     mods : {

diff --git a/common.blocks/control-group/control-group.tests/.bem/level.js b/common.blocks/control-group/control-group.tests/.bem/level.js
@@ -0,0 +1 @@
+exports.baseLevelPath = require.resolve('../../../../.bem/levels/tests');
diff --git a/common.blocks/control-group/control-group.tests/simple.bemjson.js b/common.blocks/control-group/control-group.tests/simple.bemjson.js
@@ -0,0 +1,103 @@
+({
+    block : 'page',
+    title : 'bem-components: control-group',
+    mods : { theme : 'normal' },
+    head : [
+        { elem : 'css', url : '_simple.css' },
+        { elem : 'js', url : '_simple.js' }
+    ],
+    content : [
+        { tag : 'h2', content : 'normal' },
+
+        { tag : 'h3', content : 'checkbox-group' },
+        { tag : 'p', content : {
+            block : 'checkbox-group',
+            name : 'normal-checkbox1',
+            mods : { theme : 'normal', size : 'm', type : 'button' },
+            options : [
+                { val : 1, text : 'first', checked : true },
+                { val : 2, text : 'second' },
+                { val : 3, text : 'third', disabled : true },
+                { val : 4, text : 'fourth', checked : true, disabled : true },
+                { val : 5, text : 'fifth' }
+            ]
+        } },
+
+        { tag : 'h3', content : 'radio-group' },
+        { tag : 'p', content : {
+            block : 'radio-group',
+            name : 'normal-button1',
+            mods : { theme : 'normal', size : 'm', type : 'button' },
+            options : [
+                { val : 1, text : 'first', checked : true },
+                { val : 2, text : 'second' },
+                { val : 3, text : 'third', disabled : true },
+                { val : 4, text : 'fourth', checked : true, disabled : true },
+                { val : 5, text : 'fifth' }
+            ]
+        } },
+
+        { tag : 'h3', content : 'search form' },
+        { tag : 'p', content : {
+            block : 'control-group',
+            content : [
+                {
+                    block : 'input',
+                    mods : { theme : 'normal', size : 'm', type : 'search' },
+                    val : 'Saint-Petersburg',
+                    placeholder : 'query'
+                },
+                {
+                    block : 'button',
+                    mods : { theme : 'normal', size : 'm' },
+                    text : 'search'
+                }
+            ]
+        } },
+
+        { tag : 'h3', content : 'multiple form' },
+        { tag : 'p', content : {
+            block : 'control-group',
+            content : [
+                {
+                    block : 'input',
+                    mods : { theme : 'normal', size : 'm' },
+                    placeholder : 'price from'
+                },
+                {
+                    block : 'input',
+                    mods : { theme : 'normal', size : 'm' },
+                    placeholder : 'to'
+                },
+                {
+                    block : 'dropdown',
+                    mods : { theme : 'normal', size : 'm' },
+                    switcher : {
+                        block : 'button',
+                        mods : { theme : 'normal', size : 'm' },
+                        content : [
+                            { elem : 'text', content : '$' },
+                            { block : 'icon', mods : { action : 'down' } }
+                        ]
+                    },
+                    popup : {
+                        // TODO: replace with `select` after #227
+                        block : 'menu',
+                        mods : { select : 'radio', theme : 'normal', size : 'm' },
+                        content : [
+                            {
+                                block : 'menu-item',
+                                mods : { checked : true },
+                                content : '$'
+                            },
+                            {
+                                block : 'menu-item',
+                                content : '€'
+                            }
+                        ]
+                    }
+                }
+            ]
+        } }
+    ]
+});
diff --git a/common.blocks/radio-group/radio-group.bemhtml b/common.blocks/radio-group/radio-group.bemhtml
@@ -3,6 +3,8 @@ block('radio-group')(
 
     js()(true),
 
+    mix()([{ block : 'control-group' }]),
+
     content()(function() {
         var mods = this.mods,
             ctx = this.ctx;

diff --git a/common.blocks/radio-group/radio-group.bh.js b/common.blocks/radio-group/radio-group.bh.js
@@ -3,7 +3,8 @@ module.exports = function(bh) {
     bh.match('radio-group', function(ctx, json) {
         ctx
             .tag('span')
-            .js(true);
+            .js(true)
+            .mix({ block : 'control-group' });
 
         var mods = ctx.mods();
         ctx.content((json.options || []).map(function(option, i) {

diff --git a/design/common.blocks/button/_theme/button_theme_normal.roo b/design/common.blocks/button/_theme/button_theme_normal.roo
@@ -1,4 +1,5 @@
-.button_theme_normal
+$ctx = '.button_theme_normal';
+$ctx
 {
     font-family: Arial, Helvetica, sans-serif;
 
@@ -281,9 +282,11 @@
     {
         margin-right: 0;
     }
+}
 
-    .checkbox-group &,
-    .radio-group &
+.control-group
+{
+    $ctx
     {
         border-radius: 0;
 
@@ -307,26 +310,28 @@
                 left: 0;
             }
         }
+    }
 
-        &:first-child
-        {
-            border-radius: 3px 0 0 3px;
+    > $ctx:first-child,
+    > :first-child $ctx
+    {
+        border-radius: 3px 0 0 3px;
 
-            &:before
-            {
-                border-radius: 2px 0 0 2px;
-            }
+        &:before
+        {
+            border-radius: 2px 0 0 2px;
         }
+    }
 
-        &:last-child
-        {
-            border-radius :0 3px 3px 0;
+    > $ctx:last-child,
+    > :last-child $ctx
+    {
+        border-radius: 0 3px 3px 0;
 
-            &:before
-            {
-                border-radius: 0 2px 2px 0;
-                right: 1px;
-            }
+        &:before
+        {
+            border-radius: 0 2px 2px 0;
+            right: 1px;
         }
     }
 }