fix: do not use css selector for collapse styles #396

tooppaaa · 2021-06-11T07:19:20Z

When using any option on generateClassName, we can't predict what they will look like.
Do not use hardcoded css selectors.

ggascoigne · 2021-07-09T22:22:24Z

src/SnackbarItem/SnackbarItem.tsx

@@ -194,6 +204,10 @@ const SnackbarItem: React.FC<SnackbarItemProps> = ({ classes, ...props }) => {
            timeout={175}
            in={collapsed}
            onExited={callbacks.onExited}
+            classes={{
+                wrapper: clsx(classes.collapseWrapper, { [classes.collapseWrapperDense]: dense }),
+                container: classes.collapseContainer


FYI with @material-ui/core 4.12.1 this wants to be

root: classes.collapseContainer

rather than container.

i.e. handle the deprecation of .MuiCollapse-container in the Collapse component. The changes in ./src came from iamhosseindhv#396, the changes in the redux-example are from the lint rules.

joshkel · 2021-07-17T19:59:04Z

When using any option on generateClassName, we can't predict what they will look like.
Do not use hardcoded css selectors.

It was my understanding from the Material-UI docs that, for this use case, the class names are consistent and predictable, and it is permitted to use them? (See the StyledTextField example on that page.) I thought that was why Material-UI makes class names, including generated global class names, part of each component's documented API.

brunolopesr · 2021-08-10T21:14:09Z

FYI this fixes #389 too when we want to customize the seed of the class names, the main reason why we shouldn't use CSS selectors

pahan35 · 2021-10-26T09:05:34Z

@ggascoigne, what are the next steps here?

I also faced this issue and spent 1+ hour debugging it.

iamhosseindhv · 2021-10-27T20:45:06Z

Sorry for that @pahan35 .

I'm working on notistack v3 which removes the dependency on MUI and resolves this issue. I'll keep #389 open to potentially add the fix to v2 (in case people don't want to upgrade).

* Add goober * Use goober for SnackbarContainer * Use goober from SnackbarContent * Convert Snackbar component to Typescript * Add material design content * Process props and pass to custom snackbar * No spreading * Reuse enqueueSnackbar type * Add WIP migration guide * Add tslib to devDep * Remove duplicate eslintrc * Render SnackbarContainer children * Default content should forwardRef * Fix bug with collapse classes * Don't drop support for `content` prop just yet * Remove duplicate className * Use useSnackbar in the basic example * Update Migration md * Add links to the right section * No memo for SnackbarContent * Bump version to v2 * 2.0.1-alpha.0 * Update typedoc.json * No imports from outside in index.d.ts * 2.0.1-alpha.1 * Update typedoc.json * Ensure CustomSnackbarProps type is accurate * Use Generics for Variant * 2.0.1-alpha.2 * Minor * Add more strict types * 2.0.1-alpha.3 * Get message from options only * Move minWidth to snackbar for easier customisation * Add MIGRATION to npmignore * Make intellisense happy * Apply Collapse customisation in SnackbarContainer * Fix various issues with Container component * Add default background color * Add ComponentClasses * Update typedoc.json * 2.0.1-alpha.4 * [alpha] Add .bind(this) to method stored in provider state (#397) * Fix easy linting issues * Import types from types.ts file * Fix bind.this * Fix collapse selectors * Update package-lock * 2.0.1-alpha.5 * Fix ts-ignore * v3.0.0-alpha.1 * Use clickaway component * Add useForkRef * Rename class keys * Use internal svg icon * Use internal transition components * Fixes #396 #389 - Do not use css selectors for Collapse component * Add useCallbackNormaliser * Update SnackbarProvider types * Use internal Collapse component * Add transition utils * Rename close reason * Update types * Remove MUI dependency * Move transitions into their directory * Improve transition import paths * Add react-transition-group types * Update import paths for ui components * Add index export * Move useForkRef * Move SnackbarContainer * Update path to SnackbarProvider * Update possible transition components * Default to MaterialDesignContent in SnackbarItem * Move util functions to the relevant file * Move warning messages to the relevant file * Remove CloseReason constant * Improve merge helper function * Move merger into its own file * Rename file and update import paths * Update docs * Add np as publisher * Update published main path * Copy files to dist folder * Add np * No github drafter * Add npm scripts * Add custom component example * Update indentation from 4 to 2 spaces * Add readme * Add readme with codesandbox button * Remove react-transition-group dep * Add internal transition component * Fix bug with warning logger * SnackbarItem don't add snackbarid as arg to transition callbacks * Minor * Simplify transition logic by removing useCallbackNormaliser * Update migration guide * Add `id` to transition props * Update typedoc * 3.0.0-alpha.2 * Minor change * Update link codesandbox example * Export transitions * Remove fontFamily stylings * Update variant types * Regenerate doc defs * Move types in one file * Regenerate docs * Ignore prettier config * enforce node engine * Support react 18 * Remove yolo * Update np version * Update docs * Copy package.json before packing * Rename lifecycle script * Add postversion script * Fix typo * v3.0.0-alpha.3 * Minor * Update links to notistack website * Minor * Add second custom example * Add report complete example * Update report complete example * Update alpha engine versions (#497) Co-authored-by: Antti Ahti <[email protected]> * Update jsdocs * v3.0.0-alpha.4 * Fixes #495 - FIx all snackbars closing at the same time (#498) * v3.0.0-alpha.5 * Use a more simple Collapse * Remove getAutoHeightDuration as a file * Update eslint config * Run eslint fix * Remove ClickAway listener * Minor * Convert transition component to TS * Move TransitionStatus type * Remove transitions * Export Transition component * Update types to export Transition component * Address ts errors * Move cp commands to package.json * Update scripts * Add test script * Update np config * v3.0.0-alpha.6 * Update banner image to be served from docs website * Add support for displaying Snackbars outside of the component (#499) * Add support for displaying snackbars outside of the component * Update README instructions * Update MIGRATION.md * Remove withSnackbar HOC (#500) * Convert JS files to TS * v3.0.0-alpha.7 * Closes #501 - Remove clickaway from docs * Fixes #513 - Ensure MUI transitions continue to work (#518) * Update transition types * Ensure MUI transitions continue to work * Update typedocs * v3.0.0-alpha.8 * Add render function SnackbarProvider * v3.0.0-alpha.9 * Update typedocs * v3.0.0-alpha.10 * Closes #521 - Update SnackbarContent to accept ref type * v3.0.0-alpha.11 * Allow overriding styles of Material Snackbar (#545) * Pass className down to snackbar content * Add MuiContent-variant classname * Export MaterialDesignContent component * Update typedocs * Minor * v3.0.0-alpha.12 * v3.0.0-alpha.13 * Update CHANGELOG.md * Update README.md --------- Co-authored-by: Anthony Raymond <[email protected]> Co-authored-by: Antti Ahti <[email protected]> Co-authored-by: Antti Ahti <[email protected]>

fix: do not use css selector for collapse styles

1f30385

lukaszmysiak mentioned this pull request Jun 17, 2021

Fix support for next version of @material-ui/core #387

Closed

ggascoigne reviewed Jul 9, 2021

View reviewed changes

joshkel mentioned this pull request Jul 17, 2021

Support Collapse with root and container class keys #408

Merged

iamhosseindhv added a commit that referenced this pull request Oct 27, 2021

Fixes #396 - Do not use css selectors for Collapse component

7b67361

iamhosseindhv added a commit that referenced this pull request Oct 27, 2021

Fixes #396 #389 - Do not use css selectors for Collapse component

87d049d

iamhosseindhv closed this Oct 27, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: do not use css selector for collapse styles #396

fix: do not use css selector for collapse styles #396

tooppaaa commented Jun 11, 2021 •

edited

Loading

ggascoigne Jul 9, 2021

joshkel commented Jul 17, 2021

brunolopesr commented Aug 10, 2021

pahan35 commented Oct 26, 2021

iamhosseindhv commented Oct 27, 2021 •

edited

Loading

fix: do not use css selector for collapse styles #396

fix: do not use css selector for collapse styles #396

Conversation

tooppaaa commented Jun 11, 2021 • edited Loading

ggascoigne Jul 9, 2021

Choose a reason for hiding this comment

joshkel commented Jul 17, 2021

brunolopesr commented Aug 10, 2021

pahan35 commented Oct 26, 2021

iamhosseindhv commented Oct 27, 2021 • edited Loading

tooppaaa commented Jun 11, 2021 •

edited

Loading

iamhosseindhv commented Oct 27, 2021 •

edited

Loading