Rebuild Close button component (#41935)

- Use inline SVGs instead of embedded for CSP
- Also allows greater customization
- Modifies examples to use the latest

diff --git a/scss/buttons/_close.scss b/scss/buttons/_close.scss
index c765c85f9b178887617b7c3a83d3ede444bea091..9fc526e9a8451198d18341d6cf53d7f6a240f306 100644 (file)
--- a/scss/buttons/_close.scss
+++ b/scss/buttons/_close.scss
@@ -5,19 +5,17 @@
 @use "../mixins/color-mode" as *;
 
 // scss-docs-start close-variables
-$btn-close-width:            1em !default;
-$btn-close-height:           $btn-close-width !default;
-$btn-close-padding-x:        .25em !default;
-$btn-close-padding-y:        $btn-close-padding-x !default;
-$btn-close-color:            $black !default;
-$btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/></svg>") !default;
+$btn-close-size:             1.25rem !default;
+// $btn-close-width:            1em !default;
+// $btn-close-height:           $btn-close-width !default;
+// $btn-close-padding-x:        .25em !default;
+// $btn-close-padding-y:        $btn-close-padding-x !default;
+$btn-close-color:            var(--#{$prefix}fg-body) !default;
 $btn-close-focus-shadow:     $focus-ring-box-shadow !default;
 $btn-close-opacity:          .5 !default;
 $btn-close-hover-opacity:    .75 !default;
-$btn-close-focus-opacity:    1 !default;
+$btn-close-focus-opacity:    .85 !default;
 $btn-close-disabled-opacity: .25 !default;
-$btn-close-filter:           null !default;
-$btn-close-filter-dark: invert(1) grayscale(100%) brightness(200%) !default;
 // scss-docs-end close-variables
 
 // Transparent background and border properties included for button version.
@@ -28,8 +26,8 @@ $btn-close-filter-dark: invert(1) grayscale(100%) brightness(200%) !default;
 @layer components {
   .btn-close {
     // scss-docs-start close-css-vars
+    --#{$prefix}btn-close-size: #{$btn-close-size};
     --#{$prefix}btn-close-color: #{$btn-close-color};
-    --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
     --#{$prefix}btn-close-opacity: #{$btn-close-opacity};
     --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
     --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
@@ -38,16 +36,22 @@ $btn-close-filter-dark: invert(1) grayscale(100%) brightness(200%) !default;
     // scss-docs-end close-css-vars
 
     box-sizing: content-box;
-    width: $btn-close-width;
-    height: $btn-close-height;
-    padding: $btn-close-padding-y $btn-close-padding-x;
+    width: var(--#{$prefix}btn-close-size);
+    height: var(--#{$prefix}btn-close-size);
+    padding: 0;
     color: var(--#{$prefix}btn-close-color);
-    background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
-    filter: var(--#{$prefix}btn-close-filter);
+    background: transparent;
+    // background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
+    // filter: var(--#{$prefix}btn-close-filter);
     border: 0; // for button elements
-    @include border-radius();
     opacity: var(--#{$prefix}btn-close-opacity);
 
+    > svg {
+      // width: 100%;
+      // height: 100%
+      fill: currentcolor;
+    }
+
     // Override <a>'s hover style
     &:hover {
       color: var(--#{$prefix}btn-close-color);
@@ -69,22 +73,22 @@ $btn-close-filter-dark: invert(1) grayscale(100%) brightness(200%) !default;
     }
   }
 
-  @mixin btn-close-white() {
-    --#{$prefix}btn-close-filter: #{$btn-close-filter-dark};
-  }
+  // @mixin btn-close-white() {
+  //   // --#{$prefix}btn-close-filter: #{$btn-close-filter-dark};
+  // }
 
-  .btn-close-white {
-    @include btn-close-white();
-  }
+  // .btn-close-white {
+  //   @include btn-close-white();
+  // }
 
-  :root,
-  [data-bs-theme="light"] {
-    --#{$prefix}btn-close-filter: #{$btn-close-filter};
-  }
+  // :root,
+  // [data-bs-theme="light"] {
+  //   // --#{$prefix}btn-close-filter: #{$btn-close-filter};
+  // }
 
-  @if $enable-dark-mode {
-    @include color-mode(dark, true) {
-      @include btn-close-white();
-    }
-  }
+  // @if $enable-dark-mode {
+  //   @include color-mode(dark, true) {
+  //     @include btn-close-white();
+  //   }
+  // }
 }

diff --git a/site/src/content/docs/components/close-button.mdx b/site/src/content/docs/components/close-button.mdx
index 8845506b55cf9f41862f35d848acd14423827533..adf5d9a2590ec562f0735aede4d9f5369dd7fb91 100644 (file)
--- a/site/src/content/docs/components/close-button.mdx
+++ b/site/src/content/docs/components/close-button.mdx
@@ -6,23 +6,39 @@ toc: true
 
 ## Example
 
-Provide an option to dismiss or close a component with `.btn-close`. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default `background-image`. **Be sure to include text for screen readers**, as we’ve done with `aria-label`.
+Provide an option to dismiss or close a component with `.btn-close`. Requires the use of an SVG icon within, which inherits the `color` from the `.btn-close` class. **Be sure to include text for screen readers**, as we’ve done with `aria-label`.
 
-<Example code={`<button type="button" class="btn-close" aria-label="Close"></button>`} />
+<Example code={`<button type="button" class="btn-close" aria-label="Close">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20" fill="none">
+      <path fill="currentcolor" d="M12 0a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4zm-.646 4.646a.5.5 0 0 0-.707 0L8 7.293 5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.647a.5.5 0 1 0 .708.707L8 8.707l2.647 2.646a.5.5 0 1 0 .707-.707L8.707 8l2.646-2.646a.5.5 0 0 0 0-.708z"/>
+    </svg>
+  </button>`} />
 
 ## Disabled state
 
 Disabled close buttons change their `opacity`. We’ve also applied `pointer-events: none` and `user-select: none` to preventing hover and active states from triggering.
 
-<Example code={`<button type="button" class="btn-close" disabled aria-label="Close"></button>`} />
+<Example code={`<button type="button" class="btn-close" disabled aria-label="Close">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20" fill="none">
+      <path fill="currentcolor" d="M12 0a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4zm-.646 4.646a.5.5 0 0 0-.707 0L8 7.293 5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.647a.5.5 0 1 0 .708.707L8 8.707l2.647 2.646a.5.5 0 1 0 .707-.707L8.707 8l2.646-2.646a.5.5 0 0 0 0-.708z"/>
+    </svg>
+  </button>`} />
 
 ## Dark variant
 
-Add `data-bs-theme="dark"` to the `.btn-close`, or to its parent element, to invert the close button. This uses the `filter` property to invert the `background-image` without overriding its value.
-
-<Example class="bg-dark" code={`<div data-bs-theme="dark">
-    <button type="button" class="btn-close" aria-label="Close"></button>
-    <button type="button" class="btn-close" disabled aria-label="Close"></button>
+Add `data-bs-theme="dark"` to the `.btn-close`, or to its parent element, to invert the close button. This happens automatically when in dark mode.
+
+<Example class="bg-inverse" code={`<div data-bs-theme="dark">
+    <button type="button" class="btn-close" aria-label="Close">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20" fill="none">
+        <path fill="currentcolor" d="M12 0a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4zm-.646 4.646a.5.5 0 0 0-.707 0L8 7.293 5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.647a.5.5 0 1 0 .708.707L8 8.707l2.647 2.646a.5.5 0 1 0 .707-.707L8.707 8l2.646-2.646a.5.5 0 0 0 0-.708z"/>
+      </svg>
+    </button>
+    <button type="button" class="btn-close" disabled aria-label="Close">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20" fill="none">
+        <path fill="currentcolor" d="M12 0a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4zm-.646 4.646a.5.5 0 0 0-.707 0L8 7.293 5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.647a.5.5 0 1 0 .708.707L8 8.707l2.647 2.646a.5.5 0 1 0 .707-.707L8.707 8l2.646-2.646a.5.5 0 0 0 0-.708z"/>
+      </svg>
+    </button>
   </div>`} />
 
 ## CSS