set htmlClass on tab elements if defined

[raoulus]

Hi there,

I wanna have the possibility to set custom css classes on tab items.

Would be great to get this merged

[kyse]

Good thought. I've just been targeting the tabs via CSS selectors myself. But this does add some value as well. I'd suggest using labelHtlmClass since htmlClass is already used on the tabs control container (per the tabs template class=\"schema-form-tabs {{form.htmlClass}}\").

[raoulus]

@kyse the htmlClass can be used on the container as well on the tab, These are two independent objects. I'd keep it. what do you think?

[kyse]

Ahhh, apologies, you're using tab.htmlClass vs form.htmClass. Makes sense. :)

[Anthropic]

@raoulus can you remove the compiled files from the PR, we need the PR with only your changes in it as we only commit compiled when releasing. If you do that, I am fine with it.

Actually I plan on making many of the binds one-time binds so if you could also make it a one-time bind {{::tab.htmlClass}} that would help me get that ball rolling :)

Actually do you mind making a quick plunker so I can see how it would be used, so we can evaluate it more accurately, like is the same css then applied on the items themselves as well? That could potentially break people's existing css rules if that's the case.

[raoulus]

@Anthropic one-time binding is a good idea. I amended the commit.

I don't have the time right now to create the plunkr, but here's an example form defintion:

[
  ...
  "type": "tabs",
  "tabs": [
    {
      "title": "Simple stuff",
      "htmlClass": "my-container-class",
      "items": [
        {
          "key": "name",
          "htmlClass": "my-tab-class"
        },
        {
          "key": "favorite",
          "htmlClass": "another-tab-class"
        }
      ]
    }
  ]
  ...
]

I don't understand what you mean by "like is the same css then applied on the items themselves as well"? I don't see a case where it could break, because it only applies the class when you specify it.

[Anthropic]

@raoulus ah thanks I was packing for holiday and didn't have time to think much about what I was writing, I was thinking of Angular Material Tabs where there is only one tag added and then when it renders it splits into two, which means content block and tab would get the same value, I will probably accept as is, but if you don't mind I will try to find time early next week to confirm that it is possible to emulate with the Material repo as if not there may need to be a name change or something similar. Again I may be rushing too much to think about it properly (another good reason not to merge right now!). I will definitely get to this at latest early next week. Thank you for your time and quick responses :)

[Anthropic]

I haven't forgotten this, just keep running out of time. @raoulus is there a chance you could add a test case for this to the tabarray spec? Then I can make sure we never break it again once added :)