style(ToastContainer): toast container top positions starts after mas…[run-chromatic] (#517)

Author: clukhei

docs/INSTALLATION.md

@@ -69,10 +69,10 @@ This method registers all SGDS elements up front in the Custom Elements Registry
 <link href='https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.6.4/css/sgds.css' rel='stylesheet' type='text/css' />
 
 // it is recommended to load a particular version when using cdn e.g. https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@1.0.2
-<script src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.6.4" async crossorigin="anonymous" integrity="sha384-l2wDpDWqaG9T35wz73+vVSRD34GaxMBLrZXc0giBqUDltuRasNltLVL5XcqPZqH8"></script>
+<script src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.6.4" async crossorigin="anonymous" integrity="sha384-ztbQnGYW6IKQJzull/C3GPRHFK5yxTOSzW+PFPgsNHaHlQoadP0Rovsz4PnRVuO5"></script>
 
 //or load a single component e.g. Masthead
-<script src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.6.4/components/Masthead/index.umd.min.js" async crossorigin="anonymous" integrity="sha384-kF8b8ASzezryQAXh/NhABOjzVo+K+zYbtKN77sVNT94MuN3tmg+Qz8g2n101gvWK"></script>
+<script src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.6.4/components/Masthead/index.umd.min.js" async crossorigin="anonymous" integrity="sha384-D6fmcLmJHlvW0xQlQo1kjqs2QlMWNEnEG6Lkv6cIG52HMoOpytomw7H6cMue1VSg"></script>
 
 ```
 

playground/Toast.html

@@ -3,8 +3,26 @@
 <link href="../src/themes/night.css" rel="stylesheet" type="text/css" />
 <link href="../src/css/sgds.css" rel="stylesheet" type="text/css" />
 
+<sgds-masthead></sgds-masthead>
+ <sgds-system-banner show></sgds-system-banner>
+<sgds-mainnav></sgds-mainnav>
+<!-- <sgds-subnav>
+  <h5 slot="header">STACKx Cybersecurity</h5>
+  <sgds-subnav-item active><sgds-link size="sm"><a href="#">Overview</a></sgds-link></sgds-subnav-item>
+  <sgds-subnav-item><sgds-link size="sm"><a href="#">On-site Activites</a></sgds-link></sgds-subnav-item>
+  <sgds-subnav-item><sgds-link size="sm"><a href="#">Programme</a></sgds-link></sgds-subnav-item>
+  <sgds-subnav-item><sgds-link size="sm"><a href="#">Speakers</a></sgds-link></sgds-subnav-item>
+  <sgds-subnav-item><sgds-link size="sm"><a href="#">Partners</a></sgds-link></sgds-subnav-item>
+  <sgds-subnav-item><sgds-link size="sm"><a href="#" target="_blank">Recordings</a></sgds-link></sgds-subnav-item>
+  <sgds-subnav-item><sgds-link size="sm"><a href="#">FAQ</a></sgds-link></sgds-subnav-item>
+  <sgds-button slot="actions" size="sm">Register now</sgds-button>
+  <sgds-button slot="actions" size="sm">Exhibit</sgds-button>
+  <sgds-button slot="actions" size="sm">Exhibit</sgds-button> -->
+<!-- </sgds-subnav> -->
+<sgds-toast-container>
 <sgds-toast dismissible show>
   <sgds-icon slot="icon" name="info-circle-fill"></sgds-icon>
   This is a toast notifications This is a toast notifications his is a toast notifications his is a toast notifications
   his is a toast notifications his is a toast notifications his is a toast notifications
 </sgds-toast>
+</sgds-toast-container>

src/components/Toast/sgds-toast-container.ts

@@ -12,14 +12,17 @@ import toastContainerStyle from "./toast-container.css";
 export class SgdsToastContainer extends SgdsElement {
   static styles = [toastContainerStyle];
 
-  /** Controls the position of `sgds-toast` within itself. When specified, toast container becomes position-absolute */
+  /**
+   * Controls the position of `sgds-toast` within itself.
+   * Since 3.7.1, the positions "top-start", "middle-start", "middle-center", and "middle-end" are deprecated.
+   */
   @property({ type: String, reflect: true }) position: ToastPosition;
 
   render() {
     return html`
       <div
         class=${classMap({
-          "sgds toast-container": true,
+          "toast-container": true,
           [this.position]: this.position
         })}
       >

src/components/Toast/toast-container.css

@@ -1,63 +1,69 @@
-.toast-container {
-  max-width: 100%;
-  pointer-events: none;
-  position: fixed;
-  width: max-content;
-  z-index: 1090;
-}
-
+/* Deprecated since 3.7.1: top-start, middle-start, middle-center, middle-end */
 .top-start {
-  top: 0;
-  left: 0;
-}
-
-.top-center {
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
+  top: var(--toast-container-top);
+  left: var(--toast-container-left);
 }
-
-.top-end {
-  top: 0;
-  right: 0;
-}
-
 .middle-start {
   top: 50%;
-  left: 0;
+  left: var(--toast-container-left);
   transform: translateY(-50%);
 }
-
 .middle-center {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }
-
 .middle-end {
   top: 50%;
-  right: 0;
+  right: var(--toast-container-right);
   transform: translateY(-50%);
 }
 
+.toast-container {
+  max-width: 100%;
+  pointer-events: none;
+  position: fixed;
+  width: max-content;
+  z-index: 1200;
+  /* Height of masthead + mainnav  */
+  --toast-container-top: calc(28px + 80px + var(--sgds-spacer-8));
+  --toast-container-right: var(--sgds-spacer-8);
+  --toast-container-left: var(--sgds-spacer-8);
+  --toast-container-bottom: var(--sgds-spacer-8);
+}
+
+
+.top-center {
+  top: var(--toast-container-top);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.top-end {
+  top: var(--toast-container-top);
+  right: var(--toast-container-right);
+}
+
 .bottom-start {
-  bottom: 0;
-  left: 0;
+  bottom: var(--toast-container-bottom);
+  left: var(--toast-container-left);
 }
 
 .bottom-center {
-  bottom: 0;
+  bottom: var(--toast-container-bottom);
   left: 50%;
   transform: translateX(-50%);
 }
 
 .bottom-end {
-  bottom: 0;
-  right: 0;
+  bottom: var(--toast-container-bottom);
+  right: var(--toast-container-right);
 }
 
 slot {
   display: flex;
   flex-direction: column;
-  gap:  0.5rem;
+  gap: 0.5rem;
 }
+
+

stories/templates/Toast/additional.mdx

@@ -44,14 +44,9 @@ Add `dismissible` prop to allow users to close the toast
 ## Position with toast containers
 
 ToastContainers positions the toast with respect to the entire page. Adjust the `position` prop accordingly to render your toast at the correct placements
+Top position takes into consideration the height of masthead and mainnav.
 
 
-### top-start
-
-<Canvas of={ToastStories.TopStart}>
-  <Story of={ToastStories.TopStart} />
-</Canvas>
-
 ### top-center
 
 <Canvas of={ToastStories.TopCenter}>
@@ -64,24 +59,6 @@ ToastContainers positions the toast with respect to the entire page. Adjust the
   <Story of={ToastStories.TopEnd} />
 </Canvas>
 
-### middle-start
-
-<Canvas of={ToastStories.MiddleStart}>
-  <Story of={ToastStories.MiddleStart} />
-</Canvas>
-
-### middle-center
-
-<Canvas of={ToastStories.MiddleCenter}>
-  <Story of={ToastStories.MiddleCenter} />
-</Canvas>
-
-### middle-end
-
-<Canvas of={ToastStories.MiddleEnd}>
-  <Story of={ToastStories.MiddleEnd} />
-</Canvas>
-
 ### bottom-start
 
 <Canvas of={ToastStories.BottomStart}>

stories/templates/Toast/additional.stories.js

@@ -76,64 +76,65 @@ export const Dismissible = {
   tags: ["!dev"]
 };
 
-export const TopStart = {
-  render: Template.bind({}),
-  name: "Top start",
-  args: { ...args, position: "top-start" },
-  parameters: {},
-  tags: ["!dev"]
-};
+const PositionTemplate = args =>
+  html`
+    <div style="height:600px;">
+      <sgds-masthead></sgds-masthead>
+      <sgds-mainnav>
+        <img
+          alt="sgds logo"
+          width="130"
+          src="https://www.designsystem.tech.gov.sg/assets/img/logo-sgds.svg"
+          slot="brand"
+        />
+      </sgds-mainnav>
+      <sgds-toast-container position=${ifDefined(args.position)}>
+        <sgds-toast
+          ?show=${args.show}
+          variant=${ifDefined(args.variant)}
+          ?autohide=${args.autohide}
+          delay=${ifDefined(args.delay)}
+          ?noAnimation=${args.noAnimation}
+          ?dismissable=${args.dismissable}
+          title=${ifDefined(args.title)}
+        >
+          <sgds-icon slot="icon" name="info-circle-fill"></sgds-icon>
+          This is a toast notifications
+          <sgds-link slot="action"><a href="#" target="_blank">Action</a></sgds-link>
+        </sgds-toast>
+      </sgds-toast-container>
+    </div>
+  `;
 export const TopCenter = {
-  render: Template.bind({}),
+  render: PositionTemplate.bind({}),
   name: "Top center",
   args: { ...args, position: "top-center" },
   parameters: {},
   tags: ["!dev"]
 };
 export const TopEnd = {
-  render: Template.bind({}),
+  render: PositionTemplate.bind({}),
   name: "Top end",
   args: { ...args, position: "top-end" },
   parameters: {},
   tags: ["!dev"]
 };
-export const MiddleStart = {
-  render: Template.bind({}),
-  name: "Middle start",
-  args: { ...args, position: "middle-start" },
-  parameters: {},
-  tags: ["!dev"]
-};
-export const MiddleCenter = {
-  render: Template.bind({}),
-  name: "Middle center",
-  args: { ...args, position: "middle-center" },
-  parameters: {},
-  tags: ["!dev"]
-};
-export const MiddleEnd = {
-  render: Template.bind({}),
-  name: "Middle end",
-  args: { ...args, position: "middle-end" },
-  parameters: {},
-  tags: ["!dev"]
-};
 export const BottomStart = {
-  render: Template.bind({}),
+  render: PositionTemplate.bind({}),
   name: "Bottom start",
   args: { ...args, position: "bottom-start" },
   parameters: {},
   tags: ["!dev"]
 };
 export const BottomCenter = {
-  render: Template.bind({}),
+  render: PositionTemplate.bind({}),
   name: "Bottom Center",
   args: { ...args, position: "bottom-center" },
   parameters: {},
   tags: ["!dev"]
 };
 export const BottomEnd = {
-  render: Template.bind({}),
+  render: PositionTemplate.bind({}),
   name: "Bottom End",
   args: { ...args, position: "bottom-end" },
   parameters: {},
@@ -161,7 +162,7 @@ const StackingTemplate = () =>
 export const Stacking = {
   render: StackingTemplate.bind({}),
   name: "Stacking the toasts",
-  args: {},
+  args: { position: "bottom-end" },
   parameters: {},
   tags: ["!dev"]
 };

stories/templates/Toast/basic.js

@@ -23,7 +23,8 @@ export const Template = args =>
   `;
 
 export const args = {
-  show: true
+  show: true,
+  position: "bottom-end"
 };
 
 export const parameters = {