Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 938f052

Browse files
yihuiliaoyihuiliao
authored
chore: testing follow up for highlight selection & dnd (#10084)
* align labeledvalue inputs when in a custom layout form * fix background when isQuiet and highlight selection * improve dnd style * formatting * small fix to border radius
1 parent 4b7e804 commit 938f052

3 files changed

Lines changed: 31 additions & 38 deletions

File tree

‎packages/@react-spectrum/s2/src/ListView.tsx‎

Lines changed: 27 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -426,20 +426,7 @@ const listitem = style<
426426
}
427427
>({
428428
outlineStyle: {
429-
default: 'none',
430-
isDropTarget: 'solid'
431-
},
432-
outlineWidth: {
433-
isDropTarget: 2
434-
},
435-
outlineOffset: {
436-
isDropTarget: -2
437-
},
438-
outlineColor: {
439-
isDropTarget: 'blue-800',
440-
forcedColors: {
441-
isDropTarget: 'Highlight'
442-
}
429+
default: 'none'
443430
},
444431
boxSizing: 'border-box',
445432
columnGap: 0,
@@ -495,13 +482,16 @@ const listitem = style<
495482
type: 'borderColor',
496483
value: {
497484
default: 'gray-300',
485+
forcedColors: 'ButtonBorder',
498486
isSelected: {
499487
selectionStyle: {
500-
highlight: 'blue-900',
488+
highlight: {
489+
default: 'blue-900',
490+
forcedColors: 'Highlight'
491+
},
501492
checkbox: 'gray-300'
502493
}
503-
},
504-
forcedColors: 'ButtonBorder'
494+
}
505495
}
506496
},
507497
borderTopWidth: 0,
@@ -525,16 +515,6 @@ const listitem = style<
525515
type: 'borderTopStartRadius',
526516
value: 'default'
527517
},
528-
borderTopStartRadius: {
529-
isDropTarget: {
530-
isFirstItem: 'default'
531-
}
532-
},
533-
borderTopEndRadius: {
534-
isDropTarget: {
535-
isFirstItem: 'default'
536-
}
537-
},
538518
forcedColorAdjust: 'none'
539519
});
540520

@@ -629,7 +609,8 @@ const listRowBackground = style<
629609
}
630610
},
631611
isQuiet: 'default'
632-
}
612+
},
613+
isDropTarget: insetBorderRadius
633614
},
634615
borderTopEndRadius: {
635616
isQuiet: 'default',
@@ -642,7 +623,8 @@ const listRowBackground = style<
642623
}
643624
},
644625
isQuiet: 'default'
645-
}
626+
},
627+
isDropTarget: insetBorderRadius
646628
},
647629
borderBottomStartRadius: {
648630
isQuiet: 'default',
@@ -655,7 +637,8 @@ const listRowBackground = style<
655637
}
656638
},
657639
isQuiet: 'default'
658-
}
640+
},
641+
isDropTarget: insetBorderRadius
659642
},
660643
borderBottomEndRadius: {
661644
isQuiet: 'default',
@@ -668,7 +651,8 @@ const listRowBackground = style<
668651
}
669652
},
670653
isQuiet: 'default'
671-
}
654+
},
655+
isDropTarget: insetBorderRadius
672656
},
673657
borderTopWidth: {
674658
default: {
@@ -677,7 +661,8 @@ const listRowBackground = style<
677661
highlight: 1
678662
}
679663
},
680-
isPrevSelected: 0
664+
isPrevSelected: 0,
665+
isDropTarget: 2
681666
},
682667
borderBottomWidth: {
683668
default: {
@@ -686,23 +671,26 @@ const listRowBackground = style<
686671
highlight: 1
687672
}
688673
},
689-
isNextSelected: 0
674+
isNextSelected: 0,
675+
isDropTarget: 2
690676
},
691677
borderStartWidth: {
692678
default: {
693679
selectionStyle: {
694680
checkbox: 0,
695681
highlight: 1
696682
}
697-
}
683+
},
684+
isDropTarget: 2
698685
},
699686
borderEndWidth: {
700687
default: {
701688
selectionStyle: {
702689
checkbox: 0,
703690
highlight: 1
704691
}
705-
}
692+
},
693+
isDropTarget: 2
706694
},
707695
borderStyle: 'solid',
708696
borderColor: {
@@ -712,6 +700,10 @@ const listRowBackground = style<
712700
checkbox: 'transparent',
713701
highlight: '--borderColor'
714702
}
703+
},
704+
isDropTarget: 'blue-800',
705+
forcedColors: {
706+
isDropTarget: 'Highlight'
715707
}
716708
}
717709
});

‎packages/@react-spectrum/s2/src/TableView.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1924,6 +1924,7 @@ const rowBackgroundColor = {
19241924
selectionStyle: {
19251925
highlight: {
19261926
default: 'gray-25',
1927+
isQuiet: '--s2-container-bg',
19271928
isHovered: colorMix('gray-25', 'gray-900', 7), // table-row-hover-color
19281929
isPressed: colorMix('gray-25', 'gray-900', 10), // table-row-hover-color
19291930
isSelected: {

‎packages/dev/s2-docs/pages/s2/LabeledValue.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
149149
<Form/* PROPS */>
150150
<div
151151
role="group"
152-
className={style({display: 'flex', alignItems: 'center', gap: 48})}>
152+
className={style({display: 'flex', alignItems: 'end', gap: 48})}>
153153
<ComboBox label="Duration type" styles={style({width: 120})}>
154154
<ComboBoxItem>Simple</ComboBoxItem>
155155
<ComboBoxItem>Calculated assignment</ComboBoxItem>
@@ -165,7 +165,7 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
165165
<div
166166
role="group"
167167
aria-labelledby="working hours"
168-
className={style({display: 'flex', alignItems: 'center', gap: 48, font: 'ui'})}>
168+
className={style({display: 'flex', alignItems: 'end', gap: 48, font: 'ui'})}>
169169
<NumberField
170170
label="Planned hours"
171171
placeholder="–"
@@ -181,7 +181,7 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
181181
<div
182182
role="group"
183183
aria-labelledby="working hours"
184-
className={style({display: 'flex', alignItems: 'center', gap: 48, font: 'ui'})}>
184+
className={style({display: 'flex', alignItems: 'end', gap: 48, font: 'ui'})}>
185185
<LabeledValue
186186
label="Project duration"
187187
value={1}

0 commit comments

Comments
 (0)