feat(input): add styles for ionic theme for fill=solid #30417
Conversation
- move input.outline.scss to input.ionic.scss; - add fill solid to states page;
- add tests for ionic solid input;
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Why are we deleting this file but adding a solid one? Can't we keep both and default the fill styles to input-fill-outline?
| @@ -1,26 +1,127 @@ | |||
| @use "../../themes/ionic/ionic.globals.scss" as globals; | |||
| @use "./input.common"; | |||
| @forward "./input.ionic.outline.scss"; | |||
|
|
|||
| @forward "./input.ionic.solid.scss"; | |||
| // Ionic Input | |||
| // -------------------------------------------------- | |||
|
|
|||
| :host { | |||
| --color: #{globals.$ion-primitives-neutral-1200}; | |||
| --border-width: #{globals.$ion-border-size-025}; | |||
There was a problem hiding this comment.
We should move all styles specific to fill to the input-fill-outline class like we do for button:
This will make it so that in the future if we need to change the default fill we don't have to move the styles around.
| // Ionic Input | ||
| // -------------------------------------------------- | ||
|
|
||
| :host { | ||
| --color: #{globals.$ion-primitives-neutral-1200}; | ||
| --border-width: #{globals.$ion-border-size-025}; | ||
| --border-color: #{globals.$ion-primitives-neutral-500}; | ||
| --border-radius: #{globals.$ion-border-radius-100}; |
There was a problem hiding this comment.
Similarly, can we move all styles specific to shape to the shape class such as input-fill-round so that if we change the default we don't have to move styles?
| // Ionic Input | ||
| // -------------------------------------------------- | ||
|
|
||
| :host { | ||
| --color: #{globals.$ion-primitives-neutral-1200}; | ||
| --border-width: #{globals.$ion-border-size-025}; | ||
| --border-color: #{globals.$ion-primitives-neutral-500}; | ||
| --border-radius: #{globals.$ion-border-radius-100}; |
There was a problem hiding this comment.
Where is this value coming from? In Figma I see the following:
round -> round.xl -> 16px -> $ion-round-xl ($ion-border-radius-400 -> $ion-scale-400: var(--ion-scale-400, 16px);)
soft -> soft.xl -> 8px -> $ion-soft-xl ($ion-border-radius-200 -> $ion-scale-200: var(--ion-scale-200, 8px);)
rectangular -> rectangular.xl -> 0px -> $ion-rectangular-xl ($ion-border-radius-0 -> $ion-scale-0: var(--ion-scale-0, 0px);)
There was a problem hiding this comment.
The undefined shape is only when it isn't the ionic theme:
| --padding-start: #{globals.$ion-space-300}; | ||
| --padding-end: #{globals.$ion-space-300}; |
There was a problem hiding this comment.
This seems to only apply for the small size - can we move this to .input-size-small?
| // -------------------------------------------------- | ||
|
|
||
| :host(.input-shape-soft) { | ||
| --border-radius: #{globals.$ion-border-radius-200}; |
There was a problem hiding this comment.
| --border-radius: #{globals.$ion-border-radius-200}; | |
| --border-radius: #{globals.$ion-soft-xl}; |
This would match Figma
| } | ||
|
|
||
| :host(.input-shape-round) { | ||
| --border-radius: #{globals.$ion-border-radius-400}; |
There was a problem hiding this comment.
| --border-radius: #{globals.$ion-border-radius-400}; | |
| --border-radius: #{globals.$ion-round-xl}; |
This would match Figma
| } | ||
|
|
||
| :host(.input-shape-rectangular) { | ||
| --border-radius: #{globals.$ion-border-radius-0}; |
There was a problem hiding this comment.
| --border-radius: #{globals.$ion-border-radius-0}; | |
| --border-radius: #{globals.$ion-rectangular-xl}; |
This would match Figma
- specify attributes by classes type;
Issue number: Internal
What is the new behavior?
Does this introduce a breaking change?
Other information