Implementace tlačítek v rámci design systému

[HormCodes]

Technologie: React, TypeScript, Gatsby

V rámci #64

Vytvořit stateless komponentu pro tlačítko podle vizuálního stylu >Č.D. Rozhraní komponenty je otevřené, ale představuji si mít něco jako:

<Button>
   type={ButtonTypes.Normal}
   size={...}
   disabled={false}
   onClick={() => console.log('Hello!')}
<Button>
   Click Here!
</Button>

Na co nezapomenout:

• Komponenta by neměla mít žádný stav
• Přidat dokumentaci (story) do Storybooku
• Odklonit se od větve rework

Figma: link

V případě nejasností nebojte se na mne obrátit. 🙂

[fidelman]

muzu to vzit

[HormCodes]

Super! ❤️ ... Přiradil jsem tě k issue.

[fidelman]

po prozkoumání styleguidu a několika dokončených stránkách jsem nenašel žádný vzor, kde použít Link a kde jen Button. Takže si myslím, že Link i Button budou mít stejné možnosti stylu:

size/type	primary (default for Button)	secondary	link (default for Link)
normal
small	Like small secondary but inverted

[fidelman]

po prozkoumání styleguidu a několika dokončených stránkách jsem nenašel žádný vzor, kde použít Link a kde jen Button. Takže si myslím, že Link i Button budou mít stejné možnosti stylu:

size/type primary (default for Button) secondary link (default for Link)
normal
small Like small secondary but inverted

ok, po nějaké době kódování jsem si uvědomil, že rozhraní komponent je docela jednoduché, ale implementace stylu roste exponenciálně u každé výjimky stylu. Důvodem je, že toto jednoduché rozhraní nás přimělo implementovat polymorfní způsob, jak aplikovat styly. Rozhodně se mi to nelíbí a další řešení, které mi přijde na mysl, je oddělit Button a Odkazy sémanticky a podle stylu. Bude to tedy 4 komponenty:

• Link
• Button
• ButtonAsLink
• LinkAsButton

uvidime

[Erbenos]

Na kód jsem nekoukal, ale šachovat se 4 komponentami mi přijde nepříliš šťastné. Nemůže to být jedna komponenta, v tomto duchu?

interface ButtonCommonProps {
  size?: 'small' | 'base' | 'md' | 'lg' // base default
  variant?: 'primary' | 'secondary' | 'text' | 'cta' // 'primary' default, 'text' default when button has asLink
  // cokoliv dalšího vás napadne... třeba 'spacing'
}

interface ButtonButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, ButtonCommonProps {
  asLink?: never
}

interface ButtonLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>, ButtonCommonProps {
  asLink: true
}

type ButtonProps = ButtonButtonProps | ButtonLinkProps

Použití:

// Tlačítko se sémantikou odkazu (takže <a> tag)
<Button asLink href="https://github.com/"></Button>
// Tlačítko se sémantikou odkazu, vypadající jako tlačítko
<Button asLink type="primary" href="https://github.com/"></Button>
// Obyčejné tlačítko, takže <button>
<Button></Button>
// Tlačítko vypadající jako text, stále <button>
<Button variant="text"></Button>

Plus dopsat base styly pro obyčejné odkazy (takže jako <Button asLink></Button>) do globálních stylů.