Skip to content

Commit fc29987

Browse files
sfc-gh-dmatthewssfc-gh-dmatthews
committed
Use tabs for platform selection
Former-commit-id: 31cfa8a
1 parent 12320f6 commit fc29987

File tree

5 files changed

+214
-97
lines changed

5 files changed

+214
-97
lines changed

‎components/utilities/versionSelector.js‎

Lines changed: 171 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useState, useEffect, useCallback } from "react";
22
import * as Popover from "@radix-ui/react-popover";
33
import * as RadioGroup from "@radix-ui/react-radio-group";
44
import * as ScrollArea from "@radix-ui/react-scroll-area";
5+
import * as Tabs from "@radix-ui/react-tabs";
56
import classNames from "classnames";
67
import getConfig from "next/config";
78
const { publicRuntimeConfig } = getConfig();
@@ -36,27 +37,34 @@ const VersionSelector = ({
3637

3738
const [widgetPlatform, setWidgetPlatform] = useState(compatiblePlatform);
3839

40+
// const handleSelectPlatform = useCallback(
41+
// (selectedPlatform) => {
42+
// if (
43+
// selectedPlatform != platformContext &&
44+
// versionAndPlatformAreCompatible(
45+
// // versionContext can be DEFAULT_VERSION (null) or "1.40.0" (even if that's the latest).
46+
// versionContext,
47+
// selectedPlatform,
48+
// )
49+
// ) {
50+
// // Navigate to new version and platform.
51+
// setVersionAndPlatform({
52+
// newVersion: versionContext,
53+
// newPlatform: selectedPlatform,
54+
// functionName: functionObject ? functionObject.name : "",
55+
// });
56+
// } else {
57+
// // Just set the widget to the selected platform but dont navigate anywhere.
58+
// // The user should pick a version first.
59+
// setWidgetPlatform(selectedPlatform);
60+
// }
61+
// },
62+
// [functionObject],
63+
// );
64+
3965
const handleSelectPlatform = useCallback(
4066
(selectedPlatform) => {
41-
if (
42-
selectedPlatform != platformContext &&
43-
versionAndPlatformAreCompatible(
44-
// versionContext can be DEFAULT_VERSION (null) or "1.40.0" (even if that's the latest).
45-
versionContext,
46-
selectedPlatform,
47-
)
48-
) {
49-
// Navigate to new version and platform.
50-
setVersionAndPlatform({
51-
newVersion: versionContext,
52-
newPlatform: selectedPlatform,
53-
functionName: functionObject ? functionObject.name : "",
54-
});
55-
} else {
56-
// Just set the widget to the selected platform but dont navigate anywhere.
57-
// The user should pick a version first.
58-
setWidgetPlatform(selectedPlatform);
59-
}
67+
setWidgetPlatform(selectedPlatform);
6068
},
6169
[functionObject],
6270
);
@@ -91,77 +99,154 @@ const VersionSelector = ({
9199
sideOffset={5}
92100
align="end"
93101
>
94-
<form>
95-
<legend>Show exceptions for:</legend>
96-
<RadioGroup.Root
97-
className={styles.RadioGroupRoot}
98-
defaultValue={widgetPlatform}
99-
aria-label="streamlit platform"
100-
onValueChange={handleSelectPlatform}
101-
>
102-
{Object.keys(PLATFORMS).map((platform) => (
103-
<div key={platform}>
104-
<RadioGroup.Item
105-
className={styles.RadioGroupItem}
106-
value={platform}
107-
id={platform}
108-
>
109-
<RadioGroup.Indicator
110-
className={styles.RadioGroupIndicator}
111-
/>
112-
</RadioGroup.Item>
113-
<label className={styles.RadioLabel} htmlFor={platform}>
114-
{PLATFORMS[platform]}
115-
</label>
116-
</div>
102+
<Tabs.Root
103+
className={styles.TabsRoot}
104+
defaultValue={widgetPlatform}
105+
orientation="vertical"
106+
onValueChange={handleSelectPlatform}
107+
>
108+
<Tabs.List className={styles.TabsList} aria-label="Platform">
109+
<p className={styles.TabsTitle}>Show notes for:</p>
110+
{Object.keys(PLATFORMS).map((availablePlatform) => (
111+
<Tabs.Trigger
112+
className={styles.TabsTrigger}
113+
value={availablePlatform}
114+
>
115+
{PLATFORMS[availablePlatform]}
116+
</Tabs.Trigger>
117117
))}
118-
</RadioGroup.Root>
119-
</form>
120-
121-
<ScrollArea.Root className={styles.ScrollAreaRoot}>
122-
<div className={styles.FadeTop}></div>
123-
<ScrollArea.Viewport className={styles.ScrollAreaViewport}>
118+
</Tabs.List>
119+
{Object.keys(PLATFORMS).map((availablePlatform) => (
120+
<Tabs.Content
121+
className={styles.TabsContent}
122+
value={availablePlatform}
123+
>
124+
<ScrollArea.Root className={styles.ScrollAreaRoot}>
125+
<div className={styles.FadeTop}></div>
126+
<ScrollArea.Viewport className={styles.ScrollAreaViewport}>
127+
<RadioGroup.Root
128+
className={styles.VersionListRoot}
129+
defaultValue={
130+
availablePlatform == widgetPlatform
131+
? numericVersion
132+
: null
133+
}
134+
aria-label="streamlit version"
135+
onValueChange={handleSelectVersion}
136+
>
137+
{(PLATFORM_VERSIONS[availablePlatform] ?? VERSIONS_LIST)
138+
.toReversed()
139+
.map((validVersion) => (
140+
<div key={validVersion}>
141+
<RadioGroup.Item
142+
className={styles.VersionListItem}
143+
value={validVersion}
144+
id={validVersion}
145+
>
146+
<RadioGroup.Indicator
147+
className={classNames(
148+
"material-icons-sharp",
149+
styles.VersionListIndicator,
150+
)}
151+
/>
152+
</RadioGroup.Item>
153+
<label
154+
className={styles.VersionLabel}
155+
htmlFor={validVersion}
156+
>
157+
Version {validVersion}
158+
</label>
159+
</div>
160+
))}
161+
</RadioGroup.Root>
162+
</ScrollArea.Viewport>
163+
<div className={styles.FadeBottom}></div>
164+
<ScrollArea.Scrollbar
165+
className={styles.ScrollAreaScrollbar}
166+
orientation="vertical"
167+
>
168+
<ScrollArea.Thumb className={styles.ScrollAreaThumb} />
169+
</ScrollArea.Scrollbar>
170+
</ScrollArea.Root>
171+
</Tabs.Content>
172+
))}
173+
{/* <Tabs.Content className="TabsContent" value="oss">
174+
<form>
175+
<legend>Show exceptions for:</legend>
124176
<RadioGroup.Root
125-
className={styles.VersionListRoot}
126-
defaultValue={numericVersion}
127-
aria-label="streamlit version"
128-
onValueChange={handleSelectVersion}
177+
className={styles.RadioGroupRoot}
178+
defaultValue={widgetPlatform}
179+
aria-label="streamlit platform"
180+
onValueChange={handleSelectPlatform}
129181
>
130-
{validVersionForWidgetPlatform
131-
.toReversed()
132-
.map((validVersion) => (
133-
<div key={validVersion}>
134-
<RadioGroup.Item
135-
className={styles.VersionListItem}
136-
value={validVersion}
137-
id={validVersion}
138-
>
139-
<RadioGroup.Indicator
140-
className={classNames(
141-
"material-icons-sharp",
142-
styles.VersionListIndicator,
143-
)}
144-
/>
145-
</RadioGroup.Item>
146-
<label
147-
className={styles.VersionLabel}
148-
htmlFor={validVersion}
149-
>
150-
Version {validVersion}
151-
</label>
152-
</div>
153-
))}
182+
{Object.keys(PLATFORMS).map((platform) => (
183+
<div key={platform}>
184+
<RadioGroup.Item
185+
className={styles.RadioGroupItem}
186+
value={platform}
187+
id={platform}
188+
>
189+
<RadioGroup.Indicator
190+
className={styles.RadioGroupIndicator}
191+
/>
192+
</RadioGroup.Item>
193+
<label className={styles.RadioLabel} htmlFor={platform}>
194+
{PLATFORMS[platform]}
195+
</label>
196+
</div>
197+
))}
154198
</RadioGroup.Root>
155-
</ScrollArea.Viewport>
156-
<div className={styles.FadeBottom}></div>
157-
<ScrollArea.Scrollbar
158-
className={styles.ScrollAreaScrollbar}
159-
orientation="vertical"
160-
>
161-
<ScrollArea.Thumb className={styles.ScrollAreaThumb} />
162-
</ScrollArea.Scrollbar>
163-
</ScrollArea.Root>
164-
199+
</form>
200+
</Tabs.Content>
201+
<Tabs.Content className="TabsContent" value="sis"> */}
202+
{/* <ScrollArea.Root className={styles.ScrollAreaRoot}>
203+
<div className={styles.FadeTop}></div>
204+
<ScrollArea.Viewport className={styles.ScrollAreaViewport}>
205+
<RadioGroup.Root
206+
className={styles.VersionListRoot}
207+
defaultValue={numericVersion}
208+
aria-label="streamlit version"
209+
onValueChange={handleSelectVersion}
210+
>
211+
{validVersionForWidgetPlatform
212+
.toReversed()
213+
.map((validVersion) => (
214+
<div key={validVersion}>
215+
<RadioGroup.Item
216+
className={styles.VersionListItem}
217+
value={validVersion}
218+
id={validVersion}
219+
>
220+
<RadioGroup.Indicator
221+
className={classNames(
222+
"material-icons-sharp",
223+
styles.VersionListIndicator,
224+
)}
225+
/>
226+
</RadioGroup.Item>
227+
<label
228+
className={styles.VersionLabel}
229+
htmlFor={validVersion}
230+
>
231+
Version {validVersion}
232+
</label>
233+
</div>
234+
))}
235+
</RadioGroup.Root>
236+
</ScrollArea.Viewport>
237+
<div className={styles.FadeBottom}></div>
238+
<ScrollArea.Scrollbar
239+
className={styles.ScrollAreaScrollbar}
240+
orientation="vertical"
241+
>
242+
<ScrollArea.Thumb className={styles.ScrollAreaThumb} />
243+
</ScrollArea.Scrollbar>
244+
</ScrollArea.Root> */}
245+
{/* </Tabs.Content>
246+
<Tabs.Content className="TabsContent" value="na">
247+
<p>Test</p>
248+
</Tabs.Content> */}
249+
</Tabs.Root>
165250
<Popover.Close className={styles.PopoverClose} aria-label="Close">
166251
<i className="material-icons-sharp">close</i>
167252
</Popover.Close>

‎components/utilities/versionSelector.module.css‎

Lines changed: 40 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.PopoverContent {
2-
@apply bg-gray-20 rounded-md p-5 shadow-2xl text-gray-70;
2+
@apply bg-gray-20 rounded-md shadow-2xl text-gray-70;
33
}
44
:global(.dark) .PopoverContent {
55
@apply bg-gray-90 text-gray-40;
@@ -67,10 +67,7 @@
6767
/* Lower section (scroll area) */
6868
/* --------------------------- */
6969
.ScrollAreaRoot {
70-
@apply mt-4 bg-white w-[200px] rounded-md overflow-hidden;
71-
}
72-
:global(.dark) .ScrollAreaRoot {
73-
@apply bg-gray-40;
70+
@apply mt-4 w-[200px] rounded-md overflow-hidden;
7471
}
7572
.ScrollAreaViewport {
7673
@apply w-full h-full max-h-96;
@@ -93,13 +90,13 @@
9390
@apply bg-gradient-to-b from-white to-transparent h-8 -mb-8 mr-3 relative z-auto;
9491
}
9592
:global(.dark) .FadeTop {
96-
@apply bg-gradient-to-b from-gray-40 to-transparent;
93+
@apply bg-gradient-to-b from-gray-80 to-transparent;
9794
}
9895
.FadeBottom {
9996
@apply bg-gradient-to-t from-white to-transparent h-8 -mt-8 mr-3 relative z-auto;
10097
}
10198
:global(.dark) .FadeBottom {
102-
@apply bg-gradient-to-t from-gray-40 to-transparent;
99+
@apply bg-gradient-to-t from-gray-80 to-transparent;
103100
}
104101

105102
/* List of versions within the scroll area*/
@@ -123,9 +120,43 @@
123120
.VersionLabel {
124121
@apply tracking-tight text-base pl-2 font-mono select-none;
125122
}
126-
:global(.dark) .VersionLabel {
123+
/* :global(.dark) .VersionLabel {
127124
@apply text-gray-80;
128-
}
125+
} */
129126
.VersionLabel:hover {
130127
@apply opacity-70 cursor-pointer;
131128
}
129+
130+
.TabsRoot {
131+
@apply flex flex-row;
132+
}
133+
134+
.TabsList {
135+
@apply flex flex-col shrink-0 border-r border-gray-40 text-start;
136+
}
137+
138+
.TabsTitle {
139+
@apply py-2 pl-4 text-sm mb-0;
140+
}
141+
142+
.TabsTrigger {
143+
@apply shrink-0 grow-0 h-14 px-4 select-none;
144+
}
145+
.TabsTrigger:hover {
146+
@apply text-indigo-70;
147+
}
148+
.TabsTrigger[data-state="active"] {
149+
@apply text-indigo-70 border-l-indigo-70 border-l-4 bg-gray-30 pl-3;
150+
}
151+
:global(.dark) .TabsTrigger[data-state="active"] {
152+
@apply bg-gray-80 bg-opacity-20;
153+
}
154+
155+
.TabsContent {
156+
@apply pl-2 bg-white;
157+
flex-grow: 1;
158+
outline: none;
159+
}
160+
:global(.dark) .TabsContent {
161+
@apply bg-gray-80;
162+
}

‎next.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ for (const index in Object.keys(PLATFORM_NOTES)) {
2525
const PLATFORM_VERSIONS = platformVersions;
2626
const PLATFORM_LATEST_VERSIONS = latestPlatformVersion;
2727
const PLATFORMS = {};
28-
PLATFORMS["oss"] = "None";
28+
PLATFORMS["oss"] = "Open-source Streamlit";
2929
PLATFORMS["sis"] = "Streamlit in Snowflake";
3030
PLATFORMS["na"] = "Snowflake Native Apps";
3131

‎package-lock.json.REMOVED.git-id‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"@radix-ui/react-popover": "1.1.2",
1616
"@radix-ui/react-radio-group": "1.2.1",
1717
"@radix-ui/react-scroll-area": "1.2.0",
18+
"@radix-ui/react-tabs": "1.1.1",
1819
"@svgr/webpack": "^8.1.0",
1920
"@tryghost/content-api": "1.11.20",
2021
"algoliasearch": "^3.35.1",

0 commit comments

Comments
 (0)