From c0642f393ff895005a0c8bb4b6a03295866540a7 Mon Sep 17 00:00:00 2001 From: dharini Date: Fri, 15 Oct 2021 10:25:09 -0700 Subject: [PATCH 1/8] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20icon=20support?= =?UTF-8?q?=20to=20input=20field?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/rose/form/input/index.hbs | 28 +++++++++++-------- .../rose/form/input/index.stories.mdx | 5 ++++ .../styles/rose/components/form/_input.scss | 12 ++++++++ .../components/rose/form/input-test.js | 5 ++++ .../templates/scopes/scope/sessions/index.hbs | 1 - 5 files changed, 39 insertions(+), 12 deletions(-) diff --git a/addons/rose/addon/components/rose/form/input/index.hbs b/addons/rose/addon/components/rose/form/input/index.hbs index 9bf8003e3..e9f1c6ced 100644 --- a/addons/rose/addon/components/rose/form/input/index.hbs +++ b/addons/rose/addon/components/rose/form/input/index.hbs @@ -34,16 +34,22 @@ {{/if}} - - +
+ {{#if @icon}} + + {{/if}} + +
{{yield (hash errors=(component 'rose/form/errors' id=(concat 'errors-' this.id) @@ -51,4 +57,4 @@ )}} -{{/if}} +{{/if}} \ No newline at end of file diff --git a/addons/rose/addon/components/rose/form/input/index.stories.mdx b/addons/rose/addon/components/rose/form/input/index.stories.mdx index 041507976..c9decc5fd 100644 --- a/addons/rose/addon/components/rose/form/input/index.stories.mdx +++ b/addons/rose/addon/components/rose/form/input/index.stories.mdx @@ -18,6 +18,7 @@ Renders a simple form input. @helperText="Enter your email" @error={{false}} @disabled={{false}} + @icon='flight-icons/svg/search-16' readonly={{false}} /> ``` @@ -70,6 +71,10 @@ Or a fully contextual component without a wrapper, for maximum flexibility. helperText: text('helperText', 'Helper text'), disabled: boolean('disabled', false), 'read-only': boolean('readonly', false), + icon: select('icon', { + 'flight-icons/svg/search-16': 'flight-icons/svg/search-16', + }, + ), } }} diff --git a/addons/rose/addon/styles/rose/components/form/_input.scss b/addons/rose/addon/styles/rose/components/form/_input.scss index bdfd5fff9..7a397d484 100644 --- a/addons/rose/addon/styles/rose/components/form/_input.scss +++ b/addons/rose/addon/styles/rose/components/form/_input.scss @@ -5,6 +5,18 @@ margin-bottom: sizing.rems(m); } +.rose-input-icon-wrapper { + position: relative; + .rose-icon.medium { + position: absolute; + left: 10px; + top: 10px; + } + .rose-form-input-field { + padding-left: 30px; + } +} + .rose-form-input-field { @include type.type(m); display: inline-block; diff --git a/addons/rose/tests/integration/components/rose/form/input-test.js b/addons/rose/tests/integration/components/rose/form/input-test.js index 2f6c6cc56..d053698ab 100644 --- a/addons/rose/tests/integration/components/rose/form/input-test.js +++ b/addons/rose/tests/integration/components/rose/form/input-test.js @@ -58,6 +58,11 @@ module('Integration | Component | rose/form/input', function (hooks) { assert.ok(await find('[disabled]')); }); + test('it supports an icon using @icon', async function (assert) { + await render(hbs``); + assert.ok(find('.rose-icon')); + }); + test('it supports readonly attribute', async function (assert) { await render(hbs``); assert.ok(await find('[readonly]')); diff --git a/ui/admin/app/templates/scopes/scope/sessions/index.hbs b/ui/admin/app/templates/scopes/scope/sessions/index.hbs index 297c68a70..2c1e54891 100644 --- a/ui/admin/app/templates/scopes/scope/sessions/index.hbs +++ b/ui/admin/app/templates/scopes/scope/sessions/index.hbs @@ -15,7 +15,6 @@ {{#if @model}} - From 2a0174505f3f3a2842acae256d03179966b47bf5 Mon Sep 17 00:00:00 2001 From: dharini Date: Fri, 15 Oct 2021 10:38:39 -0700 Subject: [PATCH 2/8] =?UTF-8?q?chore:=20=F0=9F=A4=96=20lint?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- addons/rose/addon/components/rose/form/input/index.hbs | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/addons/rose/addon/components/rose/form/input/index.hbs b/addons/rose/addon/components/rose/form/input/index.hbs index e9f1c6ced..bb29c2335 100644 --- a/addons/rose/addon/components/rose/form/input/index.hbs +++ b/addons/rose/addon/components/rose/form/input/index.hbs @@ -35,11 +35,11 @@ {{/if}}
- {{#if @icon}} - - {{/if}} + {{#if @icon}} + + {{/if}} Date: Fri, 15 Oct 2021 10:48:56 -0700 Subject: [PATCH 3/8] =?UTF-8?q?fix:=20=F0=9F=90=9B=20undod?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/admin/app/templates/scopes/scope/sessions/index.hbs | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/admin/app/templates/scopes/scope/sessions/index.hbs b/ui/admin/app/templates/scopes/scope/sessions/index.hbs index 2c1e54891..297c68a70 100644 --- a/ui/admin/app/templates/scopes/scope/sessions/index.hbs +++ b/ui/admin/app/templates/scopes/scope/sessions/index.hbs @@ -15,6 +15,7 @@ {{#if @model}} + From 1dc4c396f8288f55c824c85847f797cdf74c5d56 Mon Sep 17 00:00:00 2001 From: dharini Date: Mon, 18 Oct 2021 13:45:23 -0700 Subject: [PATCH 4/8] =?UTF-8?q?fix:=20=F0=9F=90=9B=20class=20name=20update?= =?UTF-8?q?,=20css?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- addons/rose/addon/components/rose/form/input/index.hbs | 2 +- .../rose/addon/components/rose/form/input/index.stories.mdx | 1 + addons/rose/addon/styles/rose/components/form/_input.scss | 4 ++-- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/addons/rose/addon/components/rose/form/input/index.hbs b/addons/rose/addon/components/rose/form/input/index.hbs index bb29c2335..e31ab046d 100644 --- a/addons/rose/addon/components/rose/form/input/index.hbs +++ b/addons/rose/addon/components/rose/form/input/index.hbs @@ -34,7 +34,7 @@ {{/if}} -
+
{{#if @icon}} diff --git a/addons/rose/addon/styles/rose/components/form/_input.scss b/addons/rose/addon/styles/rose/components/form/_input.scss index 7a397d484..cc9b12904 100644 --- a/addons/rose/addon/styles/rose/components/form/_input.scss +++ b/addons/rose/addon/styles/rose/components/form/_input.scss @@ -5,9 +5,9 @@ margin-bottom: sizing.rems(m); } -.rose-input-icon-wrapper { +.rose-input-wrapper { position: relative; - .rose-icon.medium { + .rose-icon { position: absolute; left: 10px; top: 10px; From 5c091e1b72c4e47a46d89cc916813486a67627db Mon Sep 17 00:00:00 2001 From: dharini Date: Mon, 18 Oct 2021 14:55:40 -0700 Subject: [PATCH 5/8] =?UTF-8?q?fix:=20=F0=9F=90=9B=20input=20updates?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/rose/form/input/index.hbs | 2 +- .../rose/form/input/index.stories.mdx | 54 +++++++++++++++++-- .../styles/rose/components/form/_input.scss | 2 +- 3 files changed, 52 insertions(+), 6 deletions(-) diff --git a/addons/rose/addon/components/rose/form/input/index.hbs b/addons/rose/addon/components/rose/form/input/index.hbs index e31ab046d..efbd55a4e 100644 --- a/addons/rose/addon/components/rose/form/input/index.hbs +++ b/addons/rose/addon/components/rose/form/input/index.hbs @@ -34,7 +34,7 @@ {{/if}} -
+
{{#if @icon}} `, context: { @@ -71,15 +72,60 @@ Or a fully contextual component without a wrapper, for maximum flexibility. helperText: text('helperText', 'Helper text'), disabled: boolean('disabled', false), 'read-only': boolean('readonly', false), - icon: select('icon', { - 'flight-icons/svg/search-16': 'flight-icons/svg/search-16', - }, - 'flight-icons/svg/search-16 + icon: select( + 'icon', + { + 'none': null, + 'flight-icons/svg/search-16': 'flight-icons/svg/search-16', + }, + 'flight-icons/svg/search-16', ), } }} + + {{ + template: hbs` + + `, + context: { + type: select( + 'type', + { + text: 'text', + email: 'email', + number: 'number', + password: 'password', + }, + 'text' + ), + label: text('label', 'Label'), + helperText: text('helperText', 'Helper text'), + disabled: boolean('disabled', false), + 'read-only': boolean('readonly', false), + icon: select( + 'icon', + { + 'none': null, + 'flight-icons/svg/search-16': 'flight-icons/svg/search-16', + }, + null + ), + } + }} + + + {{ template: hbs` diff --git a/addons/rose/addon/styles/rose/components/form/_input.scss b/addons/rose/addon/styles/rose/components/form/_input.scss index cc9b12904..cade58db3 100644 --- a/addons/rose/addon/styles/rose/components/form/_input.scss +++ b/addons/rose/addon/styles/rose/components/form/_input.scss @@ -5,7 +5,7 @@ margin-bottom: sizing.rems(m); } -.rose-input-wrapper { +.rose-input-wrapper.icon { position: relative; .rose-icon { position: absolute; From 18025e749324b65f38b6526fdba5f05aa7d3c2c7 Mon Sep 17 00:00:00 2001 From: dharini Date: Mon, 18 Oct 2021 15:02:42 -0700 Subject: [PATCH 6/8] =?UTF-8?q?fix:=20=F0=9F=90=9B=20undo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../rose/form/input/index.stories.mdx | 42 ------------------- 1 file changed, 42 deletions(-) diff --git a/addons/rose/addon/components/rose/form/input/index.stories.mdx b/addons/rose/addon/components/rose/form/input/index.stories.mdx index 45324c820..a0b6080f2 100644 --- a/addons/rose/addon/components/rose/form/input/index.stories.mdx +++ b/addons/rose/addon/components/rose/form/input/index.stories.mdx @@ -84,48 +84,6 @@ Or a fully contextual component without a wrapper, for maximum flexibility. }} - - {{ - template: hbs` - - `, - context: { - type: select( - 'type', - { - text: 'text', - email: 'email', - number: 'number', - password: 'password', - }, - 'text' - ), - label: text('label', 'Label'), - helperText: text('helperText', 'Helper text'), - disabled: boolean('disabled', false), - 'read-only': boolean('readonly', false), - icon: select( - 'icon', - { - 'none': null, - 'flight-icons/svg/search-16': 'flight-icons/svg/search-16', - }, - null - ), - } - }} - - - {{ template: hbs` From f1a3a3bfb20b99cb086c76c786d2dfb6c37ceae7 Mon Sep 17 00:00:00 2001 From: Dharini Jeeva Date: Mon, 18 Oct 2021 15:11:28 -0700 Subject: [PATCH 7/8] Update index.hbs --- addons/rose/addon/components/rose/form/input/index.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addons/rose/addon/components/rose/form/input/index.hbs b/addons/rose/addon/components/rose/form/input/index.hbs index efbd55a4e..7f5747ac2 100644 --- a/addons/rose/addon/components/rose/form/input/index.hbs +++ b/addons/rose/addon/components/rose/form/input/index.hbs @@ -57,4 +57,4 @@ )}}
-{{/if}} \ No newline at end of file +{{/if}} From 24ffef643f62b9726b222994851710472ce74070 Mon Sep 17 00:00:00 2001 From: dharini Date: Thu, 21 Oct 2021 09:41:03 -0700 Subject: [PATCH 8/8] =?UTF-8?q?fix:=20=F0=9F=90=9B=20specificity?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- addons/rose/addon/components/rose/form/input/index.hbs | 2 +- addons/rose/addon/styles/rose/components/form/_input.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/addons/rose/addon/components/rose/form/input/index.hbs b/addons/rose/addon/components/rose/form/input/index.hbs index 7f5747ac2..889ca0639 100644 --- a/addons/rose/addon/components/rose/form/input/index.hbs +++ b/addons/rose/addon/components/rose/form/input/index.hbs @@ -34,7 +34,7 @@ {{/if}} -
+
{{#if @icon}}