spark icon indicating copy to clipboard operation
spark copied to clipboard

Review the whole CTA-Field components differentiating between intent and status

Open andresin87 opened this issue 1 year ago • 1 comments

Foreground

  • Fields: (Input, Switch, Checkbox, RadioGroup, ...)
  • CTA: Call to action (Button, ActionButton, Chip, ...)
  • Presentational components - data display (tags, kbd)
  • Navigation (Tabs stepper)

Colors

  • Primary

  • Secondary

  • Info

  • Neutral

  • Surface

  • Error/Danger

  • Warning/Alert

  • Success

Props namings

  • Intent: for the purpose (intention) of the element. It is given by design not depending on any value/state shown on page
  • Status: Depends on the interaction of the user or the status of a page

Description

  • Fields are for inputing data. Thats the reason why the their naming represents status of the fields (error, alert, success) this elements (fileds for user data inputting interaction) must spread colors between:
    • Intent: primary, secondary, info, neutral
    • status: error, alert, success
  • CTA represents elements that fires intentionally interaction actions on events (buttons, icon buttons, chips). This elements NEVER have to represent statuses BUT they are able to have proper extra intents for Danger, Warning and Success Intents
    • Intent: primary, secondary, info, neutral, Danger, Warning, Success
    • NO Status

The difference between the Error-Danger/Alert-Warning tupla is that they are pointing the same token but with different point of views or concepts. On one hand for status of elements, on the other hand the intention of an action. This is the reason because despite of resulting the same token their names are different.

Review all the fields and CTA to follow that agreement

andresin87 avatar Jun 29 '23 08:06 andresin87