Skip to content

Commit

Permalink
fix: update align prop value across various components (#17834)
Browse files Browse the repository at this point in the history 
* fix: update align prop value across various components

* fix(CodeSnippet): support align prop accept  both old and new values
  • Loading branch information
@Shankar-CodeJunkie
Shankar-CodeJunkie authored Nov 7, 2024
1 parent 0cfda56 commit 77fc925
Show file tree
Hide file tree
Showing 8 changed files with 485 additions and 192 deletions.
88 changes: 5 additions & 83 deletions packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -789,21 +789,7 @@ Map {
},
"CodeSnippet" => Object {
"propTypes": Object {
"align": Object {
"args": Array [
Array [
"top",
"top-left",
"top-right",
"bottom",
"bottom-left",
"bottom-right",
"left",
"right",
],
],
"type": "oneOf",
},
"align": [Function],
"aria-label": Object {
"type": "string",
},
Expand Down Expand Up @@ -1450,25 +1436,7 @@ Map {
],
"type": "oneOf",
},
"tooltipAlignment": Object {
"args": Array [
Array [
"top",
"top-left",
"top-start",
"top-right",
"top-end",
"bottom",
"bottom-left",
"bottom-start",
"bottom-right",
"bottom-end",
"left",
"right",
],
],
"type": "oneOf",
},
"tooltipAlignment": [Function],
"translateWithId": Object {
"type": "func",
},
Expand Down Expand Up @@ -1797,21 +1765,7 @@ Map {
},
"Copy" => Object {
"propTypes": Object {
"align": Object {
"args": Array [
Array [
"top",
"top-left",
"top-right",
"bottom",
"bottom-left",
"bottom-right",
"left",
"right",
],
],
"type": "oneOf",
},
"align": [Function],
"autoAlign": Object {
"type": "bool",
},
Expand All @@ -1837,21 +1791,7 @@ Map {
},
"CopyButton" => Object {
"propTypes": Object {
"align": Object {
"args": Array [
Array [
"top",
"top-left",
"top-right",
"bottom",
"bottom-left",
"bottom-right",
"left",
"right",
],
],
"type": "oneOf",
},
"align": [Function],
"autoAlign": Object {
"type": "bool",
},
Expand Down Expand Up @@ -4243,25 +4183,7 @@ Map {
"IconButton" => Object {
"$$typeof": Symbol(react.forward_ref),
"propTypes": Object {
"align": Object {
"args": Array [
Array [
"top",
"top-left",
"top-start",
"top-right",
"top-end",
"bottom",
"bottom-left",
"bottom-start",
"bottom-right",
"bottom-end",
"left",
"right",
],
],
"type": "oneOf",
},
"align": [Function],
"autoAlign": Object {
"type": "bool",
},
Expand Down
108 changes: 89 additions & 19 deletions packages/react/src/components/CodeSnippet/CodeSnippet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,26 +23,60 @@ import getUniqueId from '../../tools/uniqueId';
import copy from 'copy-to-clipboard';
import deprecate from '../../prop-types/deprecate';
import { usePrefix } from '../../internal/usePrefix';
import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin';

const rowHeightInPixels = 16;
const defaultMaxCollapsedNumberOfRows = 15;
const defaultMaxExpandedNumberOfRows = 0;
const defaultMinCollapsedNumberOfRows = 3;
const defaultMinExpandedNumberOfRows = 16;

export type DeprecatedCodeSnippetAlignment =
| 'top-left'
| 'top-right'
| 'bottom-left'
| 'bottom-right'
| 'left-bottom'
| 'left-top'
| 'right-bottom'
| 'right-top';

export type NewCodeSnippetAlignmnet =
| 'top'
| 'bottom'
| 'left'
| 'right'
| 'top-start'
| 'top-end'
| 'bottom-start'
| 'bottom-end'
| 'left-end'
| 'left-start'
| 'right-end'
| 'right-start';

export type CodeSnippetAlignment =
| DeprecatedCodeSnippetAlignment
| NewCodeSnippetAlignmnet;
const propMappingFunction = (deprecatedValue) => {
const mapping = {
'top-left': 'top-start',
'top-right': 'top-end',
'bottom-left': 'bottom-start',
'bottom-right': 'bottom-end',
'left-bottom': 'left-end',
'left-top': 'left-start',
'right-bottom': 'right-end',
'right-top': 'right-start',
};
return mapping[deprecatedValue];
};

export interface CodeSnippetProps {
/**
* Specify how the trigger should align with the tooltip
*/
align?:
| 'top'
| 'top-left'
| 'top-right'
| 'bottom'
| 'bottom-left'
| 'bottom-right'
| 'left'
| 'right';
align?: CodeSnippetAlignment;

/**
* **Experimental**: Will attempt to automatically align the tooltip
Expand Down Expand Up @@ -418,16 +452,52 @@ CodeSnippet.propTypes = {
/**
* Specify how the trigger should align with the tooltip
*/
align: PropTypes.oneOf([
'top',
'top-left',
'top-right',
'bottom',
'bottom-left',
'bottom-right',
'left',
'right',
]),
align: deprecateValuesWithin(
PropTypes.oneOf([
'top',
'top-left', // deprecated use top-start instead
'top-right', // deprecated use top-end instead

'bottom',
'bottom-left', // deprecated use bottom-start instead
'bottom-right', // deprecated use bottom-end instead

'left',
'left-bottom', // deprecated use left-end instead
'left-top', // deprecated use left-start instead

'right',
'right-bottom', // deprecated use right-end instead
'right-top', // deprecated use right-start instead

// new values to match floating-ui
'top-start',
'top-end',
'bottom-start',
'bottom-end',
'left-end',
'left-start',
'right-end',
'right-start',
]),
//allowed prop values
[
'top',
'top-start',
'top-end',
'bottom',
'bottom-start',
'bottom-end',
'left',
'left-start',
'left-end',
'right',
'right-start',
'right-end',
],
//optional mapper function
propMappingFunction
),

/**
* Specify a label to be read by screen readers on the containing textbox
Expand Down
75 changes: 61 additions & 14 deletions packages/react/src/components/ComboButton/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import { useFeatureFlag } from '../FeatureFlags';
import mergeRefs from '../../tools/mergeRefs';
import { MenuAlignment } from '../MenuButton';
import { TranslateWithId } from '../../types/common';
import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin';

const defaultTranslations = {
'carbon.combo-button.additional-actions': 'Additional actions',
Expand All @@ -36,6 +37,20 @@ const defaultTranslations = {
*/
type TranslationKey = keyof typeof defaultTranslations;

const propMappingFunction = (deprecatedValue) => {
const mapping = {
'top-left': 'top-start',
'top-right': 'top-end',
'bottom-left': 'bottom-start',
'bottom-right': 'bottom-end',
'left-bottom': 'left-end',
'left-top': 'left-start',
'right-bottom': 'right-end',
'right-top': 'right-start',
};
return mapping[deprecatedValue];
};

function defaultTranslateWithId(messageId: string) {
return defaultTranslations[messageId];
}
Expand Down Expand Up @@ -277,20 +292,52 @@ ComboButton.propTypes = {
/**
* Specify how the trigger tooltip should be aligned.
*/
tooltipAlignment: PropTypes.oneOf([
'top',
'top-left',
'top-start',
'top-right',
'top-end',
'bottom',
'bottom-left',
'bottom-start',
'bottom-right',
'bottom-end',
'left',
'right',
]),
tooltipAlignment: deprecateValuesWithin(
PropTypes.oneOf([
'top',
'top-left', // deprecated use top-start instead
'top-right', // deprecated use top-end instead

'bottom',
'bottom-left', // deprecated use bottom-start instead
'bottom-right', // deprecated use bottom-end instead

'left',
'left-bottom', // deprecated use left-end instead
'left-top', // deprecated use left-start instead

'right',
'right-bottom', // deprecated use right-end instead
'right-top', // deprecated use right-start instead

// new values to match floating-ui
'top-start',
'top-end',
'bottom-start',
'bottom-end',
'left-end',
'left-start',
'right-end',
'right-start',
]),
//allowed prop values
[
'top',
'top-start',
'top-end',
'bottom',
'bottom-start',
'bottom-end',
'left',
'left-start',
'left-end',
'right',
'right-start',
'right-end',
],
//optional mapper function
propMappingFunction
),

/**
* Optional method that takes in a message id and returns an
Expand Down
Loading

0 comments on commit 77fc925

Please sign in to comment.