Skip to content

Commit

Permalink
feat: remove unused margin an add condicional render in input label (#…
Browse files Browse the repository at this point in the history 
…1079)

* feat: remove unused margon an add contitional render in input label

* test: update snapshot
  • Loading branch information
@danimuller20
danimuller20 authored Jul 31, 2023
1 parent 2f32168 commit 561d8a7
Show file tree
Hide file tree
Showing 11 changed files with 137 additions and 214 deletions.
1 change: 0 additions & 1 deletion packages/ocean-core/src/components/_search.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@
&:active,
&:focus-within {
border: $border-width-thin solid $color-brand-primary-down;
margin: -1px;
}

&--filled {
Expand Down
1 change: 0 additions & 1 deletion packages/ocean-core/src/forms/_input.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@
&:focus-within {
border-color: $color-brand-primary-down;
border-width: $border-width-thin;
margin: -1px;
}

&--filled {
Expand Down
1 change: 0 additions & 1 deletion packages/ocean-core/src/forms/_textarea.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@
&:active,
&:focus-within {
border: $border-width-thin solid $color-brand-primary-down;
margin: -1px;
}

&:disabled {
Expand Down
91 changes: 42 additions & 49 deletions packages/ocean-react/src/Date/__tests__/DatePicker.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,76 +25,69 @@ test('renders element properly', () => {
);

expect(container.firstChild).toMatchInlineSnapshot(`
<div>
<div
class="ods-date class-test"
>
<div>
<div
class="ods-date__form-row-datepicker"
class="ods-date class-test"
>
<div
class="ods-date__form-controls"
data-testid="date-picker-first-field-wrapper"
class="ods-date__form-row-datepicker"
>
<label
for="start-date"
>
Your label
</label>
<div
class="ods-form-control__root"
class="ods-date__form-controls"
data-testid="date-picker-first-field-wrapper"
>
<div
class="ods-form-control__header"
<label
for="start-date"
>
<div
class="ods-form-control__label"
/>
</div>
Your label
</label>
<div
class="ods-form-control__element"
class="ods-form-control__root"
>
<div
class="ods-input ods-input--disabled--text"
class="ods-form-control__element"
>
<input
autocomplete="off"
data-testid="datepicker-input-1"
id="start-date"
inputmode="numeric"
maxlength="10"
name="start-date"
placeholder="dd/mm/aaaa"
readonly=""
type="text"
value="10/08/2022"
/>
<div
class="ods-input__adornment ods-input__adornment--placeholder"
class="ods-input ods-input--disabled--text"
>
<svg
fill="none"
height="20"
stroke="#B6B9CC"
viewBox="0 0 24 24"
width="20"
xmlns="http://www.w3.org/2000/svg"
<input
autocomplete="off"
data-testid="datepicker-input-1"
id="start-date"
inputmode="numeric"
maxlength="10"
name="start-date"
placeholder="dd/mm/aaaa"
readonly=""
type="text"
value="10/08/2022"
/>
<div
class="ods-input__adornment ods-input__adornment--placeholder"
>
<path
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
<svg
fill="none"
height="20"
stroke="#B6B9CC"
viewBox="0 0 24 24"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`);
});

Expand Down
176 changes: 81 additions & 95 deletions packages/ocean-react/src/Date/__tests__/DateRange.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,136 +38,122 @@ test('renders element properly', () => {
);

expect(container.firstChild).toMatchInlineSnapshot(`
<div>
<div
class="ods-date class-test"
>
<div>
<div
class="ods-date__form-row"
class="ods-date class-test"
>
<div
class="ods-date__form-controls"
data-testid="date-picker-first-field-wrapper"
class="ods-date__form-row"
>
<label
for="start-date"
>
first-label
</label>
<div
class="ods-form-control__root"
class="ods-date__form-controls"
data-testid="date-picker-first-field-wrapper"
>
<div
class="ods-form-control__header"
<label
for="start-date"
>
<div
class="ods-form-control__label"
/>
</div>
first-label
</label>
<div
class="ods-form-control__element"
class="ods-form-control__root"
>
<div
class="ods-input ods-input--disabled--text"
class="ods-form-control__element"
>
<input
autocomplete="off"
data-testid="datepicker-input-1"
id="start-date"
inputmode="numeric"
maxlength="10"
name="start-date"
placeholder="dd/mm/aaaa"
readonly=""
type="text"
value="10/08/2022"
/>
<div
class="ods-input__adornment ods-input__adornment--placeholder"
class="ods-input ods-input--disabled--text"
>
<svg
fill="none"
height="20"
stroke="#B6B9CC"
viewBox="0 0 24 24"
width="20"
xmlns="http://www.w3.org/2000/svg"
<input
autocomplete="off"
data-testid="datepicker-input-1"
id="start-date"
inputmode="numeric"
maxlength="10"
name="start-date"
placeholder="dd/mm/aaaa"
readonly=""
type="text"
value="10/08/2022"
/>
<div
class="ods-input__adornment ods-input__adornment--placeholder"
>
<path
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
<svg
fill="none"
height="20"
stroke="#B6B9CC"
viewBox="0 0 24 24"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="ods-date__form-controls"
data-testid="date-picker-second-field-wrapper"
>
<label
for="end-date"
>
second-label
</label>
<div
class="ods-form-control__root"
class="ods-date__form-controls"
data-testid="date-picker-second-field-wrapper"
>
<div
class="ods-form-control__header"
<label
for="end-date"
>
<div
class="ods-form-control__label"
/>
</div>
second-label
</label>
<div
class="ods-form-control__element"
class="ods-form-control__root"
>
<div
class="ods-input ods-input--disabled--text"
class="ods-form-control__element"
>
<input
autocomplete="off"
data-testid="datepicker-input-2"
id="end-date"
inputmode="numeric"
maxlength="10"
name="end-date"
placeholder="dd/mm/aaaa"
readonly=""
type="text"
value="11/08/2022"
/>
<div
class="ods-input__adornment ods-input__adornment--placeholder"
class="ods-input ods-input--disabled--text"
>
<svg
fill="none"
height="20"
stroke="#B6B9CC"
viewBox="0 0 24 24"
width="20"
xmlns="http://www.w3.org/2000/svg"
<input
autocomplete="off"
data-testid="datepicker-input-2"
id="end-date"
inputmode="numeric"
maxlength="10"
name="end-date"
placeholder="dd/mm/aaaa"
readonly=""
type="text"
value="11/08/2022"
/>
<div
class="ods-input__adornment ods-input__adornment--placeholder"
>
<path
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
<svg
fill="none"
height="20"
stroke="#B6B9CC"
viewBox="0 0 24 24"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`);
});

Expand Down
14 changes: 0 additions & 14 deletions packages/ocean-react/src/FileUploader/__tests__/FileUpload.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,13 +43,6 @@ test('renders element properly', () => {
<div
class="ods-form-control__root"
>
<div
class="ods-form-control__header"
>
<div
class="ods-form-control__label"
/>
</div>
<div
class="ods-form-control__element"
>
Expand Down Expand Up @@ -132,13 +125,6 @@ test('renders element properly in pt-br', () => {
<div
class="ods-form-control__root"
>
<div
class="ods-form-control__header"
>
<div
class="ods-form-control__label"
/>
</div>
<div
class="ods-form-control__element"
>
Expand Down
Loading

0 comments on commit 561d8a7

Please sign in to comment.