daily pastebin goal
80%
SHARE
TWEET

Untitled

a guest Mar 18th, 2019 47 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. # Popover (next gen. continued)
  2.  
  3. ## Definitions
  4.  
  5. Tooltip - is a floating bubble that contains textual content and opens only on hover, can be useful for ellipsis and such
  6.  
  7. Popover - is a general "pop"ing mechanism that handles mostly position stuff, but also some minor design issues (such as arrow and shadow)
  8.  
  9. ## `wix-style-react` usage
  10.  
  11. | Tooltip | Popover             | Hybrid         |
  12. | ------- | ------------------- | -------------- |
  13. | Text    | Dropdown            | FloatingHelper |
  14. | Tooltip | Search              |                |
  15. |         | DropdownLayout      |                |
  16. |         | AutoComplete        |                |
  17. |         | InputWithOptions    |                |
  18. |         | MultiSelectCheckbox |                |
  19. |         | MultiSelect         |                |
  20. |         | BadgeSelect         |                |
  21. |         | DropdownPicker      |                |
  22. |         | GoogleAddresInput   |                |
  23. |         | DropdownBase        |                |
  24. |         | Popover             |                |
  25. |         | PopoverMenu         |                |
  26. |         | StatsWidget         |                |
  27.  
  28. ## Components Structure
  29.  
  30. ### Popover
  31.  
  32. | Component           | Extends                          |
  33. | ------------------- | -------------------------------- |
  34. | DropdownLayout      | -                                |
  35. | Popover             | -                                |
  36. | DropdownBase        | Popover + DropdownLayout         |
  37. | InputWithOptions    | Input + DropdownLayout           |
  38. | DropdownPicker      | Text + Icon + DropdownLayout     |
  39. | Dropdown            | InputWithOptions                 |
  40. | Search              | InputWithOptions                 |
  41. | AutoComplete        | InputWithOptions                 |
  42. | MultiSelectCheckbox | InputWithOptions + Checkbox      |
  43. | MultiSelect         | InputWithOptions                 |
  44. | BadgeSelet          | Badge + Popover + DropdownLayout |
  45. | GoogleAddresInput   | InputWithOptions                 |
  46. | PopoverMenu         | Tooltip + Button                 |
  47. | StatsWidget         | DropdownBase                     |
  48.  
  49. ### Tooltip
  50.  
  51. | Component | Extends      |
  52. | --------- | ------------ |
  53. | Text      | EllipsedText |
  54. | Tooltip   | -            |
  55.  
  56. ## Tooltip future
  57.  
  58. ### Direct users
  59.  
  60. | Component            |
  61. | -------------------- |
  62. | AddItem              |
  63. | Checkbox             |
  64. | FieldLabelAttributes |
  65. | FormField            |
  66. | ImageViewer          |
  67. | Loader               |
  68. | TableActionCell      |
  69. | InputArea            |
  70.  
  71. ## Dropdown
  72.  
  73. ### One component that is strict but extendable
  74.  
  75. `<Dropdown>` - input based dropdown. Would support all the main features. Features are stricked. Supports both: single & multi values. Options builder. Value handlers like predicate is easy to apply. Accesibility is aligned.
  76.  
  77. #### Covers these components
  78.  
  79. | Component           | Extends                     |
  80. | ------------------- | --------------------------- |
  81. | Dropdown            | InputWithOptions            |
  82. | Search              | InputWithOptions            |
  83. | AutoComplete        | InputWithOptions            |
  84. | MultiSelectCheckbox | InputWithOptions + Checkbox |
  85. | MultiSelect         | InputWithOptions            |
  86. | GoogleAddresInput   | InputWithOptions            |
  87. | InputWithOptions    | Input + DropdownLayout      |
  88.  
  89. ### Another component that can be used to construct
  90.  
  91. `<DropdownBase>` - very extendanble, api is based on downshift. Trigger component can be anything.
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top