I tried including a Info Icon from mui in md toast, but it didn't work.
This is what I tried:
import InfoOutlinedIcon from "#mui/icons-material/InfoOutlined";
toast("Information Toast", {
icon: <InfoOutlinedIcon />,
autoClose: false,
});
And it throws me an error for not being able to read properties of undefined. I saw that you can include it inside the message, but if I write a longer message it no longer aligns with the icon. That's why I wanted to try it this way.
Does someone know another way, I can use a custom Icon from mui in my toast?
Related
Darkmode works everywhere in my react app, except on a headless ui combobox. I put a styled h1 in the same component and applied dark:bg-red-200(and any other style) no problem. The combobox accept all other tailwind utilities including attibutes like hover: but not the dark: property.
For others (such as me) stumbling upon this:
E.g. the Dialog-component (and I assume others too) render right in the body tag (source)
If you are using "the class strategy" to handle dark mode (i.e. adding a "dark" class to the wrapper) this will be a problem, because the class is not anymore parent to the Dialog
Solution I ended up using:
I ended up using useEffect to add the dark class to the body:
useEffect(() => {
if(darkMode){
document.body.classList.add('dark')
}else{
document.body.classList.remove('dark')
}
}, [darkMode])
I need to test a popover from chakra-ui in a React App.
I tried with this. But It does not find the popover. If I try by text, then I cannot assert if it is visible.
it('show a popover when hover terms and conditions', () => {
render(<SummaryForm />);
const link = screen.getByText(/terms and conditions/i);
const popover = screen.getByRole('dialog');
expect(popover.parentNode).not.toBeVisible();
userEvent.click(link);
expect(popover.parentNode).toBeVisible();
});
Try using the hidden option of the API:
const popover = screen.getByRole('dialog', {hidden: true})
ChakraUI renders a wrapper div around the section that has the dialog role. You can see this by using screen.debug() if you are using the testing-library. Notice the wrapper controls the visibility of said section, which starts as hidden, with styling elements and aria tags.
Using the hidden option allows you to look amognst the elements that aren't visible in the accessibility tree.
Since you want to test the popover, you should know there are some issues with modifying and checking the visibility of the popover when using jest-dom.
The chakra Modal applies a transform style to toggle its visibility. toBeVisible only checks a limited set of style attributes - transform is not one of them - so you might have to check for those instead, for example:
For invisibility:
expect(screen.getByRole('dialog')).toHaveStyle('transform: translateX(0px) translateY(0.18967%) translateZ(0);')
try toBeInTheDocument() or toMatchSnapshot()
Running Storybook I'd like to navigate to my component and play with Docs tab and check its behavior as I change control value for each property. I implemented a component Footer that could receive string | JSX.Element | React.FunctionComponent types (I'm using TypeScript along ReactJS).
Unfortunately, when I type <div>my jsx</div> inside control field, a red border comes up pointing error and doesn't update the component in the preview as expected.
This is the screen I'm trying to insert into control field:
In the .stories.js file I have at the end:
export const Default = Template.bind({});
Default.args = {
subscribe: "Replace me by the Subscribe component of Design System.",
brand: <figure>Put branding logo here!</figure>,
links: <div><div>first column of links</div><div>second column of links</div></div>,
bottom: "All rights reserved."
}
The Links text is the default value for link property (from the actual React component file). As the code and image above can show us, it seems the JSX argument passed on Default.args in .stories.js file is completely ignored.
I'd like to insert a JSX into control field of storybook playground and then get Footer component live updated with JSX component rendered in the preview. How can I achieve that?
I am testing my application, and encountered a problem. When trying to test whether a row in my Dropdown component applies an effect on hover, I noticed I was not able to check elements for their background color, which I find odd.
Trying to use the jest-dom matcher "toHaveStyle()", the following is an example where I cannot for the life of me get it to work.
dropdown.test.tsx
test('Should contain clickable elements that change style when hovered', () => {
const dropElement1 = screen.getByLabelText('testLabel1');
expect(dropElement1).toHaveStyle('background: white');
});
Error
I have also tried this by using 'background-color', by using the hex value (another interesting bug is that PrettyDom converts hex to RGB), or by adding ; to the declaration in toHaveStyle().
I am certain that the element is indeed white, and I can't understand what is going wrong. If my approach is bad practice and you have a better idea of how to check this, or you have a solution to my problem, please, let me know!
Your testing case can't find the dropElement1 styles because it's a drop-down menu and not opened since you just render the Dropdonw component.
You need to simulate a mouse hover or clicking action on the DropDown menu and then expect to have styles property for it.
import React from "react";
import { render, screen, fireEvent, waitFor } from "#testing-library/react";
import { Dropdown } from "./Dropdown";
test('Should contain clickable elements that change style when hovered', async () => {
render(<Dropdown />);
fireEvent.mouseEnter(screen.getByText('drop-down-btn'));
await waitFor(() => screen.getByTestId('dropdown-menu'))
expect(screen.getByLabelText('testLabel1')).toHaveStyle('background: white');
});
Note: as you have not posted the Dropdown component, I put some sample names for getting your toggles and drop-down menu. also, you can read about the mouse events on the react-testing-library. you can also use mouseOver but it depends on your drop-down menu implementation.
I am running into an issue where part of my component within the modal generated by lightning:overlayLib requires the user to scroll. I want the div that appears to display over the top of the footer component. Is this possible?
Current issue:
If I disable the two overflow attributes in css on the slds-modal__content (shown below):
I get the desired result:
BUT, I cannot for the life of me, get this to work. When I pass in the modified css class slds-modal__content, it fills the screen with white. (When I set overflow: visible)
I am generating the component using the lightning:overlayLib using this code:
var modalHeader, modalBody, modalFooter;
$A.createComponents([
["c:UWB_modalHeader",{'label':'Approve'}],
["c:UWB_utilityModal",{'modalName':'approve', 'approvalId':data.proccessInstanceToPiwi[data.approvalHistory[0].ProcessInstanceId], 'relatedObject':recordData}],
["c:UWB_modalFooter",{'cancelLabel':'Cancel', 'submitLabel':'Approve'}]
],
function(components, status){
if (status === "SUCCESS") {
modalHeader=components[0];
modalBody = components[1];
modalFooter = components[2];
component.find('overlayLib').showCustomModal({
header: modalHeader,
body: modalBody,
footer: modalFooter,
showCloseButton: false,
cssClass: 'slds-modal__content'
})
}
}
);
Where the css class 'slds-modal__content' is as follows:
.THIS .slds-modal__content{
overflow-y: visible !important;
overflow-x: visible !important;
}
Even after attempting to modify the class, the issue still persists. I have been successful with this method generating a standard modal without using lightning:overlayLib, but I'm not able to generate the modal in this way.
I've just recently started using lightning:overlayLib myself. I didn't have the issue you're having, but I realized that since the body and footer components require application events to communicate, the feature of declaring a footer component that requires communication with the body component at all is too cumbersome to be worth it.
I would recommend not using the footer component feature of lightning:overlayLib at all, and just put the buttons you need in the body component.