docs(button): update clear-button details

Author: castastrophe

.changeset/hot-cups-report.md

@@ -1,6 +1,17 @@
 ---
+'@spectrum-web-components/button': patch
 '@spectrum-web-components/clear-button': patch
 '@spectrum-web-components/styles': patch
 ---
 
-More details forthcoming
+Clear button styles have been updated to the latest Spectrum CSS version of the clear button.
+
+As the updated styles now offer additional styling options, we have added the following API to the clear button:
+
+-   `quiet` - when set to true, the button will be rendered as a quiet button. This is useful for cases where you want to use the clear button in a more subtle way.
+-   `disabled` - when set to true, the button will be rendered as a disabled button.
+-   `static-color` - currently this only supports the `white` context color. This is useful for cases where the button appears on a dark background texture. This is a replacement for the previously used `variant="overBackground"` attribute which is deprecated.
+
+### Deprecation
+
+The `variant="overBackground"` attribute is deprecated; please use the new `static-color="white"` attribute instead. When this property is used in the component, a deprecation warning will be shown in the console when in debug mode. The `variant` attribute will be removed in a future release.

packages/button/clear-button.md

@@ -94,6 +94,22 @@ The label for an `<sp-clear-button>` element can be set via it's default slot or
 </sp-tab-panel>
 </sp-tabs>
 
+#### Quiet
+
+The `quiet` attribute will render the `<sp-clear-button>` as a quiet button. This is useful for cases where you want to use the clear button in a more subtle way.
+
+```html
+<sp-clear-button quiet label="Clear content"></sp-clear-button>
+```
+
+#### Static color
+
+The `static-color` attribute will render the `<sp-clear-button>` with a static color. This is useful for cases where the button appears on a dark background texture. This is a replacement for the previously used `variant="overBackground"` attribute which is deprecated.
+
+```html
+<sp-clear-button static-color="white" label="Clear content"></sp-clear-button>
+```
+
 ### States
 
 In addition to the variant, the `<sp-clear-button>` elements supports a disabled state, which can be applied by adding the attribute `disabled`.

packages/button/src/ClearButton.ts

@@ -64,6 +64,9 @@ export class ClearButton extends SizedMixin(StyledButton, {
         return [...super.styles, buttonStyles, crossMediumStyles];
     }
 
+    @property({ type: Boolean, reflect: true })
+    public quiet = false;
+
     /**
      * The visual variant to apply to this button.
      * @deprecated Use `static-color='white'` instead.

packages/button/test/clear-button.test.ts

@@ -13,8 +13,9 @@ governing permissions and limitations under the License.
 import '@spectrum-web-components/button/sp-clear-button.js';
 import { ClearButton } from '@spectrum-web-components/button';
 import { ElementSize } from '@spectrum-web-components/base';
-import { expect, fixture, html } from '@open-wc/testing';
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 import { testForLitDevWarnings } from '../../../test/testing-helpers';
+import { SinonStub, stub } from 'sinon';
 
 describe('Clear Button', () => {
     testForLitDevWarnings(