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?
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
UI Dev Sync 12.13.19
By webguyian
