Fixes #1285 - API proposal to ClayLabelsInputField component #1292

matuzalemsteles · 2018-11-07T21:39:06Z

🚨 This PR is not to be merged. Do not stick to the code now, but the idea behind. I will still send another PR to evaluate the implementation and our good practices, once this idea is valid.

Disclaimer

I'm sending the API proposal to the new ClayLabelsInputField component. View the documents and Invision to analyze the use cases.

Invision
Doc

Proposal

The component does not manipulate the data or changes internal states, it only triggers events of what is happening and letting the developer decide what to do with the information or validate the information for example. but always respecting the principles that the Lexicon is predicting.

Events

The developer has the freedom to make decisions using the "life cycles" of the component, some of them are:

labelAdded - The event is triggered when the user interacts with the input or dropdown by pressing comma or enter to create a new label or by clicking a dropdown item.
- It's a good time for the developer to create their validation rules to add the label.
labelRemoved - The event is triggered when the user interacts with the labels, removing them through the backspace or clicking the label's close button.
labelFocused - The event is triggered when any label is focused.
queryChange - The event is triggered when the user is typing in the input.
- This is a good time to evaluate autocomplete or provide suggestions based on your criteria.

I'm still not sure about the names of the events, if you think of something please comment.

Helper methods

The component provides some auxiliary methods so that it can be used with events.

filterAutocomplete - Filters an Array<string> that corresponds to query.
clearInput- It just clears the input.

Extension points

Lexicon predicts that developers can customize dropdown items with a list of contacts, phones ... or customize the labels for example. You can start by creating a variation using soy exclusivity deltemplate to achieve the expected results.

ClayInputField.Label
ClayInputField.ItemDropdown

Both deltemplates are given the corresponding data parameter. causing the developer to decide the data API.

As the markup is still not 100% ready I added some css on the demo page to get closer to the Lexicon just for testing purposes, this will change when the markup is ready.

jbalsas

Hey @matuzalemsteles, the component is amazing!! It's gorgeous and works perfectly!!

I've added some changes I'd like to see before we push this in. I'll summarize here:

Create a clay-dataprovider package that can abstract configuring components that show data. Data can come locally or remotely. This could be attached to other components later such as Table, List, CardGrid, Dropdown...
Generalize the concept of what gets selected to items, rather than just labels. Maybe we should rename this component to something like multiselect or itemselector... @victorvalle?
Keep hidden inputs that match the selected items values for standard form compatibility
Investigate if we can reuse fuzzy search from some existing implementation

What do you think?

Nice job overall, let's keep this going! 💪

jbalsas · 2018-11-22T09:20:47Z

packages/clay-labels-input-field/src/ClayLabelsInputField.js

+	 * @public
+	 * @return {Array} A list of items containing the corresponding characters
+	 */
+	filterAutocomplete(data, query) {


Let's extract this to something like clay-dataprovider. See DataProvider for some reference or Kendo DataSource.

We should support both local and remote data. See also how we started doing it in clay-charts-shared and ClayBase

I was really thinking about not dealing with the DataProvider here 😅, I'll separate a task to just deal with it. Thanks for the examples.

Okay, let's get this component through and open an issue to abstract that!

jbalsas · 2018-11-22T09:22:16Z

packages/clay-labels-input-field/src/ClayLabelsInputField.soy

+
+	<div {$attributes}>
+		{if $label}
+			<label>{$label}</label>


I think <label> here will be missing a11y attributes like for

jbalsas · 2018-11-22T09:25:17Z

packages/clay-labels-input-field/src/ClayLabelsInputField.soy

+	<div class="input-group input-group-stacked-sm-down">
+		<div class="input-group-item">
+			<div data-keydown="{$_handleOnKeydown}" ref="formGroupInput" class="form-control dropdown-full form-control-tag-group">
+				{if $selectedLabels}


For easier integration, it might be good to have hidden input fields here with the label values. That way the component will be compatible with standard form submission.

We can't just select labels, they need to have values associated with them, so our input data should look more like:

data: [{ value: '123', label: 'Element 1' }, { value: '456', label: 'Element 2' }]

On the UI, we should show the labels, but we would be updating and keeping a list of <input type="hidden"> with the values of the selected items. There should also be a way to configure the name of the input so the server will be able to retrieve the data as a native array as expected.

jbalsas · 2018-11-22T09:25:49Z

packages/clay-labels-input-field/src/ClayLabelsInputField.soy

+	{@param? _removeFocusedLabel: any}
+	{@param? contentRenderer: string}
+	{@param? filteredItems: list<?>}
+	{@param? selectedLabels: list<?>}


Let's call this selectedItems?

I had put them as items, but I had decided to change thinking it was not a good option 😅. Referring to items is better. Thanks Chema!

jbalsas · 2018-11-22T09:30:22Z

packages/clay-labels-input-field/src/utils.js

+ * @param {!String} string
+ * @return {null|Object}
+ */
+export const match = (query, string) => {


@gcmznt used fuzzy. Do you think that might be an option so we don't have to code and maintain this?

hey @jbalsas, Yeah, I thought of using it here, but I had trouble getting to the Lexicon markup result, with the fuzzy it concatenates in the characters that are match the strong tag, but we're having problems with the parameters that they accept HTML in Metal soy (metal/metal.js#381). And this utility is the same fuzzy implementation, but without the option to concatenate some markup, just list which items are active... so we can get to the desired https://github.com/liferay/clay/pull/1292/files#diff-087a55086d39969ce453305b7bca6fcfR160

Sounds good for now, then!

victorvalle · 2018-11-22T11:07:53Z

@jbalsas multiselect sounds good to me. It could be confused with other old pattern but we could even use this to replace that one.

jbalsas · 2018-11-22T11:46:59Z

Doing some research I've found several instances of MultiSelect, and Select (with multipleSelection) and one of Picker.

I'd say the Select with a multipleSelection option sounds reasonable, but I particularly liked Microsoft's Picker approach. They then extend that idea to group specific pickers like DatePicker, TimePicker, PeoplePicker, ColorPicker... my vote would go to this last one... what do you think, @victorvalle, @matuzalemsteles?

matuzalemsteles · 2018-11-22T13:37:04Z

I like the idea of going with Picker but I think we would have to follow this line with the rest of the other components that are part of this group. Does it make sense?

Hey @matuzalemsteles, the component is amazing!! It's gorgeous and works perfectly!!
I've added some changes I'd like to see before we push this in. I'll summarize here:
Create a clay-dataprovider package that can abstract configuring components that show data. Data can come locally or remotely. This could be attached to other components later such as Table, List, CardGrid, Dropdown...
Generalize the concept of what gets selected to items, rather than just labels. Maybe we should rename this component to something like multiselect or itemselector... @victorvalle?
Keep hidden inputs that match the selected items values for standard form compatibility
Investigate if we can reuse fuzzy search from some existing implementation
What do you think?
Nice job overall, let's keep this going! 💪

hey @jbalsas, thanks 💪. I'm going back to this in the next episode, I'll take care of adding some additional tasks with what we have here.

victorvalle · 2018-11-22T15:07:50Z

I prefer mutli select when it can select multiple things.

jbalsas · 2018-11-22T15:09:59Z

Let's go with ClayMultiSelect, then! 👌

matuzalemsteles · 2018-12-04T18:43:01Z

I'm closing this to send the final changes in another PR.

matuzalemsteles requested review from jbalsas and carloslancha November 7, 2018 21:39

matuzalemsteles force-pushed the APITagSelector branch from 96f556a to 3ce8327 Compare November 7, 2018 23:26

matuzalemsteles added 4 commits November 13, 2018 15:36

Fixes liferay#1285 - Fixes ClayLabel Event Consistency

831d114

Fixes liferay#1285 - Update the test with the label emit the event

9280b30

Fixes liferay#1285 - Create ClayLabelsInputField component

9e458f7

Fixes liferay#1285 - SF

75c0f9a

matuzalemsteles force-pushed the APITagSelector branch from 3ce8327 to 75c0f9a Compare November 13, 2018 19:36

jbalsas mentioned this pull request Nov 21, 2018

Component autocomplete #971

Closed

jbalsas suggested changes Nov 22, 2018

View reviewed changes

matuzalemsteles mentioned this pull request Nov 26, 2018

Implement ClayDataProvider #1330

Closed

7 tasks

matuzalemsteles mentioned this pull request Dec 4, 2018

Create ClayMultiSelect Component #1285

Closed

2 tasks

matuzalemsteles closed this Dec 4, 2018

matuzalemsteles deleted the APITagSelector branch December 4, 2018 18:44

matuzalemsteles mentioned this pull request Dec 4, 2018

Fixes #1285, #1341, #1330 - Create ClayMultiSelector, ClayDataProvider and ClayAutocomplete #1351

Merged

matuzalemsteles mentioned this pull request Jan 25, 2019

Fixes #1472 Fixing existing tests #1474

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fixes #1285 - API proposal to ClayLabelsInputField component #1292

Fixes #1285 - API proposal to ClayLabelsInputField component #1292

matuzalemsteles commented Nov 7, 2018

jbalsas left a comment •

edited

Loading

jbalsas Nov 22, 2018

matuzalemsteles Nov 22, 2018

jbalsas Nov 22, 2018

jbalsas Nov 22, 2018

jbalsas Nov 22, 2018

jbalsas Nov 22, 2018

matuzalemsteles Nov 22, 2018

jbalsas Nov 22, 2018

jbalsas Nov 22, 2018

matuzalemsteles Nov 22, 2018

jbalsas Nov 22, 2018

victorvalle commented Nov 22, 2018

jbalsas commented Nov 22, 2018 •

edited

Loading

matuzalemsteles commented Nov 22, 2018 •

edited

Loading

victorvalle commented Nov 22, 2018

jbalsas commented Nov 22, 2018

matuzalemsteles commented Dec 4, 2018

Fixes #1285 - API proposal to ClayLabelsInputField component #1292

Fixes #1285 - API proposal to ClayLabelsInputField component #1292

Conversation

matuzalemsteles commented Nov 7, 2018

Disclaimer

Proposal

Events

Helper methods

Extension points

jbalsas left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

victorvalle commented Nov 22, 2018

jbalsas commented Nov 22, 2018 • edited Loading

Select

MultiSelect

Picker

matuzalemsteles commented Nov 22, 2018 • edited Loading

victorvalle commented Nov 22, 2018

jbalsas commented Nov 22, 2018

matuzalemsteles commented Dec 4, 2018

jbalsas left a comment •

edited

Loading

jbalsas commented Nov 22, 2018 •

edited

Loading

matuzalemsteles commented Nov 22, 2018 •

edited

Loading