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.

Sign up for GitHub

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

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
2ad2cad
Fixes #1467 - Do not send useless data on label close button click
Jan 23, 2019
512cc71
Fixes #1467 - Reword jsdoc
Jan 23, 2019
6068bf1
Fixes #1467 - Add data property to filter label validator
Jan 23, 2019
9f71be1
Fixes #1467 - Send label item data on close button click thorugh comp…
Jan 23, 2019
69bca0d
Fixes #1467 - SF
Jan 23, 2019
9f6a208
Fixes #1467 - Update test
Jan 23, 2019
096cd82
Fixes #1467 - Regen snapshots
Jan 23, 2019
777a784
Fixes #1467 - Regen isomorphic snapshots
Jan 23, 2019
32a21cf
Fixes #1467 - SF
Jan 24, 2019
bdebd19
Fixes #1467 - Regen isomorphic snapshots
Jan 24, 2019
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
960 changes: 528 additions & 432 deletions packages/clay-dataset-display/src/__tests__/__snapshots__/ClayDatasetDisplay.js.snap
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/clay-isomorphic/fixtures/expected/ClayFilterLabel.render
View file
Open in desktop
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 ><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>
2 changes: 1 addition & 1 deletion packages/clay-isomorphic/fixtures/expected/ClayResultsBar.filterLabels
View file
Open in desktop
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 ><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 ><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>
2 changes: 1 addition & 1 deletion packages/clay-isomorphic/fixtures/expected/ClayResultsBar.render
View file
Open in desktop
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 ><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 ><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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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: 19 additions & 20 deletions packages/clay-management-toolbar/src/ClayFilterLabel.soy
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,28 @@
{@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
{let $elementAttributes kind="attributes"}
{if $elementClasses}
class="{$elementClasses}"
{/if}
{/let}

<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}
<div {$elementAttributes}>
{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}

{param ref: 'label' /}
{param spritemap: $spritemap /}
{param style: false /}
{/call}
</div>
</li>
{param ref: 'label' /}
{param spritemap: $spritemap /}
{param style: false /}
{/call}
</div>
{/template}
1 change: 1 addition & 0 deletions packages/clay-management-toolbar/src/ClayManagementToolbar.js
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
74 changes: 40 additions & 34 deletions packages/clay-management-toolbar/src/__tests__/__snapshots__/ClayManagementToolbar.js.snap
View file
Open in desktop
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