Skip to content

Commit

Permalink
fix dropdown styles (#987)
Browse files Browse the repository at this point in the history 
* fix dropdown

* add tbody

* add dropdown example

* remove unused import

* remove top-left border rounding

* adapt border rounding

* improve example plus button

* use better variable for border color
  • Loading branch information
@Sebastian-ubs
Sebastian-ubs authored Jul 11, 2024
1 parent 9c589bb commit de550a1
Show file tree
Hide file tree
Showing 3 changed files with 148 additions and 53 deletions.
3 changes: 2 additions & 1 deletion lib/platform-bible-react/src/components/shadcn-ui/dropdown-menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,8 @@ export const DropdownMenuContent = React.forwardRef<
sideOffset={sideOffset}
className={cn(
/* pr-font-sans is added to mitigate issue introduced by scopedPreflightStyles */
'pr-z-50 pr-min-w-[8rem] pr-overflow-hidden pr-rounded-md pr-border pr-bg-popover pr-p-1 pr-font-sans pr-text-popover-foreground pr-shadow-md data-[state=open]:pr-animate-in data-[state=closed]:pr-animate-out data-[state=closed]:pr-fade-out-0 data-[state=open]:pr-fade-in-0 data-[state=closed]:pr-zoom-out-95 data-[state=open]:pr-zoom-in-95 data-[side=bottom]:pr-slide-in-from-top-2 data-[side=left]:pr-slide-in-from-right-2 data-[side=right]:pr-slide-in-from-left-2 data-[side=top]:pr-slide-in-from-bottom-2',
/* adding pr-twp because the dropdown content is added to the dom as a sibling to the app root */
'pr-twp pr-z-50 pr-min-w-[8rem] pr-overflow-hidden pr-rounded-md pr-border pr-bg-popover pr-p-1 pr-font-sans pr-text-popover-foreground pr-shadow-md data-[state=open]:pr-animate-in data-[state=closed]:pr-animate-out data-[state=closed]:pr-fade-out-0 data-[state=open]:pr-fade-in-0 data-[state=closed]:pr-zoom-out-95 data-[state=open]:pr-zoom-in-95 data-[side=bottom]:pr-slide-in-from-top-2 data-[side=left]:pr-slide-in-from-right-2 data-[side=right]:pr-slide-in-from-left-2 data-[side=top]:pr-slide-in-from-bottom-2',
className,
)}
{...props}
Expand Down
88 changes: 45 additions & 43 deletions lib/platform-bible-react/src/preview/components/basics.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,49 +100,51 @@ function Basics({ direction }: HasDirection) {

<VerticalTabsContent value="Input">
<table>
<tr>
<td>
Text Field <div className="pr-text-xs">(wrapped)</div>
</td>
<td>
<TextField />
</td>
</tr>
<tr>
<td>
Shadcn Input
<div className="pr-text-xs">(shadcn-ui/input)</div>
</td>
<td>
<Input />
</td>
</tr>
<tr>
<td>
Shdcn Input <div className="pr-text-xs">(from ui.shadcn.com &rarr; input)</div>
</td>
<td className="">
{/* copied from ui.shadcn.com but replaced ring-ring with pr-ring-[240 5% 64.9%], as they set --ring to this value in their style.css */}
<Input className="pr-flex pr-h-10 pr-w-full pr-rounded-md pr-border pr-border-input pr-bg-background pr-px-3 pr-py-2 pr-text-sm pr-ring-offset-background file:pr-border-0 file:pr-bg-transparent file:pr-text-sm file:pr-font-medium placeholder:pr-text-muted-foreground focus-visible:pr-outline-none focus-visible:pr-ring-2 focus-visible:pr-ring-[color:hsl(240,5%,64.9%)] focus-visible:pr-ring-offset-2 disabled:pr-cursor-not-allowed disabled:pr-opacity-50" />
</td>
</tr>
<tr>
<td>
Small Input
<div className="pr-text-xs">(from ui.jln.dev &rarr; popover)</div>
</td>
<td>
<Input className="pr-full pr-file:border-0 pr-col-span-2 pr-flex pr-h-8 pr-rounded-md pr-border pr-border-input pr-bg-background pr-px-3 pr-py-2 pr-text-sm pr-ring-offset-background file:pr-bg-transparent file:pr-text-sm file:pr-font-medium placeholder:pr-text-muted-foreground focus-visible:pr-outline-none focus-visible:pr-ring-2 focus-visible:pr-ring-ring focus-visible:pr-ring-offset-2 disabled:pr-cursor-not-allowed disabled:pr-opacity-50" />
</td>
</tr>
<tr>
<td>
BVC Input <div className="pr-text-xs">(from book-chapter-control)</div>
</td>
<td>
<Input className="pr-box-border pr-gap-2.5 pr-rounded-lg pr-border pr-border-solid pr-border-black pr-bg-white pr-py-2 pr-pl-4 pr-pr-3 pr-font-medium pr-text-slate-900 pr-shadow-none pr-outline-none" />
</td>
</tr>
<tbody>
<tr>
<td>
Text Field <div className="pr-text-xs">(wrapped)</div>
</td>
<td>
<TextField />
</td>
</tr>
<tr>
<td>
Shadcn Input
<div className="pr-text-xs">(shadcn-ui/input)</div>
</td>
<td>
<Input />
</td>
</tr>
<tr>
<td>
Shdcn Input <div className="pr-text-xs">(from ui.shadcn.com &rarr; input)</div>
</td>
<td className="">
{/* copied from ui.shadcn.com but replaced ring-ring with pr-ring-[240 5% 64.9%], as they set --ring to this value in their style.css */}
<Input className="pr-flex pr-h-10 pr-w-full pr-rounded-md pr-border pr-border-input pr-bg-background pr-px-3 pr-py-2 pr-text-sm pr-ring-offset-background file:pr-border-0 file:pr-bg-transparent file:pr-text-sm file:pr-font-medium placeholder:pr-text-muted-foreground focus-visible:pr-outline-none focus-visible:pr-ring-2 focus-visible:pr-ring-[color:hsl(240,5%,64.9%)] focus-visible:pr-ring-offset-2 disabled:pr-cursor-not-allowed disabled:pr-opacity-50" />
</td>
</tr>
<tr>
<td>
Small Input
<div className="pr-text-xs">(from ui.jln.dev &rarr; popover)</div>
</td>
<td>
<Input className="pr-full pr-file:border-0 pr-col-span-2 pr-flex pr-h-8 pr-rounded-md pr-border pr-border-input pr-bg-background pr-px-3 pr-py-2 pr-text-sm pr-ring-offset-background file:pr-bg-transparent file:pr-text-sm file:pr-font-medium placeholder:pr-text-muted-foreground focus-visible:pr-outline-none focus-visible:pr-ring-2 focus-visible:pr-ring-ring focus-visible:pr-ring-offset-2 disabled:pr-cursor-not-allowed disabled:pr-opacity-50" />
</td>
</tr>
<tr>
<td>
BVC Input <div className="pr-text-xs">(from book-chapter-control)</div>
</td>
<td>
<Input className="pr-box-border pr-gap-2.5 pr-rounded-lg pr-border pr-border-solid pr-border-black pr-bg-white pr-py-2 pr-pl-4 pr-pr-3 pr-font-medium pr-text-slate-900 pr-shadow-none pr-outline-none" />
</td>
</tr>
</tbody>
</table>
</VerticalTabsContent>

Expand Down
110 changes: 101 additions & 9 deletions lib/platform-bible-react/src/preview/components/examples.component.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,19 @@
import { useState } from 'react';
import { ScriptureReference } from 'platform-bible-utils';
import { Button } from '@/components/shadcn-ui/button';
import { ScriptureReference } from 'platform-bible-utils';
import { useState } from 'react';
import {
BookChapterControl,
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuTrigger,
Tabs,
TabsList,
TabsTrigger,
VerticalTabs,
VerticalTabsContent,
VerticalTabsList,
Expand All @@ -29,18 +40,99 @@ function Examples({ direction }: HasDirection) {
</VerticalTabsList>

<VerticalTabsContent value="Window">
<div className="pr-flex pr-flex-row pr-rounded-sm pr-border-2 pr-border-transparent pr-bg-muted">
<div className="bcv-control-div">
<div className="pr-flex pr-flex-row pr-rounded-sm pr-rounded-b-none pr-border-2 pr-border-border pr-bg-muted/50">
<div className="pr-m-2">
<BookChapterControl scrRef={scrRef} handleSubmit={setScrRef} />
</div>
<div className="pr-grow" />
<div className="bcv-control-div pr-flex pr-gap-2">
<Button>&#x22ee;</Button>
<Button>Help</Button>
<Button>X</Button>
<div className="pr-m-2 pr-flex">
<Tabs defaultValue="a" dir={direction}>
<TabsList>
<TabsTrigger value="a">A</TabsTrigger>
<TabsTrigger value="b">B</TabsTrigger>
</TabsList>
</Tabs>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost">&#x22ee;</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>Tab Options</DropdownMenuLabel>
<DropdownMenuGroup>
<DropdownMenuItem
className="pr-flex pr-justify-between pr-gap-2"
onClick={(e) => {
e.preventDefault();
}}
>
<span>Zoom</span>
<span className="pr-flex pr-gap-2">
<span>50%</span>
<span>-----o-----</span>
<span>200%</span>
</span>
</DropdownMenuItem>
<DropdownMenuItem
className="pr-flex pr-justify-between pr-gap-2"
onClick={(e) => {
e.preventDefault();
}}
>
<span>View</span>
<span>[Publish v]</span>
</DropdownMenuItem>
<DropdownMenuItem
className="pr-flex pr-justify-between pr-gap-2"
onClick={(e) => {
e.preventDefault();
}}
>
<span>Scroll with</span>
<Tabs defaultValue="a" dir={direction}>
<TabsList className="pr-h-7">
<TabsTrigger className="pr-h-6 pr-w-0" value="a">
A
</TabsTrigger>
<TabsTrigger className="pr-h-6 pr-w-0" value="b">
B
</TabsTrigger>
<TabsTrigger className="pr-h-6 pr-w-0" value="c">
C
</TabsTrigger>
<TabsTrigger className="pr-h-6 pr-w-0" value="d">
D
</TabsTrigger>
<TabsTrigger className="pr-h-6 pr-w-0" value="-">
-
</TabsTrigger>
</TabsList>
</Tabs>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem className="pr-flex pr-justify-between pr-gap-2">
<span>1 item in a group</span>
<DropdownMenuShortcut>CTRL⇧F</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem className="pr-flex pr-justify-between pr-gap-2">
<span>Item without group</span>
<DropdownMenuShortcut>CTRL⇧F</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<Button variant="ghost">X</Button>
</div>
<Button
className="pr-h-14 pr-w-14 pr-rounded-t-none pr-rounded-ee-none pr-rounded-ss-none"
variant="secondary"
>
<p className="pr-text-2xl">+</p>
</Button>
</div>
<div className="pr-rounded-sm pr-border-2 pr-border-t-0 pr-border-muted pr-p-4">
<div className="pr-rounded-sm pr-rounded-t-none pr-border-2 pr-border-t-0 pr-border-border pr-p-4">
<p>
Imagine here the text of <code>{JSON.stringify(scrRef)}</code>
</p>
Expand Down

0 comments on commit de550a1

Please sign in to comment.