Skip to content

Commit

Permalink
Bugfix/525 Pagination fix with Label refactor (#526)
Browse files Browse the repository at this point in the history 
* Removed right-align code pending replacement

* Implemented a better flex approach to labels

* Restored to flex

* flex or inline-flex based on direction

* Additional refactoring of pagination for consistency

* Fixed deprecation warning

* Added deprecation warning and removed redundant code
  • Loading branch information
@atomworks
atomworks authored Dec 9, 2024
1 parent 3f0f364 commit d284eac
Show file tree
Hide file tree
Showing 5 changed files with 86 additions and 116 deletions.
6 changes: 3 additions & 3 deletions packages/storybook/src/stories/Form/Input/RadioButton.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,17 +31,17 @@ export const _RadioButton = () => {
return (
<Container>
<OptionsWrapper>
<Label htmlFor={'option1'} labelText={'Option 1'} rightAlign>
<Label htmlFor={'option1'} labelText={'Option 1'} direction='row-reverse'>
<RadioButton {...{ name, disabled, currentChecked }} id={'option1'} value='option1' onChangeCallback={handleChange} />
</Label>
</OptionsWrapper>
<OptionsWrapper>
<Label htmlFor={'option2'} labelText={'Option 2'} rightAlign>
<Label htmlFor={'option2'} labelText={'Option 2'} direction='row-reverse'>
<RadioButton {...{ name, disabled, currentChecked }} id={'option2'} value='option2' onChangeCallback={handleChange} />
</Label>
</OptionsWrapper>
<OptionsWrapper>
<Label htmlFor={'option3'} labelText={'Option 3'} rightAlign>
<Label htmlFor={'option3'} labelText={'Option 3'} direction='row-reverse'>
<RadioButton {...{ name, disabled, currentChecked }} id={'option3'} value='option3' onChangeCallback={handleChange} />
</Label>
</OptionsWrapper>
Expand Down
69 changes: 32 additions & 37 deletions packages/ui-lib/src/Form/atoms/Label.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,8 @@
import React, { LabelHTMLAttributes } from 'react';
import styled, { css } from 'styled-components';
import { TypeLabelDirection } from '..';

export const StyledLabel = styled.label<{ rightAlign?: boolean }>`
font-family: var(--label-font);
color: var(--label-color);
font-size: var(--label-font-size);
font-weight: var(--label-weight);
${({ rightAlign }) => rightAlign
? `
display: flex;
align-items: center;
flex-direction: row-reverse;
justify-content: left;
`
:
`
display: block;
margin-bottom: 20px;
`
};
`;

const LabelText = styled.span<{ rightAlign: boolean, required?: boolean }>`
display: flex;
gap: 8px;
align-items: center;
${({ rightAlign }) => rightAlign
? `
margin-left: 12px;
`
: `
margin-bottom: 10px;
`
}
const LabelText = styled.span<{ required?: boolean }>`
${({required}) => required && css`
&::after {
content: '';
Expand All @@ -48,9 +15,31 @@ const LabelText = styled.span<{ rightAlign: boolean, required?: boolean }>`
`}
`;

export const StyledLabel = styled.label<{ direction: TypeLabelDirection }>`
font-family: var(--font-ui);
color: var(--grey-11);
font-size: 14px;
font-weight: 500;
display: flex;
gap: 8px;
${({direction}) => direction && css`
flex-direction: ${direction};
${['row', 'row-reverse'].includes(direction) && css`
display: inline-flex;
${LabelText}{
align-self: center;
}
`}
`}
`;

interface OwnProps {
htmlFor: string
labelText: string
direction?: TypeLabelDirection
rightAlign?: boolean
required?: boolean
}
Expand All @@ -59,14 +48,20 @@ type Props = OwnProps & LabelHTMLAttributes<HTMLLabelElement>
const Label: React.FC<Props> = ({
htmlFor,
labelText,
direction = 'column',
rightAlign = false,
required = false,
children,
...props }) => {

if(rightAlign){
console.warn('Deprecation warning: `Label` is deprecating `rightAlign`, please update this to use `direction=\'row-reverse\'` instead.');
direction = 'row-reverse';
}

return (
<StyledLabel {...{ htmlFor, rightAlign }} {...props}>
<LabelText {...{ rightAlign, required }}>{labelText}</LabelText>
<StyledLabel {...{ htmlFor, direction }} {...props}>
<LabelText {...{ required }}>{labelText}</LabelText>
{children}
</StyledLabel>
);
Expand Down
17 changes: 9 additions & 8 deletions packages/ui-lib/src/Form/atoms/SelectField.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useCallback, useState, SelectHTMLAttributes } from 'react';
import styled, { css } from 'styled-components';
import Label from './Label';
import Icon from '../../Icons/Icon';
import { TypeFieldState } from '..';
import { TypeFieldState, TypeLabelDirection } from '..';


export const SelectWrapper = styled.div`
Expand Down Expand Up @@ -81,11 +81,7 @@ const StyledSelect = styled.select<{ fieldState: TypeFieldState, withIcon?: bool
}
`;

const Container = styled.div<{ isCompact?: boolean, activePlaceholder: boolean, isLabelSameRow?: boolean }>`
span {
margin-bottom: 8px;
}
const Container = styled.div<{ isCompact?: boolean, activePlaceholder: boolean }>`
${({activePlaceholder}) => activePlaceholder && css`
${StyledSelect} {
Expand All @@ -102,6 +98,7 @@ interface ILabel {
htmlFor: string
text: string
isSameRow?: boolean
direction?: TypeLabelDirection
}

interface OwnProps {
Expand All @@ -127,6 +124,10 @@ const SelectField: React.FC<ISelect> = ({
...props
}) => {

if(label?.isSameRow){
console.warn('Deprecation warning: `SelectField` is deprecating `label.isSameRow`, please update this to use `label.direction` set to `row`.');
}

const [activePlaceholder, setPlaceholderStatus] = useState<boolean>(!defaultValue ? true : false);

const handleOnChange = useCallback((e) => {
Expand Down Expand Up @@ -167,10 +168,10 @@ const SelectField: React.FC<ISelect> = ({
), [children, defaultValue, handleOnChange, placeholder, props, fieldState, icon, iconColor, isCompact]);

return (
<Container {...{ isCompact, activePlaceholder }} isLabelSameRow={label?.isSameRow}>
<Container {...{ isCompact, activePlaceholder }}>
{label
? (
<Label htmlFor={label.htmlFor} labelText={label.text}>
<Label htmlFor={label.htmlFor} labelText={label.text} direction={ label.isSameRow ? 'row' : label.direction }>
{renderSelect(label.htmlFor)}
</Label>
)
Expand Down
3 changes: 3 additions & 0 deletions packages/ui-lib/src/Form/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,9 @@ export type TypeButtonSizes = 'xsmall' | 'small' | 'normal' | 'large';
export type ISelectSizes = 'small' | 'normal';
export type IInputOptionsType = "text" | "checkbox" | "radio";

export type TypeLabelDirection = 'column' | 'row' | 'row-reverse';


interface ButtonProps {
size?: TypeButtonSizes
design?: TypeButtonDesigns
Expand Down
107 changes: 39 additions & 68 deletions packages/ui-lib/src/Misc/molecules/Pagination.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import Icon from '../../Icons/Icon';
import { removeAutoFillStyle, resetButtonStyles } from '../../common';
import { isNotNumber } from '../../helpers';
import SelectField, { SelectWrapper } from '../../Form/atoms/SelectField';
import { StyledLabel } from '../../Form/atoms/Label';
import Label from '../../Form/atoms/Label';

const WIDTH_PER_NUMBER = 12;

Expand All @@ -19,18 +19,10 @@ const PaginationContainer = styled.div`
height: fit-content;
margin-right: 10px;
white-space: nowrap;
gap: 0 8px;
gap: 40px;
vertical-align: baseline;
`;

const PageLabel = styled.label`
font-family: var(--font-ui);
font-weight: 500px;
font-size: 14px;
color: var(--grey-10);
text-align: left;
`;

const StaticPageCount = styled.div`
display: flex;
align-items: center;
Expand All @@ -43,9 +35,9 @@ const StaticPageCount = styled.div`
padding-right: 1px;
`;

const StyledInput = styled.input<{ textColor: string, maxWidth?: string }>`
const StyledInput = styled.input<{ maxWidth?: string }>`
${removeAutoFillStyle};
color: ${({ textColor }) => textColor};
color: var(--input-color-default);
max-width: ${({ maxWidth }) => maxWidth ? maxWidth : '40px'};
font-family: var(--font-data);
height: 100%;
Expand All @@ -67,7 +59,7 @@ const shakeAnimation = keyframes`
100% { transform: translateX(0); }
`;

const InputContainer = styled.div<{ borderColor?: string, shouldShake: boolean }>`
const InputContainer = styled.div<{ borderColorState?: string, shouldShake: boolean }>`
height: var(--input-height, 40px);
animation: ${({ shouldShake }) => (shouldShake ? shakeAnimation : 'none')} 150ms 2 linear;
flex-grow: 0;
Expand All @@ -78,7 +70,7 @@ const InputContainer = styled.div<{ borderColor?: string, shouldShake: boolean }
padding: 0 8px;
border-radius: 3px;
box-shadow: 0 2px 1px 0 rgba(0, 102, 255, 0.04);
${({ borderColor }) => borderColor && `border: 1px solid ${borderColor}`};
${({ borderColorState }) => borderColorState && `border: 1px solid var(--input-${borderColorState}-border-color)`};
`;

const GoButton = styled(Button)`
Expand All @@ -99,7 +91,7 @@ const ArrowButton = styled.button<{ active: boolean }>`
padding: 12px;
border-radius: 3px;
box-shadow: 0 4px 9px 0 rgba(152, 174, 189, 0.07);
border: solid 1px var(--grey-9);
border: solid 1px var(--input-default-border-color);
background-color: var(grey-2);
pointer-events: ${({ active }) => active ? 'auto' : 'none'};
opacity: ${({ active }) => active ? '1' : '0.5'};
Expand All @@ -113,11 +105,6 @@ const ItemsSelectWrapper = styled.div<{ width: string }>`
${SelectWrapper} {
width: ${({ width }) => width ? width : `60px`};
}
margin-right: 35px;
${StyledLabel} {
margin-bottom: 0;
}
`;

export interface IItemsOption {
Expand Down Expand Up @@ -257,23 +244,6 @@ const Pagination: React.FC<IPagination> = (props) => {

};

const getStateColor = useCallback((state: string): string => {

switch (state) {
case 'processing':
return 'var(--primary-7)';
break;

case 'invalid':
return 'var(--warning-8)';

case 'default':
default:
return 'var(--grey-9)';
}

}, []);

const onClickGo = useCallback(() => {

onPageChange(parseInt(pageValue));
Expand Down Expand Up @@ -326,37 +296,38 @@ const Pagination: React.FC<IPagination> = (props) => {
</Fragment>
</SelectField>
</ItemsSelectWrapper>
<PageLabel htmlFor='goButton'>{pageText}</PageLabel>
<InputContainer borderColor={getStateColor(fieldState)} shouldShake={shouldShake}>
<StyledInput
ref={inputRef}
value={pageValue}
onChange={(e) => onInputChange(e)}
textColor={getStateColor(fieldState)}
onFocus={(e) => onFocus(e)}
onBlur={(e) => onBlur(e)}
onPaste={(e) => handlePaste(e)}
onKeyDown={handleKeyDown}
maxWidth={getValidWidth()}
/>
<StaticPageCount>{'/' + '\u00A0' + totalPages.toString()}</StaticPageCount>
<GoButton id='goButton' size='small' design='primary' disabled={disableGo} onClick={onClickGo}>{buttonText}</GoButton>
</InputContainer>

<ArrowWrapper>
<ArrowButton
onClick={() => handlePageChange(activePage - 1)}
disabled={activePage <= 1}
active={fieldState === 'default' && activePage > 1}>
<Icon icon='Left' color='dimmed' size={8} />
</ArrowButton>
<ArrowButton
onClick={() => handlePageChange(activePage + 1)}
disabled={activePage >= totalPages}
active={fieldState === 'default' && activePage < totalPages}>
<Icon icon='Right' color='dimmed' size={8} />
</ArrowButton>
</ArrowWrapper>
<Label labelText={pageText} htmlFor='goButton' direction='row'>
<InputContainer borderColorState={fieldState} shouldShake={shouldShake}>
<StyledInput
ref={inputRef}
value={pageValue}
onChange={(e) => onInputChange(e)}
onFocus={(e) => onFocus(e)}
onBlur={(e) => onBlur(e)}
onPaste={(e) => handlePaste(e)}
onKeyDown={handleKeyDown}
maxWidth={getValidWidth()}
/>
<StaticPageCount>{'/' + '\u00A0' + totalPages.toString()}</StaticPageCount>
<GoButton id='goButton' size='small' design='primary' disabled={disableGo} onClick={onClickGo}>{buttonText}</GoButton>
</InputContainer>

<ArrowWrapper>
<ArrowButton
onClick={() => handlePageChange(activePage - 1)}
disabled={activePage <= 1}
active={fieldState === 'default' && activePage > 1}>
<Icon icon='Left' color='input-lead-icon' size={8} />
</ArrowButton>
<ArrowButton
onClick={() => handlePageChange(activePage + 1)}
disabled={activePage >= totalPages}
active={fieldState === 'default' && activePage < totalPages}>
<Icon icon='Right' color='input-lead-icon' size={8} />
</ArrowButton>
</ArrowWrapper>
</Label>

</PaginationContainer>
);
};
Expand Down

0 comments on commit d284eac

Please sign in to comment.