@onereach/ui-components 2.69.7-beta.2187.0 → 2.69.7-beta.2201.0

package/src/components/or-modal-v3/OrModal.vue

@@ -13,11 +13,13 @@
           <slot name="header" />
         </div>
 
-        <OrIconButton
-          :icon="'close'"
-          :size="'l'"
-          @click.stop="close"
-        />
+        <div :class="closeButtonStyles">
+          <OrIconButton
+            :icon="'close'"
+            :size="'l'"
+            @click.stop="close"
+          />
+        </div>
       </div>
 
       <div :class="['grow', 'overflow-y-auto']">
@@ -35,7 +37,7 @@ import { useClassAttribute } from '../../hooks';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrOverlayV3 as OrOverlay } from '../or-overlay-v3';
 import { ModalSize } from './props';
-import { ModalHeader, ModalRoot, ModalRootSizes } from './styles';
+import { ModalCloseButton, ModalHeader, ModalRoot, ModalRootSizes } from './styles';
 
 export default defineComponent({
   name: 'OrModal',
@@ -88,6 +90,10 @@ export default defineComponent({
       ...ModalHeader,
     ]);
 
+    const closeButtonStyles = computed(() => [
+      ...ModalCloseButton,
+    ]);
+
     // State
     const isActive = ref(false);
 
@@ -117,6 +123,7 @@ export default defineComponent({
       root,
       rootStyles,
       headerStyles,
+      closeButtonStyles,
       isActive,
       open,
       close,

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

@@ -59,3 +59,12 @@ export const ModalHeader: string[] = [
   // Typography
   'typography-headline-2',
 ];
+
+export const ModalCloseButton: string[] = [
+  // Layout
+  'contents',
+
+  // Theme
+  'text-outline',
+  'dark:text-outline-dark',
+];

package/src/components/or-notification-v3/OrNotification.vue

@@ -15,11 +15,12 @@
       <slot />
     </div>
 
-    <OrIconButton
-      :icon="'close'"
-      :size="'m'"
-      @click.stop="$emit('close')"
-    />
+    <div :class="actionStyles">
+      <OrIconButton
+        :icon="'close'"
+        @click.stop="$emit('close')"
+      />
+    </div>
   </div>
 </template>
 
@@ -29,7 +30,7 @@ import { useClassAttribute } from '../../hooks';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { NotificationVariant } from './props';
-import { NotificationIcon, NotificationIconVariants, NotificationRoot, NotificationRootVariants } from './styles';
+import { NotificationAction, NotificationIcon, NotificationIconVariants, NotificationRoot, NotificationRootVariants } from './styles';
 
 export default defineComponent({
   name: 'OrNotification',
@@ -71,6 +72,10 @@ export default defineComponent({
       ...NotificationIconVariants[props.variant],
     ]);
 
+    const actionStyles = computed(() => [
+      ...NotificationAction,
+    ]);
+
     // State
     const icon = computed(() => {
       switch (props.variant) {
@@ -92,6 +97,7 @@ export default defineComponent({
       root,
       rootStyles,
       iconStyles,
+      actionStyles,
       icon,
     };
   },

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

@@ -97,3 +97,12 @@ export const NotificationIconVariants: Record<NotificationVariant, string[]> = {
     'dark:theme-foreground-primary-dark',
   ],
 };
+
+export const NotificationAction: string[] = [
+  // Layout
+  'contents',
+
+  // Theme
+  'theme-foreground-outline',
+  'dark:theme-foreground-outline-dark',
+];

package/src/components/or-radio-v3/OrRadio.vue

@@ -4,9 +4,9 @@
     :class="rootStyles"
   >
     <input
-      v-bind="$attrs"
       :id="controlId"
       v-model="proxyModelValue"
+      v-bind="$attrs"
       :class="controlStyles"
       type="radio"
       :value="inputValue"

package/src/components/or-select-v3/OrSelect.stories3.ts

@@ -108,6 +108,10 @@ export default {
       control: { type: 'boolean' },
     },
 
+    disableDefaultStyles: {
+      control: { type: 'boolean' },
+    },
+
     enableSearch: {
       control: { type: 'boolean' },
     },

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

@@ -24,6 +24,7 @@
       v-dropdown-open="toggle"
       v-dropdown-close="close"
       :class="[popoverState === 'open' && 'rounded-b-0']"
+      :variant="disableDefaultStyles ? 'unstyled' : 'styled'"
       :size="size"
       :invalid="invalid"
       :readonly="readonly"
@@ -314,6 +315,11 @@ export default defineComponent({
       default: false,
     },
 
+    disableDefaultStyles: {
+      type: Boolean,
+      default: false,
+    },
+
     enableSearch: {
       type: Boolean,
       default: false,

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

@@ -8,7 +8,10 @@ export const SelectRoot: string[] = [
 
 export const SelectControl: string[] = [
   // Layout
-  'layout-row grow',
+  'layout-row',
+
+  // Box
+  'w-full',
 
   // Overflow
   'overflow-hidden',

package/src/components/or-switch-v3/OrSwitch.vue

@@ -5,9 +5,9 @@
   >
     <template v-if="!loading">
       <input
-        v-bind="$attrs"
         :id="controlId"
         v-model="proxyModelValue"
+        v-bind="$attrs"
         :class="controlStyles"
         type="checkbox"
         :value="inputValue"

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

@@ -15,7 +15,7 @@
       <div :class="['layout-row', 'm-[-4px] md:m-[-2px]']">
         <OrIconButton
           :icon="'close'"
-          :color="custom ? 'inherit' : color"
+          :color="!custom ? color : 'inherit'"
           :disabled="disabled"
           @click.stop="$emit('reset')"
         />
@@ -48,7 +48,7 @@ export default defineComponent({
 
     color: {
       type: String as PropType<TagColor | string>,
-      default: TagColor.Default,
+      default: TagColor.Primary,
     },
 
     disabled: {
@@ -86,7 +86,7 @@ export default defineComponent({
 
     // State
     const custom = computed(() => {
-      return !(['default', 'danger'] as TagColor[]).includes(props.color as TagColor);
+      return !(['primary', 'danger'] as TagColor[]).includes(props.color as TagColor);
     });
 
     // Effects

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

@@ -5,6 +5,6 @@ export enum TagVariant {
 }
 
 export enum TagColor {
-  Default = 'default',
+  Primary = 'primary',
   Danger = 'danger',
 }

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

@@ -45,7 +45,7 @@ export const TagRootVariants: Record<TagVariant, string[]> = {
 };
 
 export const TagRootColors: Record<TagColor, string[]> = {
-  'default': [
+  'primary': [
     // Theme
     'theme-preset-2-primary',
     'dark:theme-preset-2-primary-dark',

package/src/components/or-textarea-v3/OrTextarea.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
   >
     <template v-if="label">
@@ -27,11 +28,14 @@
       <textarea
         :id="controlId"
         v-model="proxyModelValue"
-        v-bind="$attrs"
         :class="controlStyles"
         :placeholder="placeholder"
         :required="required"
         :disabled="disabled"
+
+        :readonly="readonly"
+        :maxlength="maxLength"
+
         @keydown="$emit('keydown', $event)"
         @keyup="$emit('keyup', $event)"
         @focus="$emit('focus', $event)"

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

@@ -7,8 +7,8 @@ export const TextareaRoot: string[] = [
 ];
 
 export const TextareaControl: string[] = [
-  // Layout
-  'grow',
+  // Box
+  'w-full',
 
   // Typography
   'typography-inherit',

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

@@ -44,11 +44,13 @@
       </template>
 
       <template v-if="dismissible">
-        <OrIconButton
-          :icon="'close'"
-          :size="'m'"
-          @click.stop="onClose()"
-        />
+        <div :class="actionButtonStyle">
+          <OrIconButton
+            icon="close"
+            class="dark:theme-foreground-inherit"
+            @click.stop="onClose()"
+          />
+        </div>
       </template>
     </div>
   </div>
@@ -61,7 +63,7 @@ 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';
 
 export default defineComponent({
@@ -132,6 +134,10 @@ export default defineComponent({
       'dark:text-inverse-primary-dark',
     ]);
 
+    const actionButtonStyle = computed(() => [
+      ...ToastActionButton,
+    ]);
+
     // State
     const emojiSrc = computed(() => {
       switch (props.toastType) {
@@ -162,6 +168,7 @@ export default defineComponent({
 
     return {
       root,
+      actionButtonStyle,
       toastIconStyle,
       rootStyles,
       loaderStyle,

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

@@ -35,6 +35,15 @@ export const ToastRoot: string[] = [
   'dark:shadow-card-dark',
 ];
 
+export const ToastActionButton: string[] = [
+  // Layout
+  'contents',
+
+  // Theme
+  'theme-foreground-outline',
+  'dark:theme-foreground-outline-dark',
+];
+
 export const ToastContainer: string[] = [
   // Position
   'absolute',