chore: cleanup

felix-bohlin · Dec 16, 2024 · 52d1245 · 52d1245
1 parent 3b58d24
commit 52d1245
Show file tree

Hide file tree

Showing 13 changed files with 150 additions and 115 deletions.
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -112,13 +112,9 @@ export default defineConfig({
                   link: "/components/inputs/button-group",
                 },
                 { text: "Checkbox", link: "/components/inputs/checkbox" },
-                { text: "Color", link: "/components/inputs/color" },
-                { text: "Date", link: "/components/inputs/date" },
-                { text: "File", link: "/components/inputs/file" },
                 { text: "Icon Button", link: "/components/inputs/icon-button" },
                 { text: "Radio", link: "/components/inputs/radio" },
                 { text: "Range", link: "/components/inputs/range" },
-                { text: "Search", link: "/components/inputs/search" },
                 { text: "Select", link: "/components/inputs/select" },
                 { text: "Switch", link: "/components/inputs/switch" },
                 { text: "Textarea", link: "/components/inputs/textarea" },

diff --git a/docs/.vitepress/theme/app/components/Example.vue b/docs/.vitepress/theme/app/components/Example.vue
@@ -65,17 +65,6 @@ const showCode = ref(!props?.hideCode)
 </template>
 
 <style>
-.chip {
-  border-radius: var(--surface-border-radius);
-  justify-self: end;
-  margin: 0 -1px -1px 0;
-  opacity: 0.64;
-
-  .rotated {
-    rotate: 180deg;
-  }
-}
-
 .example-wrapper {
   border-color: var(--border-color);
   border-radius: var(--surface-border-radius, 0.25rem);
@@ -99,6 +88,21 @@ const showCode = ref(!props?.hideCode)
   .example {
     margin-block: var(--size-3, 1rem);
     padding-block: 0;
+
+    .field:not(.auto-fit) {
+      width: 25ch;
+    }
+
+    & + .chip {
+      border-radius: var(--surface-border-radius);
+      justify-self: end;
+      margin: 0 -1px -1px 0;
+      opacity: 0.64;
+
+      .rotated {
+        rotate: 180deg;
+      }
+    }
   }
 
   .vp-code-group .tabs {

diff --git a/docs/components/inputs/button-api.md b/docs/components/inputs/button-api.md
@@ -1,5 +1,4 @@
-| Type                  | Modifiers                                              | Default   | Description                         |
-| --------------------- | ------------------------------------------------------ | --------- | ----------------------------------- |
-| [Disabled](#disabled) | `[disabled]`                                           | -         | If applied, the button is disabled. |
-| [Sizes](#sizes)       | `.small`, default, `.large`                            | `.medium` | The size of the button.             |
-| [Variants](#variants) | default, `.outlined`, `.tonal`, `.filled`, `.elevated` | `default` | The variant to use.                 |
+| Type                  | Modifiers                                              | Default   | Description             |
+| --------------------- | ------------------------------------------------------ | --------- | ----------------------- |
+| [Sizes](#sizes)       | `.small`, default, `.large`                            | `.medium` | The size of the button. |
+| [Variants](#variants) | default, `.outlined`, `.tonal`, `.filled`, `.elevated` | `default` | The variant to use.     |
diff --git a/docs/components/inputs/checkbox-radio-api.md b/docs/components/inputs/checkbox-radio-api.md
@@ -1,5 +1,4 @@
 | Type                              | Modifiers                   | Default | Description                                         |
 | --------------------------------- | --------------------------- | ------- | --------------------------------------------------- |
-| [Disabled](#switch)               | `& input[disabled]`         | -       | If applied, the element is disabled.                |
 | [Sizes](#sizes)                   | `.small`, default, `.large` | default | The size of the element.                            |
 | [Label position](#label-position) | `.stack`, default           | default | If applied, the label is stacked under the element. |
diff --git a/docs/components/inputs/color.md b/docs/components/inputs/color.md
diff --git a/docs/components/inputs/date.md b/docs/components/inputs/date.md
diff --git a/docs/components/inputs/file.md b/docs/components/inputs/file.md
diff --git a/docs/components/inputs/icon-button-api.md b/docs/components/inputs/icon-button-api.md
@@ -1,4 +1,3 @@
-| Type                  | Modifiers                 | Default | Description                         |
-| --------------------- | ------------------------- | ------- | ----------------------------------- |
-| [Disabled](#disabled) | `[disabled]`, `.disabled` | -       | If applied, the button is disabled. |
-| [Sizes](#sizes)       | `.small`                  | -       | The size of the button.             |
+| Type            | Modifiers | Default | Description             |
+| --------------- | --------- | ------- | ----------------------- |
+| [Sizes](#sizes) | `.small`  | -       | The size of the button. |
diff --git a/docs/components/inputs/search.md b/docs/components/inputs/search.md
diff --git a/docs/components/inputs/select-api.md b/docs/components/inputs/select-api.md
@@ -1,5 +1,4 @@
-| Type                  | Modifiers          | Default | Description                         |
-| --------------------- | ------------------ | ------- | ----------------------------------- |
-| [Disabled](#disabled) | `& [disabled]`     | -       | If applied, the Select is disabled. |
-| [Sizes](#sizes)       | `.small`           | -       | The size of the Select.             |
-| [Variants](#variants) | default, `.filled` | -       | The variant to use.                 |
+| Type                  | Modifiers          | Default | Description             |
+| --------------------- | ------------------ | ------- | ----------------------- |
+| [Sizes](#sizes)       | `.small`           | -       | The size of the Select. |
+| [Variants](#variants) | default, `.filled` | -       | The variant to use.     |
diff --git a/docs/components/inputs/switch-api.md b/docs/components/inputs/switch-api.md
@@ -1,5 +1,4 @@
-| Type                              | Modifiers           | Default | Description                                        |
-| --------------------------------- | ------------------- | ------- | -------------------------------------------------- |
-| [Disabled](#switch)               | `& input[disabled]` | -       | If applied, the element is disabled.               |
-| [Sizes](#sizes)                   | `.small`, default   | default | The size of the Switch.                            |
-| [Label position](#label-position) | `.stack`, default   | default | If applied, the label is stacked under the Switch. |
+| Type                              | Modifiers         | Default | Description                                        |
+| --------------------------------- | ----------------- | ------- | -------------------------------------------------- |
+| [Sizes](#sizes)                   | `.small`, default | default | The size of the Switch.                            |
+| [Label position](#label-position) | `.stack`, default | default | If applied, the label is stacked under the Switch. |
diff --git a/docs/components/inputs/text-field-api.md b/docs/components/inputs/text-field-api.md
@@ -1,5 +1,4 @@
-| Type                  | Modifiers           | Default | Description                        |
-| --------------------- | ------------------- | ------- | ---------------------------------- |
-| [Disabled](#disabled) | `& input[disabled]` | -       | If applied, the input is disabled. |
-| [Sizes](#sizes)       | `.small`            | -       | The size of the input.             |
-| [Variants](#variants) | default, `.filled`  | -       | The variant to use.                |
+| Type                  | Modifiers          | Default | Description            |
+| --------------------- | ------------------ | ------- | ---------------------- |
+| [Sizes](#sizes)       | `.small`           | -       | The size of the input. |
+| [Variants](#variants) | default, `.filled` | -       | The variant to use.    |
diff --git a/docs/components/inputs/text-field.md b/docs/components/inputs/text-field.md
@@ -32,54 +32,55 @@
 </template>
 </Example>
 
-## Sizes
+## Native types
+
+Change the `input`'s `type` attribute.
 
 <Example row>
 <template #example>
-<div class="field small">
-	<input type="text" placeholder="Small"/>
+<div class="column">
+	<div class="field">
+		<input type="color" placeholder="Color">
 </div>
-
 <div class="field">
-	<input type="text" placeholder="Default"/>
-</div>
-</template>
-<template #code>
-
-```html
-<div class="field small">
-  <input type="text" placeholder="Small" />
+		<input type="email" placeholder="[email protected]">
 </div>
-
 <div class="field">
-  <input type="text" placeholder="Default" />
+		<input type="file" placeholder="File">
 </div>
-```
-
-</template>
-</Example>
-
-## Native types
-
-<Example column>
-<template #example>
 	<div class="field">
-		<input type="text" placeholder="Text">
+		<input type="password" placeholder="Password">
 </div>
 	<div class="field">
-		<input type="password" placeholder="Password">
+		<input type="search" placeholder="Search">
+</div>
+		<div class="field">
+		<input type="tel" placeholder="(666) 666-1337">
+</div>
+<div class="field">
+		<input type="text" placeholder="Text">
 </div>
 	<div class="field">
 		<input type="url" placeholder="https://yoursite.com">
 </div>
-	<div class="field">
-		<input type="email" placeholder="[email protected]">
 </div>
-	<div class="field">
-		<input type="tel" placeholder="(666) 666-1337">
+
+<div class="column">
+<div class="field">
+<input type="date" placeholder="Date">
 </div>
 	<div class="field">
-		<input type="search" placeholder="Search">
+		<input type="datetime-local" placeholder="Datetime local">
+</div>
+<div class="field">
+		<input type="month" placeholder="Month">
+</div>
+<div class="field">
+		<input type="time" placeholder="Time">
+</div>
+<div class="field">
+		<input type="week" placeholder="Week">
+</div>
 </div>
 </template>
 <template #code>
@@ -133,23 +134,106 @@ The British Government has a [great article](https://technology.blog.gov.uk/2020
 </template>
 </Example>
 
-## Disabled
+## Sizes
 
 <Example row>
 <template #example>
+<div class="column">
+	<div class="field small">
+		<input type="text" placeholder="Text">
+</div>
+	<div class="field small">
+		<input type="password" placeholder="Password">
+</div>
+	<div class="field small">
+		<input type="url" placeholder="https://yoursite.com">
+</div>
+	<div class="field small">
+		<input type="email" placeholder="[email protected]">
+</div>
+	<div class="field small">
+		<input type="tel" placeholder="(666) 666-1337">
+</div>
+	<div class="field small">
+		<input type="search" placeholder="Search">
+</div>
+	<div class="field small">
+		<input type="color" placeholder="Color">
+</div>
+</div>
+<div class="column">
+	<div class="field">
+		<input type="text" placeholder="Text">
+</div>
+	<div class="field">
+		<input type="password" placeholder="Password">
+</div>
+	<div class="field">
+		<input type="url" placeholder="https://yoursite.com">
+</div>
+	<div class="field">
+		<input type="email" placeholder="[email protected]">
+</div>
+	<div class="field">
+		<input type="tel" placeholder="(666) 666-1337">
+</div>
+	<div class="field">
+		<input type="search" placeholder="Search">
+</div>
+	<div class="field">
+		<input type="color" placeholder="Color">
+</div>
+</div>
+</template>
+<template #code>
+
+```html{1,5}
+<div class="field small">
+  <!--  -->
+</div>
+
+<div class="field">
+  <!--  -->
+</div>
+```
+
+</template>
+</Example>
+
+## States
+
+<Example row>
+<template #example>
+<fieldset>
+<legend>Disabled</legend>
 <div class="field">
 	<input type="text" placeholder="Disabled" disabled/>
 </div>
 <div class="field filled">
 	<input type="text" placeholder="Disabled" disabled/>
 </div>
+</fieldset>
+
+<fieldset>
+<legend>Read-only</legend>
+<div class="field">
+	<input type="text" placeholder="Read-only" value="Read-only" readonly/>
+</div>
+<div class="field filled">
+	<input type="text" placeholder="Read-only" value="Read-only" readonly/>
+</div>
+</fieldset>
 </template>
 <template #code>
 
-```html{2}
+```html{2,6}
 <div class="field">
   <input type="text" disabled>
 </div>
+
+<div class="field">
+  <input type="text" readonly>
+</div>
 ```
 
 </template>