Add missing props

[AnnMarieW]

The following are all "Good First Issues".

It's OK to do this in several PRs. If it's your first contribution, feel free to start with just one.

If you would like to do one or more, please mention it in a comment so we don't duplicate efforts 🙂

Please include:

• a minimal example for each prop added -- ideally one from the Mantine docs demonstrating the new prop.
• an updated component description. See improve Python docstrings #421 for more info. See the Popover component for an example of an updated description
• an entry in the CHANGELOG.md with a short description in the Unreleased Added section, plus include your GitHub username.

Optional:

• it's not necessary to write tests when it's just a prop that's passed to Mantine. However, we are working on adding tests for Dash specific functionality such as testing props that trigger callbacks. If you would like to add a test, please see the Contributing Guide for more info and examples
• It would be awesome to update the docs too! The docs is a Dash app made with DMC. You can find the content for each component here: https://github.com/snehilvj/dmc-docs/tree/main/docs

---

• Add type and breakpoints prop to Grid to support Container Queries. Added in 7.13.0 Status: in progress by @namakshenas

• Add name prop to Avatar to support displaying [avatar initials] (https://mantine.dev/changelog/7-11-0/#avatar-initials ) with auto generated color based on the given name) with auto generated color based on the given name . Added in 7.11.0 Status in progress by AnnMarieW

• Add gradient prop to LineChart to render line with a gradiant fill Added in 7.11 Status: In progress by AnnMarieW

• Add acceptValueOnBlur to TagsInput . Added in 7.11. Status: in progress by @AnnMarieW

• Add hideWithOnePage prop to Pagination which hides pagination when there is only one page. Added in 7.11. Status in progress by AnnMarie

• Add lineSize prop to Burger to supports change lines height Added in 7.11. Status: In progress by @ChinoUkaegbu

• Add type prop to SimpleGrid to support Container Queries. Added in 7.13.0 in progress by @namakshenas

• Add withKeyboardEvents prop to NumberInput. When set to False, it will disable up/down arrow keys handling Added in 7.8 update - I tried adding this prop and it seemed to have no effect. It may not be necessary to add since it's possible to disable the input and/or hide the controls. I'll leave it open if anyone else wants to try it, but I think it's ok to exclude this one.

• Addd allowedInitialsColors to Avatar Add missing props #478

• Add inline to Center component. Add missing props #478

• Add defaultExpanded to CodeHighLightTabs component Add missing props #478

• Add Add autoComplete prop to PasswordInput as requested in [Feature Request] Add autoComplete prop to PasswordInput #482

[ChinoUkaegbu]

Hi, I'd like to work on adding the lineSize prop to Burger!

[AnnMarieW]

Hi, I'd like to work on adding the lineSize prop to Burger!

You got it! Thanks so much @ChinoUkaegbu 🚀

[namakshenas]

According to @mantinedev/mantine, when using container queries, it is also required to set breakpoints prop to the exact container width values. So, you need to add breakpoint prop to the list above. Thanks @AnnMarieW!

And also sign me up for this task!

ps. Could you pls show me a quick sample of how to prepare a test for a PR?

[namakshenas]

The following are all "Good First Issues".

It's OK to do this in several PRs. If it's your first contribution, feel free to start with just one.

Please include a minimal example for each prop added.

If you would like to do one or more, please mention it in a comment so we don't duplicate efforts 🙂

• Add type prop to Grid to support Container Queries. Added in 7.13.0
• Add name prop to Avatar to support displaying avatar initials with auto generated color based on the given name) with auto generated color based on the given name . Added in 7.11.0
• Add gradient prop to LineChart to render line with a gradiant fill Added in 7.11
• Add acceptValueOnBlur to TagsInput . Added in 7.11. This could be used instead of debounce=True
• Add hideWithOnePage prop to Pagination which hides pagination when there is only one page. Added in 7.11
• Add lineSize prop to Burger to supports change lines height Added in 7.11. Status: In progress by @ChinoUkaegbu
• Add type prop to SimpleGrid to support Container Queries. Added in 7.13.0
• Add withKeyboardEvents prop to NumberInput. When set to False, it will disable up/down arrow keys handling Added in 7.8

Regarding "prop to SimpleGrid to support Container Queries", the link is not correct and should be changed into:

https://mantine.dev/core/simple-grid/#container-queries

[namakshenas]

The following are all "Good First Issues".
It's OK to do this in several PRs. If it's your first contribution, feel free to start with just one.
Please include a minimal example for each prop added.
If you would like to do one or more, please mention it in a comment so we don't duplicate efforts 🙂

• Add type prop to Grid to support Container Queries. Added in 7.13.0
• Add name prop to Avatar to support displaying avatar initials with auto generated color based on the given name) with auto generated color based on the given name . Added in 7.11.0
• Add gradient prop to LineChart to render line with a gradiant fill Added in 7.11
• Add acceptValueOnBlur to TagsInput . Added in 7.11. This could be used instead of debounce=True
• Add hideWithOnePage prop to Pagination which hides pagination when there is only one page. Added in 7.11
• Add lineSize prop to Burger to supports change lines height Added in 7.11. Status: In progress by @ChinoUkaegbu
• Add type prop to SimpleGrid to support Container Queries. Added in 7.13.0
• Add withKeyboardEvents prop to NumberInput. When set to False, it will disable up/down arrow keys handling Added in 7.8

Regarding "prop to SimpleGrid to support Container Queries", the link is not correct and should be changed into:

https://mantine.dev/core/simple-grid/#container-queries

The following are all "Good First Issues".
It's OK to do this in several PRs. If it's your first contribution, feel free to start with just one.
Please include a minimal example for each prop added.
If you would like to do one or more, please mention it in a comment so we don't duplicate efforts 🙂

• Add type prop to Grid to support Container Queries. Added in 7.13.0
• Add name prop to Avatar to support displaying avatar initials with auto generated color based on the given name) with auto generated color based on the given name . Added in 7.11.0
• Add gradient prop to LineChart to render line with a gradiant fill Added in 7.11
• Add acceptValueOnBlur to TagsInput . Added in 7.11. This could be used instead of debounce=True
• Add hideWithOnePage prop to Pagination which hides pagination when there is only one page. Added in 7.11
• Add lineSize prop to Burger to supports change lines height Added in 7.11. Status: In progress by @ChinoUkaegbu
• Add type prop to SimpleGrid to support Container Queries. Added in 7.13.0
• Add withKeyboardEvents prop to NumberInput. When set to False, it will disable up/down arrow keys handling Added in 7.8

Regarding "prop to SimpleGrid to support Container Queries", the link is not correct and should be changed into:

https://mantine.dev/core/simple-grid/#container-queries

Also, sign me up for this task, too.

[AnnMarieW]

Hi @namakshenas Thanks for offering to do the container query updates!

See my updated comments above on tests. It's not necessary to write tests for the Grid and SimpleGrid components, because they only have pass-through props and don't trigger Dash callbacks. But if you could make a sample app with the container query examples from the Mantine docs, that would be ideal.

[namakshenas]

Hi @AnnMarieW

Sorry for being late on this. I started working on this. Could you pls help me fix this issue? I'm getting a strange error while testing a sample code for SimpleGrid prop:

    from ._imports_ import *
ModuleNotFoundError: No module named 'dash_mantine_components._imports_'

Here is the content of my requirements.txt:

dash
git+https://github.com/namakshenas/dash-mantine-components.git@add-type-simplegrid#egg=dash-mantine-components

[AnnMarieW]

@namakshenas
Hmm that's odd. After you do npm run build you should just be able to run an app that's in the root of the dash-mantine-components folder.

[namakshenas]

@AnnMarieW

Getting the same error.

python version: 3.11.9
dash version: 2.18.2

entrirely purged the local dmc and then cloned it again. Add the commit; again same error!

[AnnMarieW]

@namakshenas are you unable to create the PR? It would be easier to help that way

[namakshenas]

@AnnMarieW

I created a PR and pushed it into the following branch:

https://github.com/namakshenas/dash-mantine-components/tree/add-type-simplegrid

[AnnMarieW]

@namakshenas I don't see a PR here, but I looked at your branch. No need to include the example app in the PR as it will have to be deleted later. You can just include it as comment when you open the issue. I don't see anything that would cause an error.