fix: code review feedback

* update README example to use <sp-icon size="s"> so we're at least
giving good advice.
* Switch min-width to 0
* Add a custom icon story & add it to the visual regression (along with
the iconOnly story)

packages/action-menu/README.md

@@ -95,8 +95,8 @@ A custom icon can be supplied via the `icon` slot in order to replace the defaul
 <!-- prettier-ignore -->
 ```html
 <sp-action-menu label="More actions">
-    <sp-icon slot="icon" size="xxs" name="ui:ChevronDownSmall"></sp-icon>
-    <span slot="label">Actions Under the Arrow</span>
+    <sp-icon slot="icon" size="s"><svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18"><rect id="Canvas" fill="#ff13dc" opacity="0" width="18" height="18" /><path class="a" d="M16.45,7.8965H14.8945a5.97644,5.97644,0,0,0-.921-2.2535L15.076,4.54a.55.55,0,0,0,.00219-.77781L15.076,3.76l-.8365-.836a.55.55,0,0,0-.77781-.00219L13.4595,2.924,12.357,4.0265a5.96235,5.96235,0,0,0-2.2535-.9205V1.55a.55.55,0,0,0-.55-.55H8.45a.55.55,0,0,0-.55.55V3.106a5.96235,5.96235,0,0,0-2.2535.9205l-1.1-1.1025a.55.55,0,0,0-.77781-.00219L3.7665,2.924,2.924,3.76a.55.55,0,0,0-.00219.77781L2.924,4.54,4.0265,5.643a5.97644,5.97644,0,0,0-.921,2.2535H1.55a.55.55,0,0,0-.55.55V9.55a.55.55,0,0,0,.55.55H3.1055a5.967,5.967,0,0,0,.921,2.2535L2.924,13.4595a.55.55,0,0,0-.00219.77782l.00219.00218.8365.8365a.55.55,0,0,0,.77781.00219L4.5405,15.076,5.643,13.9735a5.96235,5.96235,0,0,0,2.2535.9205V16.45a.55.55,0,0,0,.55.55H9.55a.55.55,0,0,0,.55-.55V14.894a5.96235,5.96235,0,0,0,2.2535-.9205L13.456,15.076a.55.55,0,0,0,.77782.00219L14.236,15.076l.8365-.8365a.55.55,0,0,0,.00219-.77781l-.00219-.00219L13.97,12.357a5.967,5.967,0,0,0,.921-2.2535H16.45a.55.55,0,0,0,.55-.55V8.45a.55.55,0,0,0-.54649-.55349ZM11.207,9A2.207,2.207,0,1,1,9,6.793H9A2.207,2.207,0,0,1,11.207,9Z" /></svg></sp-icon>
+    <span slot="label">Actions under the gear</span>
     <sp-menu>
         <sp-menu-item>
             Deselect

packages/action-menu/stories/action-menu.stories.ts

@@ -17,6 +17,8 @@ import '@spectrum-web-components/menu/sp-menu.js';
 import '@spectrum-web-components/menu/sp-menu-item.js';
 import { ActionMenuMarkup } from './';
 
+import { SettingsIcon } from '@spectrum-web-components/icons-workflow';
+
 export default {
     component: 'sp-action-menu',
     title: 'Action menu',
@@ -28,6 +30,15 @@ export const iconOnly = (): TemplateResult => {
     `;
 };
 
+export const customIcon = (): TemplateResult => {
+    const customIcon = SettingsIcon();
+    return html`
+        ${ActionMenuMarkup({
+            customIcon,
+        })}
+    `;
+};
+
 export const Default = (): TemplateResult => {
     const ariaLabel = text('Arial Label', 'More Actions', 'Component');
     const visibleLabel = text('Visible Label', 'More Actions', 'Component');

packages/action-menu/stories/index.ts

@@ -12,6 +12,7 @@ governing permissions and limitations under the License.
 import { html, TemplateResult } from '@spectrum-web-components/base';
 
 import '../sp-action-menu.js';
+import '@spectrum-web-components/icon/sp-icon.js';
 import '@spectrum-web-components/menu/sp-menu.js';
 import '@spectrum-web-components/menu/sp-menu-item.js';
 
@@ -20,13 +21,19 @@ export const ActionMenuMarkup = ({
     changeHandler = (() => undefined) as (event: Event) => void,
     disabled = false,
     visibleLabel = '',
+    customIcon = '' as string | TemplateResult,
 } = {}): TemplateResult => {
     return html`
         <sp-action-menu
             label=${ariaLabel}
             ?disabled=${disabled}
             @change="${changeHandler}"
         >
+            ${customIcon
+                ? html`
+                      <sp-icon slot="icon" size="s">${customIcon}</sp-icon>
+                  `
+                : html``}
             ${visibleLabel
                 ? html`
                       <span slot="label">${visibleLabel}</span>

test/visual/stories.js

@@ -29,6 +29,8 @@ module.exports = [
     'action-group--icons-only-justified',
     'action-group--compact-icons-only-justified',
     'action-menu--default',
+    'action-menu--customIcon',
+    'action-menu--iconOnly',
     'actionbar--default',
     'asset--default',
     'asset--file',