@onereach/ui-components 2.67.9-beta.2030.0 → 2.67.9-beta.2035.0

package/src/components/or-icon-button-v3/OrIconButton.stories3.ts

@@ -2,7 +2,7 @@ import { action } from '@storybook/addon-actions';
 import { Meta, StoryFn } from '@storybook/vue3';
 import OrIconButtonDocs from './OrIconButton.docs.mdx';
 import OrIconButton from './OrIconButton.vue';
-import { IconButtonColor } from './props';
+import { IconButtonColor, IconButtonSize } from './props';
 
 export default {
   title: 'Components/Buttons/Icon Button',
@@ -19,6 +19,11 @@ export default {
       options: Object.values(IconButtonColor),
     },
 
+    size: {
+      control: { type: 'select' },
+      options: Object.values(IconButtonSize),
+    },
+
     disabled: {
       control: { type: 'boolean' },
     },

package/src/components/or-icon-button-v3/OrIconButton.vue

@@ -11,8 +11,9 @@
       @blur="$emit('blur', $event)"
     >
       <OrIcon
+        :icon="icon"
         :variant="'inherit'"
-        v-bind="typeof icon === 'string' ? { icon } : icon"
+        :size="size"
       />
     </button>
   </OrTooltip>
@@ -23,7 +24,7 @@ import { computed, defineComponent, PropType, ref } from 'vue-demi';
 import { useClassAttribute } from '../../hooks';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { OrTooltipV3 as OrTooltip } from '../or-tooltip-v3';
-import { IconButtonColor } from './props';
+import { IconButtonColor, IconButtonSize } from './props';
 import { IconButtonRoot, IconButtonRootColors } from './styles';
 
 export default defineComponent({
@@ -38,7 +39,7 @@ export default defineComponent({
 
   props: {
     icon: {
-      type: [String, Object] as PropType<string | InstanceType<typeof OrIcon>['$props']>,
+      type: String,
       required: true,
     },
 
@@ -47,6 +48,11 @@ export default defineComponent({
       default: IconButtonColor.Inherit,
     },
 
+    size: {
+      type: String as PropType<IconButtonSize>,
+      default: IconButtonSize.M,
+    },
+
     disabled: {
       type: Boolean,
       default: false,

package/src/components/or-icon-button-v3/props.ts

@@ -3,3 +3,5 @@ export enum IconButtonColor {
   Danger = 'danger',
   Inherit = 'inherit',
 }
+
+export { IconSize as IconButtonSize } from '../or-icon-v3';

package/src/components/or-icon-button-v3/styles.ts

@@ -2,14 +2,18 @@ import { IconButtonColor } from './props';
 
 export const IconButtonRoot: string[] = [
   // Layout
-  'flex',
-  'items-center',
-  'justify-center',
+  'layout-inline-row justify-center',
 
-  // Box
-  'max-w-max',
+  // Shape
   'rounded-full',
 
+  // Spacing
+  'mx-[-2px]',
+  'my-[-2px]',
+
+  'px-[2px]',
+  'py-[2px]',
+
   // Interactivity
   'interactivity-auto',
 

package/src/components/or-icon-v3/styles.ts

@@ -2,12 +2,7 @@ import { IconSize, IconVariant } from './props';
 
 export const IconRoot: string[] = [
   // Layout
-  'inline-flex',
-  'items-center',
-  'justify-center',
-
-  // Typography
-  'align-bottom',
+  'layout-inline-row justify-center',
 ];
 
 export const IconRootVariants: Record<IconVariant, string[]> = {
@@ -40,17 +35,17 @@ export const IconRootVariants: Record<IconVariant, string[]> = {
 export const IconRootSizes: Record<IconSize, string[]> = {
   'xl': [
     // Box
-    'w-[36px] md:w-[32px]',
-    'h-[36px] md:h-[32px]',
+    'w-[28px] md:w-[24px]',
+    'h-[28px] md:h-[24px]',
 
     // Typography
-    'text-[32px] md:text-[28px]',
+    'text-[28px] md:text-[24px]',
   ],
 
   'l': [
     // Box
-    'w-[28px] md:w-[24px]',
-    'h-[28px] md:h-[24px]',
+    'w-[24px] md:w-[20px]',
+    'h-[24px] md:h-[20px]',
 
     // Typography
     'text-[24px] md:text-[20px]',
@@ -58,8 +53,8 @@ export const IconRootSizes: Record<IconSize, string[]> = {
 
   'm': [
     // Box
-    'w-[24px] md:w-[20px]',
-    'h-[24px] md:h-[20px]',
+    'w-[20px] md:w-[16px]',
+    'h-[20px] md:h-[16px]',
 
     // Typography
     'text-[20px] md:text-[16px]',

package/src/components/or-inline-input-box-v3/styles.ts

@@ -2,11 +2,12 @@ import { InlineInputBoxSize } from './props';
 
 export const InlineInputBoxRoot: string[] = [
   // Layout
-  'flex',
-  'items-center',
+  'layout-row',
 
   // Box
   'w-full',
+
+  // Shape
   'rounded-sm',
 
   // Theme
@@ -66,7 +67,7 @@ export const InlineInputBoxRoot: string[] = [
 
 export const InlineInputBoxRootSizes: Record<InlineInputBoxSize, string[]> = {
   'm': [
-    // Sizing
+    // Spacing
     'activated:children:px-sm',
     'children:py-xs',
 
@@ -77,7 +78,7 @@ export const InlineInputBoxRootSizes: Record<InlineInputBoxSize, string[]> = {
   ],
 
   's': [
-    // Sizing
+    // Spacing
     'activated:children:px-sm',
     'children:py-none',
 

package/src/components/or-inline-input-v3/OrInlineInput.vue

@@ -3,7 +3,7 @@
     ref="root"
     :class="rootStyles"
   >
-    <div :class="['flex', 'items-center', 'gap-[10px]']">
+    <div :class="['flex', 'items-center', 'gap-md']">
       <OrInlineInputBox
         :size="size"
         :invalid="invalid"

package/src/components/or-inline-input-v3/styles.ts

@@ -1,9 +1,8 @@
 export const InlineInputRoot: string[] = [
   // Layout
-  'flex',
-  'flex-col',
+  'layout-column',
 
-  // Sizing
+  // Spacing
   'gap-xs',
 ];
 
@@ -21,11 +20,10 @@ export const InlineInputControl: string[] = [
 
 export const InlineInputAction: string[] = [
   // Layout
-  'flex',
-  'items-center',
+  'layout-inline-row',
 
-  // Sizing
-  'gap-sm',
+  // Spacing
+  'gap-md',
 
   // Theme
   'theme-foreground-outline',

package/src/components/or-inline-textarea-v3/OrInlineTextarea.vue

@@ -3,7 +3,7 @@
     ref="root"
     :class="rootStyles"
   >
-    <div :class="['flex', 'items-start', 'gap-[10px]']">
+    <div :class="['flex', 'items-center', 'gap-md']">
       <OrInlineInputBox
         :size="'s'"
         :invalid="invalid"

package/src/components/or-inline-textarea-v3/styles.ts

@@ -1,9 +1,8 @@
 export const InlineTextareaRoot: string[] = [
   // Layout
-  'flex',
-  'flex-col',
+  'layout-column',
 
-  // Sizing
+  // Spacing
   'gap-xs',
 ];
 
@@ -21,11 +20,10 @@ export const InlineTextareaControl: string[] = [
 
 export const InlineTextareaAction: string[] = [
   // Layout
-  'flex',
-  'items-center',
+  'layout-inline-row',
 
-  // Sizing
-  'gap-sm',
+  // Spacing
+  'gap-md',
 
   // Theme
   'theme-foreground-outline',

package/src/components/or-input-box-v3/styles.ts

@@ -2,11 +2,12 @@ import { InputBoxSize, InputBoxVariant } from './props';
 
 export const InputBoxRoot: string[] = [
   // Layout
-  'flex',
-  'items-center',
+  'layout-row',
 
   // Box
   'w-full',
+
+  // Shape
   'rounded-md',
 
   // Theme (children)
@@ -91,7 +92,7 @@ export const InputBoxRootSizes: Record<InputBoxSize, string[]> = {
     // Box
     'children:min-h-[34px]',
 
-    // Sizing
+    // Spacing
     'first-child:pl-md first-child:md:pl-sm+',
     'last-child:pr-md last-child:md:pr-sm+',
     'children:pt-[11px] children:md:pt-[7px]',
@@ -107,7 +108,7 @@ export const InputBoxRootSizes: Record<InputBoxSize, string[]> = {
     // Box
     'children:min-h-[30px]',
 
-    // Sizing
+    // Spacing
     'first-child:pl-sm',
     'last-child:pr-sm',
     'children:py-[6px]',

package/src/components/or-input-v3/OrInput.vue

@@ -41,7 +41,7 @@
         @blur="$emit('blur', $event)"
       >
 
-      <div :class="['-m-xs', 'ml-none']">
+      <div :class="['flex', 'items-center', 'm-[-4px] md:m-[-2px]']">
         <template v-if="type === 'password'">
           <OrIconButton
             :icon="{ icon: disclosed ? 'visibility_off' : 'visibility', variant: 'filled' }"

package/src/components/or-input-v3/styles.ts

@@ -1,9 +1,8 @@
 export const InputRoot: string[] = [
   // Layout
-  'flex',
-  'flex-col',
+  'layout-column',
 
-  // Sizing
+  // Spacing
   'gap-xs',
 ];
 

package/src/components/or-loader-v3/OrLoader.docs.mdx

@@ -9,6 +9,4 @@ import { OrLoaderV3 as OrLoader } from '@onereach/ui-components';
 ## Migration Guide from V1
   - added properties `color` and `size`
   - property `type` renamed to `variant`
-  - property `linearTitle` renamed to `title`
-  - property `linearDescription` renamed to `description`
-  - removed properties: `textTypeLabel`
+  - removed properties `linearTitle`, `linearDescription`, and `textTypeLabel`

package/src/components/or-loader-v3/OrLoader.stories3.ts

@@ -23,14 +23,6 @@ export default {
       control: { type: 'select' },
       options: Object.values(LoaderSize),
     },
-
-    title: {
-      control: { type: 'string' },
-    },
-
-    description: {
-      control: { type: 'string' },
-    },
   },
 
   parameters: {
@@ -59,16 +51,4 @@ const Template: StoryFn<typeof OrLoader> = (args) => ({
   template: '<OrLoader v-bind="args" />',
 });
 
-export const Default = Template.bind({});
-
-export const Linear = Template.bind({});
-Linear.args = {
-  variant: 'linear',
-};
-
-export const LinearWithText = Template.bind({});
-LinearWithText.args = {
-  title: 'Loading',
-  variant: 'linear',
-  description: 'Promptly retrieving your data from the cloud',
-};
+export const Loader = Template.bind({});

package/src/components/or-loader-v3/OrLoader.vue

@@ -4,11 +4,6 @@
     v-bind="$attrs"
     :class="rootStyles"
   >
-    <template v-if="title">
-      <div class="typography-headline-2 text-center	text-on-background dark:text-on-background-dark">
-        {{ title }}
-      </div>
-    </template>
     <template v-if="variant === 'circular'">
       <svg
         viewBox="0 0 16 16"
@@ -72,11 +67,6 @@
         </g>
       </svg>
     </template>
-    <template v-if="description">
-      <div class="typography-body-2-regular text-center	text-outline dark:text-outline-dark">
-        {{ description }}
-      </div>
-    </template>
   </div>
 </template>
 
@@ -106,16 +96,6 @@ export default defineComponent({
       type: String as PropType<LoaderSize>,
       default: LoaderSize.M,
     },
-
-    title: {
-      type: String,
-      default: undefined,
-    },
-
-    description: {
-      type: String,
-      default: undefined,
-    },
   },
 
   expose: [

package/src/components/or-loader-v3/styles.ts

@@ -3,9 +3,6 @@ import { LoaderColor } from './props';
 export const LoaderRoot: string[] = [
   // Layout
   'contents',
-  'flex',
-  'flex-col',
-  'space-y-md',
 ];
 
 export const LoaderRootColors: Record<LoaderColor, string[]> = {

package/src/components/or-select-v3/OrSelect.vue

@@ -74,10 +74,12 @@
         +{{ outerItems.length }}
       </template>
 
-      <OrIcon
-        :icon="popoverState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'"
-        :variant="'outlined'"
-      />
+      <div :class="['flex', 'items-center', 'm-[-4px] md:m-[-2px]']">
+        <OrIcon
+          :icon="popoverState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'"
+          :variant="'outlined'"
+        />
+      </div>
 
       <OrPopover
         ref="popover"

package/src/components/or-select-v3/styles.ts

@@ -1,9 +1,8 @@
 export const SelectRoot: string[] = [
   // Layout
-  'flex',
-  'flex-col',
+  'layout-column',
 
-  // Sizing
+  // Spacing
   'gap-xs',
 ];
 
@@ -14,7 +13,7 @@ export const SelectControl: string[] = [
 
   'overflow-hidden',
 
-  // Sizing
+  // Spacing
   'gap-xs',
 
   // Typography
@@ -33,6 +32,8 @@ export const SelectDropdown: string[] = [
 
   // Box
   'max-h-[340px]',
+
+  // Shape
   'rounded-b-md',
 
   // Theme
@@ -47,11 +48,9 @@ export const SelectDropdown: string[] = [
 
 export const SelectNoSearchResults: string[] = [
   // Layout
-  'flex',
-  'items-center',
-  'justify-center',
+  'layout-row justify-center',
 
-  // Sizing
+  // Spacing
   'px-md',
   'py-md',
 

package/src/components/or-tag-v3/OrTag.vue

@@ -12,13 +12,14 @@
     <slot />
 
     <template v-if="variant === 'reset'">
-      <OrIconButton
-        :class="['-m-xs', 'ml-none']"
-        :icon="'close'"
-        :color="!custom ? color : 'inherit'"
-        :disabled="disabled"
-        @click.stop="$emit('reset')"
-      />
+      <div :class="['flex', 'items-center', 'm-[-4px] md:m-[-2px]']">
+        <OrIconButton
+          :icon="'close'"
+          :color="!custom ? color : 'inherit'"
+          :disabled="disabled"
+          @click.stop="$emit('reset')"
+        />
+      </div>
     </template>
   </div>
 </template>

package/src/components/or-tag-v3/styles.ts

@@ -2,18 +2,19 @@ import { TagColor, TagVariant } from './props';
 
 export const TagRoot: string[] = [
   // Layout
-  'flex',
-  'items-center',
-  'justify-center',
+  'layout-inline-row',
 
   // Box
-  'max-w-max',
+  'w-min',
+
+  // Shape
   'rounded-full',
 
-  // Sizing
+  // Spacing
   'px-sm+ md:px-sm',
   'py-sm md:py-xs',
-  'gap-sm md:gap-xs',
+
+  'gap-sm+ md:gap-sm',
 
   // Typography
   'typography-caption-regular',

package/src/components/or-textarea-v3/styles.ts

@@ -1,9 +1,8 @@
 export const TextareaRoot: string[] = [
   // Layout
-  'flex',
-  'flex-col',
+  'layout-column',
 
-  // Sizing
+  // Spacing
   'gap-xs',
 ];
 

package/src/components/or-toast-v3/OrToast.vue

@@ -15,6 +15,7 @@
           :size="'s'"
         />
       </div>
+
       <img
         v-else-if="emojiSrc"
         :class="toastIconStyle"
@@ -28,41 +29,42 @@
         :class="messageStyle"
         v-html="messageText"
       />
-
-
-      <!-- link -->
-      <a
-        v-if="link"
-        class="or-toast__link"
-        :href="link.href"
-        :target="hrefTarget"
-        @click="onLinkClick"
-      >
-        {{ link.title }}
-      </a>
     </slot>
 
-    <!-- close button -->
-    <div :class="actionButtonStyle">
-      <OrIconButton
-        v-if="dismissible"
-        icon="close"
-        class="dark:theme-foreground-inherit"
-        @click.stop="onClose()"
-      />
-    </div>
+    <template :class="['flex', 'items-center', 'self-start', 'gap-md']">
+      <template v-if="link">
+        <a
+          class="or-toast__link"
+          :href="link.href"
+          :target="hrefTarget"
+          @click="onLinkClick"
+        >
+          {{ link.title }}
+        </a>
+      </template>
+
+      <template v-if="dismissible">
+        <div :class="actionButtonStyle">
+          <OrIconButton
+            icon="close"
+            class="dark:theme-foreground-inherit"
+            @click.stop="onClose()"
+          />
+        </div>
+      </template>
+    </template>
   </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
+import errorPng from '../../assets/error.png';
+import successPng from '../../assets/success.png';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrLoaderV3 as OrLoader } from '../or-loader-v3';
 import { ToastType } from './props';
-import { messageStyleVariant, ToastRoot } from './styles';
+import { messageStyleVariant, ToastActionButton, ToastRoot } from './styles';
 import { ToastLink } from './types';
-import successPng from '../../assets/success.png';
-import errorPng from '../../assets/error.png';
 
 export default defineComponent({
   name: 'OrToast',
@@ -133,8 +135,7 @@ export default defineComponent({
     ]);
 
     const actionButtonStyle = computed(() => [
-      'text-outline-dark',
-      'dark:text-outline',
+      ...ToastActionButton,
     ]);
 
     // State