@flightlesslabs/dodo-ui 0.18.0 → 0.19.0

package/src/lib/stories/components/Form/Select/Select.svelte

@@ -80,7 +80,7 @@
     onkeyup?: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;
     /** custom Content Formatting for variant button */
     customInputContent?: (val: SelectOption) => Snippet;
-    /** custom Content Formatting for variant button */
+    /** custom Menu Item Content */
     customMenuItemContent?: (val: SelectOption, selected: boolean) => Snippet;
     /** Custom Popup Content */
     customPopupContent?: (
@@ -88,7 +88,7 @@
       selectedOption: SelectOption,
       onselect: (val: SelectOption) => void,
     ) => Snippet;
-    /** custom Content Formatting for variant button */
+    /** custom Placeholder MenuItem Content */
     customPlaceholderMenuItemContent?: () => Snippet;
     /** PopperPopup Max height. Use css compatible value */
     popupMaxHeight?: string;
@@ -103,7 +103,7 @@
     /** Dropdown Arrow Icon */
     customDropdownArrowIcon?: (open: boolean) => Snippet;
     /** Select Dropdown Arrow Position */
-    dropdownArrowPosition?: DropdownArrowPosition;
+    dropdownArrowPosition?: IconPosition;
     /** Popup stick horizontally  */
     popupPositionX?: PositionX;
     /** Popup stick vertically  */
@@ -136,7 +136,7 @@
   } from '$lib/index.js';
   import type { TextInputInputEvent } from '../TextInput/TextInput.svelte';
   import type { ButtonClickEvent } from '../Button/Button.svelte';
-  import type { DropdownArrowPosition } from '$lib/types/special.js';
+  import type { IconPosition } from '$lib/types/special.js';
 
   let {
     size = 'normal',
@@ -393,6 +393,7 @@
           value={searchable ? searchTerm : selectedOption?.label}
           {readonly}
           variant={searchable ? 'input' : 'button'}
+          {size}
         >
           {#snippet customInputContent()}
             {#if customInputContentTyped}

package/src/lib/stories/components/Form/TextInput/TextInput.svelte

@@ -157,6 +157,7 @@
       {name}
       {id}
       {disabled}
+      {size}
       bind:ref
       bind:focused
       {oninput}

package/src/lib/stories/components/Layout/Accordian/Accordian.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
   import type { ComponentSize } from '$lib/types/size.js';
-  import type { DropdownArrowPosition } from '$lib/types/special.js';
+  import type { IconPosition } from '$lib/types/special.js';
   import Icon from '@iconify/svelte';
   import { onMount, type Snippet } from 'svelte';
   import type { EventHandler } from 'svelte/elements';
@@ -29,7 +29,7 @@
     /** How large should the button be? */
     size?: ComponentSize;
     /** Select Dropdown Arrow Position */
-    dropdownArrowPosition?: DropdownArrowPosition;
+    dropdownArrowPosition?: IconPosition;
     /** Dropdown Arrow Icon */
     customDropdownArrowIcon?: (open: boolean) => Snippet;
   }

package/src/lib/stories/developer tools/components/UtilityIcon/UtilityIcon.svelte

@@ -0,0 +1,90 @@
+<script lang="ts" module>
+  import type { ComponentSize } from '$lib/types/size.js';
+  import type { Snippet } from 'svelte';
+
+  export interface UtilityIconProps {
+    /** Button contents goes here*/
+    children?: Snippet;
+    /** Button ref */
+    ref?: HTMLSpanElement;
+    /** How large should the button be? */
+    size?: ComponentSize;
+    /** Button disabled state */
+    disabled?: boolean;
+    /** Id */
+    id?: string;
+    /** Custom css class*/
+    class?: string;
+  }
+</script>
+
+<script lang="ts">
+  let {
+    children,
+    size = 'normal',
+    id,
+    class: className = '',
+    disabled = false,
+    ref = $bindable<HTMLButtonElement>(),
+  }: UtilityIconProps = $props();
+</script>
+
+<span
+  class={['dodo-ui-UtilityIcon', `size--${size}`, className].join(' ')}
+  class:disabled
+  {id}
+  bind:this={ref}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+</span>
+
+<style lang="scss">
+  :global(:root) {
+    --dodo-ui-UtilityIcon-disabled-color: var(--dodo-color-neutral-400);
+  }
+
+  :global(.dodo-theme--dark) {
+    --dodo-ui-UtilityIcon-disabled-color: var(--dodo-color-neutral-500);
+  }
+
+  .dodo-ui-UtilityIcon {
+    outline: none;
+    transition: all 150ms;
+    text-decoration: none;
+    margin: 0;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    font-family: inherit;
+    background-color: transparent;
+    color: var(--dodo-color-neutral-600);
+    font-family: inherit;
+
+    &.size {
+      &--normal {
+        height: var(--dodo-ui-element-height-normal);
+        width: var(--dodo-ui-element-height-normal);
+        font-size: 1rem;
+      }
+
+      &--small {
+        height: var(--dodo-ui-element-height-small);
+        width: var(--dodo-ui-element-height-small);
+        font-size: 0.9rem;
+      }
+
+      &--large {
+        height: var(--dodo-ui-element-height-large);
+        width: var(--dodo-ui-element-height-large);
+        font-size: 1.1rem;
+      }
+    }
+
+    &.disabled {
+      cursor: initial;
+      color: var(--dodo-ui-UtilityIcon-disabled-color);
+    }
+  }
+</style>

package/src/lib/types/special.ts

@@ -1 +1 @@
-export type DropdownArrowPosition = false | 'before' | 'after';
+export type IconPosition = false | 'before' | 'after';