rename uui-form-item to uui-form-layout-item

Author: nielslyngsoe

package-lock.json

@@ -0,0 +1,31 @@
+# uui-form-layout-item
+
+![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-form-layout-item?logoColor=%231B264F)
+
+Umbraco style uui-form-layout-item component.
+
+## Installation
+
+### ES imports
+
+```zsh
+npm i @umbraco-ui/uui-form-layout-item
+```
+
+Import the registration of `<uui-form-layout-item>` via:
+
+```javascript
+import '@umbraco-ui/uui-form-layout-item/';
+```
+
+When looking to leverage the `UUIFormLayoutItemElement` base class as a type and/or for extension purposes, do so via:
+
+```javascript
+import { UUIFormLayoutItemElement } from '@umbraco-ui/uui-form-layout-item';
+```
+
+## Usage
+
+```html
+<uui-form-layout-item></uui-form-layout-item>
+```

packages/uui-form-item/README.md

@@ -0,0 +1 @@
+export * from './uui-form-layout-item.element';

packages/uui-form-item/lib/index.ts

@@ -5,14 +5,14 @@ import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 // TODO: Make sure validation messages can be seen for the whole Form Item. Make them follow the screen if form controls are taller than available screen height.
 
 /**
- * @element uui-form-item
+ * @element uui-form-layout-item
  * @description - Form item composes label, input and validation-messages in a proper layout.
  * @slot - for button contents
  * @slot message - for extras in the messages container
  */
 
-@defineElement('uui-form-item')
-export class UUIFormItemElement extends LitElement {
+@defineElement('uui-form-layout-item')
+export class UUIFormLayoutItemElement extends LitElement {
   static styles = [
     css`
       :host {
@@ -84,6 +84,6 @@ export class UUIFormItemElement extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'uui-form-item': UUIFormItemElement;
+    'uui-form-layout-item': UUIFormLayoutItemElement;
   }
 }

packages/uui-form-layout-item/README.md

@@ -1,16 +1,18 @@
 import { html, fixture, expect } from '@open-wc/testing';
-import { UUIFormItemElement } from './uui-form-item.element';
+import { UUIFormLayoutItemElement } from './uui-form-layout-item.element';
 import '.';
 
-describe('UUIFormItemElement', () => {
-  let element: UUIFormItemElement;
+describe('UUIFormLayoutItemElement', () => {
+  let element: UUIFormLayoutItemElement;
 
   beforeEach(async () => {
-    element = await fixture(html` <uui-form-item></uui-form-item> `);
+    element = await fixture(
+      html` <uui-form-layout-item></uui-form-layout-item> `
+    );
   });
 
   it('is defined', () => {
-    expect(element).to.be.instanceOf(UUIFormItemElement);
+    expect(element).to.be.instanceOf(UUIFormLayoutItemElement);
   });
 
   it('passes the a11y audit', async () => {
@@ -29,6 +31,11 @@ describe('UUIFormItemElement', () => {
       expect(slot).to.exist;
     });
 
+    it('renders an label slot', () => {
+      const slot = element.shadowRoot!.querySelector('slot[name=label]')!;
+      expect(slot).to.exist;
+    });
+
     it('renders an message slot', () => {
       const slot = element.shadowRoot!.querySelector('slot[name=message]')!;
       expect(slot).to.exist;

packages/uui-form-layout-item/lib/index.ts

@@ -1,5 +1,5 @@
 {
-  "name": "@umbraco-ui/uui-form-item",
+  "name": "@umbraco-ui/uui-form-layout-item",
   "version": "0.0.0",
   "license": "MIT",
   "keywords": [
@@ -10,16 +10,16 @@
     "Lit",
     "Form Item"
   ],
-  "description": "Umbraco UI form-item component",
+  "description": "Umbraco UI form-layout-item component",
   "repository": {
     "type": "git",
     "url": "https://github.com/umbraco/Umbraco.UI.git",
-    "directory": "packages/uui-form-item"
+    "directory": "packages/uui-form-layout-item"
   },
   "bugs": {
     "url": "https://github.com/umbraco/Umbraco.UI/issues"
   },
-  "main": "./dist/uui-form-item.min.js",
+  "main": "./dist/uui-form-layout-item.min.js",
   "module": "./lib/index.js",
   "customElements": "custom-elements.json",
   "files": [
@@ -38,5 +38,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "homepage": "https://uui.umbraco.com/?path=/story/uui-form-item"
+  "homepage": "https://uui.umbraco.com/?path=/story/uui-form-layout-item"
 }