feat(popover slot): create it so consumers can add rb-popover and not worry about styling

Also update code to accommodate changes in rb-base v0.0.7.

Author: jyounce

rapid-build.cson

@@ -14,7 +14,7 @@ common:
 		from:
 			minFile:
 				scripts: [
-					'scripts/!(rb-*.js)'
+					'scripts/**/*.js'
 				]
 
 	extra:

src/client/package.json

@@ -38,6 +38,7 @@
   "flat": true,
   "dependencies": {
     "@rapid-build-ui/form-control": "^0.0.5",
-    "@rapid-build-ui/rb-base": "^0.0.6"
+    "@rapid-build-ui/rb-base": "^0.0.6",
+    "@rapid-build-ui/rb-popover": "^0.0.13"
   }
 }

src/client/scripts/rb-checkbox.js

@@ -1,27 +1,29 @@
 /**************
  * RB-CHECKBOX
  **************/
-import { props, html, RbBase } from '../../rb-base/scripts/rb-base.js';
-import FormControl from '../../form-control/scripts/form-control.js';
-import Type from '../../rb-base/scripts/type-service.js';
-import template from '../views/rb-checkbox.html';
+import { RbBase, props, html } from '../../rb-base/scripts/rb-base.js';
+import FormControl             from '../../form-control/scripts/form-control.js';
+import Type                    from '../../rb-base/scripts/public/services/type.js';
+import template                from '../views/rb-checkbox.html';
+import '../../rb-popover/scripts/rb-popover.js';
 
 export class RbCheckbox extends FormControl(RbBase()) {
-
+	/* Lifecycle
+	 ************/
 	constructor() {
 		super();
 		this.state = {
+			...super.state,
 			value: undefined
 		}
 	}
-	/* Lifecycle
-	 ************/
 	viewReady() { // :void
 		super.viewReady && super.viewReady();
 		Object.assign(this.rb.elms, {
 			focusElm:    this.shadowRoot.querySelector('.sublabel'),
 			formControl: this.shadowRoot.querySelector('input')
 		});
+		this._initSlotStates(); // see rb-base: private/mixins/slot.js
 	}
 
 	/* Properties
@@ -113,7 +115,7 @@ export class RbCheckbox extends FormControl(RbBase()) {
 
 	/* Template
 	 ***********/
-	render({ props }) { // :string
+	render({ props, state }) { // :string
 		return html template;
 	}
 }

src/client/styles/layout/host.scss

@@ -3,7 +3,9 @@
  *******/
 :host {
 	all: initial; // reset all styles first
-	contain: layout style; // paint cuts off the label above
+	// paint cuts off the label above
+	// layout prevents popover from being over everything
+	contain: style;
 }
 
 :host {

src/client/styles/layout/labels.scss

@@ -2,6 +2,7 @@
  * LABEL
  ********/
 .label {
+	display: flex;
 	margin-bottom: 12px;
 	cursor: text;
 }

src/client/styles/layout/popover.scss

@@ -0,0 +1,9 @@
+/***************
+ * POPOVER SLOT
+ ***************/
+.with-label ::slotted([slot="popover"]) {
+	position: relative;
+	top: .5px;
+	left: -1px;
+	margin-right: 3px;
+}

src/client/styles/rb-checkbox.scss

@@ -7,19 +7,20 @@
 
 /* Layout
  *********/
- @import 'layout/host.scss';
- @import 'layout/root.scss';
- @import 'layout/labels.scss';
- @import 'layout/checkbox.scss';
- @import 'layout/subtext.scss';
- @import 'layout/options.scss';
+@import 'layout/host.scss';
+@import 'layout/root.scss';
+@import 'layout/labels.scss';
+@import 'layout/popover.scss';
+@import 'layout/checkbox.scss';
+@import 'layout/subtext.scss';
+@import 'layout/options.scss';
 
- /* Style
-  ********/
- @import 'style/variables.scss';
- @import 'style/borders.scss';
- @import 'style/colors.scss';
- @import 'style/fonts.scss';
+/* Style
+ ********/
+@import 'style/variables.scss';
+@import 'style/borders.scss';
+@import 'style/colors.scss';
+@import 'style/fonts.scss';
 
 /* Load Last!
  *************/

src/client/styles/style/colors.scss

@@ -23,5 +23,8 @@
 		.label, .subtext, .sublabel {
 			color: mapGet($formControlColors, text, invalid, default);
 		}
+		::slotted([slot="popover"]) {
+			--rb-popover-default-trigger-color: mapGet($formControlColors, text, invalid, default);
+		}
 	}
 }

src/client/views/rb-checkbox.html

@@ -2,17 +2,27 @@
 	?disabled="${props.disabled}"
 	class="
 		form-control
-		${props.inline ? 'inline' : ''}
-		${props.horizontal ? 'horizontal' : ''}
 		${props.right ? 'right' : ''}
+		${props.label && 'with-label'}
+		${props.inline ? 'inline' : ''}
 		${props._valid ? 'valid' : 'invalid'}
+		${props.horizontal ? 'horizontal' : ''}
+		${state.slots.popover ? 'with-popover' : ''}
 	">
-
-	${props.label
-		? html`<label class="label">${props.label}</label>`
-		: null
+	${props.label || state.slots.popover
+		? html`
+			<div class="label">
+				${state.slots.popover
+					? html`<slot name="popover"></slot>`
+					: null
+				}
+				${props.label
+					? html`<label>${props.label}</label>`
+					: null
+				}
+			</div>
+		`: null
 	}
-
 	<label
 		tabindex="${props.disabled ? -1 : 0}"
 		class="sublabel ${!!props.value ? 'active' : ''}"