[Spaces] SASS modularization (#65921) (#66312)

* Removing Spaces legacy styles import in favor of direct plugin import

* Modularizing the `/management` components

* Further modularization within copy_saved_objects_to_space

* Add styling section to CONTRIBUTING

* SASS lint and snaps

* Adding link to EUI SASS

Author: cchaos

.sass-lint.yml

@@ -11,6 +11,7 @@ files:
     - 'x-pack/plugins/cross_cluster_replication/**/*.s+(a|c)ss'
     - 'x-pack/legacy/plugins/maps/**/*.s+(a|c)ss'
     - 'x-pack/plugins/maps/**/*.s+(a|c)ss'
+    - 'x-pack/plugins/spaces/**/*.s+(a|c)ss'
   ignore:
     - 'x-pack/plugins/canvas/shareable_runtime/**/*.s+(a|c)ss'
 rules:

CONTRIBUTING.md

@@ -403,6 +403,34 @@ extract them to a `JSON` file or integrate translations back to Kibana. To know
 We cannot support accepting contributions to the translations from any source other than the translators we have engaged to do the work.
 We are still to develop a proper process to accept any contributed translations. We certainly appreciate that people care enough about the localization effort to want to help improve the quality. We aim to build out a more comprehensive localization process for the future and will notify you once contributions can be supported, but for the time being, we are not able to incorporate suggestions.
 
+### Syling with SASS
+
+When writing a new component, create a sibling SASS file of the same name and import directly into the JS/TS component file. Doing so ensures the styles are never separated or lost on import and allows for better modularization (smaller individual plugin asset footprint).
+
+Any JavaScript (or TypeScript) file that imports SASS (.scss) files will automatically build with the [EUI](https://elastic.github.io/eui/#/guidelines/sass) & Kibana invisibles (SASS variables, mixins, functions) from the [`styling_constants.scss` file](https://github.com/elastic/kibana/blob/master/src/legacy/ui/public/styles/_styling_constants.scss). However, any Legacy (file path includes `/legacy`) files will not.
+
+**Example:**
+
+```tsx
+// component.tsx
+
+import './component.scss';
+
+export const Component = () => {
+  return (
+    <div className="plgComponent" />
+  );
+}
+```
+
+```scss
+// component.scss
+
+.plgComponent { ... }
+```
+
+Do not use the underscore `_` SASS file naming pattern when importing directly into a javascript file.
+
 ### Testing and Building
 
 To ensure that your changes will not break other functionality, please run the test suite and build process before submitting your Pull Request.

x-pack/legacy/plugins/spaces/index.ts

@@ -30,7 +30,6 @@ export const spaces = (kibana: Record<string, any>) =>
     require: ['kibana', 'elasticsearch', 'xpack_main'],
 
     uiExports: {
-      styleSheetPaths: resolve(__dirname, 'public/index.scss'),
       managementSections: [],
       apps: [],
       hacks: ['plugins/spaces/legacy'],

x-pack/legacy/plugins/spaces/public/index.scss

@@ -0,0 +1,10 @@
+// make icon occupy the same space as an EuiSwitch
+// icon is size m, which is the native $euiSize value
+// see @elastic/eui/src/components/icon/_variables.scss
+.spcCopyToSpaceIncludeRelated .euiIcon {
+  margin-right: $euiSwitchWidth - $euiSize;
+}
+
+.spcCopyToSpaceIncludeRelated__label {
+  font-size: $euiFontSizeS;
+}

x-pack/plugins/spaces/public/copy_saved_objects_to_space/_index.scss

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import './copy_to_space_form.scss';
 import React from 'react';
 import {
   EuiSwitch,

x-pack/plugins/spaces/public/copy_saved_objects_to_space/components/_copy_to_space.scss

@@ -0,0 +1,3 @@
+.spcCopyToSpace__spacesList {
+  margin-top: $euiSizeXS;
+}