mavenlink / design-system

Mavenlink React Components
https://mavenlink.github.io/design-system
MIT License
2 stars 4 forks source link

Component design principle: `active` #249

Open juanca opened 3 years ago

juanca commented 3 years ago

active is meant as "the current widget is on the page tab sequence"

This means either the actual node is on the page tab sequence or some child node.

e.g.

<Popover>
  <Calendar>
    <Button />
  </Calendar> 
  <Input />
</Popover>

Nothing is active thus nothing is on the page tab sequence (when we're dealing with managing page tab sequences).

However,

<Popover active>
  <Calendar>
    <Button />
  </Calendar> 
  <Input active />
</Popover>

This implies that the something within Popover is on the page tab sequence. And that something is something within Input. Probably a <input /> node.

juanca commented 3 years ago

@Bloodyaugust c&c requested.

juanca commented 3 years ago

Maybe it's better to illustrate with example of a grid?

Bloodyaugust commented 3 years ago

@juanca should also mention that "Active does not mean that a node is the document.activeElement, or have anything to do directly with user focus", since that was my confusion on the subject.