-
Notifications
You must be signed in to change notification settings - Fork 358
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Bugfix] Modular UI - Fixing Custom and Toggle button styles (#9067)
(master → master)
- Loading branch information
1 parent
79efcc2
commit d33d387
Showing
7 changed files
with
232 additions
and
66 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
99 changes: 47 additions & 52 deletions
99
src/components/ModularComponents/AppStories/App.stories.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,67 +1,62 @@ | ||
| import React from 'react'; | ||
| import { Provider } from 'react-redux'; | ||
| import { configureStore } from '@reduxjs/toolkit'; | ||
| import App from 'components/App'; | ||
| import initialState from 'src/redux/initialState'; | ||
| import rootReducer from 'reducers/rootReducer'; | ||
| import { mockHeadersNormalized, mockModularComponents } from './mockAppState'; | ||
| import { userEvent, within, expect } from '@storybook/test'; | ||
| import { createTemplate } from 'helpers/storybookHelper'; | ||
|
|
||
| export default { | ||
| title: 'ModularComponents/App', | ||
| component: App, | ||
| includeStories: ['DefaultUI', 'ActiveGroupHeaderTest', 'HeaderButtonsWithLabelsAndIcons'], | ||
| excludeStories: ['CreateTemplate'], | ||
| }; | ||
|
|
||
| const noop = () => { }; | ||
| export const DefaultUI = createTemplate({ headers: mockHeadersNormalized, components: mockModularComponents }); | ||
|
|
||
| const MockApp = ({ initialState }) => { | ||
| return ( | ||
| <Provider store={configureStore({ | ||
| reducer: rootReducer, | ||
| preloadedState: initialState, | ||
| middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false }) | ||
| })}> | ||
| <App removeEventHandlers={noop} /> | ||
| </Provider> | ||
| ); | ||
| export const ActiveGroupHeaderTest = createTemplate({ headers: mockHeadersNormalized, components: mockModularComponents }); | ||
| ActiveGroupHeaderTest.play = async ({ canvasElement }) => { | ||
| const canvas = within(canvasElement); | ||
| // We should be able to find the underline button since the default selected group is annotateGroupedItems | ||
| await canvas.findAllByRole('button', { name: 'Underline' }); | ||
| // Now if we click on ribbon | ||
| const viewRibbon = await canvas.findByLabelText('View'); | ||
| await userEvent.click(viewRibbon); | ||
| // the underline button should not be visible anymore as the header is hidden | ||
| expect(await canvas.queryByRole('button', { name: 'Underline' })).toBeNull(); | ||
| }; | ||
|
|
||
| const Template = (args) => { | ||
| const stateWithHeaders = { | ||
| ...initialState, | ||
| viewer: { | ||
| ...initialState.viewer, | ||
| modularHeaders: args.headers, | ||
| modularComponents: args.components, | ||
| openElements: {}, | ||
| genericPanels: [{ | ||
| dataElement: 'stylePanel', | ||
| render: 'stylePanel', | ||
| location: 'left', | ||
| }], | ||
| activeGroupedItems: ['annotateGroupedItems'], | ||
| lastPickedToolForGroupedItems: { | ||
| annotateGroupedItems: 'AnnotationCreateTextUnderline', | ||
| }, | ||
| activeCustomRibbon: 'annotations-ribbon-item', | ||
| lastPickedToolAndGroup: { | ||
| tool: 'AnnotationCreateTextUnderline', | ||
| group: ['annotateGroupedItems'], | ||
| }, | ||
| activeToolName: 'AnnotationCreateTextUnderline' | ||
| }, | ||
| featureFlags: { | ||
| customizableUI: true, | ||
| }, | ||
| }; | ||
| return <MockApp initialState={stateWithHeaders} />; | ||
| const customHeaders = { | ||
| ...mockHeadersNormalized, | ||
| 'default-top-header': { | ||
| ...mockHeadersNormalized['default-top-header'], | ||
| 'items': [ | ||
| ...mockHeadersNormalized['default-top-header'].items, | ||
| 'labelButton', | ||
| 'labelAndIconButton' | ||
| ] | ||
| } | ||
| }; | ||
|
|
||
| function createTemplate({ headers, components }) { | ||
| const template = Template.bind({}); | ||
| template.args = { headers, components }; | ||
| template.parameters = { layout: 'fullscreen' }; | ||
| return template; | ||
| } | ||
| const labelAndIconButton = { | ||
| 'dataElement': 'labelAndIconButton', | ||
| 'title': 'Export button', | ||
| 'type': 'customButton', | ||
| 'label': 'Export', | ||
| 'img': 'icon-save', | ||
| 'onClick': () => {}, | ||
| }; | ||
|
|
||
| export const DefaultUI = createTemplate({ headers: mockHeadersNormalized, components: mockModularComponents }); | ||
| const labelButton = { | ||
| 'dataElement': 'labelButton', | ||
| 'title': 'Toggle the visibility of Flyout', | ||
| 'type': 'toggleButton', | ||
| 'label': 'Custom Flyout', | ||
| 'toggleElement': 'myCustomFlyout' | ||
| }; | ||
|
|
||
| const customComponents = { | ||
| ...mockModularComponents, | ||
| 'labelAndIconButton': labelAndIconButton, | ||
| 'labelButton': labelButton | ||
| }; | ||
|
|
||
| export const HeaderButtonsWithLabelsAndIcons = createTemplate({ headers: customHeaders, components: customComponents }); |
57 changes: 57 additions & 0 deletions
57
src/components/ModularComponents/CustomButton/CustomButton.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| @import '../../../constants/styles'; | ||
|
|
||
| .CustomButton { | ||
| padding: 5px; | ||
| width: fit-content; | ||
| min-width: 32px; | ||
|
|
||
| &:hover, | ||
| &:active { | ||
| @extend %custom-button-hover; | ||
| } | ||
|
|
||
| &:active { | ||
| color: var(--view-header-icon-active-fill); | ||
| cursor: default; | ||
|
|
||
| .Icon svg path { | ||
| fill: var(--view-header-icon-active-fill) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .confirm-button { | ||
| background-color: var(--primary-button); | ||
| border: 1px solid var(--primary-button); | ||
| color: var(--primary-button-text); | ||
| padding: 7px 14px; | ||
| width: -webkit-fit-content; | ||
| width: -moz-fit-content; | ||
| width: fit-content; | ||
| border-radius: 5px; | ||
| height: 30px; | ||
| cursor: pointer; | ||
|
|
||
| &:hover { | ||
| background: var(--primary-button-hover) !important; | ||
| border: 1px solid var(--primary-button-hover) !important; | ||
| border-radius: 5px !important; | ||
| } | ||
| } | ||
|
|
||
| .cancel-button { | ||
| color: var(--secondary-button-text); | ||
| background-color: transparent; | ||
| padding: 7px 14px; | ||
| width: -webkit-fit-content; | ||
| width: -moz-fit-content; | ||
| width: fit-content; | ||
| border-radius: 5px; | ||
| height: 30px; | ||
| cursor: pointer; | ||
|
|
||
| &:hover { | ||
| color: var(--secondary-button-hover); | ||
| background: transparent; | ||
| } | ||
| } |
72 changes: 72 additions & 0 deletions
72
src/components/ModularComponents/CustomButton/CustomButton.stories.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| import React from 'react'; | ||
| import CustomButton from './CustomButton'; | ||
| import initialState from 'src/redux/initialState'; | ||
| import { Provider } from 'react-redux'; | ||
| import { configureStore } from '@reduxjs/toolkit'; | ||
|
|
||
| export default { | ||
| title: 'Components/CustomButton', | ||
| component: CustomButton, | ||
| }; | ||
|
|
||
| const store = configureStore({ | ||
| reducer: () => initialState | ||
| }); | ||
|
|
||
| const BasicComponent = (props) => { | ||
| return ( | ||
| <Provider store={store}> | ||
| <CustomButton {...props} /> | ||
| </Provider> | ||
| ); | ||
| }; | ||
|
|
||
| export const DefaultButton = BasicComponent.bind({}); | ||
| DefaultButton.args = { | ||
| dataElement: 'button-data-element', | ||
| title: 'Button title', | ||
| disabled: false, | ||
| label: 'Click', | ||
| img: 'icon-save', | ||
| onClick: () => { | ||
| alert('Clicked!'); | ||
| } | ||
| }; | ||
|
|
||
| export const DefaultButtonOnHover = BasicComponent.bind({}); | ||
| DefaultButtonOnHover.args = { | ||
| dataElement: 'button-data-element', | ||
| title: 'Button title', | ||
| disabled: false, | ||
| label: 'Click', | ||
| img: 'icon-save', | ||
| onClick: () => { | ||
| alert('Clicked!'); | ||
| } | ||
| }; | ||
|
|
||
| DefaultButtonOnHover.parameters = { | ||
| pseudo: { hover: true }, | ||
| }; | ||
|
|
||
| export const ConfirmButton = BasicComponent.bind({}); | ||
| ConfirmButton.args = { | ||
| dataElement: 'button-data-element', | ||
| title: 'Apply Fields', | ||
| label: 'Apply Fields', | ||
| preset: 'confirm', | ||
| onClick: () => { | ||
| alert('Apply Fields button clicked!'); | ||
| } | ||
| }; | ||
|
|
||
| export const CancelButton = BasicComponent.bind({}); | ||
| CancelButton.args = { | ||
| dataElement: 'button-data-element', | ||
| title: 'Cancel', | ||
| label: 'Cancel', | ||
| preset: 'cancel', | ||
| onClick: () => { | ||
| alert('Cancel button clicked!'); | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters