From 9fd4c4a3364f5f8f002662b3818e65bd5617c3f9 Mon Sep 17 00:00:00 2001 From: KV106606Viswanath Date: Mon, 26 Jun 2023 11:41:46 +0530 Subject: [PATCH 01/31] Adding valid html for toggle section header --- packages/terra-arrange/src/Arrange.jsx | 16 +++++----- .../terra-arrange/src/Arrange.module.scss | 11 +++++++ .../src/SectionHeader.jsx | 31 +++++++++++++------ .../src/SectionHeader.module.scss | 10 +++++- 4 files changed, 49 insertions(+), 19 deletions(-) diff --git a/packages/terra-arrange/src/Arrange.jsx b/packages/terra-arrange/src/Arrange.jsx index 5ae1c2c2a96..23b280ee905 100644 --- a/packages/terra-arrange/src/Arrange.jsx +++ b/packages/terra-arrange/src/Arrange.jsx @@ -75,17 +75,17 @@ const Arrange = ({ const fitEndProps = { ...fitEndAttributes }; return ( -
-
+ + {fitStart} -
-
+ + {fill} -
-
+ + {fitEnd} -
-
+ + ); }; diff --git a/packages/terra-arrange/src/Arrange.module.scss b/packages/terra-arrange/src/Arrange.module.scss index 047c1c9f5c0..efe09082881 100644 --- a/packages/terra-arrange/src/Arrange.module.scss +++ b/packages/terra-arrange/src/Arrange.module.scss @@ -41,3 +41,14 @@ align-self: flex-start; } } +.fitBlock { + .icon-wrapper { + font-size: 8px; + display: inline-flex; + } +} +.fillBlock { + .titleBlock { + font-family: var(--terra-base-font-family, "Helvetica Neue", Helvetica, Arial, sans-serif); + } +} \ No newline at end of file diff --git a/packages/terra-section-header/src/SectionHeader.jsx b/packages/terra-section-header/src/SectionHeader.jsx index 28e2ad3229f..746008c3d11 100644 --- a/packages/terra-section-header/src/SectionHeader.jsx +++ b/packages/terra-section-header/src/SectionHeader.jsx @@ -119,9 +119,9 @@ class SectionHeader extends React.Component { ]); const accordionIcon = ( -
+ -
+ ); const sectionHeaderClassNames = classNames( @@ -153,17 +153,28 @@ class SectionHeader extends React.Component { /* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable jsx-a11y/no-static-element-interactions */ - const buttonAttributes = (onClick) ? { role: 'button', 'aria-expanded': isOpen, 'aria-label': headerText } : undefined; + //Function to use Arrange component + const ArrangeComponent = () => ( + {headerText}} + className={cx('title-arrange')} + /> + ) + + const buttonAttributes = (onClick) ? { 'aria-expanded': isOpen, 'aria-label': headerText } : undefined; return ( -
- {headerText}} - className={cx('title-arrange')} - /> -
+ {onClick && accordionIcon ? ( + + ) : ( +
+ +
+ )} ); diff --git a/packages/terra-section-header/src/SectionHeader.module.scss b/packages/terra-section-header/src/SectionHeader.module.scss index f0d2bcd524d..abb4c69a423 100644 --- a/packages/terra-section-header/src/SectionHeader.module.scss +++ b/packages/terra-section-header/src/SectionHeader.module.scss @@ -127,7 +127,8 @@ background: var(--terra-section-header-accordion-icon-background, inline-svg('')); background-repeat: no-repeat; background-size: contain; - display: block; + display: inline-block; + vertical-align: middle; height: var(--terra-section-header-accordion-icon-height, 0.83593rem); transform: rotate(0deg); width: var(--terra-section-header-accordion-icon-width, 0.83593rem); @@ -152,3 +153,10 @@ } } } +.toggleButton { + border: none; + background: none; + text-align: left; + padding: 0px; + cursor: pointer; +} \ No newline at end of file From 879df3972222445004985bdb15f5a4e1c89331d0 Mon Sep 17 00:00:00 2001 From: KV106606Viswanath Date: Mon, 26 Jun 2023 15:02:20 +0530 Subject: [PATCH 02/31] Updated Arrange and Section header Changelog files --- packages/terra-section-header/CHANGELOG.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/terra-section-header/CHANGELOG.md b/packages/terra-section-header/CHANGELOG.md index 200f25b9d96..a3f9ce4ae02 100644 --- a/packages/terra-section-header/CHANGELOG.md +++ b/packages/terra-section-header/CHANGELOG.md @@ -2,6 +2,13 @@ ## Unreleased +* Changed + * Updated div element with span tag element. + * Updated div element with button tag element. + +* Added + * Added a function "ArrangeComponent" to use Arrange component. + ## 2.60.0 - (April 5, 2023) * Changed From 9ef2aa91f9ff60c05ecf48b00cbf1c31c43a73bf Mon Sep 17 00:00:00 2001 From: KV106606Viswanath Date: Mon, 26 Jun 2023 15:30:18 +0530 Subject: [PATCH 03/31] Resolved lint errors --- packages/terra-section-header/src/SectionHeader.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/terra-section-header/src/SectionHeader.jsx b/packages/terra-section-header/src/SectionHeader.jsx index 746008c3d11..9bf4cb0951f 100644 --- a/packages/terra-section-header/src/SectionHeader.jsx +++ b/packages/terra-section-header/src/SectionHeader.jsx @@ -153,20 +153,20 @@ class SectionHeader extends React.Component { /* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable jsx-a11y/no-static-element-interactions */ - //Function to use Arrange component + // Function to use Arrange component const ArrangeComponent = () => ( {headerText}} className={cx('title-arrange')} /> - ) + ); const buttonAttributes = (onClick) ? { 'aria-expanded': isOpen, 'aria-label': headerText } : undefined; return ( - {onClick && accordionIcon ? ( + {onClick && accordionIcon ? ( From fb39b7d2c999c45e3fb99a374ebd8c49e1f66838 Mon Sep 17 00:00:00 2001 From: KV106606Viswanath Date: Mon, 26 Jun 2023 18:32:10 +0530 Subject: [PATCH 04/31] Resolved scss lint errors --- packages/terra-arrange/src/Arrange.jsx | 4 ++-- packages/terra-arrange/src/Arrange.module.scss | 14 ++++++++------ .../terra-section-header/src/SectionHeader.jsx | 4 ++-- .../src/SectionHeader.module.scss | 13 +++++++------ 4 files changed, 19 insertions(+), 16 deletions(-) diff --git a/packages/terra-arrange/src/Arrange.jsx b/packages/terra-arrange/src/Arrange.jsx index 23b280ee905..1e48318df14 100644 --- a/packages/terra-arrange/src/Arrange.jsx +++ b/packages/terra-arrange/src/Arrange.jsx @@ -76,10 +76,10 @@ const Arrange = ({ return ( - + {fitStart} - + {fill} diff --git a/packages/terra-arrange/src/Arrange.module.scss b/packages/terra-arrange/src/Arrange.module.scss index efe09082881..7c8a72751a4 100644 --- a/packages/terra-arrange/src/Arrange.module.scss +++ b/packages/terra-arrange/src/Arrange.module.scss @@ -41,14 +41,16 @@ align-self: flex-start; } } -.fitBlock { + +.fit-block { .icon-wrapper { + display: inline-flex; font-size: 8px; - display: inline-flex; } } -.fillBlock { - .titleBlock { - font-family: var(--terra-base-font-family, "Helvetica Neue", Helvetica, Arial, sans-serif); + +.fill-block { + .title-block { + font-family: var(--terra-arrange-font-family, 'Helvetica Neue', Helvetica, Arial, sans-serif); } -} \ No newline at end of file +} diff --git a/packages/terra-section-header/src/SectionHeader.jsx b/packages/terra-section-header/src/SectionHeader.jsx index 9bf4cb0951f..8232931f11c 100644 --- a/packages/terra-section-header/src/SectionHeader.jsx +++ b/packages/terra-section-header/src/SectionHeader.jsx @@ -157,7 +157,7 @@ class SectionHeader extends React.Component { const ArrangeComponent = () => ( {headerText}} + fill={{headerText}} className={cx('title-arrange')} /> ); @@ -167,7 +167,7 @@ class SectionHeader extends React.Component { return ( {onClick && accordionIcon ? ( - ) : ( diff --git a/packages/terra-section-header/src/SectionHeader.module.scss b/packages/terra-section-header/src/SectionHeader.module.scss index abb4c69a423..be47227cdee 100644 --- a/packages/terra-section-header/src/SectionHeader.module.scss +++ b/packages/terra-section-header/src/SectionHeader.module.scss @@ -128,9 +128,9 @@ background-repeat: no-repeat; background-size: contain; display: inline-block; - vertical-align: middle; height: var(--terra-section-header-accordion-icon-height, 0.83593rem); transform: rotate(0deg); + vertical-align: middle; width: var(--terra-section-header-accordion-icon-width, 0.83593rem); // flips the icon about its vertical axis, presenting it in its mirrored-image form @@ -153,10 +153,11 @@ } } } -.toggleButton { - border: none; + +.toggle-button { background: none; - text-align: left; - padding: 0px; + border: 0; cursor: pointer; -} \ No newline at end of file + padding: 0; + text-align: left; +} From 8398025c365d058ec79b0e746f3bd2c3c5de5889 Mon Sep 17 00:00:00 2001 From: KV106606Viswanath Date: Tue, 27 Jun 2023 14:23:45 +0530 Subject: [PATCH 05/31] Updated jest snapshots --- packages/terra-arrange/CHANGELOG.md | 3 + .../terra-arrange/tests/jest/Arrange.test.jsx | 10 +- .../jest/__snapshots__/Arrange.test.jsx.snap | 148 +++++++++--------- packages/terra-section-header/CHANGELOG.md | 6 +- .../__snapshots__/SectionHeader.test.jsx.snap | 100 ++++++------ 5 files changed, 129 insertions(+), 138 deletions(-) diff --git a/packages/terra-arrange/CHANGELOG.md b/packages/terra-arrange/CHANGELOG.md index 653c4bfd868..d07df2d8da3 100644 --- a/packages/terra-arrange/CHANGELOG.md +++ b/packages/terra-arrange/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Changed + * Updated Arrange to use `span` elements instead of `div`. + * Fixed * Fixed reflow issue when zoomed to 400% and the viewport is resized to 320x256 px. diff --git a/packages/terra-arrange/tests/jest/Arrange.test.jsx b/packages/terra-arrange/tests/jest/Arrange.test.jsx index c4b32a83fa5..be7a440f729 100644 --- a/packages/terra-arrange/tests/jest/Arrange.test.jsx +++ b/packages/terra-arrange/tests/jest/Arrange.test.jsx @@ -59,7 +59,7 @@ describe('Arrange', () => { it('should have fit and fill with the default class when align is not set', () => { const arrange = ; const wrapper = shallow(arrange); - expect(wrapper.type()).toEqual('div'); + expect(wrapper.type()).toEqual('span'); expect(wrapper.childAt(0).hasClass('fit')).toEqual(true); expect(wrapper.childAt(1).hasClass('fill')).toEqual(true); expect(wrapper.childAt(2).hasClass('fit')).toEqual(true); @@ -68,7 +68,7 @@ describe('Arrange', () => { it('should have fit and fill with the required class when fitStart and fill set to top and stretch"', () => { const arrange = ; const wrapper = shallow(arrange); - expect(wrapper.type()).toEqual('div'); + expect(wrapper.type()).toEqual('span'); expect(wrapper.childAt(0).hasClass('fit center')).toEqual(true); expect(wrapper.childAt(1).hasClass('fill stretch')).toEqual(true); expect(wrapper.childAt(2).hasClass('fit')).toEqual(true); @@ -77,7 +77,7 @@ describe('Arrange', () => { it('should have fit and fill with the required class when fitStart, fitEnd and fill set to stretch, bottom and stretch"', () => { const arrange = ; const wrapper = shallow(arrange); - expect(wrapper.type()).toEqual('div'); + expect(wrapper.type()).toEqual('span'); expect(wrapper.childAt(0).hasClass('fit stretch')).toEqual(true); expect(wrapper.childAt(1).hasClass('fill stretch')).toEqual(true); expect(wrapper.childAt(2).hasClass('fit bottom')).toEqual(true); @@ -86,7 +86,7 @@ describe('Arrange', () => { it('should have child with the correct class when align is set to stretch', () => { const arrange = ; const wrapper = shallow(arrange); - expect(wrapper.type()).toEqual('div'); + expect(wrapper.type()).toEqual('span'); expect(wrapper.childAt(0).hasClass('fit stretch')).toEqual(true); expect(wrapper.childAt(1).hasClass('fill stretch')).toEqual(true); expect(wrapper.childAt(2).hasClass('fit stretch')).toEqual(true); @@ -95,7 +95,7 @@ describe('Arrange', () => { it('should have child with the correct class when align is set and overwrites individual fit and fill ', () => { const arrange = ; const wrapper = shallow(arrange); - expect(wrapper.type()).toEqual('div'); + expect(wrapper.type()).toEqual('span'); expect(wrapper.childAt(0).hasClass('fit stretch')).toEqual(true); expect(wrapper.childAt(1).hasClass('fill stretch')).toEqual(true); expect(wrapper.childAt(2).hasClass('fit stretch')).toEqual(true); diff --git a/packages/terra-arrange/tests/jest/__snapshots__/Arrange.test.jsx.snap b/packages/terra-arrange/tests/jest/__snapshots__/Arrange.test.jsx.snap index 568cda9e8c7..0a06bca48c2 100644 --- a/packages/terra-arrange/tests/jest/__snapshots__/Arrange.test.jsx.snap +++ b/packages/terra-arrange/tests/jest/__snapshots__/Arrange.test.jsx.snap @@ -1,65 +1,65 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Arrange default should render a arrange component with given fit and fill 1`] = ` -
-
panda -
-
+
FIll text
-
-
+ -
-
+ + `; exports[`Arrange should have align prop undefined when align not pass 1`] = ` -
-
panda -
-
+
FIll text
-
-
+ -
+ `; exports[`Arrange should have all prop set correctly 1`] = ` -
-
-
-
+ FIll text
-
-
+ -
-
+ + `; exports[`Arrange should render a arrange component with given className and id 1`] = ` -
-
panda -
-
+
FIll text
-
-
+ -
+ `; exports[`Arrange when two fits and one fill is passed with align set should render a arrange component with fit and fill aligned to bottom 1`] = ` -
-
panda -
-
+
FIll text
-
-
+ -
+ `; exports[`Arrange when two fits and one fill is passed with align set should render a arrange component with fit and fill aligned to center 1`] = ` -
- + + `; exports[`Arrange when two fits and one fill is passed with align set should render a arrange component with fit and fill aligned to stretch 1`] = ` -
-
panda -
-
+
FIll text
-
-
+ -
+ `; exports[`Arrange when two fits and one fill is passed with align set should render a arrange component with fit and fill aligned to top 1`] = ` -
- + + `; diff --git a/packages/terra-section-header/CHANGELOG.md b/packages/terra-section-header/CHANGELOG.md index a3f9ce4ae02..676130b3b15 100644 --- a/packages/terra-section-header/CHANGELOG.md +++ b/packages/terra-section-header/CHANGELOG.md @@ -3,11 +3,7 @@ ## Unreleased * Changed - * Updated div element with span tag element. - * Updated div element with button tag element. - -* Added - * Added a function "ArrangeComponent" to use Arrange component. + * Updated SectionHeader to use `span` & `button` elements instead of `div`. ## 2.60.0 - (April 5, 2023) diff --git a/packages/terra-section-header/tests/jest/__snapshots__/SectionHeader.test.jsx.snap b/packages/terra-section-header/tests/jest/__snapshots__/SectionHeader.test.jsx.snap index f47df8b4429..551653e10a1 100644 --- a/packages/terra-section-header/tests/jest/__snapshots__/SectionHeader.test.jsx.snap +++ b/packages/terra-section-header/tests/jest/__snapshots__/SectionHeader.test.jsx.snap @@ -21,38 +21,40 @@ exports[`SectionHeader correctly applies the theme context className 1`] = ` className="arrange-wrapper" tabIndex="-1" > - - foo - - } - > -
-
-
+ + foo -
+ } + >
-
- + className="arrange title-arrange" + > +
+
+ + foo + +
+
+
+ +
@@ -68,17 +70,7 @@ exports[`SectionHeader should render a default component 1`] = ` className="arrange-wrapper" tabIndex="-1" > - - foo - - } - /> +
`; @@ -88,12 +80,12 @@ exports[`SectionHeader should render with an accordion icon in the open position class="section-header is-interactable" tabindex="0" > -
-
-
+
@@ -123,7 +115,7 @@ exports[`SectionHeader should render with an accordion icon in the open position class="fit" />
-
+ `; @@ -132,12 +124,12 @@ exports[`SectionHeader should render with an accordion icon when an 'onClick()' class="section-header is-interactable" tabindex="0" > - + `; @@ -191,7 +183,7 @@ exports[`SectionHeader should render without an accordion icon when no 'onClick( > foo From 275acd433b0bbe5caa6743ec88e371e4492bdaba Mon Sep 17 00:00:00 2001 From: KV106606Viswanath Date: Tue, 27 Jun 2023 16:04:59 +0530 Subject: [PATCH 06/31] Updated Section header and toggle section header jest snapshots --- .../__snapshots__/SectionHeader.test.jsx.snap | 68 +++---- .../ToggleSectionHeader.test.jsx.snap | 192 +++++++++--------- 2 files changed, 131 insertions(+), 129 deletions(-) diff --git a/packages/terra-section-header/tests/jest/__snapshots__/SectionHeader.test.jsx.snap b/packages/terra-section-header/tests/jest/__snapshots__/SectionHeader.test.jsx.snap index 551653e10a1..e32aa8db875 100644 --- a/packages/terra-section-header/tests/jest/__snapshots__/SectionHeader.test.jsx.snap +++ b/packages/terra-section-header/tests/jest/__snapshots__/SectionHeader.test.jsx.snap @@ -33,14 +33,14 @@ exports[`SectionHeader correctly applies the theme context className 1`] = ` } > -
-
-
foo -
-
+ -
+
@@ -87,11 +87,11 @@ exports[`SectionHeader should render with an accordion icon in the open position tabindex="-1" type="button" > -
-
-
-
+ -
-
+ -
+ `; @@ -131,11 +131,11 @@ exports[`SectionHeader should render with an accordion icon when an 'onClick()' tabindex="-1" type="button" > -
-
-
-
+ -
-
+ -
+ `; @@ -172,14 +172,14 @@ exports[`SectionHeader should render without an accordion icon when no 'onClick( class="arrange-wrapper" tabindex="-1" > -
-
-
foo -
-
+ -
+
`; diff --git a/packages/terra-toggle-section-header/tests/jest/__snapshots__/ToggleSectionHeader.test.jsx.snap b/packages/terra-toggle-section-header/tests/jest/__snapshots__/ToggleSectionHeader.test.jsx.snap index 0d9cc94057e..9e7e998eb7e 100644 --- a/packages/terra-toggle-section-header/tests/jest/__snapshots__/ToggleSectionHeader.test.jsx.snap +++ b/packages/terra-toggle-section-header/tests/jest/__snapshots__/ToggleSectionHeader.test.jsx.snap @@ -45,42 +45,42 @@ exports[`ToggleSectionHeader should render a default toggle section header 1`] = class="section-header is-interactable" tabindex="0" > -