Merge pull request #1455 from /issues/1454@v2

Button: `view_plain` modifier described
bem · Apr 23, 2015 · 1e3d816 · 1e3d816
2 parents 2e0ec2f + d509a1b
commit 1e3d816
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 4 deletions.
diff --git a/common.blocks/button/button.en.md b/common.blocks/button/button.en.md
@@ -16,7 +16,7 @@ Use this block for creating different types of buttons.
 | <a href="#hovered">hovered</a> | <code>true</code> | – | The hovered state. |
 | <a href="#buttonthemes">theme</a> | <code>'islands'</code> | <code>BEMJSON</code> | A custom design. |
 | <a href="#buttonsize">size</a> | <code>'s'</code>, <code>'m'</code>, <code>'l'</code>, <code>'xl'</code> | <code>BEMJSON</code> | The size of the button. Use sizes only for buttons with the <a href="#buttonthemes">theme modifier set to islands</a>.|
-| <a href="#buttonview">view</a> | <code>'action'</code>, <code>'pseudo'</code> | <code>BEMJSON</code> | Visual highlighting.|
+| <a href="#buttonview">view</a> | <code>'action'</code>, <code>'pseudo'</code>, <code>'plain'</code> | <code>BEMJSON</code> | Visual highlighting.|
 
 ### Custom fields of the block
 
@@ -257,7 +257,7 @@ Sets the size value for all types of buttons.
 
 #### `view` modifier
 
-Acceptable values: `'action'`, `'pseudo'`.
+Acceptable values: `'action'`, `'pseudo'`, `'plain'`.
 
 Use case: `BEMJSON`.
 
@@ -293,6 +293,29 @@ The modifier changes visual representation of the button. For example, use it if
 }
 ```
 
+##### Borderless button (`view` modifier with `plain` value)
+
+Use this modifier to create a button based on the other block. For example, iconed-button ([icon](../icon/icon.en.md)).
+
+```js
+{
+    block : 'button',
+    mods : { theme : 'islands', size : 'm', view : 'plain' },
+    text : 'Borderless button'
+}
+```
+
+```js
+{
+    block : 'button',
+    mods : { theme : 'islands', size : 'm', view : 'plain' },
+    icon : {
+        block : 'icon',
+        mods : { social : 'twitter' }
+    }
+}
+```
+
 ### Custom fields of the block
 
 <a name="buttonname"></a>

diff --git a/common.blocks/button/button.ru.md b/common.blocks/button/button.ru.md
@@ -16,7 +16,7 @@
 | <a href="#hovered">hovered</a> | <code>true</code> | – | Наведение курсором. |
 | <a href='#buttonthemes'>theme</a> | <code>'islands'</code> | <code>BEMJSON</code> | Стилевое оформление. |
 | <a href="#buttonsize">size</a> | <code>'s'</code>, <code>'m'</code>, <code>'l'</code>, <code>'xl'</code> | <code>BEMJSON</code> | Размер кнопки. Используется для кнопок с <a href="#buttonthemes">модификатором theme в значении islands</a>.|
-| <a href="#buttonview">view</a> | <code>'action'</code>, <code>'pseudo'</code> | <code>BEMJSON</code> | Тип визуального выделения кнопки.|
+| <a href="#buttonview">view</a> | <code>'action'</code>, <code>'pseudo'</code>, <code>'plain'</code> | <code>BEMJSON</code> | Тип визуального выделения кнопки.|
 
 ### Специализированные поля блока
 
@@ -257,7 +257,7 @@
 
 #### Модификатор `view`
 
-Допустимые значения: `'action'`, `'pseudo'`.
+Допустимые значения: `'action'`, `'pseudo'`, `'plain'`.
 
 Способ использования: `BEMJSON`.
 
@@ -293,6 +293,28 @@
 }
 ```
 
+##### Кнопка без границ (модификатор `view` в значении `plain`)
+
+Используется при необходимости представить кнопкой другой блок, например, иконку ([icon](../icon/icon.ru.md)).
+
+```js
+{
+    block : 'button',
+    mods : { theme : 'islands', size : 'm', view : 'plain' },
+    text : 'Кнопка без границ'
+}
+```
+
+```js
+{
+    block : 'button',
+    mods : { theme : 'islands', size : 'm', view : 'plain' },
+    icon : {
+        block : 'icon',
+        mods : { social : 'twitter' }
+    }
+}
+```
 
 ### Специализированные поля блока