iTwin / iTwinUI-react

A react component library for iTwinUI.
https://github.com/iTwin/iTwinUI
Other
84 stars 23 forks source link

Not able to add icon in FooterElement #705

Closed tmmehta5 closed 2 years ago

tmmehta5 commented 2 years ago

I'm using Footer component in my react application. I'm creating a custom footer passing FooterElement[] to customElements prop of Footer component. I want to add an icon at the start of the footer. But the definition for FooterElement doesn't allow to do so. It accepts only following: type FooterElement = { title: string; url?: string | undefined; key?: keyof TitleTranslations | "copyright" | (string & Record<never, never>) | undefined; }

Steps to reproduce

  1. Write footer with Footer component like - <Footer className="footer-class" customElements={() => footerElement} />
  2. Create an array of footerElement as - const footerElement: FooterElement[] = [ { title: "xyz", url: "url to xyz" }, { title: "abc", url: "url to abc" } ];

Expected behavior

My requirement if that this array should accept app icon. So, I want above array to be like- const footerElement: FooterElement[] = [ { icon:<svgIcon /> }, { title: "xyz", url: "url to xyz" }, { title: "abc", url: "url to abc" } ];

@FlyersPh9

FlyersPh9 commented 2 years ago

iTwinUI team: if a user places an SVG in our footer currently the icon is not vertically centered. Should we update the CSS to handle this? Screen Shot 2022-06-08 at 12 11 23 PM

veekeys commented 2 years ago

Never thought about image in footer.. @tmmehta5 do you have a mockup how it is supposed to look like with the image? Or what kind of image is expected there.

mayank99 commented 2 years ago

iTwinUI team: if a user places an SVG in our footer currently the icon is not vertically centered. Should we update the CSS to handle this? Screen Shot 2022-06-08 at 12 11 23 PM

That should be left upto the user imo.

tmmehta5 commented 2 years ago

@veekeys The image of area under which product is being marketed. For example, iTwinJS. image