Skip to content

Commit ab1bbff

Browse files
gfazioligfazioli
committed
🚨 Fixes styles
1 parent c57a3ef commit ab1bbff

18 files changed

+180
-181
lines changed

‎docs/components/Footer/AnimateBadge/AnimateBadge.module.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@
22
0% {
33
box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
44
}
5+
56
70% {
67
box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
78
}
9+
810
100% {
911
box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
1012
}

‎docs/components/Footer/Footer.module.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,11 @@
2222
0% {
2323
box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
2424
}
25+
2526
70% {
2627
box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
2728
}
29+
2830
100% {
2931
box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
3032
}

‎docs/components/Footer/Footer.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ export const Footer: React.FC<FooterProps> = () => {
137137
height="32"
138138
width="114"
139139
style={{ border: 0, borderRadius: '6px' }}
140-
></iframe>
140+
/>
141141

142142
<Group justify="right">
143143
<Text fz={12} inline>
@@ -148,21 +148,21 @@ export const Footer: React.FC<FooterProps> = () => {
148148
</Text>
149149
<Divider orientation="vertical" />
150150
<Text fz={12} inline>
151-
<Group gap={4} component={'span'}>
151+
<Group gap={4} component="span">
152152
Hosted on{' '}
153153
<Anchor fz={13} href="https://github.com/">
154-
<Group gap={4} component={'span'}>
154+
<Group gap={4} component="span">
155155
<IconBrandGithubFilled size={16} /> GitHub.com
156156
</Group>
157157
</Anchor>
158158
</Group>
159159
</Text>
160160
<Divider orientation="vertical" />
161161
<Text fz={12} inline>
162-
<Group gap={4} component={'span'} justify="flex-start">
162+
<Group gap={4} component="span" justify="flex-start">
163163
Built with{' '}
164164
<Anchor fz={13} href="https://github.com/mantinedev/extension-template">
165-
<Group gap={4} component={'span'}>
165+
<Group gap={4} component="span">
166166
<IconBrandMantine size={16} /> Mantine Extension Template
167167
</Group>
168168
</Anchor>

‎docs/components/PageHeader/PageHeader.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export function PageHeader({ data }: PageHeaderProps) {
3131
<PageHeaderLink
3232
label="Changelog"
3333
icon={<GithubIcon size={16} />}
34-
link={data.repositoryUrl + '/releases/tag/' + pack.version}
34+
link={`${data.repositoryUrl}/releases/tag/${pack.version}`}
3535
>
3636
View the Changelog
3737
</PageHeaderLink>
@@ -49,7 +49,7 @@ export function PageHeader({ data }: PageHeaderProps) {
4949
<PageHeaderLink
5050
label="See More"
5151
icon={<IconPackage size={16} />}
52-
link={`https://mantine-extensions.vercel.app/`}
52+
link="https://mantine-extensions.vercel.app/"
5353
>
5454
Mantine Extensions
5555
</PageHeaderLink>
@@ -80,7 +80,7 @@ export function PageHeader({ data }: PageHeaderProps) {
8080
<PageHeaderLink
8181
label="Support"
8282
icon={<IconHeartFilled color="red" size={18} stroke={1.5} />}
83-
link={'https://github.com/sponsors/gfazioli?o=esb'}
83+
link="https://github.com/sponsors/gfazioli?o=esb"
8484
>
8585
Become a sponsor
8686
</PageHeaderLink>

‎docs/components/Shell/Shell.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export function Shell({ children }: ShellProps) {
5454
height="34"
5555
width="114"
5656
className={classes.sponsor}
57-
></iframe>
57+
/>
5858
<ActionIcon
5959
visibleFrom="sm"
6060
size={36}

‎docs/demos/Split.demo.pane.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { Split, SplitPaneProps } from '@gfazioli/mantine-split-pane';
1+
import { Split } from '@gfazioli/mantine-split-pane';
22
import { Code, Paper, Stack, Title } from '@mantine/core';
33
import { MantineDemo } from '@mantinex/demo';
44

5-
function Demo(props: SplitPaneProps) {
5+
function Demo() {
66
return (
77
<Stack>
88
<Code>

‎docs/docs.mdx

Lines changed: 38 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -116,13 +116,21 @@ export type SPLIT_PANE_RESIZE_SIZES = {
116116
The events released are therefore:
117117

118118
```tsx
119-
onResizeStart?: () => void; // Same release as the Split.Pane component
119+
export interface SplitPaneResizerProps {
120+
/** Event called when resizer is double clicked */
121+
onDoubleClick?: (
122+
event: React.MouseEvent<HTMLButtonElement>
123+
) => void;
120124

121-
/** Event called when pane size changes */
122-
onResizing?: (sizes: SPLIT_PANE_RESIZE_SIZES) => void;
125+
/** Event called when pane size starts changing */
126+
onResizeStart?: () => void;
123127

124-
/** Event called when pane size changes */
125-
onResizeEnd?: (sizes: SPLIT_PANE_RESIZE_SIZES) => void;
128+
/** Event called when pane size changes */
129+
onResizing?: (sizes: SPLIT_PANE_RESIZE_SIZES) => void;
130+
131+
/** Event called when pane size changes */
132+
onResizeEnd?: (sizes: SPLIT_PANE_RESIZE_SIZES) => void;
133+
}
126134
```
127135

128136
<Demo data={demos.resizerEvents} />
@@ -187,14 +195,21 @@ export type SPLIT_PANE_SIZE = {
187195
The events released are therefore:
188196

189197
```tsx
190-
/** Event called when pane size starts changing */
191-
onResizeStart?: () => void; // Same release as the Split.Resizer component
198+
export interface SplitPaneProps {
199+
/** Event called when pane size starts changing */
200+
onResizeStart?: () => void;
201+
202+
/** Event called when pane size changes */
203+
onResizing?: (size: SPLIT_PANE_SIZE) => void;
192204

193-
/** Event called when pane size changes */
194-
onResizing?: (size: SPLIT_PANE_SIZE) => void;
205+
/** Event called when pane size changes */
206+
onResizeEnd?: (size: SPLIT_PANE_SIZE) => void;
195207

196-
/** Event called when pane size changes */
197-
onResizeEnd?: (size: SPLIT_PANE_SIZE) => void;
208+
/** Event called to reset initial size */
209+
onResetInitialSize?: (
210+
e: React.MouseEvent<HTMLButtonElement>
211+
) => void;
212+
}
198213
```
199214

200215
<Demo data={demos.events} />
@@ -294,19 +309,19 @@ Now you can appreciate the flexibility of the `Split` component, which allows yo
294309
>
295310
> ```tsx
296311
> <Split orientation="horizontal" radius={256} spacing={16}>
297-
> <Split.Pane initialHeight={200}>
298-
> <Paper {...paperProps}>
299-
> <Title>Pane 2</Title>
300-
> </Paper>
301-
> </Split.Pane>
312+
> <Split.Pane initialHeight={200}>
313+
> <Paper {...paperProps}>
314+
> <Title>Pane 2</Title>
315+
> </Paper>
316+
> </Split.Pane>
302317
>
303-
> <Split.Resizer color="red.3" hoverColor="blue.7" >size="xl" />
318+
> <Split.Resizer color="red.3" hoverColor="blue.7" size="xl" />
304319
>
305-
> <Split.Pane initialHeight={300}>
306-
> <Paper {...paperProps}>
307-
> <Title>Pane 3</Title>
308-
> </Paper>
309-
> </Split.Pane>
320+
> <Split.Pane initialHeight={300}>
321+
> <Paper {...paperProps}>
322+
> <Title>Pane 3</Title>
323+
> </Paper>
324+
> </Split.Pane>
310325
> </Split>
311326
> ```
312327
>
@@ -359,9 +374,8 @@ Keeping the <Kbd>SHIFT</Kbd> key pressed while using the `Arrow` keys will resiz
359374
> The `step` and `shiftStep` props are accessible both for the `Split` and `Split.Resizer` components. Obviously, the `step` and `shiftStep` props of the `Split.Resizer` component will override the `step` and `shiftStep` props of the `Split` component.
360375
>
361376
> ```tsx
362-
> ...
363377
> <Split step={16} shiftStep={128}>
364-
> <Split.Pane >
378+
> <Split.Pane>
365379
> <h1>Pane 1</h1>
366380
> </Split.Pane>
367381
>
@@ -377,7 +391,6 @@ Keeping the <Kbd>SHIFT</Kbd> key pressed while using the `Arrow` keys will resiz
377391
> <h1>Pane 3</h1>
378392
> </Split.Pane>
379393
> </Split>
380-
> ...
381394
> ```
382395
>
383396
> In the above example, the resizer between the **Pane 1** and **Pane 2** will resize the panes by `32` pixel, and the resizer between the **Pane 2** and **Pane 3** will resize the panes by `16` pixel. The `SHIFT` key will resize the panes by `256` pixel between the **Pane 1** and **Pane 2** and by `128` pixel between the **Pane 2** and **Pane 3**.

‎docs/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
"devDependencies": {
3535
"@types/node": "^22.15.3",
3636
"@types/react": "^19.1.2",
37-
"@types/react-dom": "^19.1.2",
37+
"@types/react-dom": "^19.1.3",
3838
"typescript": "5.8.3"
3939
}
4040
}

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
"@types/jest": "^29.5.14",
5353
"@types/node": "^22.15.3",
5454
"@types/react": "^19.1.2",
55-
"@types/react-dom": "^19.1.2",
55+
"@types/react-dom": "^19.1.3",
5656
"@types/signale": "^1.4.7",
5757
"@types/yargs": "^17.0.33",
5858
"@vitejs/plugin-react": "^4.4.1",
@@ -94,7 +94,7 @@
9494
"typescript": "5.8.3",
9595
"typescript-eslint": "^8.31.1",
9696
"version-next": "^1.0.2",
97-
"vite": "^6.3.3",
97+
"vite": "^6.3.4",
9898
"yargs": "^17.7.2",
9999
"zx": "^8.5.3"
100100
}

‎package/src/Pane/SplitPane.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@ export const SplitPane = factory<SplitPaneFactory>((_props, ref) => {
205205
*/
206206
function withPx(value: number | string) {
207207
if (typeof value === 'number') {
208-
return value + 'px';
208+
return `${value}px`;
209209
}
210210

211211
if (typeof value === 'string') {

‎package/src/Resizer/SplitPaneResizer.module.css

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
touch-action: none;
5151

5252
/* Knob */
53-
&:after {
53+
&::after {
5454
content: '';
5555
position: absolute;
5656
background-color: var(--split-resizer-knob-color);
@@ -64,7 +64,7 @@
6464
background: var(--split-resizer-hover-color);
6565

6666
/* Knob */
67-
&:after {
67+
&::after {
6868
opacity: var(--split-resizer-knob-hover-opacity);
6969
background-color: var(--split-resizer-knob-hover-color);
7070
}
@@ -81,7 +81,7 @@
8181
right: 0;
8282

8383
/* Knob */
84-
&:after {
84+
&::after {
8585
top: calc(50% - var(--split-resizer-knob-size) / 2);
8686
left: calc(50% - calc(var(--split-resizer-size) / 4));
8787
width: calc(var(--split-resizer-size) / 2);
@@ -100,7 +100,7 @@
100100
right: 0;
101101

102102
/* Knob */
103-
&:after {
103+
&::after {
104104
left: calc(50% - var(--split-resizer-knob-size) / 2);
105105
top: calc(50% - calc(var(--split-resizer-size) / 4));
106106
width: var(--split-resizer-knob-size);
@@ -125,7 +125,7 @@
125125
border: none;
126126
border-radius: 0;
127127

128-
&:after {
128+
&::after {
129129
content: '';
130130
opacity: 1;
131131
display: flex;
@@ -135,7 +135,7 @@
135135
}
136136

137137
&[data-orientation='vertical'] {
138-
&:after {
138+
&::after {
139139
width: 2px;
140140
left: calc(var(--split-resizer-size) - calc(var(--split-resizer-size) / 2) - 2px);
141141
border: none;
@@ -144,7 +144,7 @@
144144
}
145145

146146
&[data-orientation='horizontal'] {
147-
&:after {
147+
&::after {
148148
top: calc(var(--split-resizer-size) - calc(var(--split-resizer-size) / 2) - 2px);
149149
height: 2px;
150150
border: none;
@@ -155,7 +155,7 @@
155155
&:hover {
156156
background-color: transparent;
157157

158-
&:after {
158+
&::after {
159159
display: block;
160160
border-color: var(--split-resizer-hover-color);
161161
background-color: transparent;
@@ -165,13 +165,13 @@
165165

166166
.root--dashed {
167167
&[data-orientation='vertical'] {
168-
&:after {
168+
&::after {
169169
border-right-style: dashed;
170170
}
171171
}
172172

173173
&[data-orientation='horizontal'] {
174-
&:after {
174+
&::after {
175175
border-bottom-style: dashed;
176176
}
177177
}

‎package/src/Resizer/SplitPaneResizer.story.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,3 +114,11 @@ export function Usage(props: SplitPaneResizerProps) {
114114
</Flex>
115115
);
116116
}
117+
118+
export function NoProps() {
119+
return (
120+
<Flex w={100} h={100}>
121+
<SplitPaneResizer />
122+
</Flex>
123+
);
124+
}

0 commit comments

Comments
 (0)