agroptima-design-system 0.33.0-beta.2 → 0.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.33.0-beta.2",
+  "version": "0.33.0",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/Input.scss

@@ -87,7 +87,9 @@
       &:has(textarea:disabled) {
         border: 1px solid color_alias.$neutral-color-400;
         background: color_alias.$neutral-color-50;
-        color: color_alias.$neutral-color-400;
+        input {
+          color: color_alias.$neutral-color-400;
+        }
 
         input::placeholder,
         textarea::placeholder {

package/src/atoms/Select/Select.tsx

@@ -67,7 +67,6 @@ export function Select({
   }
 
   function handleClear(event: React.MouseEvent) {
-    if (disabled) return
     event.stopPropagation()
     setSelectedOption(EMPTY_OPTION)
     onChange('')

package/src/atoms/Select/SelectTrigger.tsx

@@ -27,6 +27,10 @@ export function SelectTrigger({
   isEmpty,
   children,
 }: SelectTriggerProps) {
+  const handleClear = (event: React.MouseEvent) => {
+    if (disabled) return
+    onClear(event)
+  }
   return (
     <div className="select-container">
       <button
@@ -51,11 +55,12 @@ export function SelectTrigger({
         />
       </button>
       <IconButton
+        type="button"
         size="3"
         icon="Close"
         className="clear-button"
-        accessibilityLabel="close"
-        onClick={onClear}
+        accessibilityLabel="clear"
+        onClick={handleClear}
         visible={!isEmpty}
       />
     </div>

package/src/atoms/TabMenu/TabMenu.scss

@@ -34,11 +34,11 @@
 
       &.primary {
         @include typography.body-regular-primary;
-        border-bottom: 2px solid color_alias.$neutral-color-200;
+        border-bottom: 1px solid color_alias.$neutral-color-200;
 
         &:hover {
           color: color_alias.$primary-color-600;
-          border-bottom: 2px solid color_alias.$primary-color-600;
+          border-bottom: 1px solid color_alias.$primary-color-600;
         }
 
         &.active {
@@ -48,7 +48,7 @@
 
         &.disabled {
           color: color_alias.$neutral-color-400;
-          border-bottom: 2px solid color_alias.$neutral-color-200;
+          border-bottom: 1px solid color_alias.$neutral-color-200;
         }
       }
     }
@@ -63,7 +63,7 @@
     position: absolute;
     top: 28px;
     width: 100%;
-    height: config.$space-halfx;
+    height: 1px;
     background-color: color_alias.$neutral-color-200;
   }
 }

package/src/stories/Changelog.mdx

@@ -8,6 +8,14 @@ import { Meta } from "@storybook/blocks";
 
 * Add TabMenu component
 
+## 0.32.3
+
+* Fix send form when click on deselect button in Select component
+
+## 0.32.2
+
+* Fix disabled color input 
+
 ## 0.32.1
 
 * Add reason icon

package/tests/Multiselect.spec.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React from 'react'
 import { Multiselect } from '../src/atoms/Multiselect'
-import type { Option } from '../src/atoms/Select'
+import { type Option, Select } from '../src/atoms/Select'
 
 const zelda = {
   id: '1',
@@ -112,7 +112,7 @@ describe('Multiselect', () => {
       />,
     )
 
-    await user.click(screen.getByRole('button', { name: /close/i }))
+    await user.click(screen.getByRole('button', { name: /clear/i }))
 
     expect(getByText(placeholder)).toBeInTheDocument()
     expect(mockChange).toHaveBeenCalledWith([])
@@ -143,4 +143,46 @@ describe('Multiselect', () => {
     expect(queryByText('Spyro the Dragon')).not.toBeInTheDocument()
     expect(queryByText('Halo')).not.toBeInTheDocument()
   })
+
+  it('deselects when click on deselect button', async () => {
+    const user = userEvent.setup()
+    const placeholder = 'Select your favourite gaming system...'
+    const handleSubmit = jest.fn()
+
+    render(
+      <form onSubmit={handleSubmit}>
+        <Multiselect
+          label="Videogames"
+          name="select-videogames"
+          placeholder="Select your favourite gaming system..."
+          defaultValue={[zelda.id]}
+          options={OPTIONS}
+        />
+      </form>,
+    )
+
+    await user.click(screen.getByLabelText(/clear/i))
+
+    expect(screen.getByLabelText('Videogames')).toHaveTextContent(placeholder)
+    expect(handleSubmit).toHaveBeenCalledTimes(0)
+  })
+
+  it('disables deselect button when is disabled', async () => {
+    const user = userEvent.setup()
+    render(
+      <Multiselect
+        disabled
+        label="Videogames"
+        name="select-videogames"
+        defaultValue={[zelda.id]}
+        options={OPTIONS}
+      />,
+    )
+
+    await user.click(screen.getByLabelText(/clear/i))
+
+    expect(screen.getByLabelText('Videogames')).toHaveTextContent(
+      /1 items selected/i,
+    )
+  })
 })

package/tests/Select.spec.tsx

@@ -100,7 +100,7 @@ describe('Select', () => {
       />,
     )
 
-    await user.click(screen.getByRole('button', { name: /close/i }))
+    await user.click(screen.getByRole('button', { name: /clear/i }))
 
     expect(getByText(placeholder)).toBeInTheDocument()
     expect(mockChange).toHaveBeenCalledWith('')
@@ -124,4 +124,46 @@ describe('Select', () => {
     expect(queryByText('Nintendo Switch')).not.toBeInTheDocument()
     expect(queryByText('Xbox Series S/X')).not.toBeInTheDocument()
   })
+  it('deselects when click on deselect button', async () => {
+    const user = userEvent.setup()
+    const placeholder = 'Select your favourite gaming system...'
+    const handleSubmit = jest.fn()
+
+    render(
+      <form onSubmit={handleSubmit}>
+        <Select
+          label="Videogames"
+          name="select-videogames"
+          isSearchable
+          placeholder={placeholder}
+          defaultValue={playstation5.id}
+          options={OPTIONS}
+        />
+      </form>,
+    )
+
+    await user.click(screen.getByLabelText(/clear/i))
+
+    expect(screen.getByLabelText('Videogames')).toHaveTextContent(placeholder)
+    expect(handleSubmit).toHaveBeenCalledTimes(0)
+  })
+  it('disables deselect button when is disabled', async () => {
+    const user = userEvent.setup()
+    render(
+      <Select
+        label="Videogames"
+        name="select-videogames"
+        isSearchable
+        disabled
+        defaultValue={playstation5.id}
+        options={OPTIONS}
+      />,
+    )
+
+    await user.click(screen.getByLabelText(/clear/i))
+
+    expect(screen.getByLabelText('Videogames')).toHaveTextContent(
+      playstation5.label,
+    )
+  })
 })