Skip to content

Commit f7373c3

Browse files
michaeltarantomichaeltaranto
authored
Refine scrollbars support query (#2059)
1 parent fa82ffe commit f7373c3

3 files changed

Lines changed: 90 additions & 90 deletions

File tree

‎packages/braid-design-system/src/lib/components/Table/Table.docs.tsx‎

Lines changed: 87 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -523,92 +523,94 @@ const docs: ComponentDocs = {
523523
</>
524524
),
525525
Example: ({ setDefaultState, getState }) =>
526-
source(
527-
<>
528-
{setDefaultState('rows', [
529-
{
530-
column1: 'Adipiscing elit',
531-
column2: 'Praesent semper',
532-
column3: 'Interdum viverra',
533-
column4: 'Sed convallis ',
534-
column5: 'Phasellus condimentum',
535-
column6: 'Cras finibus',
536-
column7: 'Rutrum lacinia',
537-
},
538-
{
539-
column1: 'Donec ibero',
540-
column2: 'Erat facilisis',
541-
column3: 'Quis dictum',
542-
column4: 'Quisque lobortis',
543-
column5: 'Aenean bibendum',
544-
column6: 'Maximus neque',
545-
column7: 'Gravida imperdiet',
546-
},
547-
{
548-
column1: 'Nullam rhoncus',
549-
column2: 'Tellus vestibulum',
550-
column3: 'Purus vitae',
551-
column4: 'Porttitor sapien',
552-
column5: 'Morbi cursus',
553-
column6: 'Odio aliquet',
554-
column7: 'Commodo quisque',
555-
},
556-
])}
557-
<Table label="Horizontal scrolling example">
558-
<TableHeader>
559-
<TableRow>
560-
<TableHeaderCell>
561-
<Text>Lorem</Text>
562-
</TableHeaderCell>
563-
<TableHeaderCell>
564-
<Text>Ipsum</Text>
565-
</TableHeaderCell>
566-
<TableHeaderCell>
567-
<Text>Dolor</Text>
568-
</TableHeaderCell>
569-
<TableHeaderCell>
570-
<Text>Sit</Text>
571-
</TableHeaderCell>
572-
<TableHeaderCell>
573-
<Text>Amet</Text>
574-
</TableHeaderCell>
575-
<TableHeaderCell>
576-
<Text>Consectetur</Text>
577-
</TableHeaderCell>
578-
<TableHeaderCell>
579-
<Text>Pharetra</Text>
580-
</TableHeaderCell>
581-
</TableRow>
582-
</TableHeader>
583-
<TableBody>
584-
{getState('rows').map((row: any) => (
585-
<TableRow key={row.column1}>
586-
<TableCell>
587-
<Text>{row.column1}</Text>
588-
</TableCell>
589-
<TableCell>
590-
<Text>{row.column2}</Text>
591-
</TableCell>
592-
<TableCell>
593-
<Text>{row.column3}</Text>
594-
</TableCell>
595-
<TableCell>
596-
<Text>{row.column4}</Text>
597-
</TableCell>
598-
<TableCell>
599-
<Text>{row.column5}</Text>
600-
</TableCell>
601-
<TableCell>
602-
<Text>{row.column6}</Text>
603-
</TableCell>
604-
<TableCell>
605-
<Text>{row.column7}</Text>
606-
</TableCell>
526+
stripTypeAnyFromCode(
527+
source(
528+
<>
529+
{setDefaultState('rows', [
530+
{
531+
column1: 'Adipiscing elit',
532+
column2: 'Praesent semper',
533+
column3: 'Interdum viverra',
534+
column4: 'Sed convallis ',
535+
column5: 'Phasellus condimentum',
536+
column6: 'Cras finibus',
537+
column7: 'Rutrum lacinia',
538+
},
539+
{
540+
column1: 'Donec ibero',
541+
column2: 'Erat facilisis',
542+
column3: 'Quis dictum',
543+
column4: 'Quisque lobortis',
544+
column5: 'Aenean bibendum',
545+
column6: 'Maximus neque',
546+
column7: 'Gravida imperdiet',
547+
},
548+
{
549+
column1: 'Nullam rhoncus',
550+
column2: 'Tellus vestibulum',
551+
column3: 'Purus vitae',
552+
column4: 'Porttitor sapien',
553+
column5: 'Morbi cursus',
554+
column6: 'Odio aliquet',
555+
column7: 'Commodo quisque',
556+
},
557+
])}
558+
<Table label="Horizontal scrolling example">
559+
<TableHeader>
560+
<TableRow>
561+
<TableHeaderCell>
562+
<Text>Lorem</Text>
563+
</TableHeaderCell>
564+
<TableHeaderCell>
565+
<Text>Ipsum</Text>
566+
</TableHeaderCell>
567+
<TableHeaderCell>
568+
<Text>Dolor</Text>
569+
</TableHeaderCell>
570+
<TableHeaderCell>
571+
<Text>Sit</Text>
572+
</TableHeaderCell>
573+
<TableHeaderCell>
574+
<Text>Amet</Text>
575+
</TableHeaderCell>
576+
<TableHeaderCell>
577+
<Text>Consectetur</Text>
578+
</TableHeaderCell>
579+
<TableHeaderCell>
580+
<Text>Pharetra</Text>
581+
</TableHeaderCell>
607582
</TableRow>
608-
))}
609-
</TableBody>
610-
</Table>
611-
</>,
583+
</TableHeader>
584+
<TableBody>
585+
{getState('rows').map((row: any) => (
586+
<TableRow key={row.column1}>
587+
<TableCell>
588+
<Text>{row.column1}</Text>
589+
</TableCell>
590+
<TableCell>
591+
<Text>{row.column2}</Text>
592+
</TableCell>
593+
<TableCell>
594+
<Text>{row.column3}</Text>
595+
</TableCell>
596+
<TableCell>
597+
<Text>{row.column4}</Text>
598+
</TableCell>
599+
<TableCell>
600+
<Text>{row.column5}</Text>
601+
</TableCell>
602+
<TableCell>
603+
<Text>{row.column6}</Text>
604+
</TableCell>
605+
<TableCell>
606+
<Text>{row.column7}</Text>
607+
</TableCell>
608+
</TableRow>
609+
))}
610+
</TableBody>
611+
</Table>
612+
</>,
613+
),
612614
),
613615
},
614616
{

‎packages/braid-design-system/src/lib/components/private/scrollbars.css.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,9 @@ export const scrollbars = style([
1919
},
2020
}),
2121
{
22+
scrollbarColor: `${thumbColor} ${trackColor}`,
2223
'@supports': {
23-
'(scrollbar-color: auto)': {
24-
scrollbarColor: `${thumbColor} ${trackColor}`,
25-
},
26-
'selector(::-webkit-scrollbar)': {
24+
'not (scrollbar-color: auto)': {
2725
selectors: {
2826
'&::-webkit-scrollbar': {
2927
background: trackColor,

‎site/src/App/DocNavigation/DocDetails.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@ export const DocDetails = () => {
178178
<>
179179
<PageTitle title={docsName} />
180180
<Box display="flex" gap="xlarge">
181-
<Box flexGrow={1}>
181+
<Box flexGrow={1} minWidth={0}>
182182
<Stack space="xxlarge">
183183
<Stack space={outerSectionSpacing}>
184184
{docs.description ? (

0 commit comments

Comments
 (0)