Merge branch 'feature/loading-skeleton-demo' into feat/etch-371-loadi…

…ng-skeleton
etchteam · Apr 12, 2024 · 0277c3e · 0277c3e
2 parents 062082c + db9722b
commit 0277c3e
Show file tree

Hide file tree

Showing 25 changed files with 317 additions and 26 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -5,6 +5,7 @@ const config: StorybookConfig = {
     '../components/**/*.mdx',
     '../components/**/*.stories.@(js|jsx|mjs|ts|tsx)',
     '../docs/**/*.mdx',
+    '../docs/**/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
   addons: [
     '@storybook/addon-links',

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,52 @@
+## [1.29.1](https://github.com/etchteam/diamond-ui/compare/v1.29.0...v1.29.1) (2024-04-11)
+
+
+### Bug Fixes
+
+* ios input zoom ([63220d3](https://github.com/etchteam/diamond-ui/commit/63220d31c4329e3f7b19a5213504e4ea2fc95750))
+
+## [1.29.0](https://github.com/etchteam/diamond-ui/compare/v1.28.1...v1.29.0) (2024-03-20)
+
+
+### Features
+
+* halve input with icon padding ([5f06d4a](https://github.com/etchteam/diamond-ui/commit/5f06d4a57208f4be1ecdd0b88af34f707b7812c6))
+
+## [1.28.1](https://github.com/etchteam/diamond-ui/compare/v1.28.0...v1.28.1) (2024-03-20)
+
+
+### Bug Fixes
+
+* omit size prop from jsx element ([acb303f](https://github.com/etchteam/diamond-ui/commit/acb303f61ccf46cc8369b05fbf9f148576cb2a15))
+
+## [1.28.0](https://github.com/etchteam/diamond-ui/compare/v1.27.11...v1.28.0) (2024-03-20)
+
+
+### Features
+
+* indent bullets ([4663c4f](https://github.com/etchteam/diamond-ui/commit/4663c4ffe9ecf0f9713e63c4327ca27a96cbdc8c))
+
+## [1.27.11](https://github.com/etchteam/diamond-ui/compare/v1.27.10...v1.27.11) (2024-03-06)
+
+
+### Bug Fixes
+
+* key type ([defe826](https://github.com/etchteam/diamond-ui/commit/defe826f113fb1521ceaad7de057cd917104dffd))
+
+## [1.27.10](https://github.com/etchteam/diamond-ui/compare/v1.27.9...v1.27.10) (2024-03-06)
+
+
+### Bug Fixes
+
+* don't force min height on button and input ([8ac7501](https://github.com/etchteam/diamond-ui/commit/8ac7501eef6ef81eced62ff6261ab28faaacb037))
+
+## [1.27.9](https://github.com/etchteam/diamond-ui/compare/v1.27.8...v1.27.9) (2024-03-06)
+
+
+### Bug Fixes
+
+* icon size should be em ([af042b0](https://github.com/etchteam/diamond-ui/commit/af042b0f141e36b7b75c77747739f443b5ed653f))
+
 ## [1.27.8](https://github.com/etchteam/diamond-ui/compare/v1.27.7...v1.27.8) (2024-02-29)
 
 

diff --git a/components/canvas/Card/Card.ts b/components/canvas/Card/Card.ts
@@ -26,7 +26,7 @@ declare global {
 declare module 'react' {
   namespace JSX {
     interface IntrinsicElements {
-      'diamond-card': CardAttributes & JSXCustomElement;
+      'diamond-card': JSXCustomElement<CardAttributes>;
     }
   }
 }
diff --git a/components/canvas/Section/Section.ts b/components/canvas/Section/Section.ts
@@ -22,7 +22,7 @@ declare global {
 declare module 'react' {
   namespace JSX {
     interface IntrinsicElements {
-      'diamond-section': SectionAttributes & JSXCustomElement;
+      'diamond-section': JSXCustomElement<SectionAttributes>;
     }
   }
 }
diff --git a/components/composition/App/App.ts b/components/composition/App/App.ts
@@ -35,7 +35,7 @@ declare global {
 declare module 'react' {
   namespace JSX {
     interface IntrinsicElements {
-      'diamond-app': AppAttributes & JSXCustomElement;
+      'diamond-app': JSXCustomElement<AppAttributes>;
     }
   }
 }
diff --git a/components/composition/Enter/Enter.ts b/components/composition/Enter/Enter.ts
@@ -70,7 +70,7 @@ declare global {
 declare module 'react' {
   namespace JSX {
     interface IntrinsicElements {
-      'diamond-enter': EnterAttributes & JSXCustomElement;
+      'diamond-enter': JSXCustomElement<EnterAttributes>;
     }
   }
 }
diff --git a/components/composition/FormGroup/FormGroup.ts b/components/composition/FormGroup/FormGroup.ts
@@ -13,7 +13,7 @@ declare global {
 declare module 'react' {
   namespace JSX {
     interface IntrinsicElements {
-      'diamond-form-group': FormGroupAttributes & JSXCustomElement;
+      'diamond-form-group': JSXCustomElement<FormGroupAttributes>;
     }
   }
 }
diff --git a/components/composition/Grid/Grid.ts b/components/composition/Grid/Grid.ts
@@ -24,7 +24,7 @@ declare global {
 declare module 'react' {
   namespace JSX {
     interface IntrinsicElements {
-      'diamond-grid': GridAttributes & JSXCustomElement;
+      'diamond-grid': JSXCustomElement<GridAttributes>;
     }
   }
 }
diff --git a/components/composition/Grid/GridItem.ts b/components/composition/Grid/GridItem.ts
@@ -42,7 +42,7 @@ declare global {
 declare module 'react' {
   namespace JSX {
     interface IntrinsicElements {
-      'diamond-grid-item': GridItemAttributes & JSXCustomElement;
+      'diamond-grid-item': JSXCustomElement<GridItemAttributes>;
     }
   }
 }
diff --git a/components/composition/Wrap/Wrap.ts b/components/composition/Wrap/Wrap.ts
@@ -14,7 +14,7 @@ declare global {
 declare module 'react' {
   namespace JSX {
     interface IntrinsicElements {
-      'diamond-wrap': WrapAttributes & JSXCustomElement;
+      'diamond-wrap': JSXCustomElement<WrapAttributes>;
     }
   }
 }
diff --git a/components/content/Img/Img.ts b/components/content/Img/Img.ts
@@ -48,7 +48,7 @@ declare global {
 declare module 'react' {
   namespace JSX {
     interface IntrinsicElements {
-      'diamond-img': ImgAttributes & JSXCustomElement;
+      'diamond-img': JSXCustomElement<ImgAttributes>;
     }
   }
 }
diff --git a/components/control/Button/Button.css b/components/control/Button/Button.css
@@ -12,6 +12,39 @@ diamond-button {
     color: var(--_color);
     cursor: pointer;
     display: inline-flex;
+    font: inherit;
+    font-size: var(--_size, 1rem);
+    font-weight: var(--diamond-button-font-weight);
+    gap: var(--diamond-button-gap);
+    justify-content: center;
+    letter-spacing: inherit;
+    line-height: var(--_line-height);
+    padding-block: var(--_padding-block);
+    padding-inline: var(--_padding-inline);
+    -webkit-tap-highlight-color: transparent;
+    text-align: center;
+    text-decoration: none;
+    text-shadow: var(--diamond-button-text-shadow);
+    touch-action: manipulation;
+    -webkit-touch-callout: none;
+    transition:
+      background var(--diamond-transition),
+      color var(--diamond-transition),
+      border-color var(--diamond-transition),
+      outline-offset var(--diamond-transition);
+    user-select: none;
+
+    @media (hover: hover) {
+      &:hover {
+        --_background: var(--_background-hover);
+        --_border-color: var(--_border-color-hover);
+        --_color: var(--_color-hover);
+      }
+    }
+
+    &:not(:active):focus-visible {
+      outline-offset: var(--diamond-button-outline-offset);
+    }
   }
 
   svg {
@@ -34,7 +67,48 @@ diamond-button {
     }
   }
 
-  &[variant='primary'] > button {
+  &[size='sm'] {
+    --_size: 0.875rem;
+  }
+
+  &[size='lg'] {
+    --_size: 1.25rem;
+  }
+
+  &[width='full-width'] {
+    display: block;
+
+    button,
+    a,
+    input {
+      width: 100%;
+    }
+  }
+
+  @media (width < 480px) {
+    &[width='full-width-mobile'] {
+      display: block;
+
+      button,
+      a,
+      input {
+        width: 100%;
+      }
+    }
+  }
+
+  &[width='square'] {
+    --_line-height: 1;
+    --_padding-inline: var(--diamond-button-padding-block);
+
+    button,
+    a,
+    input {
+      aspect-ratio: 1 / 1;
+    }
+  }
+
+  &[variant='primary'] {
     --_background: var(--diamond-button-primary-background);
     --_background-hover: var(--diamond-button-primary-background-hover);
     --_background-disabled: var(--diamond-button-primary-background-disabled);

diff --git a/components/control/Button/Button.stories.ts b/components/control/Button/Button.stories.ts
@@ -104,6 +104,20 @@ export const TextButton: StoryObj = {
   `,
 };
 
+export const Sizes: StoryObj = {
+  render: () => html`
+    <diamond-button size="sm">
+      <button type="button">Button</button>
+    </diamond-button>
+    <diamond-button size="md">
+      <button type="button">Button</button>
+    </diamond-button>
+    <diamond-button size="lg">
+      <button type="button">Button</button>
+    </diamond-button>
+  `,
+};
+
 export const IconOnlyButton: StoryObj = {
   render: () => html`
     <diamond-grid wrap="wrap" align-items="center">

diff --git a/components/control/Button/Button.ts b/components/control/Button/Button.ts
@@ -25,7 +25,7 @@ declare global {
 declare module 'react' {
   namespace JSX {
     interface IntrinsicElements {
-      'diamond-button': ButtonAttributes & JSXCustomElement;
+      'diamond-button': JSXCustomElement<ButtonAttributes>;
     }
   }
 }
diff --git a/components/control/Input/Input.css b/components/control/Input/Input.css
@@ -50,8 +50,8 @@ diamond-input {
     color: inherit;
     display: block;
     flex: 1 1 auto;
+    font-size: var(--diamond-input-font-size);
     line-height: var(--diamond-input-line-height);
-    min-height: var(--diamond-spacing-thumb);
     padding: var(--diamond-input-padding);
 
     &:focus {
@@ -84,12 +84,12 @@ diamond-input {
   /* Prefix */
   &:has(* + :is(input, textarea, select)) > :first-child {
     margin-right: calc(var(--diamond-input-padding-inline) / 2 * -1);
-    padding: 0 0 0 var(--diamond-input-padding-inline);
+    padding: 0 0 0 calc(var(--diamond-input-padding-inline) / 2);
   }
 
   /* Suffix */
   :is(input, textarea, select) + * {
     margin-left: calc(var(--diamond-input-padding-inline) / 2 * -1);
-    padding: 0 var(--diamond-input-padding-inline) 0 0;
+    padding: 0 calc(var(--diamond-input-padding-inline) / 2) 0 0;
   }
 }
diff --git a/components/control/Input/Input.ts b/components/control/Input/Input.ts
@@ -13,7 +13,7 @@ declare global {
 declare module 'react' {
   namespace JSX {
     interface IntrinsicElements {
-      'diamond-input': InputAttributes & JSXCustomElement;
+      'diamond-input': JSXCustomElement<InputAttributes>;
     }
   }
 }
diff --git a/components/control/RadioCheckbox/RadioCheckbox.ts b/components/control/RadioCheckbox/RadioCheckbox.ts
@@ -45,7 +45,7 @@ declare global {
 declare module 'react' {
   namespace JSX {
     interface IntrinsicElements {
-      'diamond-radio-checkbox': RadioCheckboxAttributes & JSXCustomElement;
+      'diamond-radio-checkbox': JSXCustomElement<RadioCheckboxAttributes>;
     }
   }
 }