Toast 🍞

.storybook/custom-addons/provider/index.js

@@ -17,7 +17,6 @@ function ProviderUpdater(props) {
   let [localeValue, setLocale] = useState(providerValuesFromUrl.locale || undefined);
   let [themeValue, setTheme] = useState(providerValuesFromUrl.theme || undefined);
   let [scaleValue, setScale] = useState(providerValuesFromUrl.scale || undefined);
-  let [toastPositionValue, setToastPosition] = useState(providerValuesFromUrl.toastPosition || 'bottom');
   let [expressValue, setExpress] = useState(providerValuesFromUrl.express === 'true');
   let [storyReady, setStoryReady] = useState(window.parent === window); // reduce content flash because it takes a moment to get the provider details
   // Typically themes are provided with both light + dark, and both scales.
@@ -30,7 +29,6 @@ function ProviderUpdater(props) {
       setLocale(event.locale);
       setTheme(event.theme === 'Auto' ? undefined : event.theme);
       setScale(event.scale === 'Auto' ? undefined : event.scale);
-      setToastPosition(event.toastPosition);
       setExpress(event.express);
       setStoryReady(true);
     };
@@ -44,15 +42,15 @@ function ProviderUpdater(props) {
 
   if (props.options.mainElement == null) {
     return (
-      <Provider theme={theme} colorScheme={colorScheme} scale={scaleValue} locale={localeValue} toastPlacement={toastPositionValue}>
+      <Provider theme={theme} colorScheme={colorScheme} scale={scaleValue} locale={localeValue}>
         <main>
           {storyReady && props.children}
         </main>
       </Provider>
     );
   } else {
     return (
-      <Provider theme={theme} colorScheme={colorScheme} scale={scaleValue} locale={localeValue} toastPlacement={toastPositionValue}>
+      <Provider theme={theme} colorScheme={colorScheme} scale={scaleValue} locale={localeValue}>
         {storyReady && props.children}
       </Provider>
     );

.storybook/custom-addons/provider/register.js

@@ -36,7 +36,7 @@ let TOAST_POSITIONS = [
 ];
 
 function ProviderFieldSetter({api}) {
-  let [values, setValues] = useState({locale: providerValuesFromUrl.locale || undefined, theme: providerValuesFromUrl.theme || undefined, scale: providerValuesFromUrl.scale || undefined, toastPosition: providerValuesFromUrl.toastPosition || 'bottom', express: providerValuesFromUrl.express === 'true'});
+  let [values, setValues] = useState({locale: providerValuesFromUrl.locale || undefined, theme: providerValuesFromUrl.theme || undefined, scale: providerValuesFromUrl.scale || undefined, express: providerValuesFromUrl.express === 'true'});
   let channel = addons.getChannel();
   let onLocaleChange = (e) => {
     let newValue = e.target.value || undefined;
@@ -62,14 +62,6 @@ function ProviderFieldSetter({api}) {
       return next;
     });
   };
-  let onToastPositionChange = (e) => {
-    let newValue = e.target.value;
-    setValues((old) => {
-      let next = {...old, toastPosition: newValue};
-      channel.emit('provider/updated', next);
-      return next;
-    });
-  };
   let onExpressChange = (e) => {
     let newValue = e.target.checked;
     setValues((old) => {
@@ -93,7 +85,6 @@ function ProviderFieldSetter({api}) {
       'providerSwitcher-locale': values.locale || '',
       'providerSwitcher-theme': values.theme || '',
       'providerSwitcher-scale': values.scale || '',
-      'providerSwitcher-toastPosition': values.toastPosition || '',
       'providerSwitcher-express': String(values.express),
     });
   });
@@ -118,12 +109,6 @@ function ProviderFieldSetter({api}) {
           {SCALES.map(scale => <option key={scale.label} value={scale.value}>{scale.label}</option>)}
         </select>
       </div>
-      <div style={{marginRight: '10px'}}>
-        <label htmlFor="toastposition">Toast Position: </label>
-        <select id="toastposition" name="toastposition" onChange={onToastPositionChange} value={values.toastPosition}>
-          {TOAST_POSITIONS.map(position => <option key={position.label} value={position.value}>{position.label}</option>)}
-        </select>
-      </div>
       <div style={{marginRight: '10px'}}>
         <label htmlFor="express">Express: </label>
         <input type="checkbox" name="express" onChange={onExpressChange} checked={values.express} />

packages/@adobe/spectrum-css-temp/components/button/skin.css

@@ -55,7 +55,6 @@ governing permissions and limitations under the License.
 
 .spectrum-ClearButton {
   background-color: var(--spectrum-clearbutton-medium-background-color);
-
   color: var(--spectrum-clearbutton-medium-icon-color);
 
   .spectrum-Icon {
@@ -64,7 +63,6 @@ governing permissions and limitations under the License.
 
   &:hover {
     background-color: var(--spectrum-clearbutton-medium-background-color-hover);
-
     color: var(--spectrum-clearbutton-medium-icon-color-hover);
 
     .spectrum-Icon {
@@ -74,7 +72,6 @@ governing permissions and limitations under the License.
 
   &.is-active {
     background-color: var(--spectrum-clearbutton-medium-background-color-down);
-
     color: var(--spectrum-clearbutton-medium-icon-color-down);
 
     .spectrum-Icon {
@@ -84,7 +81,6 @@ governing permissions and limitations under the License.
 
   &:focus-ring {
     background-color: var(--spectrum-clearbutton-medium-background-color-key-focus);
-
     color: var(--spectrum-clearbutton-medium-icon-color-key-focus);
 
     .spectrum-Icon {
@@ -95,7 +91,6 @@ governing permissions and limitations under the License.
   &:disabled,
   &.is-disabled {
     background-color: var(--spectrum-clearbutton-medium-background-color-disabled);
-
     color: var(--spectrum-clearbutton-medium-icon-color-disabled);
 
     .spectrum-Icon {
@@ -104,6 +99,20 @@ governing permissions and limitations under the License.
   }
 }
 
+.spectrum-ClearButton--overBackground {
+  --spectrum-clearbutton-medium-background-color: transparent;
+  --spectrum-clearbutton-medium-background-color-hover: rgba(255, 255, 255, 0.1);
+  --spectrum-clearbutton-medium-background-color-key-focus: rgba(255, 255, 255, 0.1);
+  --spectrum-clearbutton-medium-background-color-down: rgba(255, 255, 255, 0.15);
+  --spectrum-clearbutton-medium-background-color-disabled: transparent;
+  --spectrum-clearbutton-medium-icon-color: white;
+  --spectrum-clearbutton-medium-icon-color-hover: white;
+  --spectrum-clearbutton-medium-icon-color-down: white;
+  --spectrum-clearbutton-medium-icon-color-key-focus: white;
+  --spectrum-clearbutton-medium-icon-color-disabled: rgba(255, 255, 255, 0.55);
+  --spectrum-focus-ring-color: white;
+}
+
 .spectrum-Button {
   &[data-style=fill] {
     --spectrum-button-text-color: white;

packages/@adobe/spectrum-css-temp/components/commons/focus-ring.css

@@ -1,4 +1,4 @@
-%spectrum-FocusRing {
+%spectrum-FocusRing-ring {
   --spectrum-focus-ring-border-radius: var(--spectrum-textfield-border-radius);
   --spectrum-focus-ring-gap: var(--spectrum-alias-input-focusring-gap);
   --spectrum-focus-ring-size: var(--spectrum-alias-input-focusring-size);
@@ -20,12 +20,20 @@
     transition: box-shadow var(--spectrum-global-animation-duration-100) ease-out,
                 margin var(--spectrum-global-animation-duration-100) ease-out;
   }
+}
+
+%spectrum-FocusRing-active {
+  &:after {
+    margin: calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size));
+    box-shadow: 0 0 0 var(--spectrum-focus-ring-size) var(--spectrum-focus-ring-color);
+  }
+}
+
+%spectrum-FocusRing {
+  @inherit %spectrum-FocusRing-ring;
 
   &:focus-ring {
-    &:after {
-      margin: calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size));
-      box-shadow: 0 0 0 var(--spectrum-focus-ring-size) var(--spectrum-focus-ring-color);
-    }
+    @inherit %spectrum-FocusRing-active;
   }
 }
 

packages/@adobe/spectrum-css-temp/components/toast/index.css

@@ -23,6 +23,7 @@ governing permissions and limitations under the License.
   display: inline-flex;
   flex-direction: row;
   align-items: stretch;
+  max-width: 500px; /* devon made this up */
 
   border-radius: var(--spectrum-toast-border-radius);
 
@@ -32,7 +33,6 @@ governing permissions and limitations under the License.
   padding-inline-start: var(--spectrum-toast-padding-left);
 
   font-size: var(--spectrum-toast-text-size);
-  font-weight: var(--spectrum-toast-text-font-weight);
   -webkit-font-smoothing: antialiased;
 }
 
@@ -48,10 +48,8 @@ governing permissions and limitations under the License.
 
 .spectrum-Toast-content {
   flex: 1 1 auto;
-  display: inline-block;
   box-sizing: border-box;
   padding-block-start: var(--spectrum-toast-content-padding-top);
-  padding-inline-end: var(--spectrum-toast-content-padding-right);
   padding-block-end: var(--spectrum-toast-content-padding-bottom);
   padding-inline-start: 0;
   text-align: start;
@@ -75,9 +73,12 @@ governing permissions and limitations under the License.
   flex: 1 1 auto;
   align-self: center;
 
-  .spectrum-Button {
-    margin-inline-end: var(--spectrum-toast-button-margin-right);
-  }
+  /* https://spectrum.adobe.com/page/toast/#Text-overflow */
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  column-gap: var(--spectrum-toast-content-padding-right);
+  padding-inline-end: var(--spectrum-toast-content-padding-right);
 
   & + .spectrum-Toast-buttons {
     padding-inline-start: var(--spectrum-toast-padding-right);

packages/@adobe/spectrum-css-temp/components/toast/skin.css

@@ -11,8 +11,8 @@ governing permissions and limitations under the License.
 */
 
 .spectrum-Toast {
-  background-color: var(--spectrum-toast-background-color);
-  color: var(--spectrum-toast-background-color);
+  background-color: var(--spectrum-alias-neutral-background-color);
+  color: white;
 }
 
 .spectrum-Toast-content {
@@ -27,50 +27,16 @@ governing permissions and limitations under the License.
   border-inline-start-color: rgba(255, 255, 255, 0.2);
 }
 
-.spectrum-Toast--warning {
-  background-color: var(--spectrum-toast-warning-background-color);
-  color: var(--spectrum-toast-warning-background-color);
-
-  .spectrum-Toast-closeButton {
-    &:focus-ring:not(:active) {
-      color: var(--spectrum-toast-warning-background-color);
-    }
-  }
-}
-
-.spectrum-Toast--negative,
-/** @deprecated */.spectrum-Toast--error {
-  background-color: var(--spectrum-toast-error-background-color);
-  color: var(--spectrum-toast-error-background-color);
-
-  .spectrum-Toast-closeButton {
-    &:focus-ring:not(:active) {
-      color: var(--spectrum-toast-error-background-color);
-    }
-  }
+.spectrum-Toast--negative {
+  background-color: var(--spectrum-negative-background-color-default);
 }
 
 .spectrum-Toast--info {
-  background-color: var(--spectrum-toast-info-background-color);
-  color: var(--spectrum-toast-info-background-color);
-
-  .spectrum-Toast-closeButton {
-    &:focus-ring:not(:active) {
-      color: var(--spectrum-toast-info-background-color);
-    }
-  }
+  background-color: var(--spectrum-informative-background-color-default);
 }
 
-.spectrum-Toast--positive,
-/** @deprecated */.spectrum-Toast--success {
-  background-color: var(--spectrum-toast-positive-background-color);
-  color: var(--spectrum-toast-positive-background-color);
-
-  .spectrum-Toast-closeButton {
-    &:focus-ring:not(:active) {
-      color: var(--spectrum-toast-positive-background-color);
-    }
-  }
+.spectrum-Toast--positive {
+  background-color: var(--spectrum-positive-background-color-default);
 }
 
 @media (forced-colors: active) {

packages/@adobe/spectrum-css-temp/components/tooltip/skin.css

@@ -11,6 +11,7 @@ governing permissions and limitations under the License.
 */
 
 .spectrum-Tooltip {
+  --spectrum-tooltip-background-color: var(--spectrum-alias-neutral-background-color);
   --spectrum-tooltip-negative-background-color: var(--spectrum-negative-background-color-default);
   --spectrum-tooltip-positive-background-color: var(--spectrum-positive-background-color-default);
   --spectrum-tooltip-info-background-color: var(--spectrum-informative-background-color-default);

packages/@adobe/spectrum-css-temp/vars/express.css

@@ -152,7 +152,7 @@
   --spectrum-tooltip-dropshadow: drop-shadow(0 var(--spectrum-alias-dropshadow-offset-y) var(--spectrum-alias-dropshadow-blur) var(--spectrum-alias-dropshadow-color));
   --spectrum-selectlist-option-icon-color-selected: var(--spectrum-global-color-indigo-500);
 
-  --spectrum-tooltip-background-color: var(--spectrum-neutral-background-color-default);
+  --spectrum-alias-neutral-background-color: var(--spectrum-neutral-background-color-default);
 }
 
 .express.medium {

packages/@adobe/spectrum-css-temp/vars/spectrum-global.css

@@ -654,5 +654,5 @@
 
   --spectrum-actiongroup-compact-button-gap: calc(-1 * var(--spectrum-actionbutton-border-size));
 
-  --spectrum-tooltip-background-color: var(--spectrum-neutral-subdued-background-color-default);
+  --spectrum-alias-neutral-background-color: var(--spectrum-neutral-subdued-background-color-default);
 }

packages/@react-aria/focus/src/FocusScope.tsx

@@ -398,6 +398,11 @@ function isElementInScope(element: Element, scope: Element[]) {
 }
 
 function isElementInChildScope(element: Element, scope: ScopeRef = null) {
+  // If the element is within a top layer element (e.g. toasts), always allow moving focus there.
+  if (element instanceof Element && element.closest('[data-react-aria-top-layer]')) {
+    return true;
+  }
+
   // node.contains in isElementInScope covers child scopes that are also DOM children,
   // but does not cover child scopes in portals.
   for (let {scopeRef: s} of focusScopeTree.traverse(focusScopeTree.getTreeNode(scope))) {

packages/@react-aria/interactions/src/useInteractOutside.ts

@@ -110,12 +110,17 @@ function isValidEvent(event, ref) {
     return false;
   }
 
-  // if the event target is no longer in the document
   if (event.target) {
+    // if the event target is no longer in the document, ignore
     const ownerDocument = event.target.ownerDocument;
     if (!ownerDocument || !ownerDocument.documentElement.contains(event.target)) {
       return false;
     }
+
+    // If the target is within a top layer element (e.g. toasts), ignore.
+    if (event.target.closest('[data-react-aria-top-layer]')) {
+      return false;
+    }
   }
 
   return ref.current && !ref.current.contains(event.target);

packages/@react-aria/landmark/src/useLandmark.ts

@@ -329,7 +329,9 @@ export function useLandmark(props: AriaLandmarkProps, ref: MutableRefObject<Focu
   return {
     landmarkProps: {
       role,
-      tabIndex: isLandmarkFocused ? -1 : undefined
+      tabIndex: isLandmarkFocused ? -1 : undefined,
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby
     }
   };
 }

packages/@react-aria/overlays/src/ariaHideOutside.ts

@@ -26,16 +26,17 @@ let observerStack = [];
 export function ariaHideOutside(targets: Element[], root = document.body) {
   let visibleNodes = new Set<Element>(targets);
   let hiddenNodes = new Set<Element>();
+
+  // Keep live announcer and top layer elements (e.g. toasts) visible.
+  for (let element of document.querySelectorAll('[data-live-announcer], [data-react-aria-top-layer]')) {
+    visibleNodes.add(element);
+  }
+
   let walker = document.createTreeWalker(
     root,
     NodeFilter.SHOW_ELEMENT,
     {
       acceptNode(node) {
-        // If this node is a live announcer, add it to the set of nodes to keep visible.
-        if (((node instanceof HTMLElement || node instanceof SVGElement) && node.dataset.liveAnnouncer === 'true')) {
-          visibleNodes.add(node);
-        }
-
         // Skip this node and its children if it is one of the target nodes, or a live announcer.
         // Also skip children of already hidden nodes, as aria-hidden is recursive. An exception is
         // made for elements with role="row" since VoiceOver on iOS has issues hiding elements with role="row".
@@ -48,8 +49,10 @@ export function ariaHideOutside(targets: Element[], root = document.body) {
         }
 
         // Skip this node but continue to children if one of the targets is inside the node.
-        if (targets.some(target => node.contains(target))) {
-          return NodeFilter.FILTER_SKIP;
+        for (let target of visibleNodes) {
+          if (node.contains(target)) {
+            return NodeFilter.FILTER_SKIP;
+          }
         }
 
         return NodeFilter.FILTER_ACCEPT;
@@ -96,7 +99,10 @@ export function ariaHideOutside(targets: Element[], root = document.body) {
       // and not already inside a hidden node, hide all of the new children.
       if (![...visibleNodes, ...hiddenNodes].some(node => node.contains(change.target))) {
         for (let node of change.addedNodes) {
-          if (((node instanceof HTMLElement || node instanceof SVGElement) && node.dataset.liveAnnouncer === 'true')) {
+          if (
+            (node instanceof HTMLElement || node instanceof SVGElement) &&
+            (node.dataset.liveAnnouncer === 'true' || node.dataset.reactAriaTopLayer === 'true')
+          ) {
             visibleNodes.add(node);
           } else if (node instanceof Element) {
             hide(node);