playbook_ui 13.16.0.pre.alpha.PBNTR184betaflaginmenuyml2085 → 13.16.0.pre.alpha.PLAY11641991
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +12 -14
- data/app/pb_kits/playbook/index.js +1 -2
- data/app/pb_kits/playbook/pb_flex/_flex.tsx +1 -1
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +28 -16
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +5 -11
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +44 -18
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md +7 -12
- data/app/pb_kits/playbook/pb_icon/icon.html.erb +6 -4
- data/app/pb_kits/playbook/pb_icon/icon.rb +10 -10
- data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +1 -1
- data/app/pb_kits/playbook/pb_layout/_layout.tsx +1 -2
- data/app/pb_kits/playbook/pb_layout/layout.test.js +4 -8
- data/app/pb_kits/playbook/pb_legend/_legend.tsx +6 -6
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +4 -4
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx +1 -1
- data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +3 -3
- data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +22 -30
- data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +5 -5
- data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +4 -4
- data/app/pb_kits/playbook/pb_list/_list.tsx +15 -15
- data/app/pb_kits/playbook/pb_list/_list_item.tsx +1 -1
- data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +9 -9
- data/app/pb_kits/playbook/pb_map/_map.tsx +8 -8
- data/app/pb_kits/playbook/pb_map/_map_controls.tsx +7 -15
- data/app/pb_kits/playbook/pb_map/_map_custom_button.tsx +2 -4
- data/app/pb_kits/playbook/pb_message/_message.tsx +1 -1
- data/app/pb_kits/playbook/pb_message/_message_mention.tsx +6 -6
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +42 -46
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +20 -20
- data/app/pb_kits/playbook/pb_nav/_item.tsx +47 -56
- data/app/pb_kits/playbook/pb_nav/_nav.tsx +15 -15
- data/app/pb_kits/playbook/pb_table/_table.tsx +29 -29
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +2 -4
- data/app/pb_kits/playbook/playbook-doc.js +0 -2
- data/app/pb_kits/playbook/utilities/globalProps.ts +1 -1
- data/dist/menu.yml +3 -105
- data/dist/playbook-rails.js +6 -14
- data/lib/playbook/version.rb +1 -1
- metadata +2 -29
- data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx +0 -30
- data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +0 -62
- data/app/pb_kits/playbook/pb_advanced_table/Components/LoadingCell.tsx +0 -5
- data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +0 -30
- data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +0 -61
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +0 -128
- data/app/pb_kits/playbook/pb_advanced_table/Components/ToggleIconButton.tsx +0 -28
- data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx +0 -5
- data/app/pb_kits/playbook/pb_advanced_table/README.md +0 -288
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +0 -95
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +0 -51
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/BrowserCheck.tsx +0 -5
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +0 -63
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/IconHelpers.tsx +0 -8
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts +0 -8
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +0 -98
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +0 -245
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +0 -56
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +0 -49
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +0 -13
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +0 -57
- data/app/pb_kits/playbook/pb_advanced_table/docs/_description.md +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +0 -278
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -6
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss +0 -71
- data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_pseudo_states.scss +0 -12
@@ -12,12 +12,12 @@ type NavProps = {
|
|
12
12
|
borderless?: boolean,
|
13
13
|
children?: React.ReactNode[] | React.ReactNode,
|
14
14
|
className?: string | string[],
|
15
|
-
data?:
|
15
|
+
data?: object,
|
16
16
|
dark?: boolean,
|
17
17
|
highlight?: boolean,
|
18
18
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
19
19
|
id?: string,
|
20
|
-
onClick?:
|
20
|
+
onClick?: React.MouseEventHandler<HTMLElement>,
|
21
21
|
orientation?: "vertical" | "horizontal",
|
22
22
|
link?: string,
|
23
23
|
title?: string,
|
@@ -25,7 +25,7 @@ type NavProps = {
|
|
25
25
|
itemSpacing?: SpacingObject
|
26
26
|
} & GlobalProps
|
27
27
|
|
28
|
-
const Nav = (props: NavProps)
|
28
|
+
const Nav = (props: NavProps) => {
|
29
29
|
const {
|
30
30
|
aria = {},
|
31
31
|
borderless = false,
|
@@ -37,7 +37,7 @@ const Nav = (props: NavProps): React.ReactElement => {
|
|
37
37
|
htmlOptions = {},
|
38
38
|
id,
|
39
39
|
link = '#',
|
40
|
-
onClick,
|
40
|
+
onClick = () => { },
|
41
41
|
orientation = 'vertical',
|
42
42
|
title = '',
|
43
43
|
variant = 'normal',
|
@@ -71,23 +71,23 @@ const childrenWithProps = React.Children.map(children, (child) => {
|
|
71
71
|
|
72
72
|
return (
|
73
73
|
<nav
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
74
|
+
{...ariaProps}
|
75
|
+
{...dataProps}
|
76
|
+
{...htmlProps}
|
77
|
+
className={cardCss}
|
78
|
+
id={id}
|
79
79
|
>
|
80
80
|
{title &&
|
81
81
|
<div className="pb_nav_list_title">
|
82
82
|
<a
|
83
|
-
|
84
|
-
|
85
|
-
|
83
|
+
className="pb_nav_list_item_link_text"
|
84
|
+
href={link}
|
85
|
+
onClick={onClick}
|
86
86
|
>
|
87
87
|
<Caption
|
88
|
-
|
89
|
-
|
90
|
-
|
88
|
+
dark={dark}
|
89
|
+
size="md"
|
90
|
+
text={`${title}`}
|
91
91
|
/>
|
92
92
|
</a>
|
93
93
|
</div>
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React, { useEffect } from 'react'
|
2
2
|
import classnames from 'classnames'
|
3
3
|
import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
|
4
|
-
import { globalProps
|
4
|
+
import { globalProps } from '../utilities/globalProps'
|
5
5
|
import PbTable from '.'
|
6
6
|
|
7
7
|
type TableProps = {
|
@@ -9,19 +9,19 @@ type TableProps = {
|
|
9
9
|
children: React.ReactNode[] | React.ReactNode,
|
10
10
|
className: string,
|
11
11
|
collapse?: "sm" | "md" | "lg",
|
12
|
-
container
|
12
|
+
container: boolean,
|
13
13
|
dark?: boolean,
|
14
14
|
data?: { [key: string]: string },
|
15
15
|
dataTable: boolean,
|
16
|
-
disableHover
|
16
|
+
disableHover: boolean,
|
17
17
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
18
18
|
id?: string,
|
19
|
-
responsive
|
20
|
-
singleLine
|
21
|
-
size
|
19
|
+
responsive: "collapse" | "scroll" | "none",
|
20
|
+
singleLine: boolean,
|
21
|
+
size: "sm" | "md" | "lg",
|
22
22
|
sticky?: boolean,
|
23
23
|
verticalBorder?: boolean,
|
24
|
-
}
|
24
|
+
}
|
25
25
|
|
26
26
|
const Table = (props: TableProps) => {
|
27
27
|
const {
|
@@ -56,29 +56,29 @@ const Table = (props: TableProps) => {
|
|
56
56
|
|
57
57
|
return (
|
58
58
|
<table
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
59
|
+
{...ariaProps}
|
60
|
+
{...dataProps}
|
61
|
+
{...htmlProps}
|
62
|
+
className={classnames(
|
63
|
+
'pb_table',
|
64
|
+
`table-${size}`,
|
65
|
+
`table-responsive-${responsive}`,
|
66
|
+
{
|
67
|
+
'table-card': container,
|
68
|
+
'table-dark': dark,
|
69
|
+
'data_table': dataTable,
|
70
|
+
'single-line': singleLine,
|
71
|
+
'no-hover': disableHover,
|
72
|
+
'sticky-header': sticky,
|
73
|
+
},
|
74
|
+
globalProps(props),
|
75
|
+
tableCollapseCss,
|
76
|
+
verticalBorderCss,
|
77
|
+
className
|
78
|
+
)}
|
79
|
+
id={id}
|
80
80
|
>
|
81
|
-
|
81
|
+
{children}
|
82
82
|
</table>
|
83
83
|
)
|
84
84
|
}
|
@@ -73,10 +73,8 @@ const TypeaheadWithHighlight = (props) => {
|
|
73
73
|
Option: (highlightProps: OptionProps) => (
|
74
74
|
<components.Option {...highlightProps}/>
|
75
75
|
),
|
76
|
-
SingleValue: ({
|
77
|
-
<
|
78
|
-
<span>{props.data.name}</span>
|
79
|
-
</components.SingleValue>
|
76
|
+
SingleValue: ({ data }: any) => (
|
77
|
+
<span>{data.name}</span>
|
80
78
|
)
|
81
79
|
}
|
82
80
|
|
@@ -4,7 +4,6 @@ import WebpackerReact from 'webpacker-react'
|
|
4
4
|
|
5
5
|
// KIT EXAMPLES
|
6
6
|
import 'pb_form/pb_form_validation'
|
7
|
-
import * as AdvancedTable from 'pb_advanced_table/docs'
|
8
7
|
import * as Avatar from 'pb_avatar/docs'
|
9
8
|
import * as AvatarActionButton from 'pb_avatar_action_button/docs'
|
10
9
|
import * as Background from 'pb_background/docs'
|
@@ -106,7 +105,6 @@ import * as Walkthrough from 'pb_walkthrough/docs'
|
|
106
105
|
import * as WeekdayStacked from 'pb_weekday_stacked/docs'
|
107
106
|
|
108
107
|
WebpackerReact.registerComponents({
|
109
|
-
...AdvancedTable,
|
110
108
|
...Avatar,
|
111
109
|
...AvatarActionButton,
|
112
110
|
...Background,
|
data/dist/menu.yml
CHANGED
@@ -13,447 +13,345 @@ kits:
|
|
13
13
|
- name: "dialog"
|
14
14
|
platforms: *web
|
15
15
|
description:
|
16
|
-
status: "stable"
|
17
16
|
- name: "fixed_confirmation_toast"
|
18
17
|
platforms: *web
|
19
18
|
description: Fixed Confirmation Toast is used as an alert. Success is used when a user successfully completes an action. Error is used when there is an error and the user cannot proceed. Neutral is used to display information to a user to complete a task.
|
20
|
-
status: "stable"
|
21
19
|
- name: "popover"
|
22
20
|
platforms: *web
|
23
21
|
description: A popover is a way to toggle content on top of other content. It can be used for small texts, small forms, or even dropdowns. By default, popover will toggle open/closed by simply clicking the trigger element.
|
24
|
-
status: "stable"
|
25
22
|
- name: "tooltip"
|
26
23
|
platforms: *web
|
27
24
|
description:
|
28
|
-
status: "stable"
|
29
25
|
- name: buttons
|
30
26
|
description: Buttons are used primarily for actions, such as “Save” and “Cancel”. Link Buttons are used for less important or less commonly used actions, such as “view shipping settings”.
|
31
27
|
components:
|
32
28
|
- name: "button"
|
33
29
|
platforms: *web
|
34
30
|
description:
|
35
|
-
status: "stable"
|
36
31
|
- name: "button_toolbar"
|
37
32
|
platforms: *web
|
38
33
|
description: This kit should primarily hold the most commonly used buttons.
|
39
|
-
status: "stable"
|
40
34
|
- name: "circle_icon_button"
|
41
35
|
platforms: *web
|
42
36
|
description: When using Icon Circle Button, the icon must be clear a clear indication of what the button does because there is no text.
|
43
|
-
status: "stable"
|
44
37
|
- name: data_visualization
|
45
38
|
description:
|
46
39
|
components:
|
47
40
|
- name: "map"
|
48
41
|
platforms: *react_only
|
49
42
|
description: This kit provides a wrapping class to place around the MapLibre library.
|
50
|
-
status: "stable"
|
51
43
|
- name: "table"
|
52
44
|
platforms: *web
|
53
45
|
description: Tables display a collection of structured data and typically have the ability to sort, filter, and paginate data.
|
54
|
-
status: "stable"
|
55
|
-
- name: "advanced_table"
|
56
|
-
platforms: *react_only
|
57
|
-
description: The Advanced Table can be used to display complex, nested data in a way that allows for expansion and/or sorting.
|
58
|
-
status: "beta"
|
59
46
|
- name: "list"
|
60
47
|
platforms: *web
|
61
48
|
description: Lists display a vertical set of related content.
|
62
|
-
status: "stable"
|
63
49
|
- name: "filter"
|
64
50
|
platforms: *web
|
65
51
|
description: This kit can be implemented in a variety of ways. To see examples of how to implement this kit in production visit the /dev_docs/search page in production.
|
66
|
-
status: "stable"
|
67
52
|
- name: "distribution_bar"
|
68
53
|
platforms: *web
|
69
54
|
description: Can be used in the same way a pie chart can be used. By default, Distribution Bar comparatively represents data without numbers.
|
70
|
-
status: "stable"
|
71
55
|
- name: "legend"
|
72
56
|
platforms: *web
|
73
57
|
description: A key used to compare the variables and their value in any given graph.
|
74
|
-
status: "stable"
|
75
58
|
- name: "gauge"
|
76
59
|
platforms: *web
|
77
60
|
description:
|
78
|
-
status: "stable"
|
79
61
|
- name: "bar_graph"
|
80
62
|
platforms: *web
|
81
63
|
description: Bar graphs are used to compare data. Bar graphs are not typically used to show percentages.
|
82
|
-
status: "stable"
|
83
64
|
- name: "circle_chart"
|
84
65
|
platforms: *web
|
85
66
|
description:
|
86
|
-
status: "stable"
|
87
67
|
- name: "line_graph"
|
88
68
|
platforms: *web
|
89
69
|
description: Line graphs are used to show changes in data over time.
|
90
|
-
status: "stable"
|
91
70
|
- name: "treemap_chart"
|
92
71
|
platforms: *web
|
93
72
|
description: Treemap charts are used to compare the relative size of groups of data. They can also use a nested data structure, allowing a user to drill down into a group to see its constituent data points.
|
94
|
-
status: "stable"
|
95
73
|
- name: date_and_time_text_patterns
|
96
74
|
description: ""
|
97
75
|
components:
|
98
76
|
- name: "date"
|
99
77
|
platforms: *web
|
100
78
|
description: Use to display the date. Year will not display if it is the current year.
|
101
|
-
status: "stable"
|
102
79
|
- name: "date_range_inline"
|
103
80
|
platforms: *web
|
104
81
|
description: Use to display a date range. Year will not show if it is the current year.
|
105
|
-
status: "stable"
|
106
82
|
- name: "date_range_stacked"
|
107
83
|
platforms: *web
|
108
|
-
description:
|
109
|
-
status: "stable"
|
84
|
+
description:
|
110
85
|
- name: "date_stacked"
|
111
86
|
platforms: *web
|
112
87
|
description: Use to display the date, stacking month and day. Year will not show if it is the current year.
|
113
|
-
status: "stable"
|
114
88
|
- name: "date_time"
|
115
89
|
platforms: *web
|
116
90
|
description: Date Time is a composite kit that leverages the Date and Time kits. The Date Time kit is affected by time zones and defaults to "America/New_York".
|
117
91
|
- name: "date_time_stacked"
|
118
92
|
platforms: *web
|
119
93
|
description:
|
120
|
-
status: "stable"
|
121
94
|
- name: "date_year_stacked"
|
122
95
|
platforms: *web
|
123
96
|
description: This kit is a simple option for displaying dates in a month, day and the year format.
|
124
|
-
status: "stable"
|
125
97
|
- name: "time"
|
126
98
|
platforms: *web
|
127
99
|
description: This kit consist of large display and table display format. It includes and icon, and a time zone.
|
128
|
-
status: "stable"
|
129
100
|
- name: "time_range_inline"
|
130
101
|
platforms: *web
|
131
102
|
description:
|
132
|
-
status: "stable"
|
133
103
|
- name: "time_stacked"
|
134
104
|
platforms: *web
|
135
105
|
description:
|
136
|
-
status: "stable"
|
137
106
|
- name: "timestamp"
|
138
107
|
platforms: *all
|
139
108
|
description: This low profile kit displays time. Elapsed, current, future, or otherwise.
|
140
|
-
status: "stable"
|
141
109
|
- name: "weekday_stacked"
|
142
110
|
platforms: *web
|
143
111
|
description:
|
144
|
-
status: "stable"
|
145
112
|
- name: form_and_dashboard_text_patterns
|
146
113
|
description: ""
|
147
114
|
components:
|
148
115
|
- name: "contact"
|
149
116
|
platforms: *web
|
150
117
|
description: Use to display customer's or user's contact information.
|
151
|
-
status: "stable"
|
152
118
|
- name: "currency"
|
153
119
|
platforms: *web
|
154
120
|
description: Use to display monetary amounts, typically on dashboards or other layouts to show an overview or summary. User understanding increase when paired with labels.
|
155
|
-
status: "stable"
|
156
121
|
- name: "home_address_street"
|
157
122
|
platforms: *web
|
158
123
|
description: This kit can be used to display the address for a homeowner/project. It contains street address, APT format, City, state and zip. A Project hashtag can be used as a prop to link back to a project.
|
159
|
-
status: "stable"
|
160
124
|
- name: "label_pill"
|
161
125
|
platforms: *web
|
162
126
|
description: This kit combines the caption and pill kit with all its variants.
|
163
|
-
status: "stable"
|
164
127
|
- name: "label_value"
|
165
128
|
platforms: *web
|
166
129
|
description: This kit can be very versatile when used to display text data.
|
167
|
-
status: "stable"
|
168
130
|
- name: "person"
|
169
131
|
platforms: *web
|
170
132
|
description: This kit is broken down into a first name last name format with normal and bold weighted text.
|
171
|
-
status: "stable"
|
172
133
|
- name: "person_contact"
|
173
134
|
platforms: *web
|
174
135
|
description: This kit can be used to display a person contact information.
|
175
|
-
status: "stable"
|
176
136
|
- name: "source"
|
177
137
|
platforms: *web
|
178
138
|
description: General use is to describe the discovery of businesses, customers, etc. This kit can also be used for other purposes as well.
|
179
|
-
status: "stable"
|
180
139
|
- name: "dashboard_value"
|
181
140
|
platforms: *web
|
182
141
|
description: Use in dashboards to give the viewer a quick overview of important metrics. If want to show currency, use Currency Kit.
|
183
|
-
status: "stable"
|
184
142
|
- name: "stat_change"
|
185
143
|
platforms: *web
|
186
144
|
description: Displays the increase, decrease, or neutral change in data.
|
187
|
-
status: "stable"
|
188
145
|
- name: "stat_value"
|
189
146
|
platforms: *web
|
190
147
|
description: This kit was cerated for the main use as a dashboard display for numbers. A large label is an optional part if it needs more clarity.
|
191
|
-
status: "stable"
|
192
148
|
- name: "title_count"
|
193
149
|
platforms: *web
|
194
150
|
description: This kits consists of title kit and body text. It is used to display a title and a count (numbers). It has a base size and a large formation for dashboard use.
|
195
|
-
status: "stable"
|
196
151
|
- name: "title_detail"
|
197
152
|
platforms: *web
|
198
153
|
description: This kit can be used in many versatile ways. It consist of a title 4 and light body text kit.
|
199
|
-
status: "stable"
|
200
154
|
- name: form_elements
|
201
155
|
description:
|
202
156
|
components:
|
203
157
|
- name: "file_upload"
|
204
158
|
platforms: *web
|
205
159
|
description:
|
206
|
-
status: "stable"
|
207
160
|
- name: "toggle"
|
208
161
|
platforms: *web
|
209
162
|
description: Physical switch that allows users to turn things on or off. Used for applying system states, presenting binary options and activating a state.
|
210
|
-
status: "stable"
|
211
163
|
- name: "form_pill"
|
212
164
|
platforms: *web
|
213
165
|
description:
|
214
|
-
status: "stable"
|
215
166
|
- name: "form"
|
216
167
|
platforms: *rails_only
|
217
168
|
description: The form kit provides consumers with a convenient, consistently styled <form> wrapper.
|
218
|
-
status: "stable"
|
219
169
|
- name: "form_group"
|
220
170
|
platforms: *web
|
221
171
|
description:
|
222
|
-
status: "stable"
|
223
172
|
- name: form_input
|
224
173
|
description: ""
|
225
174
|
components:
|
226
175
|
- name: "passphrase"
|
227
176
|
platforms: *web
|
228
177
|
description:
|
229
|
-
status: "stable"
|
230
178
|
- name: "phone_number_input"
|
231
179
|
platforms: *web
|
232
180
|
description:
|
233
|
-
status: "stable"
|
234
181
|
- name: "text_input"
|
235
182
|
platforms: *web
|
236
183
|
description: Area where user can enter small amount of text. Commonly used in forms.
|
237
|
-
status: "stable"
|
238
184
|
- name: "rich_text_editor"
|
239
185
|
platforms: *web
|
240
|
-
description:
|
241
|
-
status: "stable"
|
186
|
+
description:
|
242
187
|
- name: "textarea"
|
243
188
|
platforms: *web
|
244
189
|
description: Area where user can enter larger amounts of text. Commonly used in forms.
|
245
|
-
status: "stable"
|
246
190
|
- name: "typeahead"
|
247
191
|
platforms: *web
|
248
192
|
description: Typeahead is auto suggestion or completion based on what the user is starting to type, gets refined as the user types more.
|
249
|
-
status: "stable"
|
250
193
|
- name: form_selection
|
251
194
|
description:
|
252
195
|
components:
|
253
196
|
- name: "date_picker"
|
254
197
|
platforms: *web
|
255
198
|
description: Playbook's date picker is built using flatpickr, a vanilla js library. Common date picker use cases and features have been adapted into simple prop based configuration detailed in the docs below.
|
256
|
-
status: "stable"
|
257
199
|
- name: "multi_level_select"
|
258
200
|
platforms: *web
|
259
201
|
description: The MultiLevelSelect kit renders a multi leveled select dropdown based on data from the user.
|
260
|
-
status: "stable"
|
261
202
|
- name: "select"
|
262
203
|
platforms: *web
|
263
204
|
description: Select displays multiple options for a user to pick from in a dropdown menu. User selects one option.
|
264
|
-
status: "stable"
|
265
205
|
- name: "selectable_card"
|
266
206
|
platforms: *web
|
267
207
|
description: Cards for information/content that can be selected. There is design for unselected and selected states. Typically used as a form element.
|
268
|
-
status: "stable"
|
269
208
|
- name: "selectable_card_icon"
|
270
209
|
platforms: *web
|
271
210
|
description:
|
272
|
-
status: "stable"
|
273
211
|
- name: "selectable_icon"
|
274
212
|
platforms: *web
|
275
213
|
description:
|
276
|
-
status: "stable"
|
277
214
|
- name: "radio"
|
278
215
|
platforms: *all
|
279
216
|
description: Radio is a control that allows the user to only choose one predefined option.
|
280
|
-
status: "stable"
|
281
217
|
- name: "checkbox"
|
282
218
|
platforms: *web
|
283
219
|
description: Checkbox is used for a list of selections that are meant to have one or more options checked.
|
284
|
-
status: "stable"
|
285
220
|
- name: "selectable_list"
|
286
221
|
platforms: *web
|
287
222
|
description:
|
288
|
-
status: "stable"
|
289
223
|
- name: icons_and_images
|
290
224
|
description: ""
|
291
225
|
components:
|
292
226
|
- name: "icon"
|
293
227
|
platforms: *web
|
294
228
|
description: An icon is a graphic symbol that represents an object (ie a file) or a function. They can be used to give the user feedback.
|
295
|
-
status: "stable"
|
296
229
|
- name: "icon_circle"
|
297
230
|
platforms: *web
|
298
231
|
description: Similar to Icon, Icon Circle is a graphical symbol within a circle used to visually indicate an object or function.
|
299
|
-
status: "stable"
|
300
232
|
- name: "icon_stat_value"
|
301
233
|
platforms: *web
|
302
234
|
description:
|
303
|
-
status: "stable"
|
304
235
|
- name: "icon_value"
|
305
236
|
platforms: *web
|
306
237
|
description: Icon Value leverages our icon kit, to display a value of some sort in the interface. Typically, this includes a numerical value.
|
307
|
-
status: "stable"
|
308
238
|
- name: "user_badge"
|
309
239
|
platforms: *web
|
310
240
|
description: This kit was created to display employee icons related to a Nitro user. Currently there is the PVI logo and the Million Dollar Rep Icon.
|
311
|
-
status: "stable"
|
312
241
|
- name: "image"
|
313
242
|
platforms: *web
|
314
243
|
description: A responsive image component.
|
315
|
-
status: "stable"
|
316
244
|
- name: "lightbox"
|
317
245
|
platforms: *react_only
|
318
246
|
description: The Lightbox kit is a popup window overlay that will appear on top of your webpage and cover the entirety of the screen.
|
319
|
-
status: "stable"
|
320
247
|
- name: "star_rating"
|
321
248
|
platforms: *web
|
322
249
|
description: A component to view other people’s opinions and experiences. Use when you want to show evaluation or a quick quantitative rating. Most effective when paired with reviews.
|
323
|
-
status: "stable"
|
324
250
|
- name: layout_and_structure
|
325
251
|
description:
|
326
252
|
components:
|
327
253
|
- name: "flex"
|
328
254
|
platforms: *web
|
329
255
|
description: This kit is used to build most of the complex interfaces. The Flex Kit is used the same way flex box is used.
|
330
|
-
status: "stable"
|
331
256
|
- name: "layout"
|
332
257
|
platforms: *web
|
333
258
|
description: Layouts used for positioning content inside of pages, cards, or containers.
|
334
|
-
status: "stable"
|
335
259
|
- name: "card"
|
336
260
|
platforms: *all
|
337
261
|
description:
|
338
|
-
status: "stable"
|
339
262
|
- name: "section_separator"
|
340
263
|
platforms: *web
|
341
264
|
description: Section separator is a divider line that compartmentalizes content, typically used on cards or white backgrounds.
|
342
|
-
status: "stable"
|
343
265
|
- name: "background"
|
344
266
|
platforms: *web
|
345
267
|
description: The background kit is used for adding a background to a page or to any container.
|
346
|
-
status: "stable"
|
347
268
|
- name: "collapsible"
|
348
269
|
platforms: *web
|
349
270
|
description:
|
350
|
-
status: "stable"
|
351
271
|
- name: message_text_patterns
|
352
272
|
description:
|
353
273
|
components:
|
354
274
|
- name: "highlight"
|
355
275
|
platforms: *web
|
356
276
|
description: Highlight is used to pick out or emphasize content.
|
357
|
-
status: "stable"
|
358
277
|
- name: "message"
|
359
278
|
platforms: *web
|
360
279
|
description: This multi kit consist of a an avatar, a status, a caption, a body text, and a time stamp. All which can be optional.
|
361
|
-
status: "stable"
|
362
280
|
- name: navigation
|
363
281
|
description:
|
364
282
|
components:
|
365
283
|
- name: "bread_crumbs"
|
366
284
|
platforms: *web
|
367
285
|
description: BreadCrumbs can be used for keeping a user aware of their route location.
|
368
|
-
status: "stable"
|
369
286
|
- name: "nav"
|
370
287
|
platforms: *web
|
371
288
|
description: The nav is a grouped set of links that take the user to another page, or tab through parts of a page. It comes in horizontal or vertical with several different variants.
|
372
|
-
status: "stable"
|
373
289
|
- name: "pagination"
|
374
290
|
platforms: *rails_only
|
375
291
|
description:
|
376
|
-
status: "stable"
|
377
292
|
- name: state_and_progress_indicators
|
378
293
|
description:
|
379
294
|
components:
|
380
295
|
- name: "loading_inline"
|
381
296
|
platforms: *web
|
382
297
|
description: The loading kit is used to indicate to users that a page is still loading, or an action is still being processed.
|
383
|
-
status: "stable"
|
384
298
|
- name: "progress_pills"
|
385
299
|
platforms: *web
|
386
300
|
description: Progress pills indicate a specific point in time of a series of sequential steps. They are used to track progress of something over time.
|
387
|
-
status: "stable"
|
388
301
|
- name: "progress_simple"
|
389
302
|
platforms: *web
|
390
303
|
description: Displays the current progress of an operation flow. User understanding increases when paired with labels or numbers.
|
391
304
|
- name: "progress_step"
|
392
305
|
platforms: *web
|
393
306
|
description: "Progress step kit is used to show the progress of a process. There are three types of steps in this kit: completed, active, and inactive."
|
394
|
-
status: "stable"
|
395
307
|
- name: "walkthrough"
|
396
308
|
platforms: *web
|
397
309
|
description:
|
398
|
-
status: "stable"
|
399
310
|
- name: "timeline"
|
400
311
|
platforms: *web
|
401
312
|
description: The timeline kit can use two different line styles in the same timeline - solid and dotted line styles.
|
402
|
-
status: "stable"
|
403
313
|
- name: tags
|
404
314
|
description:
|
405
315
|
components:
|
406
316
|
- name: "badge"
|
407
317
|
platforms: *web
|
408
318
|
description: Badges can be used for notification, tags, and status. They are used for count and numbers.
|
409
|
-
status: "stable"
|
410
319
|
- name: "pill"
|
411
320
|
platforms: *all
|
412
321
|
description: A pill uses both a keyword and a specific color to categorize an item.
|
413
|
-
status: "stable"
|
414
322
|
- name: "hashtag"
|
415
323
|
platforms: *web
|
416
324
|
description: Hashtag is used to display home, project and other forms of IDs. They can be used as a link.
|
417
|
-
status: "stable"
|
418
325
|
- name: typography
|
419
326
|
description: ""
|
420
327
|
components:
|
421
328
|
- name: "body"
|
422
329
|
platforms: *web
|
423
330
|
description: Default text style for paragraphs. Follow hiearchy when using "light" or "lighter" variants to deemphasize text — default style should be followed by "light" followed by "lighter".
|
424
|
-
status: "stable"
|
425
331
|
- name: "caption"
|
426
332
|
platforms: *web
|
427
333
|
description: Use to provide supplementary context. Default size is best when providing supplementary context to a small section (i.e. label for a text input, label for a paragraph). Use large caption when supplementary text covers more content.
|
428
|
-
status: "stable"
|
429
334
|
- name: "detail"
|
430
335
|
platforms: *web
|
431
336
|
description: Used for tables or designs with large amounts of data or text.
|
432
|
-
status: "stable"
|
433
337
|
- name: "title"
|
434
338
|
platforms: *web
|
435
339
|
description: Typically used as headers. Follow semantic hierarchy — Title 1s should be followed by Title 2s followed by Title 3s and so on, without skipping any levels.
|
436
|
-
status: "stable"
|
437
340
|
- name: user
|
438
341
|
description:
|
439
342
|
components:
|
440
343
|
- name: "avatar"
|
441
344
|
platforms: *all
|
442
345
|
description: Avatar displays a user's picture. This helps aid easy recognition of the user. This kit is normally not used by itself, but rather used within other kits. The only time Avatar should be used instead of the User kit is when you are not going to display the user's name.
|
443
|
-
status: "stable"
|
444
346
|
- name: "avatar_action_button"
|
445
347
|
platforms: *web
|
446
348
|
description:
|
447
|
-
status: "stable"
|
448
349
|
- name: "multiple_users"
|
449
350
|
platforms: *web
|
450
351
|
description: The multiple users kit is used to show that more than one user is associated to an action or item.
|
451
|
-
status: "stable"
|
452
352
|
- name: "multiple_users_stacked"
|
453
353
|
platforms: *web
|
454
354
|
description: Multiple users stacked is used in tight spaces, where we need to indicate that multiple users are associated to a specific action or item.
|
455
|
-
status: "stable"
|
456
355
|
- name: "user"
|
457
356
|
platforms: *web
|
458
|
-
description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.
|
459
|
-
status: "stable"
|
357
|
+
description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.
|