search

Vonage / vivid-3

Vonage's web UI 🎨 toolbelt
https://vivid.deno.dev
Apache License 2.0
51 stars 11 forks source link

[density]: naming convention and sizes #641

Closed rachelbt closed 1 year ago

rachelbt commented 1 year ago

02/10/2022 tasks related to this issue:

Currently we have 2 methods of density - names and numbers (in progress-ring). We want to unify all as suggested here:

const sizeMap = {
    ultraCondensed: '20', // required for progress ring,
    superCondensed: '24',
    extraCondensed: '28',
    condensed: '32',
    semiCondensed: '36',
    normal: '40',
    semiExpanded: '44',
    expanded: '48',
    extraExpanded: '52',
    superExpanded: '56',
        ultraExpanded: '60',
};

this change will affect all components as we will change the extended density to expanded, and progress ring will not use numbers but keywords in density.

yinonov commented 1 year ago

relates to #337 #571

yinonov commented 1 year ago

notice that icon still has a size member

image
yinonov commented 1 year ago

layout members are still defined by t-shirt sizes

image
rachelbt commented 1 year ago

Decision summery:

  1. we will use only one property - size for all. No density use anymore.
  2. Text-field that has size as native attribute: 2.1 will not support vivid sizes property 2.2 we will have an option of changing the base: 40px token to allow dense / extended text-field. 2.3 Add documentation for a use-case for text-field using token customize.
  3. we will still have 2 methods of size units: 4.1 naming (normal, condensed etc..) - for components that has 3 sizes (of 8px jumps). 4.2 numbers (-3, -2, -1, 0, 1, 2, 3 ....) - for component with multiple sizes such as progress ring (for 4px jumps). 4.3 this will be documented in our docs.
  4. Layout units in column-basis, gutters and spacing will stay as they are.

edge use-cases of sizes:

summery of research: https://docs.google.com/spreadsheets/d/1YOMfRRZALEFFR923tFmRxLIW43N1AWMFLg0cjk2sR8w/edit?usp=sharing

github-actions[bot] commented 1 year ago

This issue is stale because it has been open for 30 days with no activity.

github-actions[bot] commented 1 year ago

This issue was closed because it has been inactive for 14 days since being marked as stale.