Notification renders double close button

[groundfloorwebb]

First off, great library, keep up the good work!

I'm using @oruga-ui/oruga-next 0.5.6 and @oruga-ui/theme-bulma 0.2.7 in a Vue 3 app with fontawesome. When I open a notification like this

	const { oruga } = useProgrammatic();
	oruga.notification.open({
		message: 'This is a test error message',
		variant: 'danger',
		closable: true,
	});

oruga creates a notification with a double close button like this

This issue is theme applies bulma's delete class to the close element (creating the circular close button using css) and also generates an icon using the default value of the closeIcon prop in the component. I was able to get around this problem by passing an empty string for closeIcon in my config like this:

import oruga from '@oruga-ui/oruga-next';
import { bulmaConfig } from '@oruga-ui/theme-bulma';
import { merge } from 'lodash';

export const overrideConfig = {
	notification: {
		// This removes a duplicate close icon
		closeIcon: '',
	},
};

app.use(oruga, merge(bulmaConfig, overrideConfig));

I would recommend making this a part of the theme for a smoother dev experience.

[jtommy]

Can you open a PR to remove in the config file?

[groundfloorwebb]

@jtommy how's this? #66

[groundfloorwebb]

Also, looks like this is only an issue when using the FontAwesomeIcon component to render the icons.

[jtommy]

@groundfloorwebb I'm running the demo project and it looks ok without any changes... (using SVG or CSS mode)

Can you reproduce it on codepen or similar?

[groundfloorwebb]

Well looks like the real issue was i was including a snippet of buefy css leftover from the previous version of our design system. With that code removed the icon is still rendered but has a size of 0px, just like the example code. I feel silly, but the good news is this resolved another strange issue as well.