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

feat(ui5-segmented-button-item): introduce new component to serve as child of SegmentedButton #3258

Merged
merged 29 commits into from
Jun 14, 2021

Conversation

terezamch
Copy link
Contributor

@terezamch terezamch commented May 17, 2021

Introduce new component SegmentedButtonItem (ui5-segmentedbutton-item), meant to be used within the SegmentedButton (ui5-segmentedbutton) as a child, in order to implement a11y compliant DOM structure and attributes. The SegmentedButtonItem replaces the ToggleButton, previously used in the SegmentedButton.

Fixes #3191

BREAKING_CHANGE: SegmentedButton no longer accepts ToggleButton, you have to use the newly created component, called SegmentedButtonItem as follows:

<ui5-segmentedbutton>
   <ui5-segmentedbutton-item pressed>One</ui5-segmentedbutton-item>
   <ui5-segmentedbutton-item>Two</ui5-segmentedbutton-item>
   <ui5-segmentedbutton-item>Three</ui5-segmentedbutton-item>
</ui5-segmentedbutton>

terezamch added 7 commits May 12, 2021 16:33
-added the SBI in the md file
-css files properly named
-aria-describedby added from i18n files
-indentations fixed
-property names in SBI adjusted
@CLAassistant
Copy link

CLAassistant commented May 17, 2021

CLA assistant check
All committers have signed the CLA.

@ilhan007 ilhan007 changed the title refactor(ui5-segmentedbutton-item): created and used as content in ui5-segmentedbutton feat(ui5-segmentedbutton-item): introduce new component to serve as child of SegmentedButton May 17, 2021
@ilhan007 ilhan007 requested review from a-z-ivanov and ghristanov May 17, 2021 09:15
@ilhan007
Copy link
Member

ilhan007 commented May 17, 2021

The build is failing due to lint errors:

/home/travis/build/SAP/ui5-webcomponents/packages/main/src/SegmentedButton.js
  133:4   error  'buttons' is never reassigned. Use 'const' instead      prefer-const
  140:20  error  Unexpected parentheses around single function argument  arrow-parens
✖ 2 problems (2 errors, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

To check the lint loclly, you can run yarn lint

packages/main/src/SegmentedButton.js Outdated Show resolved Hide resolved
packages/main/src/SegmentedButton.hbs Outdated Show resolved Hide resolved
packages/main/src/SegmentedButton.hbs Outdated Show resolved Hide resolved
packages/main/src/i18n/messagebundle.properties Outdated Show resolved Hide resolved
packages/main/src/i18n/messagebundle.properties Outdated Show resolved Hide resolved
@tsanislavgatev tsanislavgatev self-requested a review May 18, 2021 08:16
@tsanislavgatev tsanislavgatev self-assigned this May 18, 2021
@terezamch terezamch requested a review from ghristanov May 18, 2021 08:31
packages/main/src/SegmentedButton.hbs Outdated Show resolved Hide resolved
@terezamch terezamch requested a review from ilhan007 May 18, 2021 13:09
terezamch added 2 commits May 21, 2021 19:27
The unwanted properties, inherited from the Button, are marked as private.
@fifoosid fifoosid mentioned this pull request May 27, 2021
@ilhan007 ilhan007 changed the title feat(ui5-segmentedbutton-item): introduce new component to serve as child of SegmentedButton feat(ui5-segmented-button-item): introduce new component to serve as child of SegmentedButton May 28, 2021
packages/main/src/SegmentedButton.js Show resolved Hide resolved
packages/main/src/SegmentedButton.js Show resolved Hide resolved
packages/main/src/SegmentedButtonItem.hbs Outdated Show resolved Hide resolved
packages/main/src/SegmentedButtonItem.hbs Outdated Show resolved Hide resolved
Copy link
Member

@ilhan007 ilhan007 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you check the selection upon ENTER/SPACE. When I checkout the PR and started the Playground, SPACE/ENTER did not work for me

  • on SPACE - the page scrolls and no selection
  • on ENTER - no selection
Screen.Recording.2021-06-03.at.09.26.56.mov

@tsanislavgatev
Copy link
Contributor

Looks good from our side. Styles, API, and functionality.

@tsanislavgatev tsanislavgatev self-requested a review June 14, 2021 12:20
@ilhan007 ilhan007 merged commit 9bd9ce4 into SAP:master Jun 14, 2021
ilhan007 pushed a commit that referenced this pull request Aug 9, 2021
…child of SegmentedButton (#3258)

Introduce new component SegmentedButtonItem (ui5-segmentedbutton-item), meant to be used within the SegmentedButton (ui5-segmented-button) as a child, in order to implement a11y compliant DOM structure and attributes. The SegmentedButtonItem replaces the ToggleButton, previously used in the SegmentedButton.

Fixes: #3191
Closes: #3191

BREAKING_CHANGE: `selectedButton` event detail of "selection-change" has been renamed to `selectedItem`
BREAKING_CHANGE: SegmentedButton no longer accepts ToggleButton, you have to use the newly created component, called SegmentedButtonItem as follows:
<ui5-segmentedbutton>
   <ui5-segmentedbutton-item pressed>One</ui5-segmentedbutton-item>
   <ui5-segmentedbutton-item>Two</ui5-segmentedbutton-item>
   <ui5-segmentedbutton-item>Three</ui5-segmentedbutton-item>
</ui5-segmentedbutton>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Refactoring]SegmentedButton: create dedicated child component
6 participants