Creating LWC's component names it all lowercase unless you change the auto-populated Tag/Service Name

Issue #1281 resolved
Brett Nelson created an issue

Creating LWC's component names it all lowercase unless you change the auto-populated Tag/Service Name.

I think it would be desirable to not have to change the auto-populated filed value to preserve the camelcase of the name.

Comments (5)

  1. Scott Wells repo owner

    Brett, I think this may be a UX issue because you're starting by entering the display name instead of a symbolic name. In your example if you type a display name of Test Thing, the symbolic names are initialized properly:

    NewLwcDialogName.png

    It's arguable, though, that perhaps you should type the symbolic name first and try to derive a display name from that. Thoughts?

  2. Brett Nelson reporter

    hmmI by symbolic name If you mean the Tag/Service Name field? if so it makes more sense. I didn't think about the Display Name being what is used in the Salesforce UI as the label.

    From a SF perspective it would match the flow of creating things in the UI to keep the order you have and starting the with Display Name. Would make an info or help text popup on the modal clear up confused people like me? Not sure if that's a thing in WebStorm/IntelliJ though.

  3. Scott Wells repo owner

    Yeah, I'm wondering if perhaps I should change it so that you type the tag/service name and have the class name and display name initially auto-generated from that, e.g., the user types a Tag/Service Name value of testThing and the dialog auto-populates Class Name as TestThing and Display Name as Test Thing, then you tab through those two fields (and Description) and, if desired, change them to something else. Hopefully 90+% of the time you can just accept the generated defaults, though.

    It's an easy change to make, and I think it would be a smoother workflow for LWC component creation...

  4. Scott Wells repo owner

    Delivered in 2.0.6.0. Now the initial input field is the tag/service name, and the ES6 class name and display name are derived from it.

  5. Log in to comment