You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This is vanilla CSS that is currently loaded at the global level but we are currently migrating our CSS to CSS Modules.
Here is an example PR where the source-info component was migrated over.
To accomplish this we need to do the following:
Add the CSS to the new pipeline by migrating it out of styles.css and into a new file called page-list.css. The directory structure should look like this:
In page-list.jsx, the new CSS file needs to imported:
import './page-list.css';
The .page-list tbody tr and any other selectors using more than one element/class name/etc., need to be refactored to be a single class name. Something like .page-list-row, for example, could work or something similar. These classes need to be added/replaced in the page-list.jsx file. Feel free to ask if you aren't sure where the new classes should go in the markup.
In page-list.jsx, the className tags needs to be added or replaced for styleNamefor the component level styles only. Global styles should stay in className tags and a component can have both className and styleName tags at the same time if necessary. Feel free to ask if you aren't sure if a style falls under either category. (This basically determines which classes get suffixed with a hash to make sure it is scoped at the component level).
Fix any tests that fail because you refactored the class names. You can run the tests using npm test.
Here is an example of styleName vs className being used in our codebase:
Right now the CSS for this component lives in
styles.css
:https://github.com/edgi-govdata-archiving/web-monitoring-ui/blob/master/src/css/styles.css#L130
This is vanilla CSS that is currently loaded at the global level but we are currently migrating our CSS to CSS Modules.
Here is an example PR where the
source-info
component was migrated over.To accomplish this we need to do the following:
styles.css
and into a new file calledpage-list.css
. The directory structure should look like this:page-list.jsx
, the new CSS file needs to imported:The
.page-list tbody tr
and any other selectors using more than one element/class name/etc., need to be refactored to be a single class name. Something like.page-list-row
, for example, could work or something similar. These classes need to be added/replaced in thepage-list.jsx
file. Feel free to ask if you aren't sure where the new classes should go in the markup.In
page-list.jsx
, theclassName
tags needs to be added or replaced forstyleName
for the component level styles only. Global styles should stay inclassName
tags and a component can have bothclassName
andstyleName
tags at the same time if necessary. Feel free to ask if you aren't sure if a style falls under either category. (This basically determines which classes get suffixed with a hash to make sure it is scoped at the component level).Fix any tests that fail because you refactored the class names. You can run the tests using
npm test
.Here is an example of
styleName
vsclassName
being used in our codebase:web-monitoring-ui/src/components/source-info/source-info.jsx
Lines 65 to 73 in 06fadda
The text was updated successfully, but these errors were encountered: