Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: align TextInput with React [MDS-141] #303

Merged
merged 39 commits into from
Jul 11, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
39 commits
Select commit Hold shift + click to select a range
982bd4f
Start with text input alignment
alexisdevtailor Jun 29, 2022
42b07c9
Continue text input styling
alexisdevtailor Jun 30, 2022
b7cc87c
Placed the styles inside extend in tailwind config
alexisdevtailor Jun 30, 2022
bb22445
Finished styling the input
alexisdevtailor Jul 1, 2022
4ab9a37
Hint text done
alexisdevtailor Jul 4, 2022
ef8ab58
Added labels doc
alexisdevtailor Jul 4, 2022
8d8ec48
Added type, step, placeholder and required
alexisdevtailor Jul 4, 2022
9ba116f
Fixed background color
alexisdevtailor Jul 4, 2022
5b5c300
Finish date doc
alexisdevtailor Jul 4, 2022
2ef6321
Started the text input inner label
alexisdevtailor Jul 4, 2022
5ffadfc
Finish the TextInputInnerLabel
alexisdevtailor Jul 5, 2022
1190de6
Additional docs
alexisdevtailor Jul 5, 2022
9e7e678
More docs
alexisdevtailor Jul 5, 2022
f51b2a9
Show password event with correct target
alexisdevtailor Jul 6, 2022
b6b56d1
Toggle password show now working
alexisdevtailor Jul 6, 2022
248ad5b
Tried JS.set_attribute
alexisdevtailor Jul 6, 2022
8c694e5
Use handle_event for show password
alexisdevtailor Jul 6, 2022
6897198
Show password now retaining values
alexisdevtailor Jul 6, 2022
8570f44
Created a separate password subcomponent
alexisdevtailor Jul 6, 2022
d241bd9
Finish the xl size for password
alexisdevtailor Jul 7, 2022
4b384fc
Added focus, keyup, keydown and blur events
alexisdevtailor Jul 7, 2022
da9de70
Added form based example
alexisdevtailor Jul 7, 2022
3dfe2fc
Fixed password placeholder
alexisdevtailor Jul 7, 2022
082096c
Rename folder
alexisdevtailor Jul 8, 2022
eeb19c1
Add border interactive to theme importer
alexisdevtailor Jul 8, 2022
d225b46
Added the border-i-width to lab theme and restored old colors
alexisdevtailor Jul 11, 2022
b060989
Regenerated themes with border-i-width added
alexisdevtailor Jul 11, 2022
7ce9039
Added the new radius values to theme-importer
alexisdevtailor Jul 11, 2022
888d61a
Regenerated the theme css files with the new radius values
alexisdevtailor Jul 11, 2022
d588235
Added the updates to the aposta css files
alexisdevtailor Jul 11, 2022
d60a546
Remove duplicate border width setting
alexisdevtailor Jul 11, 2022
6e425e8
Fix hint text style
alexisdevtailor Jul 11, 2022
a46c441
Deprecated the old version
alexisdevtailor Jul 11, 2022
0809366
Deprecated the old text input component. Updated the sidebars and rou…
alexisdevtailor Jul 11, 2022
e86a23d
Remove the ring width for text input
alexisdevtailor Jul 11, 2022
0b8126d
Remove unused routes
alexisdevtailor Jul 11, 2022
04a966f
Run formatter
alexisdevtailor Jul 11, 2022
6a307e3
Fix credo errors
alexisdevtailor Jul 11, 2022
87f9a52
Updated props table
alexisdevtailor Jul 11, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
506 changes: 336 additions & 170 deletions assets/tailwind.config.js

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion lib/moon/backoffice_components/dropdown_multi_filter.ex
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ defmodule Moon.BackofficeComponents.DropdownMultiFilterView do

alias Moon.Assets.Icons.IconZoom
alias Moon.Autolayouts.{LeftToRight, TopToDown}
alias Moon.Components.{Button, CheckboxMultiselect, Divider, Form, Popover, TextInput}
alias Moon.Components.{Button, CheckboxMultiselect, Divider, Form, Popover}
alias Moon.Components.Deprecated.TextInput

prop show_filter, :boolean, required: true
prop search_text, :string, required: true
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
defmodule Moon.Components.TextInput do
defmodule Moon.Components.Deprecated.TextInput do
@moduledoc false

use Moon.StatelessComponent
Expand Down
2 changes: 1 addition & 1 deletion lib/moon/components/dropdown.ex
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ defmodule Moon.Components.Dropdown do

alias Moon.Assets.Icons.IconZoom
alias Moon.Components.Form
alias Moon.Components.TextInput
alias Moon.Components.Deprecated.TextInput

prop(on_search_change, :event)
prop(search_placeholder, :string)
Expand Down
2 changes: 1 addition & 1 deletion lib/moon/components/password_input.ex
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ defmodule Moon.Components.PasswordInput do
@moduledoc false

use Moon.StatefulComponent
alias Moon.Components.TextInput
alias Moon.Components.Deprecated.TextInput

data hidden, :boolean, default: true

Expand Down
28 changes: 28 additions & 0 deletions lib/moon/components/text_input/styled/container.ex
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
defmodule Moon.Components.TextInput.Container do
@moduledoc false

use Moon.StatelessComponent

alias Moon.Components.TextInput.Utils

prop id, :string
prop disabled, :boolean, default: false
prop size, :string, values: ["md", "lg", "xl"]

slot default

def render(assigns) do
~F"""
<div
class={
"w-full max-w-full relative z-0",
Utils.get_border_radius(@size),
"opacity-30 cursor-not-allowed": @disabled
}
id={@id}
>
<#slot />
</div>
"""
end
end
20 changes: 20 additions & 0 deletions lib/moon/components/text_input/styled/hint_text.ex
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
defmodule Moon.Components.TextInput.HintText do
@moduledoc false

use Moon.StatelessComponent

prop is_error, :boolean, default: false

slot default

def render(assigns) do
~F"""
<div
role="alert"
class={"inline-block mt-2 text-moon-12", "text-chi-chi-100": @is_error, "text-trunks-100": !@is_error}
>
<#slot />
</div>
"""
end
end
152 changes: 152 additions & 0 deletions lib/moon/components/text_input/styled/input.ex
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
defmodule Moon.Components.TextInput.Input do
@moduledoc false

use Moon.StatelessComponent

alias Moon.Components.TextInput.Utils

prop type, :string,
values: [
"date",
"datetime-local",
"email",
"number",
"password",
"search",
"tel",
"text",
"time",
"url"
],
default: "text"

prop field, :atom
prop is_error, :boolean, default: false
prop background_color, :string, values: Moon.colors()
prop size, :string, values: ["md", "lg", "xl"]
prop dir, :string, values: ["ltr", "rtl"], default: "ltr"
prop with_label, :boolean, default: false
prop disabled, :boolean
prop placeholder, :string
prop required, :boolean
prop step, :string, default: "1"
prop is_first, :boolean
prop readonly, :boolean
prop value, :string

prop is_sharp_left_side, :boolean
prop is_sharp_right_side, :boolean
prop is_sharp_top_side, :boolean
prop is_sharp_bottom_side, :boolean
prop is_top_bottom_border_hidden, :boolean
prop is_side_border_hidden, :boolean

prop focus, :event
prop keydown, :event
prop keyup, :event
prop blur, :event

def render(assigns) do
~F"""
<Surface.Components.Form.TextInput
opts={
placeholder: @placeholder,
disabled: @disabled,
required: @required && !@disabled,
type: @type,
"data-lpignore": "true",
step: @step,
readonly: @readonly,
dir: @dir
}
value={@value}
class={
"focus:ring-0 border-0",
"block w-full max-w-full py-0 px-4 m-0 appearance-none",
"text-[1rem] text-bulma transition-shadow box-border relative z-[2]",
"shadow-input hover:shadow-input-hov",
"focus:shadow-input-focus focus:outline-none",
"before:box-border after:box-border",
"placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75",
"read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input",
"input-dt-shared",
"invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err",
Utils.get_size_styles(@size),
get_class_left(
@is_sharp_left_side,
@is_sharp_top_side,
@is_sharp_bottom_side
),
get_class_right(
@is_sharp_right_side,
@is_sharp_top_side,
@is_sharp_bottom_side
),
get_class_for_date_type(@type, @dir == "rtl"),
get_class_for_time_type(@type, @dir == "rtl"),
"#{Utils.make_border_left(@is_side_border_hidden,
@is_first,
@dir == "rtl")}": !@is_error,
"#{Utils.make_border_right(@is_side_border_hidden,
@is_first,
@dir == "rtl")}": !@is_error,
"#{Utils.make_border_top_bottom(@is_top_bottom_border_hidden,
@is_first)}": !@is_error,
"input-number-clear": @type == "number",
"shadow-input-err hover:shadow-input-err focus:shadow-input-err": @is_error,
"bg-#{@background_color}": @background_color,
"bg-transparent": !@background_color,
"input-xl-dt-shared": @size == "xl",
"input-xl pt-[1.125rem] input-xl-dt-label": @size == "xl" && @with_label,
"input-lg-dt-shared": @size == "lg"
}
focus={@focus}
keyup={@keyup}
keydown={@keydown}
blur={@blur}
field={@field}
/>
"""
end

defp get_class_for_date_type(type, is_rtl) do
cond do
type == "date" || type == "datetime-local" -> "input-d"
type == "date" && is_rtl -> "input-d-rtl"
type == "datetime-local" && is_rtl -> "input-dt-local-rtl"
true -> ""
end
end

defp get_class_for_time_type(type, is_rtl) do
cond do
type == "time" -> "input-t"
type == "time" && is_rtl -> "input-t-rtl"
true -> ""
end
end

defp get_class_left(
is_sharp_left_side,
is_sharp_top_side,
is_sharp_bottom_side
) do
cond do
is_sharp_left_side || is_sharp_top_side -> "rounded-tl-none"
is_sharp_left_side || is_sharp_bottom_side -> "rounded-bl-none"
true -> ""
end
end

defp get_class_right(
is_sharp_right_side,
is_sharp_top_side,
is_sharp_bottom_side
) do
cond do
is_sharp_right_side || is_sharp_top_side -> "rounded-tr-none"
is_sharp_right_side || is_sharp_bottom_side -> "rounded-br-none"
true -> ""
end
end
end
124 changes: 124 additions & 0 deletions lib/moon/components/text_input/styled/password.ex
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
defmodule Moon.Components.TextInput.Password do
@moduledoc false

use Moon.StatelessComponent

alias Moon.Components.TextInput.Utils

prop type, :string,
values: [
"password",
"text"
],
default: "text"

prop field, :atom
prop is_error, :boolean, default: false
prop background_color, :string, values: Moon.colors()
prop size, :string, values: ["md", "lg", "xl"]
prop dir, :string, values: ["ltr", "rtl"], default: "ltr"
prop with_label, :boolean, default: false
prop disabled, :boolean
prop placeholder, :string
prop required, :boolean
prop step, :string, default: "1"
prop is_first, :boolean
prop readonly, :boolean
prop value, :string
prop id, :string
prop on_keyup, :string
prop input_password_id, :string

prop is_sharp_left_side, :boolean
prop is_sharp_right_side, :boolean
prop is_sharp_top_side, :boolean
prop is_sharp_bottom_side, :boolean
prop is_top_bottom_border_hidden, :boolean
prop is_side_border_hidden, :boolean

prop focus, :event
prop keydown, :event
prop keyup, :event
prop blur, :event

def render(assigns) do
~F"""
<Surface.Components.Form.PasswordInput
opts={
placeholder: @placeholder,
disabled: @disabled,
required: @required && !@disabled,
"data-lpignore": "true",
step: @step,
readonly: @readonly,
dir: @dir,
type: @type
}
value={@value}
class={
"focus:ring-0 border-0",
"block w-full max-w-full py-0 px-4 m-0 appearance-none",
"text-[1rem] text-bulma transition-shadow box-border relative z-[2]",
"shadow-input hover:shadow-input-hov",
"focus:shadow-input-focus focus:outline-none",
"before:box-border after:box-border",
"placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75",
"read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input",
"input-dt-shared",
"invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err",
Utils.get_size_styles(@size),
"#{Utils.make_border_left(@is_side_border_hidden,
@is_first,
@dir == "rtl")}": !@is_error,
"#{Utils.make_border_right(@is_side_border_hidden,
@is_first,
@dir == "rtl")}": !@is_error,
"#{Utils.make_border_top_bottom(@is_top_bottom_border_hidden,
@is_first)}": !@is_error,
"#{get_class_left(@is_sharp_left_side,
@is_sharp_top_side,
@is_sharp_bottom_side)}": !@is_error,
"#{get_class_right(@is_sharp_right_side,
@is_sharp_top_side,
@is_sharp_bottom_side)}": !@is_error,
"shadow-input-err hover:shadow-input-err focus:shadow-input-err": @is_error,
"bg-#{@background_color}": @background_color,
"bg-transparent": !@background_color,
"input-xl-dt-shared": @size == "xl",
"input-xl pt-[1.125rem] input-xl-dt-label": @size == "xl" && @with_label,
"input-lg-dt-shared": @size == "lg"
}
id={"#{@id}_input"}
keyup={@on_keyup, target: "##{@input_password_id}"}
focus={@focus}
keydown={@keydown}
blur={@blur}
field={@field}
/>
"""
end

defp get_class_left(
is_sharp_left_side,
is_sharp_top_side,
is_sharp_bottom_side
) do
cond do
is_sharp_left_side || is_sharp_top_side -> "rounded-tl-none"
is_sharp_left_side || is_sharp_bottom_side -> "rounded-bl-none"
true -> ""
end
end

defp get_class_right(
is_sharp_right_side,
is_sharp_top_side,
is_sharp_bottom_side
) do
cond do
is_sharp_right_side || is_sharp_top_side -> "rounded-tr-none"
is_sharp_right_side || is_sharp_bottom_side -> "rounded-br-none"
true -> ""
end
end
end
35 changes: 35 additions & 0 deletions lib/moon/components/text_input/styled/show_password.ex
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
defmodule Moon.Components.TextInput.ShowPassword do
@moduledoc false

use Moon.StatelessComponent

prop input_password_id, :string
prop toggle, :string, default: "toggle_password_visibility"

prop is_rtl, :boolean, default: false

slot default

def render(assigns) do
~F"""
<div
role="alert"
:on-click={@toggle, target: "##{@input_password_id}"}
class={
"text-moon-14 text-bulma absolute top-2/4 mt-[-0.75rem] z-[3] underline cursor-pointer",
get_direction_style(@is_rtl)
}
>
<#slot />
</div>
"""
end

defp get_direction_style(is_rtl) do
if is_rtl do
"left-[0.938rem]"
else
"right-[0.938rem]"
end
end
end
Loading