Skip to content

feat: add coercion for string arrays #17523

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

Closed
wants to merge 12 commits into from

Conversation

JanMalch
Copy link
Contributor

Adds a utility function to coerce string arrays. This has been very useful for CSS class lists or defining columns for a CDK table.

Handling of null and undefined (and objects) may be up for discussion. Currently they are mapped via string interpolation and not filtered.

(If this is not just a "small" feature, I'm happy to open up a new issue.)

@JanMalch JanMalch requested a review from jelbourn as a code owner October 27, 2019 20:30
@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Oct 27, 2019
@jelbourn
Copy link
Member

@JanMalch are there any places in Angular Material or CDK where we could use this function?

@JanMalch
Copy link
Contributor Author

JanMalch commented Nov 8, 2019

Sorry for the late response @jelbourn. It can be used for the autocomplete's classList input.
There's also the opportunity to make some inputs uniform. For example the datepicker uses panelClass: string | string[], while autocomplete uses string.

@jelbourn
Copy link
Member

I think it would be good to do all of those in one PR (with separate commits), since it would validate the usefulness of the function.

Changes the default separator for coerceStringArray to a single space, to be better suited for the common usages like CSS class inputs.
Improve documentation to better describe behaviour and use cases.
With coerceStringArray no empty string key will be added to the classList object.
The input can also accept string[] now.
@JanMalch
Copy link
Contributor Author

Quick question on the panelClass behaviour: the documentation states that it "supports the same syntax as ngClass.", but it's only of type string | string[]. ngClass also accepts objects.

Based on the ngClass documentation:

<mat-datepicker [panelClass]="'first second'">...</mat-datepicker>
<mat-datepicker [panelClass]="['first', 'second']">...</mat-datepicker>
<!-- should the following two work? -->
<mat-datepicker [panelClass]="{'first': true, 'second': true, 'third': false}">...</mat-datepicker>
<mat-datepicker [panelClass]="{'class1 class2 class3' : true}">...</mat-datepicker>

@jelbourn
Copy link
Member

Seems like a mistake in that comment; it should probably say something like "Supports string and string array values, similar to NgClass".

@JanMalch
Copy link
Contributor Author

The autocomplete shows a good usage.
I started using it for panelClass in the datepicker here. The setter still accepts string | string[] to not break anything and so the getter returns the same type. Effectively it will always return string[].

The function now only requires one loop over the array instead of two.
Improve documentation by adding parameter description and behaviour for special cases.
Minor style improvements.
Add tests for panelClass to check coercion and adding it onto the target element.
Fixes minor style issue in datepicker source.
Copy link
Member

@jelbourn jelbourn left a comment

Choose a reason for hiding this comment

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

Overall looks good, just a few last comments

JanMalch and others added 2 commits December 20, 2019 06:54
Also improves the documentation for coerceStringArray by adding more examples and clarifying its behaviour.
Removes an unnecessary !! to check for an empty string.
@JanMalch
Copy link
Contributor Author

Applied all proposed changes.
Somewhat off topic: would you've split the latest commit (test) in multiple (test, docs, refactor)?

@jelbourn
Copy link
Member

We generally try to keep commits on master to the changelog level, so this whole PR would just be one.

Looks like a few CI tasks are failing on this presently

@JanMalch JanMalch requested review from andrewseguin, devversion and a team as code owners January 31, 2020 15:51
@JanMalch
Copy link
Contributor Author

JanMalch commented Feb 5, 2020

All CI tasks pass now. Sorry about the delayed and clumsy commits.

@jelbourn jelbourn added the target: minor This PR is targeted for the next minor release label Feb 6, 2020
Copy link
Member

@jelbourn jelbourn left a comment

Choose a reason for hiding this comment

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

LGTM

@jelbourn jelbourn added pr: lgtm action: merge The PR is ready for merge by the caretaker labels Feb 6, 2020
@mmalerba mmalerba removed the lgtm label Jul 31, 2020
@josephperrott josephperrott removed the request for review from a team April 29, 2021 15:59
@devversion devversion removed their request for review August 18, 2021 12:54
@RadhikaGunisetty
Copy link

This PR #17523 is the older version of a new PR #20652, which is already merged.

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Dec 30, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement target: minor This PR is targeted for the next minor release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants