Merge pull request #2703 from naturalcrit/Mark-snippets-as-experimental

Add "beta" badge on snippets marked "experimetal"

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -171,7 +171,8 @@ const SnippetGroup = createClass({
 		return _.map(snippets, (snippet)=>{
 			return <div className='snippet' key={snippet.name} onClick={(e)=>this.handleSnippetClick(e, snippet)}>
 				<i className={snippet.icon} />
-				{snippet.name}
+				<span className='name'>{snippet.name}</span>
+				{snippet.experimental && <span className='beta'>beta</span>}
 				{snippet.subsnippets && <>
 					<i className='fas fa-caret-right'></i>
 					<div className='dropdown side'>

client/homebrew/editor/snippetbar/snippetbar.less

@@ -97,19 +97,34 @@
 			background-color : #ddd;
 			.snippet{
 				.animate(background-color);
-				min-width : max-content;
-				padding   : 5px;
-				cursor    : pointer;
-				font-size : 10px;
+				display     : flex;
+				align-items : center;
+				min-width   : max-content;
+				padding     : 5px;
+				cursor      : pointer;
+				font-size   : 10px;
 				i{
 					margin-right : 8px;
 					font-size    : 1.2em;
 					height       : 1.2em;
 					&~i{
 						margin-right: 0;
-						margin-left: 8px;
+						margin-left: 5px;
 					}
 				}
+				.name {
+					margin-right  : auto;
+				}
+				.beta {
+					color         : white;
+					padding       : 4px 6px;
+					line-height   : 1em;
+					margin-left   : 5px;
+					align-self    : center;
+					background    : grey;
+					border-radius : 12px;
+					font-family   : monospace;
+				}
 				&:hover{
 					background-color : #999;
 					&>.dropdown{

themes/V3/5ePHB/snippets.js

@@ -169,9 +169,10 @@ module.exports = [
 				gen  : MonsterBlockGen.monster('monster,frame,wide', 4),
 			},
 			{
-				name : 'Cover Page',
-				icon : 'fac fa-file-c',
-				gen  : CoverPageGen,
+				name         : 'Cover Page',
+				icon         : 'fac fa-file-c',
+				gen          : CoverPageGen,
+				experimental : true
 			},
 			{
 				name : 'Magic Item',

themes/V3/Blank/snippets.js

@@ -102,10 +102,11 @@ module.exports = [
 				gen  : WatercolorGen,
 			},
 			{
-				name        : 'Watercolor Image Mask Edge',
-				icon        : 'fac mask-edge',
-				gen         : ImageMaskGen.edge('bottom'),
-				subsnippets : [
+				name         : 'Watercolor Image Mask Edge',
+				icon         : 'fac mask-edge',
+				gen          : ImageMaskGen.edge('bottom'),
+				experimental : true,
+				subsnippets  : [
 					{
 						name : 'Top',
 						icon : 'fac position-top',
@@ -129,10 +130,11 @@ module.exports = [
 				]
 			},
 			{
-				name        : 'Watercolor Image Mask Corner',
-				icon        : 'fac mask-corner',
-				gen         : ImageMaskGen.corner,
-				subsnippets : [
+				name         : 'Watercolor Image Mask Corner',
+				icon         : 'fac mask-corner',
+				gen          : ImageMaskGen.corner,
+				experimental : true,
+				subsnippets  : [
 					{
 						name : 'Top-Left',
 						icon : 'fac position-top-left',