Library name, naming and namespacing

[DaveOrDead]

1. Are we agreed on the name Vanilla UI? My initial thinking with that name is that it didn't have a dependency on jQuery or any 3rd party lib. Do we instead want it to be something related to accessibility if that is our focus?
2. If we are agreed on it, should we use VUI as the namespace e.g: class="js-vui-dialog-btn-open" and data-vui-controls-dialog="xyz". If the lib is called something else what should the namspace be, if we have one.
3. Do we want to have consistent names for all the composite parts of a component. E.g most components will have some sort of open or launch button, at CM we use the term trigger which would probably work across all components and is generic enough to work for a tab or a button. I'm not sure there is a logical opposite. IE with open you will always have close as it's opposite.

[chris-pearce]

My thoughts on question 1

TBH I've never been a massive fan of "Vanilla UI" even though I get the sentiment. And for me I don't see a11y as the sole focus rather I see this library as providing UI components "done right" or "by the book" and something I've wanted since being a best practice sorta dev 😄.

So I guess for me personally it isn't just about a11y and using that as a selling point rather I look at what we're doing more holistically as UI components that are:

• Lightweight with zero dependencies
• Highly accessible and for the most part progressively enhanced
• Un-opinionated about design
• Built with ES6
• Unit tested
• Extremely well documented (alongside the code and external to the code)

I guess you can say—like Frend have done—"built with Web Standards", and there's probably more to add to that list.

Not sure about the name? Maybe we call it something a little abstract rather than trying to encapsulate all of the above into a name? But, we'd wanna decide sooner rather than later.

My thoughts on question 2

I think once we have our library name then we either use an abbreviated version of the name or the full name, if it's a short enough name I'd just use the full name.

My thoughts on question 3

Do we want to have consistent names for all the composite parts of a component

For me: definitely. I love consistency and maintainability in code and I don't think it makes any sense to be calling the same pieces of UI different names across components.

I'm a fan of Trigger but I'm biased as that's what I've been using for yonks, I might be wrong but I think the logical opposite for Trigger is Target?

I think we have to use consistent naming for everything and we'll begin to develop a strong vocabulary as we're building more components.

[DaveOrDead]

1 and 2 sound good to me. But I'm not sure on 3 for a few reasons:

a) target in js is typically for something being interacted with. e.g event.target will give you the element that a user clicked on, focused on etc, whatever the event was
b) trigger doesn't really have a logical opposite e.g the opposite of open is close, opposite of show is hide. These give us names for close actions, whereas if we put "trigger" on the open control we don't have a name for the dismissing control.

I was thinking

// JS class hook pattern
.js-vui-open-component // attached to all open controls for a component
.js-vui-close-component // attached to close controls for a component
.js-vui-toggle-component// attached to a control which opens and closes
.js-vui-component // attached to component

This works for most component patterns e.g

// dialog
.js-vui-open-dialog
.js-vui-close-dialog
.js-vui-dialog

// typeahead
.js-vui-toggle-typeahead
.js-vui-typeahead

// popup
.js-vui-open-popup
.js-vui-close-popup
.js-vui-toggle-popup
.js-vui-popup


// tab
.js-vui-open-tab
.js-vui-tab

Not all components will require all hooks but the behaviour should be obvious from the naming.

Styling wise I don't think we need to worry about things like c-component__open as the open button for a dialog for example probably won't be part of the component itself.

[chris-pearce]

Sounds good and happy to go with that naming with only one suggestion for change which is to have the component name come before the action, like this:

// dialog
.js-vui-dialog-open
.js-vui-dialog-close
.js-vui-dialog

// typeahead
.js-vui-typeahead-toggle
.js-vui-typeahead

I just think it's more readable, but that's just me.

Now for the name of the library…

[DaveOrDead]

I do prefer the look of having the component name first, followed by the action as you suggest. Especially when they;re listed out together as a set.

My reasoning behind doing it the other way round was if you read it aloud .js-vui-dialog-open suggests that a dialog is already open, whereas .js-vui-open-dialog suggests it will open.

But it's just semantics really, either works for me.

[DaveOrDead]

What about something like Bones for the library name. In keeping with the or-dead theme and works on the level of being a foundational "skinless" library

[DaveOrDead]

if you download the bundle with a theme it could be called skin and bones haha