Updates for new major (ONDA)

[kevinch]

trafficstars

The aim of this issue is to register any breaking change that we will apply to the new iteration of Styleguide to ONDA.

• Move all id attributes to key html elements such as inputs, buttons & selects.
• In FilterBar component, update props typos newFilterLable & submitFilterLable #904
• Search for deprecate, DEPRECATED & console.warn() and act accordingly.
• Kill Badge component

[ohmyguigs]

I updated the props with typos, but in the next major we should stop supporting the old ones

[emersonlaurentino]

Things about standardization:

• Standardization of prop names; Slack Thread
• Use declaration file or define types within the file itself? Slack Thread
• Rules for creating a new component https://github.com/vtex/styleguide/issues/924
• Make Componentes Accessible #850
• Support to i18n in the all components #330

The idea of ​​these threads is to create best practice documents for standard ONDA terms.

[ohmyguigs]

We should also think about Tabs component API: The docs don't make it clear on how to import Tab component to use alongside Tabs. ( see here vtex/styleguide/issues/887) Today we need to import both Tabs and Tab and use for example like this:

<Tabs>
    <Tab label="hello" onClick={() => goToHello()} active  />
    <Tab label="from" onClick={() => goToFrom()}  />
    <Tab label="the" onClick={() => goToThe()}  />
    <Tab label="other" onClick={() => goToOther()}  />
    <Tab label="side" onClick={() => goToSide()}  />
</Tabs>

Why can't it be simple like this?

<Tabs
    options={[
        {label: 'Hello', onClick: () => goToHello(), active: true},
        {label: 'From', onClick: () => goToFrom(), active: false},
        {label: 'The', onClick: () => goToThe(), active: false},
        {label: 'Other', onClick: () => goToOther(), active: false},
        {label: 'Side', onClick: () => goToSide(), active: false},
    ]}
/>

[matheusps]

@ohmyguigs, why not just make Tabs a compound component and add Tab as it children? Like:

export default function Tabs({ children }){
  // make something
  return <>{children}</>
}

// Add Tab as children
Tabs.Tab = Tab

function Tab({ label, onClick, active }){
  const className = active ? 'active tab' : 'tab'
  return <button className={className} onClick={onClick}>{label}</button>
}

Usage

import { Tabs } from 'styleguide'

function useCase(props){
  return (
    <Tabs>
      <Tabs.Tab label="hello" onClick={() => goToHello()} active  />
      <Tabs.Tab label="from" onClick={() => goToFrom()}  />
      <Tabs.Tab label="the" onClick={() => goToThe()}  />
      <Tabs.Tab label="other" onClick={() => goToOther()}  />
      <Tabs.Tab label="side" onClick={() => goToSide()}  />
    <Tabs>
  )
}