@@ -638,40 +638,45 @@ export const RequiredWithinForm = () => {
638
638
} ;
639
639
640
640
export const WithinDialog = ( ) => (
641
- < Dialog . Root >
642
- < Dialog . Trigger > Open Dialog</ Dialog . Trigger >
643
- < Dialog . Content aria-describedby = { undefined } >
644
- < Dialog . Title > A select in a dialog</ Dialog . Title >
645
- < Label >
646
- Choose a number:
647
- < Select . Root defaultValue = "2" >
648
- < Select . Trigger className = { triggerClass ( ) } >
649
- < Select . Value />
650
- < Select . Icon />
651
- </ Select . Trigger >
652
- < Select . Portal >
653
- < Select . Content className = { contentClass ( ) } >
654
- < Select . ScrollUpButton className = { scrollUpButtonClass ( ) } > ▲</ Select . ScrollUpButton >
655
- < Select . Viewport className = { viewportClass ( ) } >
656
- { Array . from ( { length : 30 } , ( _ , i ) => (
657
- < Select . Item key = { i } className = { itemClass ( ) } value = { String ( i ) } >
658
- < Select . ItemText > Item { i } </ Select . ItemText >
659
- < Select . ItemIndicator className = { indicatorClass ( ) } >
660
- < TickIcon />
661
- </ Select . ItemIndicator >
662
- </ Select . Item >
663
- ) ) }
664
- </ Select . Viewport >
665
- < Select . ScrollDownButton className = { scrollDownButtonClass ( ) } >
666
- ▼
667
- </ Select . ScrollDownButton >
668
- </ Select . Content >
669
- </ Select . Portal >
670
- </ Select . Root >
671
- </ Label >
672
- < Dialog . Close > Close Dialog</ Dialog . Close >
673
- </ Dialog . Content >
674
- </ Dialog . Root >
641
+ < div style = { { height : '120vh' } } >
642
+ < Dialog . Root >
643
+ < Dialog . Trigger > Open Dialog</ Dialog . Trigger >
644
+ < Dialog . Portal >
645
+ < Dialog . Overlay />
646
+ < Dialog . Content aria-describedby = { undefined } style = { { position : 'fixed' , top : 100 } } >
647
+ < Dialog . Title > A select in a dialog</ Dialog . Title >
648
+ < Label >
649
+ Choose a number:
650
+ < Select . Root defaultValue = "2" >
651
+ < Select . Trigger className = { triggerClass ( ) } >
652
+ < Select . Value />
653
+ < Select . Icon />
654
+ </ Select . Trigger >
655
+ < Select . Portal >
656
+ < Select . Content className = { contentClass ( ) } >
657
+ < Select . ScrollUpButton className = { scrollUpButtonClass ( ) } > ▲</ Select . ScrollUpButton >
658
+ < Select . Viewport className = { viewportClass ( ) } >
659
+ { Array . from ( { length : 30 } , ( _ , i ) => (
660
+ < Select . Item key = { i } className = { itemClass ( ) } value = { String ( i ) } >
661
+ < Select . ItemText > Item { i } </ Select . ItemText >
662
+ < Select . ItemIndicator className = { indicatorClass ( ) } >
663
+ < TickIcon />
664
+ </ Select . ItemIndicator >
665
+ </ Select . Item >
666
+ ) ) }
667
+ </ Select . Viewport >
668
+ < Select . ScrollDownButton className = { scrollDownButtonClass ( ) } >
669
+ ▼
670
+ </ Select . ScrollDownButton >
671
+ </ Select . Content >
672
+ </ Select . Portal >
673
+ </ Select . Root >
674
+ </ Label >
675
+ < Dialog . Close > Close Dialog</ Dialog . Close >
676
+ </ Dialog . Content >
677
+ </ Dialog . Portal >
678
+ </ Dialog . Root >
679
+ </ div >
675
680
) ;
676
681
677
682
export const ChromaticShortOptionsPaddedContent = ( ) => (
0 commit comments