Merge 4e2fd94 into 0986dea

common.blocks/menu-item/__icon/menu-item__icon.bemhtml

@@ -0,0 +1 @@
+block('menu-item').elem('icon').tag()('i')

common.blocks/menu-item/__icon/menu-item__icon.bh.js

@@ -0,0 +1,5 @@
+module.exports = function(bh) {
+    bh.match('menu-item__icon', function(ctx) {
+        ctx.tag('i');
+    });
+};

common.blocks/menu-item/__text/menu-item__text.bemhtml

@@ -0,0 +1 @@
+block('menu-item').elem('text').tag()('span')

common.blocks/menu-item/__text/menu-item__text.bh.js

@@ -0,0 +1,5 @@
+module.exports = function(bh) {
+    bh.match('menu-item__text', function(ctx) {
+        ctx.tag('span');
+    });
+};

common.blocks/menu-item/menu-item.bemhtml

@@ -1,3 +1,6 @@
-block('menu-item').js()(function() {
-    return { val : this.ctx.val }
-})
+block('menu-item')(
+    js()(function() {
+        return { val : this.ctx.val }
+    }),
+    attrs()({ role : 'menuitem' })
+)

common.blocks/menu-item/menu-item.bh.js

@@ -0,0 +1,7 @@
+module.exports = function(bh) {
+    bh.match('menu-item', function(ctx, json) {
+        ctx
+            .js({ val : json.val })
+            .attr('role', 'menuitem');
+    });
+};

common.blocks/menu/__group-title/menu__group-title.bemhtml

@@ -0,0 +1 @@
+block('menu').elem('group-title').attrs()({ role : 'presentation' })

common.blocks/menu/__group-title/menu__group-title.bh.js

@@ -0,0 +1,5 @@
+module.exports = function(bh) {
+    bh.match('menu__group-title', function(ctx) {
+        ctx.attr('role', 'presentation');
+    });
+};

common.blocks/menu/__group/_has-title/menu__group_has-title.bemhtml

@@ -1,6 +1,11 @@
-block('menu').elem('group').elemMod('has-title', true).content()(function() {
-    return [
-        { elem : 'group-title', content : this.ctx.title },
-        applyNext()
-    ]
-})
+block('menu').elem('group').elemMod('has-title', true)(
+    attrs()(function() {
+        return this.extend(applyNext(), { 'aria-label' : this.ctx.title });
+    }),
+    content()(function() {
+        return [
+            { elem : 'group-title', content : this.ctx.title },
+            applyNext()
+        ];
+    })
+)

common.blocks/menu/__group/_has-title/menu__group_has-title.bh.js

@@ -0,0 +1,10 @@
+module.exports = function(bh) {
+    bh.match('menu__group_has-title', function(ctx, json) {
+        ctx
+            .attr('aria-label', json.title)
+            .content([
+                { elem : 'group-title', content : json.title },
+                ctx.content()
+            ], true);
+    });
+};

common.blocks/menu/__group/menu__group.bemhtml

@@ -0,0 +1 @@
+block('menu').elem('group').attrs()({ role : 'group' })

common.blocks/menu/__group/menu__group.bh.js

@@ -0,0 +1,5 @@
+module.exports = function(bh) {
+    bh.match('menu__group', function(ctx) {
+        ctx.attr('role', 'group');
+    });
+};

common.blocks/menu/menu.bemhtml

@@ -1,4 +1,4 @@
 block('menu')(
-    attrs()({ tabindex : 0 }),
+    attrs()({ tabindex : 0, role : 'menu' }),
     js()(true)
 )

common.blocks/menu/menu.bh.js

@@ -0,0 +1,7 @@
+module.exports = function(bh) {
+    bh.match('menu', function(ctx) {
+        ctx
+            .attrs({ tabindex : 0, role : 'menu' })
+            .js(true);
+    });
+};

common.blocks/menu/menu.tests/simple.bemjson.js

@@ -155,7 +155,7 @@
                     content : {
                         block : 'link',
                         url : '//bing.ru',
-                        content : 'Bind'
+                        content : 'Bing'
                     }
                 }
             ]

design/common.blocks/checkbox/_theme/checkbox_theme_normal.roo

@@ -52,7 +52,7 @@
 
             content: '';
 
-            background-image: url(_normal/tip.svg);
+            background-image: url(../../theme/_normal/tip.svg);
             background-size: 100%;
 
             opacity: 0;

design/common.blocks/menu-item/menu-item.roo

@@ -0,0 +1,122 @@
+$menuItemPaddingHor = [10, 13, 15, 20];
+$menuItemPaddingLeft = [30, 30, 34, 40];
+$menuGroupIndent = [3, 4, 5, 6];
+$tipSize = [14, 14, 15, 15];
+$tipPosTop = [4, 4, 7, 12];
+$tipPosLeft = [10, 12, 15, 19];
+
+.menu_theme_normal
+{
+    .menu-item
+    {
+        position: relative;
+
+        overflow: hidden;
+
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
+        &_hovered
+        {
+            cursor: pointer;
+
+            background: #ffeba0;
+        }
+
+        &_disabled
+        {
+            opacity: 0.3;
+
+            .link
+            {
+                cursor: default;
+            }
+        }
+
+        &_type_link
+        {
+            .link
+            {
+                text-decoration: none;
+
+                color: inherit;
+                outline: none;
+            }
+        }
+
+        &__text,
+        &__icon
+        {
+            position: relative;
+
+            display: inline-block;
+        }
+
+        &__icon
+        {
+            width: 16px;
+            margin-right: 5px;
+
+            background-repeat: no-repeat;
+            background-position: 0 50%;
+
+            /* Hack for the correct positioning baseline */
+            &::after
+            {
+                visibility: hidden;
+
+                content: '\00A0';
+            }
+        }
+    }
+
+    &[class*='menu_select']
+    {
+        .menu-item
+        {
+            &_checked::before
+            {
+                position: absolute;
+
+                content: '';
+
+                background: 0 50% no-repeat url(../theme/_normal/tip.svg);
+                background-size: 100%;
+            }
+        }
+    }
+
+    @for $sizeVal, $i in s m l xl
+    {
+        &.menu_size_$sizeVal
+        {
+            &[class*='menu_select'] .menu-item,
+            .menu__group_has-title .menu-item
+            {
+                padding-left: $menuItemPaddingLeft[$i]px;
+            }
+
+            .menu-item
+            {
+                padding: 0 $menuItemPaddingHor[$i]px;
+            }
+
+            .menu__group + .menu-item
+            {
+                margin-top: $menuGroupIndent[$i]px;
+            }
+        }
+
+        &[class*='menu_select'].menu_size_$sizeVal
+        {
+            .menu-item::before
+            {
+                top: $tipPosTop[$i]px;
+                left: $tipPosLeft[$i]px;
+
+                width: $tipSize[$i]px;
+                height: $tipSize[$i]px;
+            }
+        }
+    }
+}

design/common.blocks/menu/_theme/menu_theme_normal.roo

@@ -0,0 +1,72 @@
+$menuFontSize = [13, 13, 15, 15];
+$menuLineHeight = [24, 24, 28, 38];
+$menuPaddingVert = [3, 4, 5, 6];
+$menuItemPaddingHor = [10, 13, 15, 20];
+$menuGroupIndent = [3, 4, 5, 6];
+
+.menu_theme_normal
+{
+    margin: 0;
+
+    user-select: none;
+
+    outline: 0;
+    background: #fff;
+
+    @for $sizeVal, $i in s m l xl
+    {
+        &.menu_size_$sizeVal
+        {
+            font-size: $menuFontSize[$i]px;
+            line-height: $menuLineHeight[$i]px;
+
+            padding: $menuPaddingVert[$i]px 0;
+
+            .menu-item + .menu__group
+            {
+                margin-top: $menuGroupIndent[$i]px;
+            }
+
+            .menu__group
+            {
+                padding: $menuGroupIndent[$i]px 0;
+
+                &-title
+                {
+                    padding: 0 $menuItemPaddingHor[$i]px;
+                }
+            }
+        }
+    }
+
+    .menu__group
+    {
+        border-width: 1px 0;
+        border-style: solid;
+        border-color: rgba(0, 0, 0, 0.1);
+
+        &-title
+        {
+            color: #999;
+        }
+
+        & + .menu__group
+        {
+            border-top: 0;
+        }
+
+        &:last-child
+        {
+            padding-bottom: 0;
+
+            border-bottom: 0;
+        }
+
+        &:first-child
+        {
+            padding-top: 0;
+
+            border-top: 0;
+        }
+    }
+}