fix(tray): full width at portrait orientation (#2547)

* docs(tray): docs update and fix guidelines link

Fix incorrect Tray guidelines link that was 404 not found.
Update descriptions in docs to clarify viewport orientation differences.

* fix(tray): full width at portrait

The Tray was not appearing as 100% width in portrait orientation because
of a max-inline-size declaration coming from the .spectrum-Modal class
used with .spectrum-Tray

* fix(tray): whcm use border on correct element to show rounding

Rounded corners were not showing in forced-colors mode, because the
border that was appearing on the nested Dialog element, which has
padding. Moves the high contrast border from that element to the root
Tray element.

* fix(tray): storybook heading text control and unused import

The Storybook "heading" control was previously not usable, due to how
the arg was being passed through to the Dialog. This text string control
will now change the heading.

Replaces an "unused" import for Modal whose CSS is still necessary for
the Tray to render correctly. The unused import would be deleted on
save/fix, resulting in the wrong styles. Replaced the template import
with an import of just the CSS for Modal.

Author: jawinn

components/tray/index.css

@@ -28,12 +28,6 @@ governing permissions and limitations under the License.
   --spectrum-tray-background-color: var(--spectrum-background-layer-2-color);
 }
 
-@media (forced-colors: active) {
-  .spectrum-Tray {
-    --highcontrast-tray-background-color: Background;
-  }
-}
-
 .spectrum-Tray-wrapper {
   inset-inline-start: 0;
   /* Positioned at the bottom of the window */
@@ -45,20 +39,19 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Tray {
-  /* Default to full width when the viewport is in portrait orientation
-   * (height is greater than width)
-   */
+  /* Default to full width when the viewport is in portrait orientation */
   inline-size: 100%;
+  --mod-modal-max-width: 100%;
+  max-inline-size: 100%;
+
   max-block-size: calc(100vh - var(--mod-tray-spacing-edge-to-tray-safe-zone, var(--spectrum-tray-spacing-edge-to-tray-safe-zone)));
   margin-block-start: var(--mod-tray-spacing-edge-to-tray-safe-zone, var(--spectrum-tray-spacing-edge-to-tray-safe-zone));
   padding-block-start: var(--mod-tray-top-to-content-area, var(--spectrum-tray-top-to-content-area));
   padding-block-end: var(--mod-tray-bottom-to-content-area, var(--spectrum-tray-top-to-content-area));
   box-sizing: border-box;
   overflow: auto;
   outline: none;
-
-  /* Unset spectrum-Modal border-radius */
-  border-radius: unset;
+  border-radius: var(--mod-tray-corner-radius-portrait, 0) var(--mod-tray-corner-radius-portrait, 0) 0 0;
 
   /* Start offset by the animation distance */
   transform: translateY(100%);
@@ -91,14 +84,21 @@ governing permissions and limitations under the License.
   }
 }
 
-/* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation
- * Limit Tray width to 375px and round corners when the viewport is in landscape orientation
- * (width is greater than height)
- */
 @media screen and (orientation: landscape) {
   .spectrum-Tray {
     border-start-start-radius: var(--mod-tray-corner-radius, var(--spectrum-tray-corner-radius));
     border-start-end-radius: var(--mod-tray-corner-radius, var(--spectrum-tray-corner-radius));
     max-inline-size: var(--mod-tray-max-inline-size, var(--spectrum-tray-max-inline-size));
   }
 }
+
+@media (forced-colors: active) {
+  .spectrum-Tray {
+    --highcontrast-tray-background-color: Canvas;
+
+    border: solid;
+    & .spectrum-Dialog {
+      border: none;
+    }
+  }
+}

components/tray/metadata/mods.md

@@ -3,6 +3,7 @@
 | `--mod-tray-background-color`               |
 | `--mod-tray-bottom-to-content-area`         |
 | `--mod-tray-corner-radius`                  |
+| `--mod-tray-corner-radius-portrait`         |
 | `--mod-tray-entry-animation-delay`          |
 | `--mod-tray-entry-animation-duration`       |
 | `--mod-tray-exit-animation-delay`           |

components/tray/metadata/tray.yml

@@ -1,15 +1,16 @@
 name: Tray
 description: |
-  Tray Dialogs are typically used to portray information on mobile device or
-  smaller screens.
+  The Tray component is typically used to portray information on mobile devices or smaller screens.
+
 sections:
   - name: Custom Properties API
     description: |
       This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/tray/metadata/mods.md">here</a>.
-SpectrumSiteSlug: https://spectrum.adobe.com/page/trays/
+SpectrumSiteSlug: https://spectrum.adobe.com/page/tray/
 examples:
   - id: tray
-    name: Tray
+    name: Standard
+    description: The following example displays differently depending on the orientation of the viewport, using the `orientation` CSS media feature. In portrait orientation, a Tray is displayed at the bottom of the screen and takes up the full width of the view. In landscape orientation, it keeps its portrait width, is centered horizontally, and has rounded upper corners.
     markup: |
       <div class="spectrum-Tray-wrapper spectrum-CSSExample-dialog" style="background: rgba(0,0,0,0.4);">
         <div class="spectrum-Modal spectrum-Tray is-open">

components/tray/stories/template.js

@@ -3,8 +3,7 @@ import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
 
-import { Template as Modal } from "@spectrum-css/modal/stories/template.js";
-
+import "@spectrum-css/modal/index.css";
 import "../index.css";
 
 export const Template = ({

components/tray/stories/tray.stories.js

@@ -29,6 +29,7 @@ export default {
 		rootClass: "spectrum-Tray",
 		customClasses: ["spectrum-Modal"],
 		isOpen: true,
+		heading: "New Messages",
 	},
 	parameters: {
 		actions: {
@@ -43,15 +44,16 @@ export default {
 };
 
 export const Default = ({
+	heading,
 	...args
 }) => {
 	return html`
 		<div>
 			${Template({
-				heading: "Tray Dialog",
+				...args,
 				content: [
 					() => Dialog({
-							heading: "New Messages",
+							heading,
 							content: ["You have 5 new messages!"],
 							isDismissable: false,
 						})
@@ -62,7 +64,6 @@ export const Default = ({
 				window.isChromatic() ?
 				Template({
 					...args,
-					heading: "Tray Dialog",
 					content: [
 						() => Dialog({
 								heading: "You have new messages waiting in your inbox",
@@ -79,4 +80,3 @@ export const Default = ({
 		</div>
 	`;
 };
-Default.args = {};