Skip to content

Commit fa200f7

Browse files
thejacksheltonthejackshelton
authored
Merge pull request #277 from GregOnNet/feature/dialog
feature(modal): provide initial implementation
2 parents 3eb273c + f50b16f commit fa200f7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+2545
-299
lines changed

‎apps/website/public/images/test-image.png

197 KB
Loading

‎apps/website/src/_state/component-statuses.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export const statusByComponent: ComponentKitsStatuses = {
2525
Input: ComponentStatus.Planned,
2626
'Input Phone': ComponentStatus.Planned,
2727
'Navigation Bar': ComponentStatus.Planned,
28+
Modal: ComponentStatus.Planned,
2829
Pagination: ComponentStatus.Planned,
2930
Popover: ComponentStatus.Planned,
3031
Progress: ComponentStatus.Planned,
@@ -43,6 +44,7 @@ export const statusByComponent: ComponentKitsStatuses = {
4344
Carousel: ComponentStatus.Planned,
4445
Combobox: ComponentStatus.Beta,
4546
Popover: ComponentStatus.Draft,
47+
Modal: ComponentStatus.Beta,
4648
Select: ComponentStatus.Draft,
4749
Separator: ComponentStatus.Beta,
4850
Tabs: ComponentStatus.Beta,

‎apps/website/src/global.css

Lines changed: 92 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,15 @@
3636

3737
--border-radius: 0.375rem;
3838

39-
--shiki-color-text: theme('colors.black');
40-
--shiki-token-constant: theme('colors.emerald.800');
41-
--shiki-token-string: theme('colors.emerald.700');
42-
--shiki-token-comment: theme('colors.zinc.700');
43-
--shiki-token-keyword: theme('colors.sky.600');
44-
--shiki-token-parameter: theme('colors.pink.700');
45-
--shiki-token-function: theme('colors.purple.700');
46-
--shiki-token-string-expression: theme('colors.emerald.700');
47-
--shiki-token-punctuation: theme('colors.zinc.700');
39+
--shiki-color-text: theme('colors.white');
40+
--shiki-token-constant: theme('colors.emerald.300');
41+
--shiki-token-string: theme('colors.emerald.300');
42+
--shiki-token-comment: theme('colors.zinc.500');
43+
--shiki-token-keyword: theme('colors.sky.300');
44+
--shiki-token-parameter: theme('colors.pink.300');
45+
--shiki-token-function: theme('colors.violet.300');
46+
--shiki-token-string-expression: theme('colors.emerald.300');
47+
--shiki-token-punctuation: theme('colors.zinc.200');
4848
}
4949

5050
.dark {
@@ -78,16 +78,6 @@
7878
--color-input: 263 32.6% 17.5%;
7979

8080
--color-ring: 263 26.8% 83.9%;
81-
82-
--shiki-color-text: theme('colors.white');
83-
--shiki-token-constant: theme('colors.emerald.300');
84-
--shiki-token-string: theme('colors.emerald.300');
85-
--shiki-token-comment: theme('colors.zinc.500');
86-
--shiki-token-keyword: theme('colors.sky.300');
87-
--shiki-token-parameter: theme('colors.pink.300');
88-
--shiki-token-function: theme('colors.violet.300');
89-
--shiki-token-string-expression: theme('colors.emerald.300');
90-
--shiki-token-punctuation: theme('colors.zinc.200');
9181
}
9282
}
9383

@@ -98,6 +88,77 @@
9888
body {
9989
@apply bg-background text-foreground;
10090
}
91+
92+
*::-webkit-scrollbar {
93+
background-color: transparent;
94+
width: 1rem;
95+
height: 1rem;
96+
}
97+
98+
*::-webkit-scrollbar-thumb {
99+
/* Thumb color */
100+
background-color: var(--qwikui-slate-500);
101+
border-radius: 0.5rem;
102+
background-clip: padding-box;
103+
border: 0.3rem solid transparent;
104+
}
105+
106+
*::-webkit-scrollbar-corner {
107+
background: transparent;
108+
}
109+
110+
*::-webkit-scrollbar-track {
111+
background: #f1f1f1;
112+
border-left: 1px solid var(--qwikui-slate-300);
113+
}
114+
115+
.dark *::-webkit-scrollbar-thumb {
116+
background-color: var(--qwikui-slate-500);
117+
}
118+
119+
.dark *::-webkit-scrollbar-track {
120+
background: var(--qwikui-slate-950);
121+
border-left: 1px solid var(--qwikui-slate-800);
122+
}
123+
124+
.code-example *::-webkit-scrollbar-track {
125+
background: transparent;
126+
border-left: 0px;
127+
}
128+
129+
.code-example *::-webkit-scrollbar-thumb {
130+
background: var(--qwikui-slate-400);
131+
border-radius: 0.5rem;
132+
background-clip: padding-box;
133+
border: 0.35rem solid transparent;
134+
}
135+
136+
.code-example *::-webkit-scrollbar-thumb:hover {
137+
background: var(--qwikui-slate-500);
138+
border-radius: 0.5rem;
139+
background-clip: padding-box;
140+
border: 0.35rem solid transparent;
141+
}
142+
143+
.code-example-gradient {
144+
background: linear-gradient(
145+
to bottom,
146+
var(--qwikui-slate-900),
147+
var(--qwikui-slate-800)
148+
);
149+
}
150+
.dark .code-example-gradient {
151+
background: linear-gradient(
152+
to bottom,
153+
var(--qwikui-slate-800),
154+
var(--qwikui-slate-900)
155+
);
156+
}
157+
158+
/* no horizontal overflow on code examples */
159+
.tab-size pre {
160+
white-space: pre-wrap;
161+
}
101162
}
102163

103164
:root {
@@ -227,11 +288,6 @@ ol {
227288
line-height: 1.75;
228289
}
229290

230-
.layout {
231-
grid-template-columns: 25% 70%;
232-
grid-template-areas: 'sidebar content';
233-
}
234-
235291
/* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term.
236292
It would make more sense to supply the user with the animation declaration in the docs.
237293
*/
@@ -314,4 +370,16 @@ ol {
314370
-0.8px -0.8px 0 var(--qwikui-purple-700), 0.8px -0.8px 0 var(--qwikui-purple-700),
315371
-0.8px 0.8px 0 var(--qwikui-purple-700), 0.8px 0.8px 0 var(--qwikui-purple-700);
316372
}
373+
374+
.setup-grid-areas {
375+
grid-template-areas: 'nav main toc';
376+
}
377+
378+
.copy-btn-bg-dark {
379+
background: hsla(215, 25%, 27%, 0.9);
380+
}
381+
382+
.copy-btn-bg-light {
383+
background: hsla(214, 32%, 91%, 0.9);
384+
}
317385
}

‎apps/website/src/routes/_components/header/header.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export default component$(
6464
return (
6565
<header
6666
class={[
67-
`fixed top-0 z-20 flex h-20 w-full items-center gap-8 border-b-[1px] border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900 md:h-20`,
67+
`sticky top-0 z-20 flex h-20 w-full items-center gap-8 border-b-[1px] border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900 md:h-20`,
6868
`shadow-light-low dark:shadow-dark-medium`,
6969
rootStore.isSidebarOpened
7070
? 'bg-blue-200 brightness-75 dark:bg-indigo-900'

‎apps/website/src/routes/docs.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.docs {
22
& {
3-
@apply w-full overflow-hidden px-8 py-8 lg:ml-80 lg:max-w-4xl lg:px-16 xl:max-w-6xl;
3+
@apply mx-auto w-full max-w-[85ch] overflow-hidden px-8 py-8 lg:px-16;
44
}
55

66
/*
@@ -14,7 +14,7 @@
1414
}
1515

1616
h1 {
17-
@apply mb-6 text-3xl font-extrabold md:mb-12 md:text-5xl;
17+
@apply mb-6 pt-6 text-3xl font-extrabold md:text-5xl;
1818
}
1919

2020
h2 {
@@ -34,7 +34,7 @@
3434
}
3535

3636
blockquote {
37-
@apply bg-qwikui-blue-800 shadow-light-medium dark:shadow-dark-medium dark:bg-qwikui-purple-800 border-qwikui-blue-200 dark:border-qwikui-purple-200 my-4 rounded-xl border-[2px] p-4 text-white lg:p-6;
37+
@apply from-qwikui-blue-800 to-qwikui-blue-900 shadow-light-medium dark:shadow-dark-medium dark:from-qwikui-purple-800 dark:to-qwikui-purple-900 border-qwikui-blue-200 dark:border-qwikui-purple-200 my-4 rounded-xl border-[2px] bg-gradient-to-b p-4 text-white lg:p-6;
3838
}
3939

4040
ul {

‎apps/website/src/routes/docs/_components/api-table/api-table.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,12 @@ export const APITable = component$(({ propDescriptors }: APITableProps) => {
2828
{propDescriptors?.map((propDescriptor) => {
2929
return (
3030
<tr key={propDescriptor.name}>
31-
<td class="prose prose-sm py-3 pl-4 align-baseline sm:pl-0 ">
31+
<td class="prose prose-sm py-3 pl-4 sm:pl-0 ">
3232
<code class="border-qwikui-blue-500 bg-qwikui-blue-50 dark:bg-qwikui-purple-100 dark:border-qwikui-purple-500 mr-6 rounded-md border-[1px] border-b-[2px] font-[400] text-slate-950">
3333
{propDescriptor.name}
3434
</code>
3535
</td>
36-
<td class="py-3 align-baseline">
36+
<td class="py-3">
3737
<span class="flex items-center">
3838
<code class="rounded-md border-[1px] border-b-2 border-slate-700 bg-slate-100 px-2 dark:border-slate-400 dark:bg-slate-700">
3939
{propDescriptor.type}

‎apps/website/src/routes/docs/_components/code-copy/code-copy.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@ export const CodeCopy = component$(
2424
onClick$={async () => {
2525
await copy(code);
2626
copied.value = true;
27+
28+
setTimeout(() => {
29+
copied.value = false;
30+
}, 4000);
2731
}}
2832
>
2933
{!copied.value ? 'Copy' : 'Copied!'}

‎apps/website/src/routes/docs/_components/highlight/highlight.tsx

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -47,15 +47,23 @@ export const Highlight = component$(
4747
});
4848

4949
return (
50-
<div
51-
{...props}
52-
class={[
53-
'tab-size relative max-w-full overflow-hidden overflow-x-auto rounded-xl bg-slate-50 p-12 text-sm dark:bg-slate-800',
54-
props.class,
55-
]}
56-
>
57-
<div dangerouslySetInnerHTML={codeSig.value} />
58-
<CodeCopy class={['absolute right-2 top-2', copyCodeClass]} code={code} />
50+
<div class="code-example relative max-h-[31.25rem] rounded-b-xl">
51+
<CodeCopy
52+
class={[
53+
'copy-btn-bg-dark absolute right-4 top-4 bg-slate-200 text-white hover:bg-slate-600 hover:text-white',
54+
copyCodeClass,
55+
]}
56+
code={code}
57+
/>
58+
<div
59+
{...props}
60+
class={[
61+
'tab-size code-example-gradient max-h-[31.25rem] max-w-full overflow-auto rounded-xl bg-slate-800 p-6 text-sm dark:bg-slate-800',
62+
props.class,
63+
]}
64+
>
65+
<div dangerouslySetInnerHTML={codeSig.value} />
66+
</div>
5967
</div>
6068
);
6169
},

‎apps/website/src/routes/docs/_components/navigation-docs/navigation-docs.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@ export const DocsNavigation = component$(({ linksGroups }: DocsNavigationProps)
3030
rounded-lg hover:bg-[var(--qwik-light-blue)] dark:hover:bg-[var(--qwik-dark-purple)]`;
3131
return (
3232
<nav
33-
class={`fixed inset-0 top-20 z-10 flex-col gap-4 overflow-y-auto border-r-[1px]
34-
border-slate-200 bg-slate-100 bg-white pb-6 dark:border-slate-800 dark:bg-slate-900 lg:w-80
33+
class={`fixed inset-0 top-20 z-10 flex-col gap-4 overflow-y-auto border-r-[1px] border-slate-200
34+
bg-slate-100 bg-white pb-6 [grid-area:nav] dark:border-slate-800 dark:bg-slate-900 lg:w-80
3535
${rootStore.isSidebarOpened ? 'w-100 flex' : 'hidden lg:flex'} `}
3636
>
3737
<ul class="show mt-8 flex flex-col gap-2 pl-12 lg:hidden">
@@ -59,7 +59,7 @@ export const DocsNavigation = component$(({ linksGroups }: DocsNavigationProps)
5959
{linksGroups?.map((group) => {
6060
return (
6161
<>
62-
<div class="px-6 pt-6">
62+
<div class="px-6 pt-8">
6363
<h2 class="bg-qwikui-blue-600 dark:bg-qwikui-purple-800 shadow-dark-low dark:shadow-dark-high border-qwikui-blue-100 dark:border-qwikui-purple-100 text-outline-lg mb-4 rounded-lg border-2 px-4 py-1 text-3xl font-bold text-white lg:text-lg">
6464
{group.name}
6565
</h2>

‎apps/website/src/routes/docs/_components/preview-code-example/preview-code-example-tabs.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const PreviewCodeExampleTabs = component$((props: PreviewCodeExampleProps
2121
class="shadow-light-medium dark:shadow-dark-medium mb-12 rounded-xl"
2222
selectedClassName="previewCodeExampleSelectedTab"
2323
>
24-
<TabList class="bg-qwikui-blue-700 dark:bg-qwikui-purple-800 border-qwikui-blue-300 dark:border-qwikui-purple-200 shadow-light-medium dark:shadow-dark-medium flex rounded-t-xl border-[1.5px] border-b-0 text-white">
24+
<TabList class="bg-qwikui-blue-700 dark:bg-qwikui-purple-800 border-qwikui-blue-300 dark:border-qwikui-purple-200 flex rounded-t-xl border-[1.5px] border-b-0 text-white">
2525
<Tab class="hover:bg-qwikui-blue-500 dark:hover:bg-qwikui-purple-600 text-outline-lg rounded-tl-[.625rem] px-4 py-2">
2626
Preview
2727
</Tab>
@@ -35,7 +35,7 @@ export const PreviewCodeExampleTabs = component$((props: PreviewCodeExampleProps
3535
</section>
3636
</TabPanel>
3737
<TabPanel class="border-qwikui-blue-300 dark:border-qwikui-purple-200 relative rounded-b-xl border-[1.5px]">
38-
<Highlight code={props.code} />
38+
<Highlight class="rounded-b-xl rounded-t-none" code={props.code} />
3939
</TabPanel>
4040
</Tabs>
4141
);

0 commit comments

Comments
 (0)