diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 3c92feb62b..887d73fe08 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -1463,9 +1463,9 @@ export namespace Components { */ "setFocus": () => Promise; /** - * The shape of the input. If "round" it will have an increased border radius. + * Set to `"soft"` for an input with soft rounded corners, `"round"` for an input with fully rounded corners, or `"rectangular" for an input without rounded corners. Defaults to `"soft"`. */ - "shape"?: 'round'; + "shape"?: 'soft' | 'round'; /** * If `true`, the element will have its spelling and grammar checked. */ @@ -6723,9 +6723,9 @@ declare namespace LocalJSX { */ "required"?: boolean; /** - * The shape of the input. If "round" it will have an increased border radius. + * Set to `"soft"` for an input with soft rounded corners, `"round"` for an input with fully rounded corners, or `"rectangular" for an input without rounded corners. Defaults to `"soft"`. */ - "shape"?: 'round'; + "shape"?: 'soft' | 'round'; /** * If `true`, the element will have its spelling and grammar checked. */ diff --git a/core/src/components/input/input.md.outline.scss b/core/src/components/input/input.md.outline.scss index be54121d0e..f1a7e92fcf 100644 --- a/core/src/components/input/input.md.outline.scss +++ b/core/src/components/input/input.md.outline.scss @@ -5,13 +5,16 @@ :host(.input-fill-outline) { --border-color: #{$background-color-step-300}; - --border-radius: 4px; --padding-start: 16px; --padding-end: 16px; min-height: 56px; } +:host(.input-fill-outline.input-shape-soft) { + --border-radius: 4px; +} + :host(.input-fill-outline.input-shape-round) { --border-radius: 28px; --padding-start: 32px; diff --git a/core/src/components/input/input.md.solid.scss b/core/src/components/input/input.md.solid.scss index 98cde92880..ae2accb58a 100644 --- a/core/src/components/input/input.md.solid.scss +++ b/core/src/components/input/input.md.solid.scss @@ -6,13 +6,16 @@ :host(.input-fill-solid) { --background: #{$background-color-step-50}; --border-color: #{$background-color-step-500}; - --border-radius: 4px; --padding-start: 16px; --padding-end: 16px; min-height: 56px; } +:host(.input-fill-solid.input-shape-soft) { + --border-radius: 4px; +} + /** * The solid fill style has a border * at the bottom of the input wrapper. diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index 97d51935a7..6c51d220be 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -242,8 +242,14 @@ export class Input implements ComponentInterface { /** * The shape of the input. If "round" it will have an increased border radius. + * */ - @Prop() shape?: 'round'; + /** + * Set to `"soft"` for an input with soft rounded corners, `"round"` for an input + * with fully rounded corners, or `"rectangular" for an input without rounded corners. + * Defaults to `"soft"`. + */ + @Prop() shape?: 'soft' | 'round' = 'soft'; /** * If `true`, the element will have its spelling and grammar checked.