Feat: Add Feature flag to enable enhanced Dropdown shadow #DS-963

packages/web-react/src/components/Dropdown/demo/DropdownEnhancedShadow.tsx

@@ -0,0 +1,24 @@
+import React, { Ref } from 'react';
+import { DropdownRenderProps } from '../../../types';
+import { Button } from '../../Button';
+import { Dropdown } from '..';
+import DropdownContentFactory from './DropdownContentFactory';
+import { dropdownContent } from './constants';
+
+const DropdownEnhancedShadow = () => {
+  const dropdownTrigger = ({ trigger: { className, ref, ...restOf } }: DropdownRenderProps) => (
+    <Button UNSAFE_className={className} ref={ref as Ref<HTMLButtonElement>} {...restOf}>
+      Finibus quis imperdiet, semper imperdiet aliquam
+    </Button>
+  );
+
+  return (
+    <div className="spirit-feature-dropdown-enable-enhanced-shadow">
+      <Dropdown renderTrigger={dropdownTrigger} placement="top-left">
+        <DropdownContentFactory content={dropdownContent} />
+      </Dropdown>
+    </div>
+  );
+};
+
+export default DropdownEnhancedShadow;

packages/web-react/src/components/Dropdown/demo/index.tsx

@@ -13,6 +13,7 @@ import DropdownDisabledAutoclose from './DropdownDisabledAutoclose';
 import DropdownLongerContent from './DropdownLongerContent';
 import DropdownFullwidthAll from './DropdownFullwidthAll';
 import DropdownFullwidthMobileOnly from './DropdownFullwidthMobileOnly';
+import DropdownEnhancedShadow from './DropdownEnhancedShadow';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
@@ -35,6 +36,9 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
       <DocsSection title="Full-width mode 'mobile-only'">
         <DropdownFullwidthMobileOnly />
       </DocsSection>
+      <DocsSection title="Feature Flag: Enhanced Shadow">
+        <DropdownEnhancedShadow />
+      </DocsSection>
     </IconsProvider>
   </React.StrictMode>,
 );

packages/web-twig/src/Resources/components/Dropdown/Dropdown.stories.twig

@@ -26,4 +26,8 @@
         {% include '@components/Dropdown/stories/DropdownFullwidthMobileOnly.twig' %}
     </DocsSection>
 
+    <DocsSection title="Feature Flag: Enhanced Shadow">
+        {% include '@components/Dropdown/stories/DropdownFeatureEnhancedShadow.twig' %}
+    </DocsSection>
+
 {% endblock %}

packages/web-twig/src/Resources/components/Dropdown/stories/DropdownFeatureEnhancedShadow.twig

@@ -0,0 +1,28 @@
+<div class="spirit-feature-dropdown-enable-enhanced-shadow">
+    <DropdownWrapper>
+        <Button
+            data-spirit-toggle="dropdown"
+            data-spirit-target="#dropdownEnhancedShadow"
+        >
+            Finibus quis imperdiet, semper imperdiet aliquam
+        </Button>
+        <Dropdown id="dropdownEnhancedShadow" placement="top-left">
+            <a href="#" class="d-flex mb-400">
+                <Icon name="info" UNSAFE_className="mr-400" />
+                <span>Information</span>
+            </a>
+            <a href="#" class="d-flex mb-400">
+                <Icon name="link" UNSAFE_className="mr-400" />
+                <span>Bibendum aliquam, fusce integer sit amet congue non nulla aliquet enim</span>
+            </a>
+            <a href="#" class="d-flex mb-400">
+                <Icon name="profile" UNSAFE_className="mr-400" />
+                <span>Profile</span>
+            </a>
+            <a href="#" class="d-flex">
+                <Icon name="help" UNSAFE_className="mr-400" />
+                <span>Help</span>
+            </a>
+        </Dropdown>
+    </DropdownWrapper>
+</div>

packages/web/README.md

@@ -180,6 +180,37 @@ Check your browser console to see if you are using any of the deprecated functio
 
 ![Deprecations in the Browser's console](https://github.com/lmc-eu/spirit-design-system/blob/main/static/deprecations-browser-console.png?raw=true)
 
+## Feature Flags
+
+This package uses feature flags to enable or disable some functionality. You can enable or disable them by loading
+the `feature-flags` module with a configuration. You have to do this **before** loading any other Spirit Web SCSS file.
+
+Example with fictional feature flag to enable fullscreen modal:
+
+```scss
+@use '~@lmc-eu/spirit-web/scss/settings/feature-flags' with (
+  $modal-enable-fullscreen: true
+);
+
+@use '~@lmc-eu/spirit-web/scss/foundation';
+// …
+```
+
+Every feature flag should also provide a class selector that can be used to enable or disable the feature.
+You can use this class if you want to limit the usage of the feature to a specific part of your application.
+Place the class on any parent element of the component you want to enable the feature for.
+
+Example:
+
+```html
+<body class="spirit-modal-enable-fullscreen">
+  <!-- … -->
+  <div class="Modal">
+    <!-- … -->
+  </div>
+</body>
+```
+
 ## Examples
 
 👀 See [examples] for a live demo.

packages/web/src/scss/components/Dropdown/README.md

@@ -221,6 +221,19 @@ modifiers in the camelCase format: `Dropdown--top`, `Dropdown--rightTop`, `Dropd
 Current class combinations (`Dropdown--top.Dropdown--left`, `.Dropdown--top.Dropdown--right`,
 `.Dropdown--bottom.Dropdown--left`, `.Dropdown--bottom.Dropdown--right`) will be removed in the next major release.
 
+## Feature Flag: Enhanced Shadow
+
+The enhanced shadow feature is disabled by default. To enable it, either set the `$dropdown-enable-enhanced-shadow`
+feature flag to `true` or use the `spirit-dropdown-enable-enhanced-shadow` CSS class on any parent of the dropdown.
+
+For more info, see main [README][readme-feature-flags].
+
+### ⚠️ DEPRECATION NOTICE
+
+The enhanced shadow will replace current shadow in the next major release.
+
+[What are deprecations?][readme-deprecations]
+
 ## JavaScript
 
 There are two options here. Use the trigger element as an anchor or wrap the menu together with the trigger into a `.DropdownWrapper` class.
@@ -279,3 +292,5 @@ dropdown.hide();
 ```
 
 [dictionary-placement]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#placement
+[readme-feature-flags]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/README.md#feature-flags
+[readme-deprecations]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/README.md#deprecations

packages/web/src/scss/components/Dropdown/_Dropdown.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use '../../settings/feature-flags';
 @use '../../tools/breakpoint';
 @use '../../tools/dictionaries';
 @use '../../tools/placement';
@@ -12,7 +13,14 @@
     padding: theme.$padding;
     border-radius: theme.$border-radius;
     background-color: theme.$background;
-    box-shadow: theme.$shadow;
+
+    // @deprecated The feature flag will be removed in the next major version.
+    // Migration: delete this feature flag and make the enhanced shadow the default.
+    @if feature-flags.$dropdown-enable-enhanced-shadow {
+        box-shadow: theme.$shadow-enhanced;
+    } @else {
+        box-shadow: theme.$shadow;
+    }
 
     &[data-spirit-fullwidthmode='mobile-only'] {
         @include breakpoint.down(map.get(theme.$breakpoints, tablet)) {
@@ -25,6 +33,12 @@
     }
 }
 
+// @deprecated The feature flag will be removed in the next major version.
+// Migration: delete this feature flag and make the enhanced shadow the default.
+.spirit-feature-dropdown-enable-enhanced-shadow .Dropdown {
+    box-shadow: theme.$shadow-enhanced;
+}
+
 .Dropdown.is-open {
     display: block;
 }

packages/web/src/scss/components/Dropdown/_theme.scss

@@ -7,4 +7,5 @@ $padding: tokens.$space-600;
 $border-radius: tokens.$radius-200;
 $background: tokens.$background-basic;
 $shadow: tokens.$shadow-100;
+$shadow-enhanced: tokens.$shadow-200;
 $placement-dictionary: dictionaries.$placement;

packages/web/src/scss/components/Dropdown/index.html

@@ -257,4 +257,48 @@ <h2 class="docs-Heading">Full-width mode 'mobile-only'</h2>
   </div>
 </section>
 
+<section class="docs-Section">
+  <h2 class="docs-Heading">Feature Flag: Enhanced Shadow</h2>
+
+  <div class="spirit-feature-dropdown-enable-enhanced-shadow">
+    <div class="DropdownWrapper">
+      <button
+        data-spirit-toggle="dropdown"
+        data-spirit-target="#dropdownEnhancedShadow"
+        class="Button Button--primary Button--medium"
+        aria-expanded="false"
+        aria-controls="#dropdownEnhancedShadow"
+      >
+        Finibus quis imperdiet, semper imperdiet aliquam
+      </button>
+      <div class="Dropdown Dropdown--top Dropdown--left" id="dropdownEnhancedShadow">
+        <a href="#" class="d-flex mb-400">
+          <svg width="24" height="24" aria-hidden="true" class="mr-400">
+            <use xlink:href="/icons/svg/sprite.svg#info" />
+          </svg>
+          <span>Information</span>
+        </a>
+        <a href="#" class="d-flex mb-400">
+          <svg width="24" height="24" aria-hidden="true" class="mr-400">
+            <use xlink:href="/icons/svg/sprite.svg#link" />
+          </svg>
+          <span>Bibendum aliquam, fusce integer sit amet congue non nulla aliquet enim</span>
+        </a>
+        <a href="#" class="d-flex mb-400">
+          <svg width="24" height="24" aria-hidden="true" class="mr-400">
+            <use xlink:href="/icons/svg/sprite.svg#profile" />
+          </svg>
+          <span>Profile</span>
+        </a>
+        <a href="#" class="d-flex">
+          <svg width="24" height="24" aria-hidden="true" class="mr-400">
+            <use xlink:href="/icons/svg/sprite.svg#help" />
+          </svg>
+          <span>Help</span>
+        </a>
+      </div>
+    </div>
+  </div>
+</section>
+
 {{/layout/plain }}

packages/web/src/scss/settings/_feature-flags.scss

@@ -0,0 +1 @@
+$dropdown-enable-enhanced-shadow: false !default;