fix!: changed paddings in sfselect (#2864)

* fix: changed paddings in sfselect * chore: adjusted padding left * chore: updated changelog * Update .changeset/fresh-emus-care.md Co-authored-by: Jakub Freisler <[email protected]> --------- Co-authored-by: Jakub Freisler <[email protected]>
vuestorefront · Jun 29, 2023 · a2bb3a2 · a2bb3a2
1 parent 33935c6
commit a2bb3a2
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/.changeset/fresh-emus-care.md b/.changeset/fresh-emus-care.md
@@ -0,0 +1,6 @@
+---
+'@storefront-ui/react': major
+'@storefront-ui/vue': major
+---
+
+Breaking Change - Padding left and right in SfSelect changed from 14px and 16px to 12px
diff --git a/packages/sfui/frameworks/react/components/SfSelect/SfSelect.tsx b/packages/sfui/frameworks/react/components/SfSelect/SfSelect.tsx
@@ -45,7 +45,7 @@ export default function SfSelect(props: SfSelectProps) {
         required={required}
         disabled={disabled}
         className={classNames(
-          'appearance-none disabled:cursor-not-allowed cursor-pointer pl-4 pr-3.5 text-neutral-900 focus:ring-primary-700 focus:ring-2 outline-none bg-transparent rounded-md ring-1 ring-inset ring-neutral-300 hover:ring-primary-700 active:ring-2 active:ring-primary-700 disabled:bg-disabled-100 disabled:text-disabled-900 disabled:ring-disabled-200',
+          'appearance-none disabled:cursor-not-allowed cursor-pointer px-3 text-neutral-900 focus:ring-primary-700 focus:ring-2 outline-none bg-transparent rounded-md ring-1 ring-inset ring-neutral-300 hover:ring-primary-700 active:ring-2 active:ring-primary-700 disabled:bg-disabled-100 disabled:text-disabled-900 disabled:ring-disabled-200',
           {
             'py-1.5': size === SfSelectSize.sm,
             'py-2': size === SfSelectSize.base,

diff --git a/packages/sfui/frameworks/vue/components/SfSelect/SfSelect.vue b/packages/sfui/frameworks/vue/components/SfSelect/SfSelect.vue
@@ -73,7 +73,7 @@ const changedValue = (event: Event) => {
       :required="required"
       :disabled="disabled"
       :class="[
-        'appearance-none disabled:cursor-not-allowed cursor-pointer pl-4 pr-3.5 text-neutral-900 ring-inset focus:ring-primary-700 focus:ring-2 outline-none bg-transparent rounded-md ring-1 ring-neutral-300 hover:ring-primary-700 active:ring-2 active:ring-primary-700 disabled:bg-disabled-100 disabled:text-disabled-900 disabled:ring-disabled-200',
+        'appearance-none disabled:cursor-not-allowed cursor-pointer px-3 text-neutral-900 ring-inset focus:ring-primary-700 focus:ring-2 outline-none bg-transparent rounded-md ring-1 ring-neutral-300 hover:ring-primary-700 active:ring-2 active:ring-primary-700 disabled:bg-disabled-100 disabled:text-disabled-900 disabled:ring-disabled-200',
         {
           'py-1.5': size === SfSelectSize.sm,
           'py-2': size === SfSelectSize.base,