Home

• Glossary
• Generated Markup
• TPW Classes
• Pull Requests
• Release Cycle
• Versioning

Glossary

The following is meant to help users better understand the documentation, submit issues, etc.:

• DYNAMIC Widget: this is a Widget that is not explicitly set to be an Accordion or a TabPanel (tpw-widget without tpw-accordion or tpw-tabpanel)

• STATIC Widget: this is a Widget that is explicitly set to be an Accordion (tpw-widget tpw-accordion) or a TabPanel (tpw-widget tpw-tabpanel)

• TABPANEL: this refers to the TabPanel Widget

• ACCORDION: this refers to the Accordion Widget

• TAB(S): this refers to the TabPanel's "headings", it is a Hx (a div in the case of a Widget based on a dl) that contains a span (tpw-tab) which is generated via JavaScript

• HEADER(S): this refers to the Accordion's "headings", it is a Hx (a div in the case of Widget based on a dl) that contains a span (tpw-header) which is generated via JavaScript

• SHIM: this refers to the first wrapper (tpw-shim), the one that wraps all the content between headings, it is generated via JavaScript

• PANELS: this refers to the 2nd wrapper (tpw-panel) associated with the Tabs/Headers (same term for both TabPanel & Accordion), it is generated via JavaScript

• SHADOW div: this refers to the first child of DYNAMIC Widgets (tpw-shadow), it is generated via JavaScript and used by ResizeObserver

• SKIP-LINK: this refers to the link used as a keyboard shortcut. It shows when the user hits the [esc] key, it allows the user to exit the Widget or reach its first Tab/Header

Generated Markup

• In "DYNAMIC Widgets":

  • a div is plugged as the 1st-child of the Widget, it contains "clones" of the Tabs and it is used by the ResizeObserver API
  • an empty div is plugged (only in TabPanels) as the 2nd-child of the Widget (<div role="tablist" aria-owns...>...</div>)
  • a span is plugged inside each Heading (so keep in mind that we are styling those spans, not the headings)
  • dl (Definition Lists) lose all their semantic as dl, dt, and dd are replaced with div; spans are inserted inside what would be dts
  • content in between "Tabs/Headers" is wrapped inside 2 divs (those are necessary for the styling to work)
  • a SKIP-LINK (tpw-skip) is appended to the Widget (it is the last element in the Widget)

• In "STATIC Widgets":

  • same as above with the exception of the first bullet point

TPW Classes

Classes and modifiers for the Widget:

Note: some of the classes below can be mixed, for example:

<div class="tpw-widget tpw-pills tpw-rounded tpw-centered">

• tpw-widget (REQUIRED):

  • this will style the Widget as a TabPanel as long as there is enough room for the Tabs to be displayed side-by-side
  • this will style the Widget as an Accordion if there is not enough room for the Tabs to be displayed side-by-side

• Optional classes:

  • For TabPanel:

    • tpw-tabpanel: this will force the Widget to display as a TabPanel "no matter what"
    • tpw-fancy: this will style all the Tabs (unlike the default styling that only styles the active Heading as a Tab)
    • tpw-pills: this will display the Tabs as pills ("à la Bootstrap")
    • tpw-bar: this will not style the "Tabs" as Tabs. Instead, it will only display a bottom border (below the Tabs)
    • tpw-centered: this will center the Pabs above the Panel
    • tpw-rounded: this will add a border-radius to the Tabs and Panel

  • For Accordion:

    • tpw-accordion: this will force the Widget to display as an Accordion (regardless of its width)
    • tpw-disconnected: this will create space between the Headers and style them with rounded corners
    • tpw-icons-at-the-end: this will display the icons (chevrons, +/-, etc.) on the opposite side of the Headers
    • tpw-chevrons-east-south: this will overwrite the default orientation of the chevrons (South/North) to make them point East/South (West/South in RTL scripts)
    • tpw-plus-minus: this will replace the "chevron" icons with "+" and "-" signs
    • tpw-animate: this will "animate" the "chevron" icons between their state

  • For the headings

    • tpw-selected: this class, once applied to a Heading (or a dt), will open the Panel associated with that Heading
      • in case tpw-selected is not present on any Heading then no panel is open in Accordions and the 1st panel is open in TabPanels
      • TabPanels can only have one instance of tpw-selected, but Accordions do not have that restriction (more than one Panel can be open at once)

All rules are scoped to the Widget, its Tabs, its Headers, and its Panels via classes generated via JavaScript. So no JavaScript means no styling from our end.

Classes to target the Widget's components:

• tpw-hx: should only be used to overwrite global styles affecting the Headings in the Widget (to style Tabs and Headers, use the classes below)
• tpw-tab: use to style the Tabs (in TabPanels)
• tpw-header: use to style the Headers (in Accordion)
• tpw-selected:
  • use to target "active" Tabs or Headers via ".tpw-selected .tpw-tab {...}"
  • use to target "active" Panel(s) via ".tpw-selected + div > .tpw-panel {...}"
• tpw-panel: use to style the panels (in both TabPanels and Accordions)
• tpw-skip: should not be styled
• tpw-shim: should not styled
• tpw-shadow: must not be styled

Classes to target various "states" of the Widget:

• tpw-js: use as a contextual selector (the Widget is "mounted") to style Widgets, their Tabs, Headers, and Panels
• tpw-tabpanel: use as a contextual selector to only style the TabPanel Widget, its Tabs, and its Panels
• tpw-accordion: use as a contextual selector to only style the Accordion Widget, its Headers, and its Panels
• tpw-!fouc: use to hide the Widget while the page loads (to prevent a FOUC). Check this answer on the FAQ.

IMPORTANT:
Avoid using tpw-widget to style the Widget and its elements since without script support other styles (styles related to tabs for example) would not apply.

Pull Requests

The core contributors will comment and request updates if necessary. Once everything looks good, the pull request will be merged to master and available for the next release.

Release Cycle

TPW package has a weekly release cycle that will include all the pull requests merged to master since last release. If no updates were made, the release will be skipped to the following week. Releases will be done every Monday. A release note will be included listing all the changes done to the package. Some releases may go out any other day of the week depending on its urgency.

Versioning

The tool follows Semver 2.0.0 versioning. Make sure you always lock the versioning on the major version (e.g. ~1.1.0). If a style changes, the Major version will be bumped so you are aware that upgrading to it may cause some styling to break.