Fix themed styles for LeftPaneDialog, add stories

stylesheets/_mixins.scss

@@ -140,6 +140,13 @@
   }
 }
 
+@mixin any-theme {
+  &,
+  .dark-theme & {
+    @content;
+  }
+}
+
 // Utilities
 
 @mixin rounded-corners() {

stylesheets/components/LeftPaneDialog.scss

@@ -186,45 +186,65 @@
     }
   }
 
-  &--error {
+  &__tooltip {
-    background-color: $error-background-color;
+    --tooltip-background-color: #{$default-background-color};
-    color: $error-text-color;
+    --tooltip-text-color: #{$default-text-color};
-
+    min-width: 280px;
-    a {
+    text-align: inherit;
-      color: $error-text-color;
-    }
-
-    .LeftPaneDialog__action-text {
-      color: $error-text-color;
-    }
   }
 
-  &--warning {
+  &,
-    background-color: $warning-background-color;
+  &__tooltip {
-    color: $warning-text-color;
+    &--error {
+      background-color: $error-background-color;
+      color: $error-text-color;
 
-    a {
+      @include any-theme {
-      color: $color-black;
+        --tooltip-background-color: #{$error-background-color};
-    }
+        --tooltip-text-color: #{$error-text-color};
+      }
 
-    .LeftPaneDialog__icon {
+      a {
-      background-color: $color-black;
+        color: $error-text-color;
+      }
 
-      @media (forced-colors: active) {
+      .LeftPaneDialog__action-text {
-        background-color: WindowText;
+        color: $error-text-color;
       }
     }
 
-    .LeftPaneDialog__close-button::before {
+    &--warning {
-      background-color: $color-black;
+      background-color: $warning-background-color;
-
-      @media (forced-colors: active) {
-        background-color: WindowText;
-      }
-    }
-
-    .LeftPaneDialog__action-text {
       color: $warning-text-color;
+
+      @include any-theme {
+        --tooltip-background-color: #{$warning-background-color};
+        --tooltip-text-color: #{$warning-text-color};
+      }
+
+      a {
+        color: $warning-text-color;
+      }
+
+      .LeftPaneDialog__icon {
+        background-color: $warning-text-color;
+
+        @media (forced-colors: active) {
+          background-color: WindowText;
+        }
+      }
+
+      .LeftPaneDialog__close-button::before {
+        background-color: $warning-text-color;
+
+        @media (forced-colors: active) {
+          background-color: WindowText;
+        }
+      }
+
+      .LeftPaneDialog__action-text {
+        color: $warning-text-color;
+      }
     }
   }
 
@@ -266,25 +286,4 @@
       transition: transform 500ms ease-out;
     }
   }
-
-  &__tooltip {
-    --tooltip-background-color: #{$default-background-color};
-    --tooltip-text-color: #{$default-text-color};
-    min-width: 280px;
-    text-align: inherit;
-
-    &--error {
-      --tooltip-text-color: #{$error-text-color};
-      --tooltip-background-color: #{$error-background-color};
-
-      a {
-        color: #{$error-text-color};
-      }
-    }
-
-    &--warning {
-      --tooltip-text-color: #{$warning-text-color};
-      --tooltip-background-color: #{$warning-background-color};
-    }
-  }
 }

ts/components/LeftPaneDialog.stories.tsx

@@ -0,0 +1,133 @@
+// Copyright 2023 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+import { LeftPaneDialog } from './LeftPaneDialog';
+import { WidthBreakpoint } from './_util';
+
+const widths = {
+  [WidthBreakpoint.Wide]: '400px',
+  [WidthBreakpoint.Medium]: '300px',
+  [WidthBreakpoint.Narrow]: '100px',
+};
+
+// eslint-disable-next-line max-len
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
+function WidthDecorator(Story: any, context: any): JSX.Element {
+  return (
+    <div
+      style={{
+        width: widths[context.args.containerWidthBreakpoint as WidthBreakpoint],
+      }}
+    >
+      <Story />
+    </div>
+  );
+}
+
+export default {
+  title: 'Components/LeftPaneDialog',
+  component: LeftPaneDialog,
+  decorators: [WidthDecorator],
+  argTypes: {
+    type: {
+      options: [undefined, 'warning', 'error'],
+      type: 'select',
+    },
+    icon: {
+      options: [undefined, 'update', 'relink', 'network', 'warning'],
+      type: 'select',
+    },
+    title: {
+      control: 'text',
+    },
+    subtitle: {
+      control: 'text',
+    },
+    hoverText: {
+      control: 'text',
+      defaultValue:
+        'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
+    },
+    hasXButton: {
+      control: 'boolean',
+    },
+    hasAction: {
+      control: 'boolean',
+    },
+    containerWidthBreakpoint: {
+      options: Object.keys(WidthBreakpoint),
+      mapping: WidthBreakpoint,
+      type: 'select',
+    },
+  },
+  args: {
+    title: 'Lorem ipsum dolor sit amet',
+    subtitle:
+      'Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    hasXButton: true,
+    hasAction: true,
+    onClick: (): null => null,
+    clickLabel: 'Click me',
+    containerWidthBreakpoint: WidthBreakpoint.Wide,
+  },
+};
+
+export const Update = {
+  args: {
+    type: undefined,
+    icon: 'update',
+  },
+};
+
+export const Warning = {
+  args: {
+    type: 'warning',
+    icon: 'warning',
+  },
+};
+
+export const Error = {
+  args: {
+    type: 'error',
+    icon: 'warning',
+  },
+};
+
+export const Relink = {
+  args: {
+    type: undefined,
+    icon: 'relink',
+  },
+};
+
+export const Network = {
+  args: {
+    type: 'warning',
+    icon: 'network',
+  },
+};
+
+export const NarrowUpdate = {
+  args: {
+    type: undefined,
+    icon: 'update',
+    containerWidthBreakpoint: WidthBreakpoint.Narrow,
+  },
+};
+
+export const NarrowWarning = {
+  args: {
+    type: 'warning',
+    icon: 'warning',
+    containerWidthBreakpoint: WidthBreakpoint.Narrow,
+  },
+};
+
+export const NarrowError = {
+  args: {
+    type: 'error',
+    icon: 'warning',
+    containerWidthBreakpoint: WidthBreakpoint.Narrow,
+  },
+};