search

okta / okta-signin-widget

HTML/CSS/JS widget that provides out-of-the-box authentication UX for your organization's apps
Other
375 stars 317 forks source link

Feature request: a guide to styling the widget #2283

Open indignant opened 3 years ago

indignant commented 3 years ago

I'm submitting a

Background info

Hey there 🌈 As a frontend dev, I've been tasked with styling an Okta hosted login page. The Okta documentation specifies that we can add styles in Customization tab in Okta then redirects to this repo. The README here has this text:

│   │   # Main CSS file for widget styles. Try not to override the classes in this
│   │   # file when creating a custom theme - the classes/elements are subject to
│   │   # change between releases

But I don't see where there's an example of using custom styles. I think it would be beneficial to have an example of customizing the widget without referring to the classes/elements in the markup for the widget.

Expected behavior

As a new Okta user, I would expect some explanation or example on how to do the things the documentation says is possible in a way that is not at odds with the warnings in this repo's README.

Thank you 🦄

shuowu commented 3 years ago

@indignant Thanks for reporting this issue! I will reach out to our widget team for suggestions.

shuowu commented 3 years ago

@indignant Can you try this guide. Here is also a live widget that you can play with.

indignant commented 3 years ago

Thank you for looking into this @shuowu

I should have mentioned that I had read the guide you linked to and am able to update the CSS for the page/widget if I use the IDs/classes/elements I find in the browser's inspector. However the README in this project says that this is not encouraged since "the classes/elements are subject to change between releases."

So I guess my question boils down to:

  1. If I want Okta to host the page/widget and
  2. if I want to style the widget and
  3. if I want to stay on the latest version of the widget (which I think by default Okta uses the latest version) and
  4. if I want my users to experience consistent styles between releases then
  5. how do I style the widget?
indignant commented 3 years ago

It seems like both the live widget editor and this video use the classes to edit things. Is the README wrong maybe? Or is there no way to have stable styles that work between releases?

shuowu commented 3 years ago

@indignant For styling Okta hosted widget, you can follow this guide

indignant commented 3 years ago

@shuowu Yep, I saw that (I actually linked to the same article in this comment). I'm having trouble explaining myself.

Resources on the Okta website suggest styling the widget using IDs/classes/elements, but the README in this repo explicitly says to avoid this:

│   │   # Main CSS file for widget styles. Try not to override the classes in this
│   │   # file when creating a custom theme - the classes/elements are subject to
│   │   # change between releases

Those things, as far as I understand them, are mutually exclusive. I can't both use the classes and avoid using the classes. So I suppose there are two options for resolving this issue:

  1. If there is not a stable API for styling the widget, could we get a stable API, documented it, and remove the warning in the README OR
  2. If there is a stable API, could we have it documented and remove the warning

I guess I can stay fixed to specific version of the widget, but I'd be concerned about missing important security updates. Either way, I think it would be beneficial to have a stable styling API that's documented because I'm not sure of all the possible things users might see and I want to create a consistent experience for them.

shuowu commented 3 years ago

@indignant Right, we will align the README file with the guide.

Internal Ref: OKTA-443373

jchabotamica commented 1 year ago

I am still confused about the appropriate way to style the widget. Do we need to download the prebaked okta-sign-in.min.css and then provide our own css overwrites? Is there a way to alter the okta css directly so we don't download a bunch of "unused css"? Also, we have our own fonts. How do we use our own internal fonts directly instead of download the "monsterat" fonts that okta comes with? Would like to avoid these unnecessary font downloads if able.

Currently we import the okta-sign-in.min.css then using styled-components we overwrite these styles but need to use '!important' on all of them for them to take affect. Definitely feels like a hack, but haven't been able to figure out any other way.

jchabotamica commented 1 year ago

@shuowu are there instructions on how to properly style the widget if you're using it as an npm module? I'd like to remove the dependencies on the font files at a minimum!