Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes #1467 - Send useful filter label item data through components to Management Toolbar #1470

Merged
merged 10 commits into from
Jan 24, 2019
Merged
Show file tree
Hide file tree
Changes from 8 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -1 +1 @@
<li class="tbar-item"><div class="tbar-section"><span class="label label-dismissible component-label tbar-label"><span class="label-item label-item-expand"><div class="label-section">Category: Label 3</div></span><span class="label-item label-item-after"><button class="btn close"aria-label="close"type="button"><svg class="lexicon-icon lexicon-icon-times"focusable="false"role="presentation"><use xlink:href="icons.svg#times" /></svg></button></span></span></div></li>
<div class="null"><span class="label label-dismissible component-label tbar-label"><span class="label-item label-item-expand"><div class="label-section">Category: Label 3</div></span><span class="label-item label-item-after"><button class="btn close"aria-label="close"type="button"><svg class="lexicon-icon lexicon-icon-times"focusable="false"role="presentation"><use xlink:href="icons.svg#times" /></svg></button></span></span></div>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This snapshot seems weird :D

Original file line number Diff line number Diff line change
@@ -1 +1 @@
<li class="tbar-item"><div class="tbar-section"><span class="label label-dismissible component-label tbar-label"><span class="label-item label-item-expand"><div class="label-section">Label 1</div></span><span class="label-item label-item-after"><button class="btn close"aria-label="close"type="button"><svg class="lexicon-icon lexicon-icon-times"focusable="false"role="presentation"><use xlink:href="spritemap.svg#times" /></svg></button></span></span></div></li><li class="tbar-item tbar-item-expand"><div class="tbar-section"><span class="label label-dismissible component-label tbar-label"><span class="label-item label-item-expand"><div class="label-section">Label 2</div></span><span class="label-item label-item-after"><button class="btn close"aria-label="close"type="button"><svg class="lexicon-icon lexicon-icon-times"focusable="false"role="presentation"><use xlink:href="spritemap.svg#times" /></svg></button></span></span></div></li>
<li class="tbar-item"><div class="tbar-section"><div class="null"><span class="label label-dismissible component-label tbar-label"><span class="label-item label-item-expand"><div class="label-section">Label 1</div></span><span class="label-item label-item-after"><button class="btn close"aria-label="close"type="button"><svg class="lexicon-icon lexicon-icon-times"focusable="false"role="presentation"><use xlink:href="spritemap.svg#times" /></svg></button></span></span></div></div></li><li class="tbar-item tbar-item-expand"><div class="tbar-section"><div class="null"><span class="label label-dismissible component-label tbar-label"><span class="label-item label-item-expand"><div class="label-section">Label 2</div></span><span class="label-item label-item-after"><button class="btn close"aria-label="close"type="button"><svg class="lexicon-icon lexicon-icon-times"focusable="false"role="presentation"><use xlink:href="spritemap.svg#times" /></svg></button></span></span></div></div></li>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here too, see div class="null"

Original file line number Diff line number Diff line change
@@ -1 +1 @@
<nav class="tbar tbar-inline-xs-down subnav-tbar subnav-tbar-primary"><div class="container-fluid container-fluid-max-xl"><ul class="tbar-nav tbar-nav-wrap"><li class="tbar-item"><div class="tbar-section"><span class="component-text text-truncate-inline"><span class="text-truncate">10-results-for-my search</span></span></div></li><li class="tbar-item"><div class="tbar-section"><span class="label label-dismissible component-label tbar-label"><span class="label-item label-item-expand"><div class="label-section">Label 1</div></span><span class="label-item label-item-after"><button class="btn close"aria-label="close"type="button"><svg class="lexicon-icon lexicon-icon-times"focusable="false"role="presentation"><use xlink:href="spritemap.svg#times" /></svg></button></span></span></div></li><li class="tbar-item tbar-item-expand"><div class="tbar-section"><span class="label label-dismissible component-label tbar-label"><span class="label-item label-item-expand"><div class="label-section">Label 2</div></span><span class="label-item label-item-after"><button class="btn close"aria-label="close"type="button"><svg class="lexicon-icon lexicon-icon-times"focusable="false"role="presentation"><use xlink:href="spritemap.svg#times" /></svg></button></span></span></div></li><li class="tbar-item"><div class="tbar-section"><a class=" component-link tbar-link"href="url">clear</a></div></li></ul></div></nav>
<nav class="tbar tbar-inline-xs-down subnav-tbar subnav-tbar-primary"><div class="container-fluid container-fluid-max-xl"><ul class="tbar-nav tbar-nav-wrap"><li class="tbar-item"><div class="tbar-section"><span class="component-text text-truncate-inline"><span class="text-truncate">10-results-for-my search</span></span></div></li><li class="tbar-item"><div class="tbar-section"><div class="null"><span class="label label-dismissible component-label tbar-label"><span class="label-item label-item-expand"><div class="label-section">Label 1</div></span><span class="label-item label-item-after"><button class="btn close"aria-label="close"type="button"><svg class="lexicon-icon lexicon-icon-times"focusable="false"role="presentation"><use xlink:href="spritemap.svg#times" /></svg></button></span></span></div></div></li><li class="tbar-item tbar-item-expand"><div class="tbar-section"><div class="null"><span class="label label-dismissible component-label tbar-label"><span class="label-item label-item-expand"><div class="label-section">Label 2</div></span><span class="label-item label-item-after"><button class="btn close"aria-label="close"type="button"><svg class="lexicon-icon lexicon-icon-times"focusable="false"role="presentation"><use xlink:href="spritemap.svg#times" /></svg></button></span></span></div></div></li><li class="tbar-item"><div class="tbar-section"><a class=" component-link tbar-link"href="url">clear</a></div></li></ul></div></nav>
5 changes: 1 addition & 4 deletions packages/clay-label/src/ClayLabel.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,6 @@ class ClayLabel extends ClayComponent {
*/
_handleCloseButtonClick(event) {
return !this.emit({
data: {
label: this.label,
},
name: 'close',
originalEvent: event,
});
Expand All @@ -36,7 +33,7 @@ class ClayLabel extends ClayComponent {
*/
ClayLabel.STATE = {
/**
* True or false to activate the close button.
* Flag to indicate if the label is closeable.
* @default false
* @instance
* @memberof ClayLabel
Expand Down
3 changes: 0 additions & 3 deletions packages/clay-label/src/__tests__/ClayLabel.js
Original file line number Diff line number Diff line change
Expand Up @@ -138,9 +138,6 @@ describe('ClayLabel', function() {
expect(spy).toHaveBeenCalled();
expect(spy).toHaveBeenCalledWith(
expect.objectContaining({
data: {
label: expect.any(String),
},
name: 'close',
originalEvent: expect.any(Object),
})
Expand Down
91 changes: 91 additions & 0 deletions packages/clay-management-toolbar/src/ClayFilterLabel.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import 'clay-label';
import {Config} from 'metal-state';
import ClayComponent from 'clay-component';
import Soy from 'metal-soy';

import templates from './ClayFilterLabel.soy.js';

/**
* Metal ClayFilterLabel component.
* @extends ClayComponent
*/
class ClayFilterLabel extends ClayComponent {
/**
* Continues the propagation of the filter label close clicked event
* @param {!Event} event
* @private
* @return {Boolean} If the event has been prevented or not.
*/
_handleFilterLabelCloseClicked(event) {
return !this.emit({
name: 'filterLabelCloseClicked',
originalEvent: event,
});
}
}

/**
* State definition.
* @static
* @type {!Object}
*/
ClayFilterLabel.STATE = {
/**
* Flag to indicate if the label is closeable.
* @default false
* @instance
* @memberof ClayLabel
* @type {?bool}
*/
closeable: Config.bool().value(false),

/**
* Data to add to the element.
* @default undefined
* @instance
* @memberof ClayLabel
* @type {?object}
*/
data: Config.object(),

/**
* Data to add pass to label component.
* @default undefined
* @instance
* @memberof ClayLabel
* @type {?object}
*/
filterData: Config.object(),

/**
* CSS classes to be applied to the element.
* @default undefined
* @instance
* @memberof ClayLabel
* @type {?(string|undefined)}
*/
elementClasses: Config.string(),

/**
* The label of the badge element.
* @default undefined
* @instance
* @memberof ClayLabel
* @type {?(html|string|undefined)}
*/
label: Config.any().required(),

/**
* The path to the SVG spritemap file containing the icons.
* @default undefined
* @instance
* @memberof ClayLabel
* @type {?(string|undefined)}
*/
spritemap: Config.string().required(),
};

Soy.register(ClayFilterLabel, templates);

export {ClayFilterLabel};
export default ClayFilterLabel;
39 changes: 16 additions & 23 deletions packages/clay-management-toolbar/src/ClayFilterLabel.soy
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,22 @@
{@param spritemap: string}
{@param? _handleFilterLabelCloseClicked: any}
{@param? closeable: bool}
{@param? expand: bool}
{@param? elementClasses: string}
{@param? filterData: ?}

{let $elementClasses kind="text"}
tbar-item
{if $expand}
{sp}tbar-item-expand
{/if}
{/let}
<div class="{$elementClasses}">
{call ClayLabel.render}
{param closeable: $closeable /}
{param data: $filterData /}
{param elementClasses: 'component-label tbar-label' /}
{param events: ['close': $_handleFilterLabelCloseClicked] /}
{param label kind="html"}
<div class="label-section">{$label}</div>
{/param}

<li class="{$elementClasses}">
<div class="tbar-section">
{call ClayLabel.render}
{param closeable: $closeable /}
{param elementClasses: 'component-label tbar-label' /}
{param events: ['close': $_handleFilterLabelCloseClicked] /}
{param label kind="html"}
<div class="label-section">{$label}</div>
{/param}

{param ref: 'label' /}
{param spritemap: $spritemap /}
{param style: false /}
{/call}
</div>
</li>
{param ref: 'label' /}
{param spritemap: $spritemap /}
{param style: false /}
{/call}
</div>
{/template}
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,7 @@ class ClayManagementToolbar extends ClayComponent {
*/
_handleFilterLabelCloseClicked(event) {
return !this.emit({
data: event.data,
name: 'filterLabelCloseClicked',
originalEvent: event,
});
Expand Down
5 changes: 4 additions & 1 deletion packages/clay-management-toolbar/src/ClayResultsBar.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import './ClayFilterLabel';
import 'clay-button';
import 'clay-label';
import 'clay-link';
import './ClayFilterLabel.soy.js';
import {Config} from 'metal-state';
import ClayComponent from 'clay-component';
import defineWebComponent from 'metal-web-component';
Expand Down Expand Up @@ -37,6 +37,9 @@ class ClayResultsBar extends ClayComponent {
*/
_handleFilterLabelCloseClicked(event) {
return !this.emit({
data: {
label: this.filterLabels[event.target.data.labelId],
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we will likely need more than the label value, as that can be localized or who know what else. We would be better off passing down the id, the whole list of label and any additional information we might need.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That is already the entire label object.

},
name: 'filterLabelCloseClicked',
originalEvent: event,
});
Expand Down
28 changes: 20 additions & 8 deletions packages/clay-management-toolbar/src/ClayResultsBar.soy
Original file line number Diff line number Diff line change
Expand Up @@ -89,14 +89,26 @@
{@param? _handleFilterLabelCloseClicked: any}

{foreach $filterLabel in $filterLabels}
{call ClayFilterLabel.render}
{param _handleFilterLabelCloseClicked: $_handleFilterLabelCloseClicked /}
{param closeable: $filterLabel.closeable ?: true /}
{param expand: isLast($filterLabel) /}
{param label: $filterLabel.label /}
{param ref: 'label' + index($filterLabel) /}
{param spritemap: $spritemap /}
{/call}
{let $clayFilterLabelClasses kind="text"}
tbar-item
{if isLast($filterLabel)}
{sp}tbar-item-expand
{/if}
{/let}

<li class="{$clayFilterLabelClasses}">
<div class="tbar-section">
{call ClayFilterLabel.render}
{param closeable: $filterLabel.closeable ?: true /}
{param data: ['labelId': index($filterLabel)] /}
{param events: ['filterLabelCloseClicked': $_handleFilterLabelCloseClicked ]/}
{param filterData: $filterLabel.data /}
{param label: $filterLabel.label /}
{param ref: 'label' + index($filterLabel) /}
{param spritemap: $spritemap /}
{/call}
</div>
</li>
{/foreach}
{/template}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2059,51 +2059,57 @@ exports[`ClayManagementToolbar should render a management toolbar with search re
</li>
<li class="tbar-item">
<div class="tbar-section">
<span class="label label-dismissible component-label tbar-label">
<span class="label-item label-item-expand">
<div class="label-section">Label 1</div>
</span>
<span class="label-item label-item-after">
<button class="btn close" aria-label="close" type="button">
<svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
<use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#times"></use>
</svg>
</button>
<div data-labelid="0">
<span class="label label-dismissible component-label tbar-label">
<span class="label-item label-item-expand">
<div class="label-section">Label 1</div>
</span>
<span class="label-item label-item-after">
<button class="btn close" aria-label="close" type="button">
<svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
<use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#times"></use>
</svg>
</button>
</span>
</span>
</span>
</div>
</div>
</li>
<li class="tbar-item">
<div class="tbar-section">
<span class="label label-dismissible component-label tbar-label">
<span class="label-item label-item-expand">
<div class="label-section">Label 2</div>
</span>
<span class="label-item label-item-after">
<button class="btn close" aria-label="close" type="button">
<svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
<use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#times"></use>
</svg>
</button>
<div data-labelid="1">
<span class="label label-dismissible component-label tbar-label">
<span class="label-item label-item-expand">
<div class="label-section">Label 2</div>
</span>
<span class="label-item label-item-after">
<button class="btn close" aria-label="close" type="button">
<svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
<use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#times"></use>
</svg>
</button>
</span>
</span>
</span>
</div>
</div>
</li>
<li class="tbar-item tbar-item-expand">
<div class="tbar-section">
<span class="label label-dismissible component-label tbar-label">
<span class="label-item label-item-expand">
<div class="label-section">
<strong>Category:</strong>Label 3</div>
</span>
<span class="label-item label-item-after">
<button class="btn close" aria-label="close" type="button">
<svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
<use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#times"></use>
</svg>
</button>
<div data-labelid="2">
<span class="label label-dismissible component-label tbar-label">
<span class="label-item label-item-expand">
<div class="label-section">
<strong>Category:</strong>Label 3</div>
</span>
<span class="label-item label-item-after">
<button class="btn close" aria-label="close" type="button">
<svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
<use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#times"></use>
</svg>
</button>
</span>
</span>
</span>
</div>
</div>
</li>
<li class="tbar-item">
Expand Down
Loading