Meetings & Agenda
- Anatomy documentation (no more dimensions)
- Medium + Large button size
- Website styling/next steps
- Focus states
- Tables for Insights (striped rows, footer, column dividers)
- Checkbox & Radio buttons (icons vs. form controls)
- Button Group rules
- Search Input styling SO reference
- Discuss open source contributions
- Split TK3 remaining work among devs
- Possible names for Build section: components, dev, ui toolkit
- Design team to start uploading content to the new website
- We'll review in the next roundtable the IA of the site
- Core and marketing styles
- Write marketing button guidelines and create some inline examples. Don't include it as a component in TK for now
- Merge Richard's brand guidelines at some point with the component docs
- Inline dialogs using buttons
- We can achieve the effect of an inline dialog/pop-over by combining several atoms: surface, button/text/link element, and content. There is no need to create
- Design team to organize the components into atoms, molecules, and organisms
- Design team to work on color documentation
- Focus state @Thomas Butler
- PicoCSS example. Using a single file @Joan Mira
How shall we deal with colors in regards to theming (opacity)? Fixed non-transparent colors are more consistent and maybe have slight differences, but using transparency makes theming a lot easier and has fewer fields.
What shall we do with this? Is there a magical way to sort this out?
Shall we have two different color values for some swatches?
Shall we ditch transparency?
Shall we keep it?
- CSS Variables usage CSS variables style system
- Talk about Color spaces wrt current figma button designs. (Semantic colour naming)
- Images from @Thomas Butler illustrating the point better than I could
- General check to see where we are in the TK 3.0 plan
- Technical Architecture @Simeon Cheeseman
- Light / Classic / Dark themes @Joan Mira
- Regarding the modal component that should display like a bottom panel on mobile and a modal centered on the screen on desktop, each app should decide how its gets implemented for now. Once TK 3.0 defines the pattern, we can refactor it in the apps
- Discuss Tablekit 3.0 plan
- Review Documentation site POC with Confluence
- Discuss the other documentation alternatives
Notes:
- brand.tablecheck.com => brand guidelines
- brand.tablecheck.com/tablekit => Tablekit
- @Yandis YING to look into user journeys for the brand website. Use tutorial approach. The target audience is not digital-savvy. Avoid technical jargon
- If we get a few requests that means the documentation site is working well
- Subscription by email to changes in Tablekit (RSS feed linked to Mailchimp, or something else)
- Investigate The Unified Content Platform – Sanity.io
- Product leads to make screenshots of the TK UI components used in their products and save them in Figma. @Simeon Cheeseman to assist in how to upload the screenshots into Figma
- Design team update
- Add dark mode to TK Figma components
- Discuss Button and Links changes (More info here)
Meeting notes:
- Martin and Sean looking at colors, trying to finish buttons, tabs, etc.
- Eri to follow-up on TK PM and resource allocation
- FE team to apply some patches in Button component but not a full refactor until design specs are more solid
- TK Storybook needs to be updated with documentation (colors page, missing component like AnchorButton, etc)
- Button component does too many things. We need to take a less prescriptive approach to components
- Move the meeting a bit later, so that Europe teams can join
- Design team progress update: brand website and tablekit components in figma
- Discuss Tablekit related issues in projects
- Issue in Diner App with Select component: Select losing focus on Android devices when using iconBefore · Issue #51 · tablecheck/tablekit Possible solution: wait or collaborate with Radix UI New component: Select · Issue #384 · radix-ui/primitives
- Include the diner facing footer in Tablekit. Used in WEB, DIN and possibly in the future engineering and brand websites
- Refactor Tablekit to use CSS variables
- Designs starting to stray from tablekit constants (e.g. using spacings and colors not in tablekit)
Meeting notes:
- We’ll use IBM icons from now on
- Martin to update Tablekit Figma
- Will wait for Radix UI Select to replace react-select
- Designers will try to use the colors and constants from Tablekit rather than other variations
- F/e team will refactor Tablekit to use CSS variables
- Purpose of the meeting: align all IT teams to make sure we follow the TableKit and Design System guidelines while building our products
- Mission: make all our products have a consistent look and feel
- Vision: have a better UX and DX
- State of Tablekit in our products
- Design RFCs
- Front-end update: Review all the current components
- Design update: Talk about brand.tablecheck.com progress