Merge pull request #1188 from carloslancha/pr-1186

Fixes #1105 - Update styles and markup for results bar
liferay · Sep 21, 2018 · 36ed0b2 · 36ed0b2
2 parents a25a531 + aa892e7
commit 36ed0b2
Show file tree

Hide file tree

Showing 39 changed files with 1,730 additions and 407 deletions.
diff --git a/packages/clay-button/demos/a11y.html b/packages/clay-button/demos/a11y.html
@@ -112,6 +112,14 @@ <h2>Button monospaced</h2>
 			'#states-block'
 		);
 
+		new metal.ClayButton(
+			{
+				style: false,
+				label: 'No Style Button'
+			},
+			'#states-block'
+		);
+
 		/*
 		 * Disabed button.
 		 */

diff --git a/packages/clay-button/demos/index.html b/packages/clay-button/demos/index.html
@@ -112,6 +112,14 @@ <h2>Button monospaced</h2>
 			'#states-block'
 		);
 
+		new metal.ClayButton(
+			{
+				style: false,
+				label: 'No Style Button'
+			},
+			'#states-block'
+		);
+
 		/*
 		 * Disabed button.
 		 */

diff --git a/packages/clay-button/src/ClayButton.js b/packages/clay-button/src/ClayButton.js
@@ -142,11 +142,12 @@ ClayButton.STATE = {
 	 * @default primary
 	 * @instance
 	 * @memberof ClayButton
-	 * @type {?(string|undefined)}
+	 * @type {?(bool|string|undefined)}
 	 */
-	style: Config.oneOf(['link', 'primary', 'secondary', 'unstyled']).value(
-		'primary'
-	),
+	style: Config.oneOfType([
+		Config.bool(),
+		Config.oneOf(['link', 'primary', 'secondary', 'unstyled']),
+	]).value('primary'),
 
 	/**
 	 * The title attribute of the element.

diff --git a/packages/clay-button/src/ClayButton.soy b/packages/clay-button/src/ClayButton.soy
@@ -16,7 +16,7 @@
 	{@param? name: string}
 	{@param? size: string}
 	{@param? spritemap: string}
-	{@param? style: string}
+	{@param? style: bool|string}
 	{@param? title: string}
 	{@param? type: string}
 	{@param? value: string}
@@ -39,9 +39,9 @@
 				{sp}btn-{$size}
 			{/if}
 
-			{if $style}
+			{if isNonnull($style) and $style != true and $style != false}
 				{sp}btn-{$style}
-			{else}
+			{elseif not isNonnull($style) or $style == true}
 				{sp}btn-primary
 			{/if}
 		"

diff --git a/packages/clay-button/src/__tests__/ClayButton.js b/packages/clay-button/src/__tests__/ClayButton.js
@@ -63,6 +63,14 @@ describe('ClayButton', function() {
 		expect(button).toMatchSnapshot();
 	});
 
+	it('should render a button with no style', function() {
+		button = new ClayButton({
+			style: false,
+		});
+
+		expect(button).toMatchSnapshot();
+	});
+
 	it('should render a button with label', function() {
 		button = new ClayButton({
 			label: 'Label',

diff --git a/packages/clay-button/src/__tests__/__snapshots__/ClayButton.js.snap b/packages/clay-button/src/__tests__/__snapshots__/ClayButton.js.snap
@@ -61,6 +61,8 @@ exports[`ClayButton should render a button with label and icon on right side 1`]
 
 exports[`ClayButton should render a button with name 1`] = `<button class="btn btn-primary" name="myButton" type="button"></button>`;
 
+exports[`ClayButton should render a button with no style 1`] = `<button class="btn" type="button"></button>`;
+
 exports[`ClayButton should render a disabled button 1`] = `<button class="btn btn-primary" disabled="disabled" type="button"></button>`;
 
 exports[`ClayButton should render a reset button 1`] = `<button class="btn btn-primary" type="reset"></button>`;