From 68e45989ef1cad77632785a5506d8320ce2d8856 Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Wed, 18 Oct 2023 13:39:57 +0300 Subject: [PATCH] refactor: refactoring after review --- src/Chip/README.md | 18 +++++ src/Chip/index.tsx | 135 ++++++++++++++++--------------- src/Chip/messages.js | 16 ---- src/ChipCarousel/_variables.scss | 4 +- src/ChipCarousel/index.scss | 1 + src/i18n/messages/ar.json | 4 +- src/i18n/messages/ca.json | 4 +- src/i18n/messages/es_419.json | 4 +- src/i18n/messages/es_AR.json | 4 +- src/i18n/messages/es_ES.json | 4 +- src/i18n/messages/fr.json | 4 +- src/i18n/messages/he.json | 4 +- src/i18n/messages/id.json | 4 +- src/i18n/messages/it_IT.json | 4 +- src/i18n/messages/ko_KR.json | 4 +- src/i18n/messages/pl.json | 4 +- src/i18n/messages/pt_BR.json | 4 +- src/i18n/messages/pt_PT.json | 4 +- src/i18n/messages/ru.json | 4 +- src/i18n/messages/th.json | 4 +- src/i18n/messages/tr_TR.json | 4 +- src/i18n/messages/uk.json | 4 +- src/i18n/messages/zh_CN.json | 4 +- 23 files changed, 111 insertions(+), 135 deletions(-) delete mode 100644 src/Chip/messages.js diff --git a/src/Chip/README.md b/src/Chip/README.md index 617fc0da660..52c1b940048 100644 --- a/src/Chip/README.md +++ b/src/Chip/README.md @@ -25,6 +25,24 @@ notes: | ``` +## With isSelected state + +```jsx live + + New + console.log('onIconAfterClick')} + > + New + + +``` + ## With Icon Before and After ### Basic Usage diff --git a/src/Chip/index.tsx b/src/Chip/index.tsx index dc93f1cbfe8..ca5f4849728 100644 --- a/src/Chip/index.tsx +++ b/src/Chip/index.tsx @@ -1,105 +1,105 @@ import React, { ForwardedRef, KeyboardEventHandler, MouseEventHandler } from 'react'; -import { useIntl } from 'react-intl'; import PropTypes from 'prop-types'; import classNames from 'classnames'; // @ts-ignore import Icon from '../Icon'; // @ts-ignore import IconButton from '../IconButton'; -// @ts-ignore -import messages from './messages'; -const STYLE_VARIANTS = [ +export const ICON_AFTER_ALT_TEXT = 'Chip icon after'; +export const ICON_BEFORE_ALT_TEXT = 'Chip icon before'; + +export const STYLE_VARIANTS = [ 'light', 'dark', ]; +export const CHIP_PGN_CLASS = 'pgn__chip'; + export interface IChip { children: React.ReactNode, className?: string, variant?: string, iconBefore?: React.ReactElement | Function, + iconBeforeAlt?: string, iconAfter?: React.ReactElement | Function, + iconAfterAlt?: string, onIconBeforeClick?: KeyboardEventHandler & MouseEventHandler, onIconAfterClick?: KeyboardEventHandler & MouseEventHandler, disabled?: boolean, isSelected?: boolean, } -export const CHIP_PGN_CLASS = 'pgn__chip'; - const Chip = React.forwardRef(({ children, className, variant, iconBefore, + iconBeforeAlt, iconAfter, + iconAfterAlt, onIconBeforeClick, onIconAfterClick, disabled, isSelected, ...props -}: IChip, ref: ForwardedRef) => { - const intl = useIntl(); - - return ( +}: IChip, ref: ForwardedRef) => ( +
+ {iconBefore && ( +
+ {onIconBeforeClick ? ( + + ) : ( + + )} +
+ )}
- {iconBefore && ( -
- {onIconBeforeClick ? ( - - ) : ( - - )} -
- )} -
- {children} -
- {iconAfter && ( -
- {onIconAfterClick ? ( - - ) : ( - - )} -
- )} + {children}
- ); -}); + {iconAfter && ( +
+ {onIconAfterClick ? ( + + ) : ( + + )} +
+ )} +
+)); Chip.propTypes = { /** Specifies the content of the `Chip`. */ @@ -117,6 +117,8 @@ Chip.propTypes = { * `import { Check } from '@edx/paragon/icons';` */ iconBefore: PropTypes.oneOfType([PropTypes.element, PropTypes.func]), + /** Specifies icon alt text. */ + iconBeforeAlt: PropTypes.string, /** A click handler for the `Chip` icon before. */ onIconBeforeClick: PropTypes.func, /** @@ -126,8 +128,11 @@ Chip.propTypes = { * `import { Check } from '@edx/paragon/icons';` */ iconAfter: PropTypes.oneOfType([PropTypes.element, PropTypes.func]), + /** Specifies icon alt text. */ + iconAfterAlt: PropTypes.string, /** A click handler for the `Chip` icon after. */ onIconAfterClick: PropTypes.func, + /** Indicates if `Chip` has been selected. */ isSelected: PropTypes.bool, }; @@ -140,6 +145,8 @@ Chip.defaultProps = { onIconBeforeClick: undefined, onIconAfterClick: undefined, isSelected: false, + iconAfterAlt: ICON_AFTER_ALT_TEXT, + iconBeforeAlt: ICON_BEFORE_ALT_TEXT, }; export default Chip; diff --git a/src/Chip/messages.js b/src/Chip/messages.js deleted file mode 100644 index d2b138ebacb..00000000000 --- a/src/Chip/messages.js +++ /dev/null @@ -1,16 +0,0 @@ -import { defineMessages } from 'react-intl'; - -const messages = defineMessages({ - iconBeforeAltText: { - id: 'pgn.Chip.iconBeforeAltText', - defaultMessage: 'Chip icon before', - description: 'Accessibility text describing for the icon displayed before a chip element.', - }, - iconAfterAltText: { - id: 'pgn.Chip.iconAfterAltText', - defaultMessage: 'Chip icon after', - description: 'Accessibility text describing for the icon displayed after a chip element.', - }, -}); - -export default messages; diff --git a/src/ChipCarousel/_variables.scss b/src/ChipCarousel/_variables.scss index e033dc2fcdb..ef4ec9c7472 100644 --- a/src/ChipCarousel/_variables.scss +++ b/src/ChipCarousel/_variables.scss @@ -1 +1,3 @@ -$chip-carousel-controls-top-offset: -3px !default; +$chip-carousel-controls-top-offset: .375rem !default; +$chip-carousel-container-padding-x: .625rem !default; +$chip-carousel-container-padding-y: .313rem !default; diff --git a/src/ChipCarousel/index.scss b/src/ChipCarousel/index.scss index 744acf9deaf..f36ae6303a8 100644 --- a/src/ChipCarousel/index.scss +++ b/src/ChipCarousel/index.scss @@ -11,6 +11,7 @@ &.pgn__chip-carousel-gap__#{$level} { .pgn__overflow-scroll-overflow-container { column-gap: $space; + padding: $chip-carousel-container-padding-x $chip-carousel-container-padding-y; } } } diff --git a/src/i18n/messages/ar.json b/src/i18n/messages/ar.json index 5b6cff65715..460df80a65a 100644 --- a/src/i18n/messages/ar.json +++ b/src/i18n/messages/ar.json @@ -27,7 +27,5 @@ "pgn.Dropzone.UploadProgress.uploadLabel": "رفع {filename} جارٍ.", "pgn.FormAutosuggest.iconButtonClosed": "إغلاق قائمة الخيارات", "pgn.FormAutosuggest.iconButtonOpened": "فتح قائمة الخيارات", - "pgn.Toast.closeLabel": "إغلاق ", - "pgn.Chip.iconBeforeAltText": "Chip icon before", - "pgn.Chip.iconAfterAltText": "Chip icon after" + "pgn.Toast.closeLabel": "إغلاق " } diff --git a/src/i18n/messages/ca.json b/src/i18n/messages/ca.json index d3bb686f35b..e6f8238e1be 100644 --- a/src/i18n/messages/ca.json +++ b/src/i18n/messages/ca.json @@ -27,7 +27,5 @@ "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.", "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu", "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu", - "pgn.Toast.closeLabel": "Close", - "pgn.Chip.iconBeforeAltText": "Chip icon before", - "pgn.Chip.iconAfterAltText": "Chip icon after" + "pgn.Toast.closeLabel": "Close" } diff --git a/src/i18n/messages/es_419.json b/src/i18n/messages/es_419.json index 380d8a10414..a934a1d7a8c 100644 --- a/src/i18n/messages/es_419.json +++ b/src/i18n/messages/es_419.json @@ -27,7 +27,5 @@ "pgn.Dropzone.UploadProgress.uploadLabel": "Subiendo {filename}.", "pgn.FormAutosuggest.iconButtonClosed": "Cerrar el menú de opciones", "pgn.FormAutosuggest.iconButtonOpened": "Abre el menú de opciones", - "pgn.Toast.closeLabel": "Cerrar", - "pgn.Chip.iconBeforeAltText": "Chip icon before", - "pgn.Chip.iconAfterAltText": "Chip icon after" + "pgn.Toast.closeLabel": "Cerrar" } diff --git a/src/i18n/messages/es_AR.json b/src/i18n/messages/es_AR.json index e11971c317f..51e7867d459 100644 --- a/src/i18n/messages/es_AR.json +++ b/src/i18n/messages/es_AR.json @@ -27,7 +27,5 @@ "pgn.Dropzone.UploadProgress.uploadLabel": "Subiendo {filename}.", "pgn.FormAutosuggest.iconButtonClosed": "Cerrar el menú de opciones", "pgn.FormAutosuggest.iconButtonOpened": "Abre el menú de opciones", - "pgn.Toast.closeLabel": "Cerrar", - "pgn.Chip.iconBeforeAltText": "Chip icon before", - "pgn.Chip.iconAfterAltText": "Chip icon after" + "pgn.Toast.closeLabel": "Cerrar" } diff --git a/src/i18n/messages/es_ES.json b/src/i18n/messages/es_ES.json index 8f8d7c90af5..cdb9173f701 100644 --- a/src/i18n/messages/es_ES.json +++ b/src/i18n/messages/es_ES.json @@ -27,7 +27,5 @@ "pgn.Dropzone.UploadProgress.uploadLabel": "Subiendo {filename}.", "pgn.FormAutosuggest.iconButtonClosed": "Cerrar el menú de opciones", "pgn.FormAutosuggest.iconButtonOpened": "Abre el menú de opciones", - "pgn.Toast.closeLabel": "Cerrar", - "pgn.Chip.iconBeforeAltText": "Chip icon before", - "pgn.Chip.iconAfterAltText": "Chip icon after" + "pgn.Toast.closeLabel": "Cerrar" } diff --git a/src/i18n/messages/fr.json b/src/i18n/messages/fr.json index d3bb686f35b..e6f8238e1be 100644 --- a/src/i18n/messages/fr.json +++ b/src/i18n/messages/fr.json @@ -27,7 +27,5 @@ "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.", "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu", "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu", - "pgn.Toast.closeLabel": "Close", - "pgn.Chip.iconBeforeAltText": "Chip icon before", - "pgn.Chip.iconAfterAltText": "Chip icon after" + "pgn.Toast.closeLabel": "Close" } diff --git a/src/i18n/messages/he.json b/src/i18n/messages/he.json index d3bb686f35b..e6f8238e1be 100644 --- a/src/i18n/messages/he.json +++ b/src/i18n/messages/he.json @@ -27,7 +27,5 @@ "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.", "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu", "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu", - "pgn.Toast.closeLabel": "Close", - "pgn.Chip.iconBeforeAltText": "Chip icon before", - "pgn.Chip.iconAfterAltText": "Chip icon after" + "pgn.Toast.closeLabel": "Close" } diff --git a/src/i18n/messages/id.json b/src/i18n/messages/id.json index d3bb686f35b..e6f8238e1be 100644 --- a/src/i18n/messages/id.json +++ b/src/i18n/messages/id.json @@ -27,7 +27,5 @@ "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.", "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu", "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu", - "pgn.Toast.closeLabel": "Close", - "pgn.Chip.iconBeforeAltText": "Chip icon before", - "pgn.Chip.iconAfterAltText": "Chip icon after" + "pgn.Toast.closeLabel": "Close" } diff --git a/src/i18n/messages/it_IT.json b/src/i18n/messages/it_IT.json index 7c4e088670e..b36761ad89a 100644 --- a/src/i18n/messages/it_IT.json +++ b/src/i18n/messages/it_IT.json @@ -27,7 +27,5 @@ "pgn.Dropzone.UploadProgress.uploadLabel": "Caricamento {filename}.", "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu", "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu", - "pgn.Toast.closeLabel": "Chiudi", - "pgn.Chip.iconBeforeAltText": "Chip icon before", - "pgn.Chip.iconAfterAltText": "Chip icon after" + "pgn.Toast.closeLabel": "Chiudi" } diff --git a/src/i18n/messages/ko_KR.json b/src/i18n/messages/ko_KR.json index d3bb686f35b..e6f8238e1be 100644 --- a/src/i18n/messages/ko_KR.json +++ b/src/i18n/messages/ko_KR.json @@ -27,7 +27,5 @@ "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.", "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu", "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu", - "pgn.Toast.closeLabel": "Close", - "pgn.Chip.iconBeforeAltText": "Chip icon before", - "pgn.Chip.iconAfterAltText": "Chip icon after" + "pgn.Toast.closeLabel": "Close" } diff --git a/src/i18n/messages/pl.json b/src/i18n/messages/pl.json index 4c6cbffad6c..74da873bddb 100644 --- a/src/i18n/messages/pl.json +++ b/src/i18n/messages/pl.json @@ -27,7 +27,5 @@ "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.", "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu", "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu", - "pgn.Toast.closeLabel": "Zamknij", - "pgn.Chip.iconBeforeAltText": "Chip icon before", - "pgn.Chip.iconAfterAltText": "Chip icon after" + "pgn.Toast.closeLabel": "Zamknij" } diff --git a/src/i18n/messages/pt_BR.json b/src/i18n/messages/pt_BR.json index d3bb686f35b..e6f8238e1be 100644 --- a/src/i18n/messages/pt_BR.json +++ b/src/i18n/messages/pt_BR.json @@ -27,7 +27,5 @@ "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.", "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu", "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu", - "pgn.Toast.closeLabel": "Close", - "pgn.Chip.iconBeforeAltText": "Chip icon before", - "pgn.Chip.iconAfterAltText": "Chip icon after" + "pgn.Toast.closeLabel": "Close" } diff --git a/src/i18n/messages/pt_PT.json b/src/i18n/messages/pt_PT.json index 2885cd42efc..4023e10f64a 100644 --- a/src/i18n/messages/pt_PT.json +++ b/src/i18n/messages/pt_PT.json @@ -27,7 +27,5 @@ "pgn.Dropzone.UploadProgress.uploadLabel": "Carregando {filename}.", "pgn.FormAutosuggest.iconButtonClosed": "Fechar o menu de opções", "pgn.FormAutosuggest.iconButtonOpened": "Abrir o menu de opções", - "pgn.Toast.closeLabel": "Fechar", - "pgn.Chip.iconBeforeAltText": "Chip icon before", - "pgn.Chip.iconAfterAltText": "Chip icon after" + "pgn.Toast.closeLabel": "Fechar" } diff --git a/src/i18n/messages/ru.json b/src/i18n/messages/ru.json index d3bb686f35b..e6f8238e1be 100644 --- a/src/i18n/messages/ru.json +++ b/src/i18n/messages/ru.json @@ -27,7 +27,5 @@ "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.", "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu", "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu", - "pgn.Toast.closeLabel": "Close", - "pgn.Chip.iconBeforeAltText": "Chip icon before", - "pgn.Chip.iconAfterAltText": "Chip icon after" + "pgn.Toast.closeLabel": "Close" } diff --git a/src/i18n/messages/th.json b/src/i18n/messages/th.json index d3bb686f35b..e6f8238e1be 100644 --- a/src/i18n/messages/th.json +++ b/src/i18n/messages/th.json @@ -27,7 +27,5 @@ "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.", "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu", "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu", - "pgn.Toast.closeLabel": "Close", - "pgn.Chip.iconBeforeAltText": "Chip icon before", - "pgn.Chip.iconAfterAltText": "Chip icon after" + "pgn.Toast.closeLabel": "Close" } diff --git a/src/i18n/messages/tr_TR.json b/src/i18n/messages/tr_TR.json index ea46321f284..f7180c5107f 100644 --- a/src/i18n/messages/tr_TR.json +++ b/src/i18n/messages/tr_TR.json @@ -27,7 +27,5 @@ "pgn.Dropzone.UploadProgress.uploadLabel": "{filename} yükleniyor.", "pgn.FormAutosuggest.iconButtonClosed": "Seçenekler menüsünü kapat", "pgn.FormAutosuggest.iconButtonOpened": "Seçenekler menüsünü aç", - "pgn.Toast.closeLabel": "Kapat", - "pgn.Chip.iconBeforeAltText": "Chip icon before", - "pgn.Chip.iconAfterAltText": "Chip icon after" + "pgn.Toast.closeLabel": "Kapat" } diff --git a/src/i18n/messages/uk.json b/src/i18n/messages/uk.json index d3bb686f35b..e6f8238e1be 100644 --- a/src/i18n/messages/uk.json +++ b/src/i18n/messages/uk.json @@ -27,7 +27,5 @@ "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.", "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu", "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu", - "pgn.Toast.closeLabel": "Close", - "pgn.Chip.iconBeforeAltText": "Chip icon before", - "pgn.Chip.iconAfterAltText": "Chip icon after" + "pgn.Toast.closeLabel": "Close" } diff --git a/src/i18n/messages/zh_CN.json b/src/i18n/messages/zh_CN.json index d3bb686f35b..e6f8238e1be 100644 --- a/src/i18n/messages/zh_CN.json +++ b/src/i18n/messages/zh_CN.json @@ -27,7 +27,5 @@ "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.", "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu", "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu", - "pgn.Toast.closeLabel": "Close", - "pgn.Chip.iconBeforeAltText": "Chip icon before", - "pgn.Chip.iconAfterAltText": "Chip icon after" + "pgn.Toast.closeLabel": "Close" }