akveo / akveo/react-native-ui-kitten

Add captionMarginTop back, but only apply if caption set

Aperta
#1,434 1 commento 1 reazione 0 assegnatari Vedi su GitHub
:bulb: Proposal
Lingua principale
TypeScript
Stelle
10.7k
Fork
962
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

## 🚀 Feature Proposal

`captionMarginTop` and the `captionContainer` View it was applied to were removed completely in
this PR: https://github.com/akveo/react-native-ui-kitten/pull/1349

It makes sense to remove the caption margin when no caption is set so we don't have extra margin applied to Inputs. However, I agree with this comment that `captionMarginTop` should still be handled for the user when caption IS set:

_"Since we don't use this default spacing between caption text and Input field, a user will more likely have to apply it on his own. Which makes Eva not Eva."_

Could we add it back but only apply when caption is set? It's a bit clunky to have to write:

```jsx
Caption} />
```

Currently, `captionMarginTop` is still getting destructured out in `Input.component` but not being used:
https://github.com/akveo/react-native-ui-kitten/blob/1403fdb993f2b6f3fb46fcddfddb185d5652883a/src/components/ui/input/input.component.tsx#L203

Maybe the fix could be as simple as adding it back to `Input.component.tsx` but only applying if `FalsyText` renders something?

```js
// add captionContainer style back to getComponentStyle:
captionContainer: {
marginTop: captionMarginTop,
},
...

// add to style array for FalsyText so it gets forwarded to underlying Text component/RenderProp?

```

If we don't want to apply margins to `Text` directly, we could have an intermediate `captionContainer` View with `captionMarginTop` that Falsy wraps the Text with.

## Motivation

Make UI Kitten easier to use and api consistent with other components. I only discovered this issue when I realized the `captionMarginTop` override in my customMapping was no longer being applied correctly after updating `@ui-kitten/components` package.

## Example

```js
// no captionContainer view rendered and no extra margin
// automatically gets marginTop set without user having to set render prop
```

Guida per i contributori

Apri la guida per i contributori

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.