Skip to content

Commit

Permalink
feat: update menu item, pagination and inputs to theme 2 (#213)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ychhabra-eightfold
ychhabra-eightfold committed Jul 11, 2022
1 parent ad77f09 commit d7698cf
Show file tree
Hide file tree
Showing 10 changed files with 111 additions and 68 deletions.
2 changes: 1 addition & 1 deletion src/__snapshots__/storybook.test.js.snap
View file
Git LFS file not shown
10 changes: 4 additions & 6 deletions src/components/Inputs/input.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,10 +103,8 @@
}

&.pill-shape {
border-color: transparent;
border-color: var(--border-color);
border-radius: $corner-radius-xl;
box-shadow: 0 1px 2px rgba(15, 20, 31, 0.12),
0 2px 8px rgba(15, 20, 31, 0.16);
padding: $space-xs $space-s;
}

Expand Down Expand Up @@ -192,7 +190,7 @@
}

.icon-button {
background-color: var(--background-color);
background-color: transparent;
bottom: 1px;
color: var(--grey-color-60);
height: 34px;
Expand All @@ -214,7 +212,7 @@

&:active,
&:focus {
background-color: var(--background-color);
background-color: transparent;
padding: $button-padding-vertical-small $space-xxs;

svg {
Expand All @@ -223,7 +221,7 @@
}

&:hover {
background-color: var(--background-color);
background-color: transparent;
padding: $button-padding-vertical-small $space-xxs;
outline-color: transparent;

Expand Down
36 changes: 21 additions & 15 deletions src/components/Menu/MenuItem/menuItem.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,51 +5,57 @@
display: flex;
align-items: center;
gap: $space-xs;
border-radius: $space-xxs;
border-radius: $corner-radius-xl;
cursor: pointer;
font-weight: $text-font-weight-semibold;
transition: all $motion-duration-extra-fast $motion-easing-easeinout 0s;

&.large {
height: 48px;
height: 44px;
font-size: $text-font-size-4;
line-height: $text-line-height-3;
padding: $button-padding-vertical-medium
$button-padding-horizontal-medium;
}

&.medium {
height: 44px;
height: 36px;
font-size: $text-font-size-3;
line-height: $text-line-height-2;
padding: $button-padding-vertical-medium
$button-padding-horizontal-medium;
}

&.small {
height: 40px;
height: 28px;
font-size: $text-font-size-2;
line-height: $text-line-height-1;
padding: $button-padding-vertical-small $button-padding-horizontal-small;
}

&.primary {
--label: var(--primary-color);
--label: var(--primary-color-70);

&:hover {
--background: var(--primary-color-20);
--background: var(--accent-color-10);
}

&.active,
&:active {
--background: var(--primary-color-10);
--background: var(--accent-color-20);
}
}

&.disruptive {
--label: var(--disruptive-color);

&:hover {
--background: var(--disruptive-color-20);
--background: var(--disruptive-color-10);
}

&.active,
&:active {
--background: var(--disruptive-color-10);
--background: var(--disruptive-color-20);
}
}

Expand All @@ -58,12 +64,12 @@
--label: var(--grey-color-70);

&:hover {
--background: var(--grey-color-20);
--background: var(--grey-color-10);
}

&.active,
&:active {
--background: var(--grey-color-10);
--background: var(--grey-color-20);
}
}

Expand All @@ -83,26 +89,26 @@
:global(.focus-visible) {
.menu-item {
&:focus-visible {
outline-offset: 1px;
outline-offset: -1px;
outline-width: $space-xxxs;
outline-style: solid;
}

&.primary {
&:focus-visible {
outline-color: var(--primary-color-50);
outline-color: var(--blueviolet-color-50);
}
}

&.disruptive {
&:focus-visible {
outline-color: var(--disruptive-color-50);
outline-color: var(--blueviolet-color-50);
}
}

&.neutral {
&:focus-visible {
outline-color: var(--grey-color-50);
outline-color: var(--blueviolet-color-50);
}
}
}
Expand Down
51 changes: 27 additions & 24 deletions src/components/Pagination/Pager.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
import React, { FC, useEffect, useCallback, useState, Ref } from 'react';
import { PagerProps } from './Pagination.types';
import { ButtonSize, DefaultButton } from '../Button';
import { IconName } from '../Icon';
import { mergeClasses } from '../../shared/utilities';
import React, {FC, useEffect, useCallback, useState, Ref} from 'react';
import {PagerProps} from './Pagination.types';
import {
ButtonShape,
ButtonSize,
NeutralButton,
} from '../Button';
import {IconName} from '../Icon';
import {mergeClasses} from '../../shared/utilities';

import styles from './pagination.module.scss';

Expand Down Expand Up @@ -132,14 +136,15 @@ export const Pager: FC<PagerProps> = React.forwardRef(
{pageCount > 0 && (
<li>
{!simplified ? (
<DefaultButton
<NeutralButton
checked={currentPage === 1}
classNames={mergeClasses([
styles.paginationButton,
{ [styles.active]: currentPage === 1 },
{[styles.active]: currentPage === 1},
])}
shape={ButtonShape.Rectangle}
onClick={() => onCurrentChange(1)}
size={ButtonSize.Small}
size={ButtonSize.Medium}
text={'1'.toLocaleString()}
toggle
/>
Expand All @@ -152,12 +157,13 @@ export const Pager: FC<PagerProps> = React.forwardRef(
currentPage > EDGE_BUFFER_THRESHOLD &&
pageCount > SHORT_LIST_THRESHOLD && (
<li>
<DefaultButton
<NeutralButton
ariaLabel={quickPreviousIconButtonAriaLabel}
classNames={mergeClasses([
styles.paginationButton,
'quickprevious',
])}
shape={ButtonShape.Rectangle}
iconProps={{
role: 'presentation',
path: _quickPreviousActive
Expand All @@ -177,25 +183,23 @@ export const Pager: FC<PagerProps> = React.forwardRef(
currentPage - EDGE_BUFFER_THRESHOLD
)
}
size={ButtonSize.Small}
size={ButtonSize.Medium}
/>
</li>
)}
{!simplified &&
_pagers?.map((pager, idx) => {
return (
<li key={idx}>
<DefaultButton
<NeutralButton
checked={currentPage === pager}
shape={ButtonShape.Rectangle}
classNames={mergeClasses([
styles.paginationButton,
{
[styles.active]:
currentPage === pager,
},
{[styles.active]: currentPage === pager},
])}
onClick={() => onCurrentChange(pager)}
size={ButtonSize.Small}
size={ButtonSize.Medium}
text={pager.toLocaleString()}
toggle
/>
Expand All @@ -206,12 +210,13 @@ export const Pager: FC<PagerProps> = React.forwardRef(
currentPage < pageCount - EDGE_BUFFER_THRESHOLD &&
pageCount > SHORT_LIST_THRESHOLD && (
<li>
<DefaultButton
<NeutralButton
ariaLabel={quickNextIconButtonAriaLabel}
classNames={mergeClasses([
styles.paginationButton,
'quicknext',
])}
shape={ButtonShape.Rectangle}
iconProps={{
role: 'presentation',
path: _quickNextActive
Expand All @@ -227,24 +232,22 @@ export const Pager: FC<PagerProps> = React.forwardRef(
currentPage + EDGE_BUFFER_THRESHOLD
)
}
size={ButtonSize.Small}
size={ButtonSize.Medium}
/>
</li>
)}
{pageCount > 1 && (
<li>
{!simplified ? (
<DefaultButton
<NeutralButton
shape={ButtonShape.Rectangle}
checked={currentPage === pageCount}
classNames={mergeClasses([
styles.paginationButton,
{
[styles.active]:
currentPage === pageCount,
},
{[styles.active]: currentPage === pageCount},
])}
onClick={() => onCurrentChange(pageCount)}
size={ButtonSize.Small}
size={ButtonSize.Medium}
text={pageCount.toLocaleString()}
toggle
/>
Expand Down
33 changes: 24 additions & 9 deletions src/components/Pagination/Pagination.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
import React, { FC, Ref, useEffect, useState } from 'react';
import { Pager, PaginationLayoutOptions, PaginationProps } from './index';
import { ButtonIconAlign, ButtonSize, DefaultButton } from '../Button';
import {
ButtonIconAlign,
ButtonShape,
ButtonSize,
DefaultButton,
NeutralButton,
} from '../Button';
import { Dropdown } from '../Dropdown';
import { IconName } from '../Icon';
import { Menu } from '../Menu';
Expand Down Expand Up @@ -194,20 +200,21 @@ export const Pagination: FC<PaginationProps> = React.forwardRef(
overlay={Overlay(_pageSizes)}
onVisibleChange={setToggle}
>
<DefaultButton
<NeutralButton
alignIcon={
htmlDir === 'ltr'
? ButtonIconAlign.Right
: ButtonIconAlign.Left
}
ariaLabel={pageSizeButtonAriaLabel}
shape={ButtonShape.Rectangle}
iconProps={{
role: 'presentation',
path: _toggle
? IconName.mdiChevronDown
: IconName.mdiChevronUp,
}}
size={ButtonSize.Small}
size={ButtonSize.Medium}
text={
htmlDir === 'ltr'
? `${_pageSize} / ${pageSizeText}`
Expand All @@ -229,17 +236,21 @@ export const Pagination: FC<PaginationProps> = React.forwardRef(
)}
{layout.includes(PaginationLayoutOptions.Previous) &&
moreThanOnePage && (
<DefaultButton
<NeutralButton
ariaLabel={previousIconButtonAriaLabel}
classNames={styles.paginationButton}
classNames={mergeClasses([
styles.paginationButton,
styles.paginationPrevious,
])}
shape={ButtonShape.Rectangle}
key="previous"
disabled={_currentPage <= 1}
iconProps={{
role: 'presentation',
path: IconName.mdiChevronLeft,
}}
onClick={previous}
size={ButtonSize.Small}
size={ButtonSize.Medium}
/>
)}
{layout.includes(PaginationLayoutOptions.Pager) &&
Expand Down Expand Up @@ -273,9 +284,13 @@ export const Pagination: FC<PaginationProps> = React.forwardRef(
)}
{layout.includes(PaginationLayoutOptions.Next) &&
moreThanOnePage && (
<DefaultButton
<NeutralButton
ariaLabel={nextIconButtonAriaLabel}
classNames={styles.paginationButton}
classNames={mergeClasses([
styles.paginationButton,
styles.paginationNext,
])}
shape={ButtonShape.Rectangle}
key="next"
disabled={
_currentPage === getPageCount() ||
Expand All @@ -286,7 +301,7 @@ export const Pagination: FC<PaginationProps> = React.forwardRef(
path: IconName.mdiChevronRight,
}}
onClick={() => next()}
size={ButtonSize.Small}
size={ButtonSize.Medium}
/>
)}
{layout.includes(PaginationLayoutOptions.Jumper) &&
Expand Down
Loading

0 comments on commit d7698cf

Please sign in to comment.