Merge d0a385d into d628b9c

deprecate · Nov 29, 2017 · df3249b · df3249b
2 parents d628b9c + d0a385d
commit df3249b
Show file tree

Hide file tree

Showing 18 changed files with 235 additions and 131 deletions.
diff --git a/packages/clay-dropdown/demos/index.html b/packages/clay-dropdown/demos/index.html
@@ -360,28 +360,28 @@ <h4>Actions Dropdown with events in items</h4>
 		 **/
 		 new metal.ClayDropdown(
 			{
-				indicatorsPosition: 'left',
+				iconsPosition: 'left',
 				items: [
 					{
 						label: 'Item 1',
-						indicatorSymbol: 'check',
+						icon: 'check',
 						url: '#1',
 					},
 					{
 						active: true,
 						label: 'Item 2',
-						indicatorSymbol: 'check',
+						icon: 'check',
 						url: '#2',
 					},
 					{
 						disabled: true,
 						label: 'Item 3',
-						indicatorSymbol: 'check',
+						icon: 'check',
 						url: '#3',
 					},
 					{
 						label: 'Item 4',
-						indicatorSymbol: 'check',
+						icon: 'check',
 						url: '#4',
 					},
 				],
@@ -396,28 +396,28 @@ <h4>Actions Dropdown with events in items</h4>
 		 **/
 		 new metal.ClayDropdown(
 			{
-				indicatorsPosition: 'right',
+				iconsPosition: 'right',
 				items: [
 					{
 						label: 'Item 1',
-						indicatorSymbol: 'check',
+						icon: 'check',
 						url: '#1',
 					},
 					{
 						active: true,
 						label: 'Item 2',
-						indicatorSymbol: 'check',
+						icon: 'check',
 						url: '#2',
 					},
 					{
 						disabled: true,
 						label: 'Item 3',
-						indicatorSymbol: 'check',
+						icon: 'check',
 						url: '#3',
 					},
 					{
 						label: 'Item 4',
-						indicatorSymbol: 'check',
+						icon: 'check',
 						url: '#4',
 					},
 				],

diff --git a/packages/clay-dropdown/src/ClayActionsDropdown.js b/packages/clay-dropdown/src/ClayActionsDropdown.js
@@ -11,7 +11,16 @@ import templates from './ClayActionsDropdown.soy.js';
 /**
  * Implementation for Metal Clay Action Dropdown.
  */
-class ClayActionsDropdown extends Component {}
+class ClayActionsDropdown extends Component {
+	/**
+	 * Handles footer button click.
+	 * @param {!Event} event
+	 * @protected
+	 */
+	handleButtonClick_(event) {
+		this.emit('buttonClicked', event);
+	}
+}
 
 /**
  * State definition.
@@ -27,7 +36,6 @@ ClayActionsDropdown.STATE = {
 	 * @default undefined
 	 */
 	button: Config.shapeOf({
-		events: Config.object(),
 		label: Config.string().required(),
 		style: Config.oneOf(['primary', 'secondary']).value('primary'),
 		type: Config.oneOf(['button', 'reset', 'submit']),
@@ -69,6 +77,15 @@ ClayActionsDropdown.STATE = {
 	 */
 	helpText: Config.string(),
 
+	/**
+	 * Position in which item icon will be placed. Needed if any item has icons.
+	 * @instance
+	 * @memberof ClayDropdown
+	 * @type {?string|undefined}
+	 * @default undefined
+	 */
+	iconsPosition: Config.oneOf(['left', 'right']),
+
 	/**
 	 * Id to be applied to the element.
 	 * @instance

diff --git a/packages/clay-dropdown/src/ClayActionsDropdown.soy b/packages/clay-dropdown/src/ClayActionsDropdown.soy
@@ -10,7 +10,9 @@
 	{@param? caption: string}
 	{@param? elementClasses: string}
 	{@param? expanded: bool}
+	{@param? handleButtonClick_: any}
 	{@param? helpText: string}
+	{@param? iconsPosition: string}
 	{@param? id: string}
 
   {let $dropdownElementClasses kind="text"}
@@ -32,7 +34,9 @@
     {param caption: $caption /}
     {param elementClasses: $dropdownElementClasses /}
     {param expanded: $expanded /}
+    {param events: ['buttonClicked': $handleButtonClick_] /}
     {param helpText: $helpText /}
+    {param iconsPosition: $iconsPosition /}
     {param id: $id /}
     {param items: $items /}
     {param ref: 'dropdown' /}

diff --git a/packages/clay-dropdown/src/ClayDropdown.js b/packages/clay-dropdown/src/ClayDropdown.js
@@ -11,7 +11,16 @@ import templates from './ClayDropdown.soy.js';
 /**
  * Implementation for Metal Clay Dropdown.
  */
-class ClayDropdown extends Component {}
+class ClayDropdown extends Component {
+	/**
+	 * Handles footer button click.
+	 * @param {!Event} event
+	 * @protected
+	 */
+	handleButtonClick_(event) {
+		this.emit('buttonClicked', event);
+	}
+}
 
 /**
  * State definition.
@@ -27,7 +36,6 @@ ClayDropdown.STATE = {
 	 * @default undefined
 	 */
 	button: Config.shapeOf({
-		events: Config.object(),
 		label: Config.string().required(),
 		style: Config.oneOf(['primary', 'secondary']),
 		type: Config.oneOf(['button', 'reset', 'submit']),
@@ -70,14 +78,13 @@ ClayDropdown.STATE = {
 	icon: Config.string(),
 
 	/**
-	 * Position in which item indicator symbols will be placed. Needed if any
-	 * item has indicators.
+	 * Position in which item icon will be placed. Needed if any item has icons.
 	 * @instance
 	 * @memberof ClayDropdown
 	 * @type {?string|undefined}
 	 * @default undefined
 	 */
-	indicatorsPosition: Config.oneOf(['left', 'right']),
+	iconsPosition: Config.oneOf(['left', 'right']),
 
 	/**
 	 * List of menu items.

diff --git a/packages/clay-dropdown/src/ClayDropdown.soy b/packages/clay-dropdown/src/ClayDropdown.soy
@@ -9,9 +9,10 @@
 	{@param? button: ?}
 	{@param? elementClasses: string}
 	{@param? expanded: bool}
+	{@param? handleButtonClick_: any}
 	{@param? icon: string}
 	{@param? id: string}
-	{@param? indicatorsPosition: string}
+	{@param? iconsPosition: string}
 	{@param? label: html|string}
 	{@param? searchable: bool}
 	{@param? style: string}
@@ -42,8 +43,9 @@
     {param button: $button /}
     {param elementClasses: $elementClasses /}
     {param expanded: $expanded /}
+    {param events: ['buttonClicked': $handleButtonClick_] /}
     {param id: $id /}
-    {param indicatorsPosition: $indicatorsPosition /}
+    {param iconsPosition: $iconsPosition /}
     {param items: $items /}
     {param label: $trigger /}
     {param ref: 'dropdown' /}

diff --git a/packages/clay-dropdown/src/ClayDropdownBase.js b/packages/clay-dropdown/src/ClayDropdownBase.js
@@ -51,6 +51,15 @@ class ClayDropdownBase extends Component {
 		this.close_();
 	}
 
+	/**
+	 * Handles footer button click.
+	 * @param {!Event} event
+	 * @protected
+	 */
+	handleButtonClick_(event) {
+		this.emit('buttonClicked', event);
+	}
+
 	/**
 	 * Handles Search in Dropdown.
 	 * @param {!Event} event
@@ -153,7 +162,6 @@ ClayDropdownBase.STATE = {
 	 * @default undefined
 	 */
 	button: Config.shapeOf({
-		events: Config.object(),
 		label: Config.string().required(),
 		style: Config.oneOf(['primary', 'secondary']).value('primary'),
 		type: Config.oneOf(['button', 'reset', 'submit']).value('button'),
@@ -196,23 +204,22 @@ ClayDropdownBase.STATE = {
 	helpText: Config.string(),
 
 	/**
-	 * Id to be applied to the element.
+	 * Position in which item icons will be placed. Needed if any item has icons.
 	 * @instance
 	 * @memberof ClayDropdownBase
 	 * @type {?string|undefined}
 	 * @default undefined
 	 */
-	id: Config.string(),
+	iconsPosition: Config.oneOf(['left', 'right']),
 
 	/**
-	 * Position in which item indicator symbols will be placed. Needed if any
-	 * item has indicators.
+	 * Id to be applied to the element.
 	 * @instance
 	 * @memberof ClayDropdownBase
 	 * @type {?string|undefined}
 	 * @default undefined
 	 */
-	indicatorsPosition: Config.oneOf(['left', 'right']),
+	id: Config.string(),
 
 	/**
 	 * List of menu items.