From 6b950a7d66730fd15c9e44f1ff21b075c2cb1d71 Mon Sep 17 00:00:00 2001 From: Glen Hunter Date: Wed, 8 Jul 2020 16:21:03 -0400 Subject: [PATCH 01/67] Add components RSC-162 --- .../styles/NxFormLayout/NxFormLayoutExample.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/gallery/src/styles/NxFormLayout/NxFormLayoutExample.tsx b/gallery/src/styles/NxFormLayout/NxFormLayoutExample.tsx index 7d176cb34c..64904a0347 100644 --- a/gallery/src/styles/NxFormLayout/NxFormLayoutExample.tsx +++ b/gallery/src/styles/NxFormLayout/NxFormLayoutExample.tsx @@ -8,6 +8,8 @@ import React from 'react'; import { NxCheckbox } from '@sonatype/react-shared-components'; import { NxRadio } from '@sonatype/react-shared-components'; +import { NxTextInput } from '@sonatype/react-shared-components'; +import { NxButton } from '@sonatype/react-shared-components'; export default function NxFormLayoutExample() { return ( @@ -15,13 +17,13 @@ export default function NxFormLayoutExample() {
@@ -55,10 +57,10 @@ export default function NxFormLayoutExample() {
-
- - -
+ ); } From cc2a047ecabe8b082a5b4ed59cc419b89293c549 Mon Sep 17 00:00:00 2001 From: Glen Hunter Date: Wed, 8 Jul 2020 16:41:58 -0400 Subject: [PATCH 02/67] Restored page link RSC-162 --- gallery/src/pageConfig.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/gallery/src/pageConfig.ts b/gallery/src/pageConfig.ts index 772f4baef4..3a62b3f430 100644 --- a/gallery/src/pageConfig.ts +++ b/gallery/src/pageConfig.ts @@ -32,7 +32,7 @@ import NxIconPage from './styles/NxIcon/NxIconPage'; import NxFontAwesomeIconPage from './components/NxFontAwesomeIcon/NxFontAwesomeIconPage'; import NxCounterPage from './styles/NxCounter/NxCounterPage'; import NxThreatNumberPage from './styles/NxThreatNumber/NxThreatNumberPage'; -//import NxFormLayoutPage from './styles/NxFormLayout/NxFormLayoutPage'; +import NxFormLayoutPage from './styles/NxFormLayout/NxFormLayoutPage'; import NxSubmitMaskPage from './components/NxSubmitMask/NxSubmitMaskPage'; import NxStatefulSubmitMaskPage from './components/NxStatefulSubmitMask/NxStatefulSubmitMaskPage'; import NxTablePage from './components/NxTable/NxTablePage'; @@ -127,7 +127,7 @@ const pageConfig: PageConfig = { 'nx-truncate-ellipsis': NxTruncatePage }, 'Layout Examples': { - //'Form Layout Styles': NxFormLayoutPage, + 'Form Layout Styles': NxFormLayoutPage, 'Page Layout': PageLayoutPage }, 'JavaScript & TypeScript Utilities': { From 09b61a089c6195e9d36533dd865391c6f4497d33 Mon Sep 17 00:00:00 2001 From: Glen Hunter Date: Wed, 8 Jul 2020 16:42:18 -0400 Subject: [PATCH 03/67] Restored state code for the inputs RSC-162 --- .../NxFormLayout/NxFormLayoutExample.tsx | 28 +++++++++++-------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/gallery/src/styles/NxFormLayout/NxFormLayoutExample.tsx b/gallery/src/styles/NxFormLayout/NxFormLayoutExample.tsx index 64904a0347..cb8571c237 100644 --- a/gallery/src/styles/NxFormLayout/NxFormLayoutExample.tsx +++ b/gallery/src/styles/NxFormLayout/NxFormLayoutExample.tsx @@ -4,33 +4,45 @@ * the terms of the Eclipse Public License 2.0 which accompanies this * distribution and is available at https://www.eclipse.org/legal/epl-2.0/. */ -import React from 'react'; +import React, { useState } from 'react'; import { NxCheckbox } from '@sonatype/react-shared-components'; import { NxRadio } from '@sonatype/react-shared-components'; import { NxTextInput } from '@sonatype/react-shared-components'; import { NxButton } from '@sonatype/react-shared-components'; +import { initialState, userInput } from '@sonatype/react-shared-components/components/NxTextInput/stateHelpers'; + export default function NxFormLayoutExample() { + const [state, setState] = useState(initialState('')); + + function onChange(val: string) { + setState(userInput(null, val)); + } + + function onKeyPress(key: string) { + console.log('Pressed key:', key); // eslint-disable-line + } + return (
@@ -48,13 +60,7 @@ export default function NxFormLayoutExample() {
-
-
-
From 280550766669d8789b90a08148d998b910745ee3 Mon Sep 17 00:00:00 2001 From: Glen Hunter Date: Tue, 14 Jul 2020 14:18:42 -0400 Subject: [PATCH 04/67] label styling RSC-162 --- lib/src/base-styles/_nx-typography.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/lib/src/base-styles/_nx-typography.scss b/lib/src/base-styles/_nx-typography.scss index 8863c0bc70..0de99f5c99 100644 --- a/lib/src/base-styles/_nx-typography.scss +++ b/lib/src/base-styles/_nx-typography.scss @@ -83,10 +83,9 @@ } .nx-label { - @include semi-bold(); + @include bold(); cursor: default; - font-size: 16px; } // Form typography From 9436d680ef6686119f46dcb7f6948ee9f3f3c14b Mon Sep 17 00:00:00 2001 From: Glen Hunter Date: Tue, 14 Jul 2020 14:18:55 -0400 Subject: [PATCH 05/67] Styling changes RSC-162 --- lib/src/base-styles/_nx-forms.scss | 26 ++++++++++++-------------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/lib/src/base-styles/_nx-forms.scss b/lib/src/base-styles/_nx-forms.scss index d6998a5984..8637df50d1 100644 --- a/lib/src/base-styles/_nx-forms.scss +++ b/lib/src/base-styles/_nx-forms.scss @@ -16,18 +16,13 @@ position: relative; // to make a containing block for validation popovers } -.nx-form--simple { - border-top: none; - padding: 0; -} - // for a form that is the entirety of a modal .nx-form--modal-form { padding-top: 0; } .nx-form-group { - margin-bottom: 20px; + margin-bottom: 6px; } .nx-form-row { @@ -62,8 +57,6 @@ color: $nx-text-color; display: block; - font-size: 16px; - margin-bottom: 7px; .disabled { color: $nx-grey-4; @@ -71,16 +64,21 @@ .nx-text-input, .nx-textarea { display: block; - margin-top: $nx-spacing-xs; } } +.nx-label__text { + display: inline-block; + margin-bottom: $nx-spacing-xs; +} + .nx-label--optional { .nx-label__text::after { @include regular(); color: $nx-text-color-light; - content: " - optional"; + content: " optional"; + font-size: $nx-font-size-xs; font-style: italic; } } @@ -89,9 +87,9 @@ @include container-horizontal; @include regular(); - color: $nx-text-color; + color: $nx-text-color-light; display: block; - font-size: 14px; + margin-bottom: $nx-spacing-xs; } // Defining labels for groups of radio buttons or checkboxes is tricky - each individual radio has a
- Radio buttons + + Radio buttons + Sub-label + Date: Tue, 25 Aug 2020 11:27:53 -0400 Subject: [PATCH 47/67] Add icon RSC-162 --- gallery/src/styles/NxFormLayout/NxFormLayoutExample.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/gallery/src/styles/NxFormLayout/NxFormLayoutExample.tsx b/gallery/src/styles/NxFormLayout/NxFormLayoutExample.tsx index c0e31ca4a8..4852119b1e 100644 --- a/gallery/src/styles/NxFormLayout/NxFormLayoutExample.tsx +++ b/gallery/src/styles/NxFormLayout/NxFormLayoutExample.tsx @@ -10,6 +10,8 @@ import { NxCheckbox } from '@sonatype/react-shared-components'; import { NxRadio } from '@sonatype/react-shared-components'; import { NxStatefulTextInput } from '@sonatype/react-shared-components'; import { NxButton } from '@sonatype/react-shared-components'; +import { faCalendar } from '@fortawesome/free-solid-svg-icons'; +import { NxFontAwesomeIcon } from '@sonatype/react-shared-components'; export default function NxFormLayoutExample() { function validator(val: string) { @@ -42,7 +44,10 @@ export default function NxFormLayoutExample() {
From 09a0b0871980983fb119a6202677911e21261a13 Mon Sep 17 00:00:00 2001 From: Glen Hunter Date: Tue, 25 Aug 2020 11:36:29 -0400 Subject: [PATCH 48/67] onSubmit is working RSC-162 --- .../NxFormLayout/NxFormHorizontalLayoutExample.tsx | 11 ++++++++--- .../src/styles/NxFormLayout/NxFormLayoutExample.tsx | 11 ++++++++--- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/gallery/src/styles/NxFormLayout/NxFormHorizontalLayoutExample.tsx b/gallery/src/styles/NxFormLayout/NxFormHorizontalLayoutExample.tsx index 4498e8aab7..7583382713 100644 --- a/gallery/src/styles/NxFormLayout/NxFormHorizontalLayoutExample.tsx +++ b/gallery/src/styles/NxFormLayout/NxFormHorizontalLayoutExample.tsx @@ -4,7 +4,7 @@ * the terms of the Eclipse Public License 2.0 which accompanies this * distribution and is available at https://www.eclipse.org/legal/epl-2.0/. */ -import React, { useState } from 'react'; +import React, { FormEvent, useState } from 'react'; import { NxCheckbox } from '@sonatype/react-shared-components'; import { NxRadio } from '@sonatype/react-shared-components'; @@ -26,8 +26,13 @@ export default function NxFormLayoutExample() { const [color, setColor] = useState(null); + function onSubmit(evt: FormEvent) { + evt.preventDefault(); + alert('Submitted!'); + } + return ( - +