UI Dev Sync

December 13, 2019

Agenda

News and updates

Changelog

Show & Tell: Account/Orion

Analyze What??

Sprites, Icons, and SVGs

Q & A

📰

📜

🎭

🕵️‍♂️

🧚‍♀️

❓

Goodbye 😢

Joe

Ryan B.

James

Housekeeping 🧹

  • Concourse training

  • BrowserStack

  • Read the wiki

  • Code reviews

  • Follow our standards

https://xkcd.com/1513/

Changelog 📜

bsd-react-ui-kit                              v1.13.0

  • Support custom icon in StatusLabel
  • Add topControls prop to Table

bsd-ui-utils                                       v1.7.4

  • Bind logMessage in Logger
  • Allow Fido to skip logging
  • Export tracking utils

activecore-react-ui-kit                   v2.5.0

  • Fix disabled Apply button in Filter
  • Add custom nested options to Filter

Show & Tell:

Account / Orion

Analyze What??

Analyze This

Does this pattern already exist?

Can you modify an existing component?

Can you create a HOC?

How can this be made reusable?

What are the necessary requirements?

https://www.gautamdhameja.com/how-to-take-a-step-back-to-write-better-code-aba38c745906/

Think, think, think… before you code!

Sprites, Icons, SVGs...

OH MY!

How many Sprites can I have?

There should be only one

Sprite

<Sprite>          // from bsd-react-ui-kit
  <Icons />       // from activecore-react-ui-kit
  <ActionIcons /> // from local app 
  <VoiceIcons />
</Sprite>
<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlnsXlink="http://www.w3.org/1999/xlink"
  role="presentation"
  focusable="false"
  style={{ display: 'none' }}
>
  <symbol id="icon-circle" width="20" height="20" viewBox="0 0 20 20">
    <path d="M14.119 6v13.54V6zM9.746 9v10.667V9zM1 9v10.667V9zm4z" />
  </symbol>
  <symbol id="icon-square" width="20" height="20" viewBox="0 0 20 20">
    <path d="M14.119 6v13.54V6zM9.746 9v10.667V9zM1 9v10.667V9zm4z" />
  </symbol>
  <symbol id="icon-triangle" width="20" height="20" viewBox="0 0 20 20">
    <path d="M14.119 6v13.54V6zM9.746 9v10.667V9zM1 9v10.667V9zm4z" />
  </symbol>
</svg>

Icon

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlnsXlink="http://www.w3.org/1999/xlink"
  role="presentation"
  focusable="false"
  style={{ display: 'none' }}
>
  <symbol id="icon-circle" width="20" height="20" viewBox="0 0 20 20">
    <path d="M14.119 6v13.54V6zM9.746 9v10.667V9zM1 9v10.667V9zm4z" />
  </symbol>
</svg>


<svg role={role} focusable="false">
  <title>{description}</title>
  <use xlinkHref={path} width="100%" height="100%" />
</svg>

When is an SVG not an icon? 

If it has multiple colors

If it has multiple paths

If it is not reusable

If it is not square

sometimes*

Icon or NOT

Q & A

Made with Slides.com