@react-spectrum/list 3.0.0-alpha.1 → 3.0.0-alpha.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/main.css +1 -1
  2. package/dist/main.css.map +1 -1
  3. package/dist/main.js +244 -82
  4. package/dist/main.js.map +1 -1
  5. package/dist/module.js +225 -78
  6. package/dist/module.js.map +1 -1
  7. package/dist/types.d.ts +10 -3
  8. package/dist/types.d.ts.map +1 -1
  9. package/package.json +30 -29
  10. package/src/ListView.tsx +74 -18
  11. package/src/ListViewItem.tsx +81 -15
  12. package/src/listview.css +166 -9
package/src/listview.css CHANGED
@@ -1,9 +1,20 @@
1
+
2
+ :root {
3
+ --spectrum-listview-item-compact-padding-y: var(--spectrum-global-dimension-size-50);
4
+ --spectrum-listview-item-regular-padding-y: var(--spectrum-global-dimension-size-75);
5
+ --spectrum-listview-item-spacious-padding-y: var(--spectrum-global-dimension-size-100);
6
+ --spectrum-listview-border-width: var(--spectrum-table-border-size, var(--spectrum-alias-border-size-thin));
7
+ --spectrum-listview-border-radius: var(--spectrum-table-border-radius, var(--spectrum-alias-border-radius-regular));
8
+ --spectrum-listview-item-start-end-border-radius: calc(var(--spectrum-listview-border-radius) - var(--spectrum-listview-border-width));
9
+ }
10
+
1
11
  .react-spectrum-ListView {
12
+ box-sizing: border-box;
2
13
  border-color: var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
3
14
  border-style: solid;
4
15
  position: relative;
5
- border-width: var(--spectrum-table-border-size, var(--spectrum-alias-border-size-thin));
6
- border-radius: var(--spectrum-table-border-radius, var(--spectrum-alias-border-radius-regular));
16
+ border-width: var(--spectrum-listview-border-width);
17
+ border-radius: var(--spectrum-listview-border-radius);
7
18
  overflow: auto;
8
19
  vertical-align: var(--spectrum-table-cell-vertical-alignment);
9
20
  border-collapse: separate;
@@ -12,34 +23,169 @@
12
23
  padding: 0;
13
24
  background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));
14
25
  outline: 0;
26
+
27
+ [role="row"] {
28
+ outline: none;
29
+ }
30
+ }
31
+
32
+ .react-spectrum-ListView--quiet {
33
+ background-color: var(--spectrum-alias-background-color-transparent);
34
+ border-width: 0;
15
35
  }
16
36
 
17
37
  .react-spectrum-ListViewItem {
18
38
  display: grid; /* TODO: define grid areas */
19
- border-bottom: 1px solid var(--spectrum-tabel-cell-border-color, var(--spectrum-global-color-gray-300));
39
+ border: 1px solid transparent;
40
+ border-bottom-color: var(--spectrum-table-cell-border-color, var(--spectrum-global-color-gray-300));
20
41
  box-sizing: border-box;
21
42
  font-size: var(--spectrum-table-cell-text-size, var(--spectrum-alias-font-size-default));
22
43
  font-weight: var(--spectrum-table-cell-text-font-weight, var(--spectrum-global-font-weight-regular));
23
44
  line-height: calc(var(--spectrum-table-cell-text-size, var(--spectrum-alias-font-size-default)) * var(--spectrum-table-cell-text-line-height, var(--spectrum-alias-body-text-line-height)) - 1px);
24
- padding: var(--spectrum-global-dimension-size-125) var(--spectrum-table-cell-padding-x, var(--spectrum-global-dimension-size-200));
45
+ padding: var(--spectrum-listview-item-regular-padding-y) var(--spectrum-global-dimension-size-150);
25
46
  transition: background-color var(--spectrum-global-animation-duration-100) ease-in-out;
26
47
  position: relative;
27
- background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));
48
+ /*background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));*/
28
49
  color: var(--spectrum-table-cell-text-color, var(--spectrum-alias-text-color));
29
50
  outline: 0;
51
+ min-height: var(--spectrum-global-dimension-size-500);
52
+
53
+ .react-spectrum-ListView--emphasized & {
54
+ &.is-selected {
55
+ background-color: var(--spectrum-table-row-background-color-selected);
56
+ border-color: var(--spectrum-global-color-blue-500);
57
+ &.is-hovered,
58
+ &.is-active {
59
+ background-color: var(--spectrum-table-row-background-color-selected);
60
+ }
61
+
62
+ /* avoid double border for adjacent selected items */
63
+ &.is-previous-selected {
64
+ &:not(.is-focused) {
65
+ border-top-color: transparent;
66
+ }
67
+ }
68
+ }
69
+ }
30
70
 
31
71
  &.is-hovered,
32
72
  &.is-focused {
33
- background-color: var(--spectrum-table-row-background-color-hover);
73
+ background-color: var(--spectrum-table-row-background-color-hover);
34
74
  }
35
75
 
36
76
  &:focus-ring {
37
- background-color: var(--spectrum-table-row-background-color-hover);
38
- box-shadow: inset 0 0 0 2px var(--spectrum-table-cell-border-color-key-focus);
39
- border-radius: var(--spectrum-table-cell-border-radius-key-focus);
77
+ background-color: var(--spectrum-table-row-background-color-hover);
78
+ box-shadow: inset 0 0 0 1px var(--spectrum-table-cell-border-color-key-focus);
79
+ border-color: var(--spectrum-global-color-blue-500);
80
+ }
81
+
82
+ &.is-active {
83
+ background-color: var(--spectrum-table-row-background-color-down);
84
+ }
85
+
86
+ &.is-selected {
87
+ background-color: var(--spectrum-table-row-background-color-hover);
88
+
89
+ &.is-hovered,
90
+ &.is-active {
91
+ background-color: var(--spectrum-table-row-background-color-hover);
92
+ }
93
+ }
94
+
95
+ &.has-checkbox {
96
+ /* have to eliminate vertical padding to allow proper vertical alignment */
97
+ padding-top: 0px;
98
+ padding-bottom: 0px;
99
+ }
100
+
101
+ /* give first and last items border-radius to match listview container */
102
+ div:first-child > div[role="row"] > & {
103
+ border-start-start-radius: var(--spectrum-listview-item-start-end-border-radius);
104
+ border-start-end-radius: var(--spectrum-listview-item-start-end-border-radius);
105
+ }
106
+ div:last-child > div[role="row"] > & {
107
+ border-end-start-radius: var(--spectrum-listview-item-start-end-border-radius);
108
+ border-end-end-radius: var(--spectrum-listview-item-start-end-border-radius);
109
+ }
110
+ }
111
+
112
+ .react-spectrum-ListView--compact .react-spectrum-ListViewItem {
113
+ padding-top: var(--spectrum-listview-item-compact-padding-y);
114
+ padding-bottom: var(--spectrum-listview-item-compact-padding-y);
115
+ min-height: var(--spectrum-global-dimension-size-400);
116
+ }
117
+
118
+ .react-spectrum-ListView--spacious .react-spectrum-ListViewItem {
119
+ padding-top: var(--spectrum-listview-item-spacious-padding-y);
120
+ padding-bottom: var(--spectrum-listview-item-spacious-padding-y);
121
+ min-height: var(--spectrum-global-dimension-size-600);
122
+ }
123
+
124
+ .react-spectrum-ListViewItem-grid {
125
+ display: grid;
126
+ grid-template-columns: auto auto auto 1fr auto auto;
127
+ grid-template-rows: 1fr auto;
128
+ grid-template-areas:
129
+ "checkbox icon image content actions actionmenu chevron"
130
+ "checkbox icon image description actions actionmenu chevron"
131
+ ;
132
+ align-items: center;
133
+ }
134
+
135
+ .react-spectrum-ListViewItem-checkbox {
136
+ grid-area: checkbox;
137
+ align-items: center;
138
+ justify-items: center;
139
+ min-height: 0;
140
+ height: 100%;
141
+ > span {
142
+ margin: 0;
143
+ }
144
+ }
145
+
146
+ .react-spectrum-ListViewItem-icon,
147
+ .react-spectrum-ListViewItem-image {
148
+ grid-area: image;
149
+ align-items: center;
150
+ justify-items: center;
151
+
152
+ [dir="ltr"] & {
153
+ padding-right: var(--spectrum-global-dimension-size-100);
154
+ }
155
+ [dir="rtl"] & {
156
+ padding-left: var(--spectrum-global-dimension-size-100);
40
157
  }
41
158
  }
42
159
 
160
+ .react-spectrum-ListViewItem-image {
161
+ border-radius: var(--spectrum-global-dimension-size-25);
162
+ width: var(--spectrum-global-dimension-size-400);
163
+ height: var(--spectrum-global-dimension-size-400);
164
+ }
165
+
166
+ .react-spectrum-ListViewItem-content,
167
+ .react-spectrum-ListViewItem-description {
168
+ flex-grow: 1;
169
+ }
170
+
171
+ .react-spectrum-ListViewItem-content {
172
+ grid-area: content;
173
+ }
174
+
175
+ .react-spectrum-ListViewItem-description {
176
+ grid-area: description;
177
+ }
178
+
179
+ .react-spectrum-ListViewItem-actions {
180
+ grid-area: actions;
181
+ flex-grow: 0;
182
+ flex-shrink: 0;
183
+ }
184
+
185
+ .react-spectrum-ListViewItem-actionmenu {
186
+ grid-area: actionmenu;
187
+ }
188
+
43
189
  .react-spectrum-ListView-centeredWrapper {
44
190
  display: flex;
45
191
  align-items: center;
@@ -47,3 +193,14 @@
47
193
  width: 100%;
48
194
  height: 100%;
49
195
  }
196
+
197
+ .react-spectrum-ListViewItem-parentIndicator {
198
+ grid-area: chevron;
199
+
200
+ [dir="ltr"] & {
201
+ padding-left: var(--spectrum-global-dimension-size-75);
202
+ }
203
+ [dir="rtl"] & {
204
+ padding-right: var(--spectrum-global-dimension-size-75);
205
+ }
206
+ }