Skip to content

Commit

Permalink
DEVPROD-804: Use InlineDefinition for ExpandedText component (evergre…
Browse files Browse the repository at this point in the history 
…en-ci#2188)
  • Loading branch information
@sophstad
sophstad authored Dec 13, 2023
1 parent 090f47d commit f58d293
Show file tree
Hide file tree
Showing 4 changed files with 32 additions and 60 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@
"@leafygreen-ui/guide-cue": "5.0.4",
"@leafygreen-ui/icon": "11.12.1",
"@leafygreen-ui/icon-button": "15.0.5",
"@leafygreen-ui/inline-definition": "6.0.0",
"@leafygreen-ui/inline-definition": "6.0.14",
"@leafygreen-ui/interaction-ring": "7.0.2",
"@leafygreen-ui/leafygreen-provider": "3.1.10",
"@leafygreen-ui/loading-indicator": "2.0.6",
Expand Down
39 changes: 9 additions & 30 deletions src/components/ExpandedText/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,20 @@
import styled from "@emotion/styled";
import InlineDefinition, {
InlineDefinitionProps,
} from "@leafygreen-ui/inline-definition";
import { palette } from "@leafygreen-ui/palette";
import Tooltip, { TriggerEvent, Align, Justify } from "@leafygreen-ui/tooltip";
import { Disclaimer } from "@leafygreen-ui/typography";
import { zIndex } from "constants/tokens";

const { blue } = palette;

interface ExpandedTextProps {
align?: Align;
["data-cy"]?: string;
justify?: Justify;
type ExpandedTextProps = {
message: string;
popoverZIndex?: number;
triggerEvent?: (typeof TriggerEvent)[keyof typeof TriggerEvent];
}
} & Omit<InlineDefinitionProps, "children" | "definition">;

const ExpandedText: React.FC<ExpandedTextProps> = ({
align,
"data-cy": dataCy,
justify,
message,
popoverZIndex = zIndex.popover,
triggerEvent = TriggerEvent.Hover,
}) => (
<Tooltip
align={align}
justify={justify}
trigger={<ButtonText>more</ButtonText>}
triggerEvent={triggerEvent}
popoverZIndex={popoverZIndex}
>
<MessageWrapper data-cy={dataCy}>{message}</MessageWrapper>
</Tooltip>
const ExpandedText: React.FC<ExpandedTextProps> = ({ message, ...rest }) => (
<InlineDefinition {...rest} definition={message}>
<ButtonText>more</ButtonText>
</InlineDefinition>
);

const ButtonText = styled(Disclaimer)`
Expand All @@ -42,8 +25,4 @@ const ButtonText = styled(Disclaimer)`
display: inline-block;
`;

const MessageWrapper = styled.div`
max-width: 200px;
`;

export default ExpandedText;
11 changes: 10 additions & 1 deletion src/gql/mocks/taskData.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { TaskQuery } from "gql/generated/types";
import { TaskStatus } from "types/task";

export const taskQuery: TaskQuery = {
task: {
Expand All @@ -13,7 +14,15 @@ export const taskQuery: TaskQuery = {
ingestTime: null,
executionTasksFull: null,
displayTask: null,
details: null,
details: {
description:
"Long description that requirese use of the inline definition component. This would include details about where the task failed.",
oomTracker: {
detected: false,
},
status: TaskStatus.Failed,
type: "type",
},
timeTaken: null,
annotation: null,
activatedBy: "",
Expand Down
40 changes: 12 additions & 28 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3519,23 +3519,23 @@
dependencies:
"@leafygreen-ui/emotion" "^4.0.3"

"@leafygreen-ui/icon@^11.12.1", "@leafygreen-ui/icon@^11.12.3", "@leafygreen-ui/icon@^11.12.4", "@leafygreen-ui/icon@^11.12.5", "@leafygreen-ui/icon@^11.13.1", "@leafygreen-ui/icon@^11.15.0", "@leafygreen-ui/icon@^11.17.0", "@leafygreen-ui/icon@^11.22.1", "@leafygreen-ui/icon@^11.22.2", "@leafygreen-ui/icon@^11.23.0", "@leafygreen-ui/icon@^11.25.0":
"@leafygreen-ui/icon@^11.12.1", "@leafygreen-ui/icon@^11.12.3", "@leafygreen-ui/icon@^11.12.4", "@leafygreen-ui/icon@^11.12.5", "@leafygreen-ui/icon@^11.15.0", "@leafygreen-ui/icon@^11.17.0", "@leafygreen-ui/icon@^11.22.1", "@leafygreen-ui/icon@^11.22.2", "@leafygreen-ui/icon@^11.23.0", "@leafygreen-ui/icon@^11.25.0":
version "11.25.0"
resolved "https://registry.yarnpkg.com/@leafygreen-ui/icon/-/icon-11.25.0.tgz#a6cc0d54e7988cb39d3a2b1e947715b6af8f1ca2"
integrity sha512-54nEMSj/g8cfKsh2iQ9qVr7oYSSbdpZbzrgQ/tExDuaG90UR0FJeWHzPiNbUI7hrRuLYuokn7WafsxqX6Sfr2A==
dependencies:
"@leafygreen-ui/emotion" "^4.0.7"
lodash "^4.17.21"

"@leafygreen-ui/[email protected].0":
version "6.0.0"
resolved "https://registry.yarnpkg.com/@leafygreen-ui/inline-definition/-/inline-definition-6.0.0.tgz#44632ced7f7e053575390923ec9a95cfc0e3842d"
integrity sha512-jGLMW4Z3CiagbyEUIyQOHIXS+z3NeRRl1pA4fs7XHUVqEA45Ia0joo8okoXuPLmCPMM7oL30COon6fqaYBzfcA==
"@leafygreen-ui/[email protected].14":
version "6.0.14"
resolved "https://registry.yarnpkg.com/@leafygreen-ui/inline-definition/-/inline-definition-6.0.14.tgz#fd0ba775a2ff88520ed31d0489e57fd90416bad3"
integrity sha512-vCfSF1Lr8O4sm8f7w9rTflVyJRjF3Tyrtppr9OSfEPTDDlla+tiuSyvrMUty3xfdomc6JEGyumdozvjyU9dFsg==
dependencies:
"@leafygreen-ui/emotion" "^4.0.3"
"@leafygreen-ui/lib" "^10.0.0"
"@leafygreen-ui/palette" "^3.4.4"
"@leafygreen-ui/tooltip" "^9.0.0"
"@leafygreen-ui/emotion" "^4.0.7"
"@leafygreen-ui/lib" "^13.0.0"
"@leafygreen-ui/palette" "^4.0.7"
"@leafygreen-ui/tooltip" "^11.0.0"

"@leafygreen-ui/inline-definition@^6.0.11", "@leafygreen-ui/inline-definition@^6.0.13":
version "6.0.13"
Expand Down Expand Up @@ -3746,7 +3746,7 @@
"@leafygreen-ui/tokens" "^2.2.0"
react-transition-group "^4.4.5"

"@leafygreen-ui/popover@^11.0.12", "@leafygreen-ui/popover@^11.0.15", "@leafygreen-ui/popover@^11.0.17", "@leafygreen-ui/popover@^11.0.4", "@leafygreen-ui/popover@^11.0.8", "@leafygreen-ui/popover@^11.1.1":
"@leafygreen-ui/popover@^11.0.12", "@leafygreen-ui/popover@^11.0.15", "@leafygreen-ui/popover@^11.0.17", "@leafygreen-ui/popover@^11.0.4", "@leafygreen-ui/popover@^11.1.1":
version "11.1.1"
resolved "https://registry.yarnpkg.com/@leafygreen-ui/popover/-/popover-11.1.1.tgz#fe0ee8b6f83e28d87f000af6089f021a48f774b7"
integrity sha512-isXdPQQM/sdygDt1Wp89ekyXKLW6AMENTC4C6DVuRAAmdRZLtcb724K1KMOkiooa0h/CXWxdLslqJsdzsicAuA==
Expand Down Expand Up @@ -4071,7 +4071,7 @@
dependencies:
"@leafygreen-ui/palette" "^3.4.5"

"@leafygreen-ui/tokens@^2.0.0", "@leafygreen-ui/tokens@^2.0.1", "@leafygreen-ui/tokens@^2.0.2", "@leafygreen-ui/tokens@^2.0.3", "@leafygreen-ui/tokens@^2.1.0", "@leafygreen-ui/tokens@^2.1.1", "@leafygreen-ui/tokens@^2.1.4", "@leafygreen-ui/tokens@^2.2.0":
"@leafygreen-ui/tokens@^2.0.0", "@leafygreen-ui/tokens@^2.0.1", "@leafygreen-ui/tokens@^2.0.2", "@leafygreen-ui/tokens@^2.1.0", "@leafygreen-ui/tokens@^2.1.1", "@leafygreen-ui/tokens@^2.1.4", "@leafygreen-ui/tokens@^2.2.0":
version "2.2.0"
resolved "https://registry.yarnpkg.com/@leafygreen-ui/tokens/-/tokens-2.2.0.tgz#8cae3fc84bd54e9d579ab6bd2a43fad3f9050fd9"
integrity sha512-hmRT1Sz6J9tv84ty1YPs1zmFewOCt/TghfbR0So5UtA5S2q4sVqjPZEpSvLmlxmtXIyl77fjU+uZYHpW2EID6w==
Expand Down Expand Up @@ -4126,22 +4126,6 @@
lodash "^4.17.21"
polished "^4.2.2"

"@leafygreen-ui/tooltip@^9.0.0":
version "9.1.8"
resolved "https://registry.yarnpkg.com/@leafygreen-ui/tooltip/-/tooltip-9.1.8.tgz#9ae8165a3cab099061f92d50080c779557783480"
integrity sha512-bqLF0z4L19y253nmRoQSs4U1O7OGSCf46e1N7xBCbenlZVMLN4MSk0EQdpmDmXqMkopLOomVQAy/17guV6YULA==
dependencies:
"@leafygreen-ui/emotion" "^4.0.4"
"@leafygreen-ui/hooks" "^7.7.1"
"@leafygreen-ui/icon" "^11.13.1"
"@leafygreen-ui/lib" "^10.3.3"
"@leafygreen-ui/palette" "^4.0.4"
"@leafygreen-ui/popover" "^11.0.8"
"@leafygreen-ui/tokens" "^2.0.3"
"@leafygreen-ui/typography" "^16.3.0"
lodash "^4.17.21"
polished "^4.2.2"

"@leafygreen-ui/[email protected]", "@leafygreen-ui/typography@^17.0.0", "@leafygreen-ui/typography@^17.0.1":
version "17.0.1"
resolved "https://registry.yarnpkg.com/@leafygreen-ui/typography/-/typography-17.0.1.tgz#11c52b4441e4f30f58f4bfe3a69cf8365fdc6a5e"
Expand All @@ -4166,7 +4150,7 @@
"@leafygreen-ui/palette" "^3.4.6"
"@leafygreen-ui/tokens" "^1.4.1"

"@leafygreen-ui/typography@^16.0.0", "@leafygreen-ui/typography@^16.1.0", "@leafygreen-ui/typography@^16.2.1", "@leafygreen-ui/typography@^16.3.0", "@leafygreen-ui/typography@^16.4.0", "@leafygreen-ui/typography@^16.5.1", "@leafygreen-ui/typography@^16.5.4":
"@leafygreen-ui/typography@^16.0.0", "@leafygreen-ui/typography@^16.1.0", "@leafygreen-ui/typography@^16.2.1", "@leafygreen-ui/typography@^16.4.0", "@leafygreen-ui/typography@^16.5.1", "@leafygreen-ui/typography@^16.5.4":
version "16.5.4"
resolved "https://registry.yarnpkg.com/@leafygreen-ui/typography/-/typography-16.5.4.tgz#209839039b97be7c9eabddec85729eb8685abfc9"
integrity sha512-E9U8HD3AfeMMr0ZLkrSz8FUagxGSAqPb+DqASmJAdax4h82EXLJGBDmePQr4C+AVCx1pb5UZrckr67eBHCalnA==
Expand Down

0 comments on commit f58d293

Please sign in to comment.