feat(uui-menu-item): add flatten css var to hide chevron column (#665)

* remove grid column on flatten

* add  --uui-menu-item-flat-structure css var

* add story

* fix story docs

Author: JesmoDev

packages/uui-menu-item/lib/uui-menu-item.element.ts

@@ -16,6 +16,7 @@ import { UUIMenuItemEvent } from './UUIMenuItemEvent';
 /**
  *  @element uui-menu-item
  *  @cssprop --uui-menu-item-indent - set indentation of the menu items
+ *  @cssprop --uui-menu-item-flat-structure - set to 1 to remove the indentation of the chevron. Use this when you have a flat menu structure
  *  @fires {UUIMenuItemEvent} show-children - fires when the expand icon is clicked to show nested menu items
  *  @fires {UUIMenuItemEvent} hide-children - fires when the expend icon is clicked to hide nested menu items
  *  @fires {UUIMenuItemEvent} click-label - fires when the label is clicked
@@ -200,13 +201,18 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
         display: block;
         --uui-menu-item-child-indent: calc(var(--uui-menu-item-indent, 0) + 1);
         user-select: none;
+        --flat-structure-reversed: calc(
+          1 - var(--uui-menu-item-flat-structure, 0)
+        );
       }
 
       #menu-item {
         position: relative;
         padding-left: calc(var(--uui-menu-item-indent, 0) * var(--uui-size-4));
         display: grid;
-        grid-template-columns: var(--uui-size-8) 1fr;
+        grid-template-columns:
+          calc(var(--flat-structure-reversed) * var(--uui-size-8))
+          1fr;
         grid-template-rows: 1fr;
         white-space: nowrap;
       }
@@ -389,7 +395,10 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
         grid-column-start: 2;
         white-space: nowrap;
         overflow: hidden;
-
+        padding-right: var(--uui-size-space-3);
+        padding-left: calc(
+          var(--uui-menu-item-flat-structure) * var(--uui-size-space-3)
+        );
         display: inline-flex;
         align-items: center;
         text-decoration: none;
@@ -407,10 +416,6 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
         pointer-events: none; /* avoid hovering state on this. */
       }
 
-      #caret-button + #label-button {
-        padding-left: 0;
-      }
-
       #caret-button {
         position: relative;
         width: 100%;

packages/uui-menu-item/lib/uui-menu-item.story.ts

@@ -32,6 +32,7 @@ export default {
   },
   argTypes: {
     '--uui-menu-item-indent': { control: { type: 'text' } },
+    '--uui-menu-item-flat-structure': { control: { type: 'text' } },
     selectMode: {
       control: {
         type: 'select',
@@ -397,6 +398,36 @@ ItemIndentation.parameters = {
   },
 };
 
+export const FlatStructure: Story = (props: any) => html`
+  <uui-icon-registry-essential>
+    <uui-menu-item
+      style="--uui-menu-item-flat-structure: 1"
+      label=${props.label}
+      ?loading=${props.loading}
+      ?disabled=${props.disabled}
+      ?has-children=${props.hasChildren}
+      ?show-children=${props.showChildren}
+      ?selected=${props.selected}
+      ?active=${props.active}
+      ?selectable=${props.selectable}
+      href=${props.href}
+      target=${props.target}>
+    </uui-menu-item>
+  </uui-icon-registry-essential>
+`;
+FlatStructure.parameters = {
+  docs: {
+    source: {
+      code: html`
+        <uui-menu-item
+          style="--uui-menu-item-flat-structure: 1"
+          label="Menu Item 1">
+        </uui-menu-item>
+      `.strings,
+    },
+  },
+};
+
 export const SelectMode = (props: any) =>
   html`<uui-menu-item
     label="Parent"