US206196 code review changes

* updated documentation for triggers and the two events (openModal, closeModal)
* simplified sass padding

Author: chrisdo1

elements/pfe-modal/README.md

@@ -19,7 +19,7 @@
 ## Slots
 
 ### Trigger
-The only part visible on page load, the trigger opens the modal window. The trigger can be a button, a cta or a link.
+The only part visible on page load, the trigger opens the modal window. The trigger can be a button, a cta or a link. While it is part of the modal web component, it does not contain any intrinsic styles. 
 
 ### Header
 The header is an optional slot that appears at the top of the modal window. It should be a header tag (h2-h6). 
@@ -30,12 +30,12 @@ The default slot can contain any type of content. When the header is not present
 ## Events
 
 ### openModal
-Fires when a user clicks on the trigger.
+Fires when a user clicks on the trigger. openModal can be accessed from outside the web component by getting the modal that you want to fire and passing in the firing event: `document.querySelector("pfe-modal#custom-id").openModal(event).`
 
 ### closeModal
-Fires when either a user clicks on either the close button or the overlay.
-
+Fires when either a user clicks on either the close button or the overlay. closeModal can be accessed from outside the web component by getting the modal that you want to fire and passing in the firing event: `document.querySelector("pfe-modal#custom-id").closeModal(event).`
 
+### Dependencies
 Make sure you have [Polyserve][polyserve] and [Web Component Tester][web-component-tester] installed.
 
     npm install -g polyserve web-component-tester

elements/pfe-modal/src/pfe-modal.scss

@@ -9,15 +9,14 @@ $pfe-modal--breakpoint--medium: 640px;
 	--pfe-modal--MaxWidth--mobile: 94vw;
 	--pfe-modal--MaxHeight: 90vh;
 	--pfe-modal--Padding: calc(#{pfe-var(container-padding)} * 2) 0 calc(#{pfe-var(container-padding)} * 2) calc(#{pfe-var(container-padding)} * 2);
-	--pfe-modal--Padding--mobile: 0 0 0 calc(#{pfe-var(container-padding)} * 2);
 	--pfe-modal__overlay--BackgroundColor: #{pfe-color(overlay)};
-	--pfe-modal--CloseButtonSize: calc(#{pfe-var(ui--element--size)} - 4px);
+	--pfe-modal--close--size: calc(#{pfe-var(ui--element--size)} - 4px);
 	display: block;
 	position: relative;
-}
 
-:host(:not([has_header])) {
-	--pfe-modal--Padding: calc(#{pfe-var(container-padding)} * 2) calc(#{pfe-var(container-padding)} * 4) calc(#{pfe-var(container-padding)} * 2) calc(#{pfe-var(container-padding)} * 2);
+   @media screen and (max-height: $pfe-modal--breakpoint--medium) {
+      --pfe-modal--Padding: 0 0 0 calc(#{pfe-var(container-padding)} * 2);
+   }
 }
 
 .pfe-modal {
@@ -69,24 +68,13 @@ $pfe-modal--breakpoint--medium: 640px;
 		position: relative;
 		max-width: calc(100% - #{pfe-var(ui--element--size)});
 		max-height: inherit;
-		padding: var(--pfe-modal--Padding);
-
-		@media screen and (max-height: $pfe-modal--breakpoint--medium) {
-			padding: var(--pfe-modal--Padding--mobile);
-		}
+		padding: pfe-local(Padding);
 
 		&[hidden] {
 			display: none;
 		}
 
 		:host(:not([has_header])) & {
-			@media screen and (min-width: $pfe-modal--breakpoint--medium) {
-				padding: calc(#{pfe-var(container-padding)} * 2) calc(#{pfe-var(container-padding)} * 6) calc(#{pfe-var(container-padding)} * 2) calc(#{pfe-var(container-padding)} * 2);			
-			}
-
-			@media screen and (max-height: $pfe-modal--breakpoint--medium) and (min-width: $pfe-modal--breakpoint--medium) {
-				padding: 0 0 calc(#{pfe-var(container-padding)} * 2) calc(#{pfe-var(container-padding)} * 2);			
-			}
 
 			// Remove margin-top on the first slotted element that is not the header.
 			::slotted(*:nth-child(1)),
@@ -135,8 +123,8 @@ $pfe-modal--breakpoint--medium: 640px;
 			fill: pfe-radio(text);
 			height: pfe-var(ui--element--size);
 			width: pfe-var(ui--element--size);
-			height: pfe-local(CloseButtonSize);
-			width: pfe-local(CloseButtonSize);
+			height: pfe-local(close--size);
+			width: pfe-local(close--size);
 		}
 	}
 }