Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[release/10.11.0] PBI AB#97569 [Tech Debt] - Healthy Church Widgets Framework - Ensure CSS shipped with widgets CANNOT affect anything on consuming page, outside of widget's container #495

Merged
merged 10 commits into from
May 23, 2024
Merged

[release/10.11.0] PBI AB#97569 [Tech Debt] - Healthy Church Widgets Framework - Ensure CSS shipped with widgets CANNOT affect anything on consuming page, outside of widget's container #495

Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
dcfa080
Wrapping all CSS styles into the single root class .react-cm-ui
IlyaRadinsky Apr 26, 2024
8dbc80a
Merge branch 'dev' of https://github.com/saddlebackdev/react-cm-ui in…
IlyaRadinsky Apr 29, 2024
6e70e05
Global .react-cm-ui replaced by .hc-ui
IlyaRadinsky Apr 30, 2024
33d075f
Merge branch 'release/10.11.0' into features/97569-css-bundle
groberts314 Apr 30, 2024
b924672
Merge branch 'release/10.11.0' into features/97569-css-bundle
groberts314 May 1, 2024
e7c989a
<html/> / <body/> related stuff moved from the typography.scss to the…
IlyaRadinsky May 7, 2024
b6f96e8
Merge branch 'release/10.11.0' into features/97569-css-bundle
groberts314 May 8, 2024
e5cacc3
fix: other stylesheet imports
groberts314 May 8, 2024
1bff88e
Font import moved to the top
IlyaRadinsky May 10, 2024
c9ab9d7
Merge branch 'release/10.11.0' into features/97569-css-bundle
groberts314 May 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
.react-cm-ui {
Copy link
Contributor

@groberts314 groberts314 Apr 26, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's maybe think a bit about this name.
We might want like .hc or .healthy-church or .hc-ui or .healthy-church-ui.

Thoughts?

cc
@JLeeC
@sircris
@War777
@KacosPro
@razmik-medoxi
@absqueued

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder why we wrapped modular styles with a class ?
@IlyaRadinsky can you please explain what are the benefits of doing it and why we couldn't do it in another way ?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@razmik-medoxi This is in service of Product Backlog Item 97569: [Tech Debt] - Healthy Church Widgets Framework - Ensure CSS shipped with widgets CANNOT affect anything on consuming page, outside of widget's container. So, for example, let's say React CM UI styles <h1> elements and other really common elements. When we export CSS from React CM UI and bundle it as part of a widget intended for use on an external website (e.g. saddleback.com), that style will "spill over" from the widget and affect the consuming website, which is highly undesirable. So this is designed to prevent that.

See for example:
https://hc-example-website.azurewebsites.net/ (no widgets)
https://hc-example-website.azurewebsites.net/Form (has the Forms widget on it)

Compare for example the top navigation bar (text gets bolder and such).
This is due to widget CSS (which includes React CM UI CSS). That's what we're trying to prevent here.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fair enough, I thought we encapsulated the widgets but it seems the styling didn't work well with that solution

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@razmik-medoxi This is like attempt number 3 to solve this problem! Prior attempts from @IlyaRadinsky and @KacosPro have not panned out. This is a tough dragon to slay apparently. But this seems promising, at least to me.

Also, please see my comment above; do you have thoughts on a good name here?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.hc-ui is the number 1 candidate for me =))

// Base
@import './styles/normalize';
@import './styles/typography';
Expand Down Expand Up @@ -63,3 +64,5 @@
@import './surfaces/infoBar/infoBar';
@import './surfaces/modalDeprecated/modalDeprecated';
@import './surfaces/titleBar/titleBar';

}
Loading