Mantine v7 migration
Home Page: https://v7.mantine.dev
License: MIT License
@mantine/vanilla-extract
I have no access to the other object in vanilla-extract. Is this intentional or a bug?
I resolved the issue with a direct theme import into my css file and load it directly from there. If this the correct way can someone told me how to create a interface for the other object?
Thanks for the help!
7.0.0-beta.2
No response
None
None
No response
@mantine/core
By Default, Mantine Provider uses value of "system" or "auto" for colorScheme changes however if i select "light" as colorScheme (considering my mac is using dark system theme), it first switches to "dark" theme then flashes to "light" theme.
Mantine Provider should respect "user" input theme first then opt in for system theme.
V7 Alpha 22
No response
No
No
Probably its a mistake in the logic, a small one. I think system theme is being listened to first which should be the 2nd Priority if the "user" does not make a choice.
@mantine/spotlight
Icons not aligned by vertical.
Before
After
I don't know if it's designed that way. But it's clearly not displaying nicely for me.
If it needs fixing, I'm willing to do it.
7.0.0-beta.5
No response
Yes
Yes
add to
.actionSection
display: flex
@mantine/core
I'm using Mantine V7 with Next.js 13. When I use the Card.Section component, something strange happens.
In development mode, everything looks fine because the negative margins work as expected. However, when I build my project for production, the negative margin stops working.🤔
I noticed in the Card.Section css that margins for top, right, bottom, and left are defined individually. However, during the build, they get combined into one shorthand margin property.
So if one of these CSS variables isn't defined, the entire margin property gets ignored.
Here is some screenshots
In development (notice the price details section of the card)
In production
7.0.0-beta.2
No response
None
Yes
I don't think this issue is specific to Mantine; it might be related to the bundler we're using.
Could we solve this by providing fallback values to CSS variables at the Mantine level? 💡
If its not possible, Does anyone know how to fix it?
@mantine/core
The <MultiSelect/>(Link) does have these 2 props in addition to the searchable prop to properly use the search functionality, but the <Select/> (Link) is missing those.
This does not really make sense to me, as both do have the searchable prop, but without onSearchChange and searchValue the search functionality is highly limited for the <Search/> component for no apparent reason.
7.0.0-beta.1
No response
None
None
No response
@mantine/code-highlight
When I use ncu -u I get the old update.
7.0.0-beta.2
No response
No
No
No response
@mantine/core
Hello,
We are currently using mantine v6 in our main Meteor app at Orderlion. We are very much looking forward to mantine v7, especially because of the new <ComboBox/> which we desperately need.
... so we wanted to give v7 a try. We ran into some issues at packaging which we could not solve, so we decided to wait for the release of v7 (**any idea when the first proper beta/RC release of v7 will happen? 😄).
The issue we ran into though was, that Meteor, at the moment, is still stuck at node v14.
Mantine v7 uses a package called type-fest, which restricts to node >= 16 in its package.json. We CAN install it by running yarn add ... --ignore-engines, but it would be much cleaner if you could revert to "type-fest: "3.13.1", which does not have this restriction.
Thank you very much for this awesome library!
7.0.0-alpha22
No response
Yes
None
"type-fest: "3.13.1" to lift the node engine restriction and also support Node v14.x again.
@mantine/core
First of all, thank you for the fantastic v7 version without CSS-in-JS. I have successfully migrated an entire application to v7 and find the new style handling much more straightforward and logical. 👍🏻
Everything is working fine in my development environment so far. But after building the project and running it productively there are some style glitches that do not occur in development. I would be very grateful for a clue as to what could have gone wrong here. I am using a Create React App (CRA) with React Scripts.
Example for strange layout effects on production build:
Development:
Production:
7.0.0-beta.2
See screenshot
None
None
No response
No response
Congratulations on the project! It looks great.
One implementation suggestion would be to consider adding a more neutral prefix, such as "-ds", to the CSS variable classes in Mantine. Currently, the library has several components with the name "Mantine," which could result in yet another acronym for new projects.
Other example, instead of "MantineProvider," it could be renamed to "ThemeProvider." This change would not disrupt the product but would make it more "white-label." It would be interesting to explore this possibility and use a more generic prefix to unnecessary acronyms in design systems built on top of Mantine.
None
@mantine/core
In the NumberInput and also other fields, rightSectionWidth is not setting the padding right correctly. leftSection is working fine.
7.0.0-beta.2
No response
None
Yes
No response
@mantine/dates
@rtivital it seams that the merge/build is somewhat strange for the timezones introduced with #59, is there something i can fix?
it seams to be translated to:
const [_value, setValue] = useUncontrolled({
value,
defaultValue,
finalValue: null,
onChange
});
you can see it in npm code view: https://www.npmjs.com/package/@mantine/dates/v/7.0.0-beta.7?activeTab=code
Seams likte the changes made by the MR are not in the build.
Running the build locally outputs the correct files.
7.0.0-beta.7
No response
No
Yes
No response
@mantine/core
Different IDs are generated on the client and server sides, and the ID is the same for all elements.
HTML output:
<select class="mantine-SbVPkHB mantine-Input-input mantine-NativeSelect-input"
data-variant="default" aria-invalid="false" aria-describedby="mantine-R3bddadkq-description"
id="mantine-R3bddadkq-input">
<option value="React">React</option>
<option value="Angular">Angular</option>
<option value="Vue">Vue</option>
</select>
<select class="mantine-SbVPkHB mantine-Input-input mantine-NativeSelect-input"
data-variant="default" aria-invalid="false" aria-describedby="mantine-R5bddadkq-description"
id="mantine-R5bddadkq-input">
<option value="React">React</option>
<option value="Angular">Angular</option>
<option value="Vue">Vue</option>
</select>
<select class="mantine-SbVPkHB mantine-Input-input mantine-NativeSelect-input"
data-variant="default" aria-invalid="false" aria-describedby="mantine-R7bddadkq-description"
id="mantine-R7bddadkq-input">
<option value="React">React</option>
<option value="Angular">Angular</option>
<option value="Vue">Vue</option>
</select>"@mantine/core": "7.0.0-alpha.17",
"@mantine/hooks": "7.0.0-alpha.17",
"@next/bundle-analyzer": "^13.4.11",
"clsx": "^2.0.0",
"lodash": "^4.17.21",
"next": "13.4.11",
"next-intl": "^2.19.0",
"react": "18.2.0",
"react-dom": "18.2.0",7.0.0-alpha.17
https://codesandbox.io/p/github/dejurin/mantine7-nextjs/main
No
Yes
No response
@mantine/core
Hello!
First of all I really enjoy using Mantine along with Next.js 13 App Directory! Provided features and components are amazingly thought out, designed, and developed. Thanks you for all your efforts.
We're currently building the app with alpha version. And yesterday I found out an issue in @mantince/core@^v7.0.0-alpha.17.
I'm using Formik with Mantine Select component. This form contains 'Reset' button, which calls Formik.resetForm() function. The value inside the dropdown is changing back to the initial, but the value in the Select Input is not changing. Here is my implementation for the context:
<Formik<PropertyFormData>
innerRef={handleFormRef}
initialValues={mapPropertyFromResponse(property)}
onSubmit={handleFormSubmit}
>
{(formProps) => {
return (
<Form>
<Select
label='Value Type'
name='valueType'
data={VALUE_TYPE_OPTIONS}
value={formProps.values.valueType}
onChange={(value) => {
formProps.handleChange({ target: { name: 'valueType', value } });
if (value === ValueType.BOOLEAN) {
formProps.handleChange({ target: { name: 'unit', value: '' } });
}
}}
/>
<Button onClick={formProps.resetForm()} type='button'>Reset</Button>
</Form>
);
}}
</Formik>v7.0.0-alpha.17
No response
No
None
No response
@mantine/core
@mantine/core: MantineProvider was not found in component tree, make sure you have it in your app
Error: @mantine/core: MantineProvider was not found in component tree, make sure you have it in your app
at useMantineTheme (http://127.0.0.1:5173/node_modules/.vite/deps/@mantine_core.js?t=1694402253229&v=350fc021:1898:11)
at useProps (http://127.0.0.1:5173/node_modules/.vite/deps/@mantine_core.js?t=1694402253229&v=350fc021:2704:17)
at http://127.0.0.1:5173/node_modules/.vite/deps/@mantine_core.js?t=1694402253229&v=350fc021:13539:17
at renderWithHooks (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-HOONJUPS.js?v=610e3bbd:12171:26)
at updateForwardRef (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-HOONJUPS.js?v=610e3bbd:14327:28)
at beginWork (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-HOONJUPS.js?v=610e3bbd:15934:22)
at beginWork$1 (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-HOONJUPS.js?v=610e3bbd:19749:22)
at performUnitOfWork (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-HOONJUPS.js?v=610e3bbd:19194:20)
at workLoopSync (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-HOONJUPS.js?v=610e3bbd:19133:13)
at renderRootSync (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-HOONJUPS.js?v=610e3bbd:19112:15)
7.0.0-beta.4
No response
None
Yes
No response
@mantine/core
Attribute "order" contains [object Object]
7.0.0-beta.0
https://v7.mantine.dev/core/grid
No
No
No response
@mantine/core
the navlink component isn't yet implemented.
is it coming or will be deprecated ?
7
No response
None
None
No response
Hello, thank you so much for your great work.
I see CSS Modules and Vanilla Extract are the recommended & described options included in the docs. Will you also add PandaCSS? It seems very promising.
@mantine/core
While in Edge the :disabled pseudo-class is added to input fields, in Firefox it's not.
You can test this in the documentation: https://v7.mantine.dev/core/input#usage
7.0.0-beta.5
https://v7.mantine.dev/core/input#usage
No
Yes
No response
@mantine/core
i get error on setting classNames object key
my code:
<PasswordInput label="New password" radius="md" classNames={{ input: 'focus:!border-gray-800 !font-normal', label: '!text-gray-600', error: '!font-medium', }} required {...form.getInputProps('password')} />
error:
`Type '{ input: string; label: string; error: string; }' is not assignable to type 'Partial<Record<PasswordInputStylesNames, string>> | ((theme: MantineTheme, props: PasswordInputProps, ctx: unknown) => Partial<...>) | undefined'.
Object literal may only specify known properties, and 'input' does not exist in type 'Partial<Record<PasswordInputStylesNames, string>> | ((theme: MantineTheme, props: PasswordInputProps, ctx: unknown) => Partial<...>)'.ts(2322)
styles-api.types.d.ts(30, 5): The expected type comes from property 'classNames' which is declared here on type 'IntrinsicAttributes & PasswordInputProps & RefAttributes'`
7.0.0-alpha.20
No response
No
No
No response
@mantine/dates
There is no ref prop on the DatePickerInput. The documentation says there is:
https://v7.mantine.dev/dates/date-picker-input#get-element-ref
and it would be really useful to me for there to be a ref as I'm trying to use it with use-click-outside!
7.0.0-beta.1
No response
No
Yes
No response
@mantine/notifications
Click to show a notification in the CodeSandbox repro and observe how the notification suddenly disappears, without an animation.
Edit: I noted that the issue only happens when you click the button a single time and close the notification (or wait it to close automatically), but if you open multiple notifications at once, then they animate when exiting.
7.0.0-alpha.20
https://codesandbox.io/s/jovial-ben-8nnn6j?file=/src/App.tsx
No
No
No response
@mantine/core
Navbar and Aside as separate components available in v6 (https://mantine.dev/core/app-shell/#navbar-and-aside-components). v7 is missing these two components.
7.0.0-beta.5
No response
None
None
No response
@mantine/core
Both Select/MultiSelect accept data formats which can be:
data={[
{value: "one", label: "One"},
{value: "two", label: "Two"},
{value: "three", label: "Three"}
]}
When using data like this the dropdown selector correctly renders the label value but the input field always renders the value of the selected options.
It should instead render the label value.
7.0.0-alpha.22
No response
Yes
Yes
No response
@mantine/core
AppShell navbar sets the different width, but gets the same width.
<AppShell
layout="alt"
header={{ height: 60 }}
navbar={{
width: 300,
breakpoint: 'sm',
}}
>
<AppShell.Main>
<AppShell
navbar={{
width: 200,
breakpoint: 'sm',
}}
>
</AppShell>
</AppShell.Main>
</AppShell>
version: 7.0.0-beta.2
bundler: Vite
@mantine/core
When using the ActionIcon component I need to specify the size and stroke on the Icon to have it display the same as the documentation.
7.0.0-beta.2
No response
None
None
No response
@mantine/core
I use new alpha version of mantine v7 and found that "Rating" component increases significantly bundle size. using next.js 13.4.9 app router.
Here is two screen shots with before and after using it:
Before:
After:
7.0.0-alpha.19
No response
No
No
No response
@mantine/core
TH tag not display column border.
7.0.0-beta.2
No response
Yes
Yes
Table.module.css
&[data-with-column-border]:not(:last-of-type) {
--_border-right: rem(1px) solid var(--_table-border-color);
@mixin rtl {
--_border-left: rem(1px) solid var(--_table-border-color);
--_border-right: none;
}
}:last-of-type - will not work with different tags. It should be changed to last-child.
@mantine/core
I'm comparing it to version 6. I use a resolution of 1366x768, and there are no issues at 1920x1080 resolution.
7.0.0-beta.5
No response
None
None
No response
@mantine/core
Hi,
I'm going to use app routing instead of _pages, therefore I use the v.7 of Mantine. I noticed, there is no some components which were in v.6. For example, <AppShell />
So I'd like to know what happend? Will this version support it or not? And what can we do with our legacy code?
Thank you!
7
No response
None
None
No response
@mantine/core
The DatePickerInput popout isn't (or is only minimally) styled.
I'm using NextJs, and I recreated the issue in the next-app-min-template to check that it wasn't anything else I'd done. I used the DatePickerInput code from the manual page.
7.0.0-beta.0
No response
No
No
No response
All of them.
I'm installing Mantine in my project that uses Remix v1.18.0.
My package.json contains "type": "module" and my remix.config.js contains serverModuleFormat: 'esm'.
When I run remix dev, I get the error:
SyntaxError: The requested module '@mantine/core' does not provide an export named 'ColorSchemeScript'
at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
at ModuleJob.run (node:internal/modules/esm/module_job:189:5)
at async Promise.all (index 0)
at ESMLoader.import (node:internal/modules/esm/loader:530:24)
at Server.<anonymous> (file:///Users/gustavopch/Projects/my-project/server.ts:2:113)
Note that it's not a problem with ColorSchemeScript, it's a problem with ESM in general.
7.0.0-alpha.19
https://codesandbox.io/p/sandbox/lucid-goldwasser-nm7z3k
None
None
Adding "type": "module" to Mantine's package.json files makes it work in runtime, but then TypeScript doesn't recognize the types of the imports and starts giving errors like:
Module '"@mantine/core"' has no exported member 'ColorSchemeScript'. ts(2305)
@mantine/core
I want to use AppShell with a static Header and Footer, in v6 you could apply fixed={false} to achieve this, but it appears that prop is not supported anymore in v7? I also tried applying header={{ position: "relative" }} to the AppShell which didn't work. Is there a way to achieve this still?
This seems like an important feature as many pages (home pages/landing pages/this Github page, etc.) don't look good with a fixed header/footer. I could roll my own header/footer but AppShell comes with great defaults like semantic HTML tags, styles(borders), main section that grows full screen, etc. that I'd have to reimplement just to mimic what's already done.
Is this something that is already possible or will be reimplemented?
7.0.0-beta.3
No response
None
None
No response
@mantine/core
Hey!
First of all, thank you so much for this amazing library!
I'm using it with NextJS 13 app directory and are trying to get all the values from FormData using the name property. It works for all other types of inputs I'm using (NumberInput, Select, TextInput, TextArea), but for TagsInput it doesn't.
Here's a code that shows the "error".
import { Button, Stack, TagsInput, TextInput } from '@mantine/core';
import React from 'react';
export default function Test() {
return (
<form
action={(formData) => {
console.log(formData.get('name')); // this is set
console.log(formData.get('categories')); // this is empty string
}}
>
<Stack>
<TextInput name="name" label="Name" withAsterisk />
<TagsInput name="categories" label="Categories" data={['Category 1', 'Category 2']} />
<Button type="submit">Save</Button>
</Stack>
</form>
);
}7.0.0-beta.0
No response
None
None
No response
@mantine/core
In the Indicator component, the border-radius style differs in display at px or rem values at different sizes. For this reason, it is better to use constants with percentages for the border-radius style to unify the display
7.0.0-beta.2
No response
None
None
No response
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.