New Figma component library and processes related to component changes (#14018)

# Checklist for submitter

If some of the following don't apply, delete the relevant line.

- [ ] Changes file added for user-visible changes in `changes/` or
`orbit/changes/`.
See [Changes
files](https://fleetdm.com/docs/contributing/committing-changes#changes-files)
for more information.
- [ ] Documented any API changes (docs/Using-Fleet/REST-API.md or
docs/Contributing/API-for-contributors.md)
- [ ] Documented any permissions changes (docs/Using
Fleet/manage-access.md)
- [ ] Input data is properly validated, `SELECT *` is avoided, SQL
injection is prevented (using placeholders for values in statements)
- [ ] Added support on fleet's osquery simulator `cmd/osquery-perf` for
new osquery data ingestion features.
- [ ] Added/updated tests
- [ ] Manual QA for all new/changed functionality
  - For Orbit and Fleet Desktop changes:
- [ ] Manual QA must be performed in the three main OSs, macOS, Windows
and Linux.
- [ ] Auto-update manual QA, from released version of component to new
version (see [tools/tuf/test](../tools/tuf/test/README.md)).

---------

Co-authored-by: Sampfluger88 <108141731+Sampfluger88@users.noreply.github.com>
This commit is contained in:
Marko Lisica 2023-09-27 05:14:29 +02:00 committed by GitHub
parent 01da7ca516
commit a7a5bb9e09
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -171,12 +171,13 @@ Start off cross-platform for every option, setting, and feature. If we **prove**
- Showing these principles and ideas, to help remember the pros and cons and conceptualize the above visually. - Showing these principles and ideas, to help remember the pros and cons and conceptualize the above visually.
- Figma: - Figma: [⚗️ Fleet product project](https://www.figma.com/files/project/17318630/%E2%9A%97%EF%B8%8F-Fleet-product?fuid=1234929285759903870)
https://www.figma.com/file/hdALBDsrti77QuDNSzLdkx/%F0%9F%9A%A7-Fleet-EE-(dev-ready%2C-scratchpad)?type=design&node-id=17819%3A222919&t=kBHyWO7TXGpkylzS-1
We have certain design conventions that we include in Fleet. We will document more of these over time. We have certain design conventions that we include in Fleet. We will document more of these over time.
> TODO: Link to style guide here instead, and deduplicate all of this content (or as much as possible). **Figma component library**
Use the 🧩 ["Design System (current)"](https://www.figma.com/file/8oXlYXpgCV1Sn4ek7OworP/%F0%9F%A7%A9-Design-System-(current)?type=design&mode=design&t=BytcobQwypszkxf5-1) Figma library as a source of truth for components. Components in the product ([Storybook](https://fleetdm.com/storybook/)) should match the style of components defined in the Figma library. If the frontend component is inconsistent with one in the Figma library, treat that as a [bug](https://fleetdm.com/handbook/engineering#finding-bugs).
**Table empty states** **Table empty states**