Still no columnCount
:'(
Because next/image
adds a position: absolute
via Image's style prop and I need to unset it.
pos="unset!important"
With Chrome, Brave and Firefox on Ubuntu. I have the same result on all my browsers.
Removing the size does not resolve the issue, the problem is that a long title can go behind the close button.
The title can be translated into several languages or contain dynamic content and have an unknown length.
Same example without size: https://codesandbox.io/s/wonderful-lumiere-mlnqhs?file=/src/index.js
One thing I would love would be a set of stories so we can see the theme we're expanding on as a whole. Or a tool that allows you to visualize the impact of our changes on all components.
feat(common-labels): translate event/fields to fr
style(bs-templates): update modal title
chore(react-share-menus): fix babel config
style(react-share-menus): update modal title
style(react-shared): update modal title
chore: update lockfile
fix(react-shared): fix jest config
fix(react-shared): add testURL to jest config
fix(react-shared): use jsdom test environment
fix(agenda-docx): fix tests
fix(react-shared): fix test
@cfaester/enzyme-adapter-react-18
works fine for me
fix(react-shared): fix sideEffects for css and scss
The following import is ignored:
import '@company/package/css/react-date-range.css';
The following works fine, but the variable is of no use to me:
import _css from '@company/package/css/react-date-range.css';
I don't understand the origin of this problem.
How to keep css imports without giving them unnecessary names that the linter complains about?
No response
System:
OS: Linux 5.17 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
Binaries:
Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
Yarn: 3.2.4 - ~/.yarn/bin/yarn
npm: 9.2.0 - ~/.nvm/versions/node/v16.15.0/bin/npm
Browsers:
Chrome: 108.0.5359.124
Firefox: 109.0
npmPackages:
@storybook/nextjs: ^7.0.0-beta.30
No response
I had a "sideEffects": false
in the package.json, which I replaced with "sideEffects": ["*.css", "*.scss"]
and it works fine now.
The following import is ignored:
import '@company/package/css/react-date-range.css';
But the following works fine, but the variable is of no use to me:
import _css from '@company/package/css/react-date-range.css';
I don't understand the origin of this problem.
How to keep css imports without giving them unnecessary names that the linter complains about?
No response
System:
OS: Linux 5.17 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
Binaries:
Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
Yarn: 3.2.4 - ~/.yarn/bin/yarn
npm: 9.2.0 - ~/.nvm/versions/node/v16.15.0/bin/npm
Browsers:
Chrome: 108.0.5359.124
Firefox: 109.0
npmPackages:
@storybook/nextjs: ^7.0.0-beta.30
No response
fix(react-filters): remove react strict mode
fix(react-filters): move QueryClientProvider in FiltersManager
chore(react-shared): update babel config
feat(react-shared): update nl2br
chore: update lockfile
feat(uikit): refactor and add NoBreak
fix(eslint-config): fix linting with typescript
Merge branch 'main' of github.com:OpenAgenda/oa-public
When a modal is displayed with a long title, it can go behind the close button, which is visually not pretty.
https://codesandbox.io/s/sad-babycat-ijposv?file=/src/index.js
2.4.9
Brave 1.46.144
This problem could be fixed by moving the ModalCloseButton in the ModalHeader, which changes the html structure a bit but doesn't change anything visually because the button is absolute.
And when there is a close button in the header, we can increase the right padding to avoid overlapping:
{/* Before */}
<ModalContent>
<ModalHeader>
...
</ModalHeader>
<ModalCloseButton />
</ModalContent>
{/* After */}
<ModalContent>
<ModalHeader>
...
<ModalCloseButton />
</ModalHeader>
</ModalContent>
The fix (example), it can be in the theme:
<ModalHeader
sx={{
':has(> .chakra-modal__close-btn)': {
pr: 12, // to not overflow with close button
},
}}
>
It is not necessary here
I wouldn't have thought this PR would have fixed that bug too, that's great
Thanks for your response, @mdjermanovic
Fixes #7224 and #4832
More details in the issues
Update modal.ts
Fixes #7224 and #4832
<ModalContent containerProps={{ display: "grid" }}>
instead of <ModalContent>
fix the issue:
https://codesandbox.io/s/vigorous-bassi-gyjgoy?file=/src/index.js
Maybe it should be in the default theme?
A display: grid
instead of display: flex
on .chakra-modal__content-container
fix the problem:
When I create a modal (centered or not), I expect to be able to see all the contents of it.
As soon as my centered modal is too big, the top disappears. Everything else works normally and the bottom is displayed correctly when I scroll, just the top is cut off.
https://codesandbox.io/s/thirsty-fermat-gy9oqs?file=/src/index.js
2.4.7
Brave 1.46.144
No response