Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(accordion): styles #1834

Merged
merged 3 commits into from
Mar 19, 2024
Merged

fix(accordion): styles #1834

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1b5e0ba
fix(accordion): styles
kishore03109 Mar 14, 2024
d0fb171
chore(comments): for clarity
kishore03109 Mar 14, 2024
825766a
chore(accordion): remove drawer code
kishore03109 Mar 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/layouts/components/Editor/components/BlockWrapper/BlockWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export const BlockWrapper = ({
backgroundColor="#055AFF"
textColor="white"
p="0.25rem"
mt="-0.75rem"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why's this required? from the review, this seems like accordion should have a 0.75rem gap, not that the gap between elements should be reduced by 0.75rem

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hey this crit from design was outdated (look at the Se Hyun's comments)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

on why this is needed,

before:

Screenshot 2024-03-14 at 1 03 47 PM

after:

Screenshot 2024-03-14 at 1 04 39 PM

>
<Text textStyle="caption-1" contentEditable="false">
{name}
Expand Down
81 changes: 44 additions & 37 deletions src/layouts/components/Editor/extensions/Details/IsomerDetailGroupView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,25 +17,31 @@ export const IsomerDetailGroupView = ({
const selected = activePos >= startPos && activePos <= endPos

const { onDrawerOpen } = useEditorDrawerContext()

// todo: get drawer reviewed in staging
const isProd = process.env.REACT_APP_ENV === "production"

const otherButtons = (
<>
<Box
display={selected ? "block" : "none"}
display={selected ? "flex" : "none"}
position="absolute"
width="100%"
justifyContent="end"
>
<HStack
bgColor="interaction.mainLight.default"
borderRadius="0.25rem"
border="1px solid"
borderColor="base.divider.medium"
display="flex"
justifyContent="flex-end"
boxShadow="0px 8px 12px 0px rgba(187, 187, 187, 0.50)"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could we use a token for this?

boxShadow: `0 0 0 1px var(--chakra-colors-gray-400)`

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sehyunidaaa may i get token for this please?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can use chakra tokens from here https://github.com/chakra-ui/chakra-ui/blob/f65586674cb9241feeacfce7c5672c9129d1704e/packages/theme/src/foundations/colors.ts#L34

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmmm can we use this shadow-sm from OGPDS?
https://github.com/opengovsg/design-tokens/blob/09eeb37eaca44f0cb56e64d992cdee75b34e7661/tokens.json#L1109C1-L1110C1 ? might look a bit different but not earth-shattering, it's a small shadow

but we've been using the same bespoke shadow for other bubble menus btw

isomercms-frontend/src/layouts/components/Editor/components/CardsBubbleMenu.tsx

Line 20 in 825766a

boxShadow="0px 8px 12px 0px rgba(187, 187, 187, 0.50)"

px="0.5rem"
py="0.25rem"
mr="-0.5rem"
mt="-1.5rem"
Comment on lines +33 to +34
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could we need to use negative margins to remove padding? wouldn't this cause accordion to be out of alignment with the other elements

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

on why this is needed

before:

Screenshot 2024-03-14 at 1 14 29 PM

after:
Screenshot 2024-03-14 at 1 14 06 PM

note that this needs to be consistent with card grid:
Screenshot 2024-03-14 at 1 14 16 PM

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm i get that - but the odd thing is i couldn't find negative margins being used in card grid ._.

i'm ok with this for now ba but if there's time, please try to figure out why card grids doesn't require the negative margin

>
<Box
backgroundColor={selected ? "white" : "transparent"}
marginTop="-0.25rem"
boxShadow="0px 0px 4px 0px rgba(0, 0, 0, 0.8)"
borderRadius="4px"
>
<Tooltip label="Edit accordion grid" hasArrow placement="top">
{!isProd && (
<Tooltip label="Edit accordion block" hasArrow placement="top">
seaerchin marked this conversation as resolved.
Show resolved Hide resolved
<IconButton
_hover={{ bg: "gray.100" }}
_active={{ bg: "gray.200" }}
Expand All @@ -56,30 +62,31 @@ export const IsomerDetailGroupView = ({
/>
</IconButton>
</Tooltip>
<Tooltip label="Delete accordion " hasArrow placement="top">
<IconButton
_hover={{ bg: "gray.100" }}
_active={{ bg: "gray.200" }}
onClick={() => {
editor.chain().focus().unsetDetailsGroup().run()
}}
bgColor="transparent"
border="none"
h="1.75rem"
w="1.75rem"
minH="1.75rem"
minW="1.75rem"
p="0.25rem"
aria-label="delete accordion block"
>
<Icon
as={BiTrash}
fontSize="1.25rem"
color="interaction.critical.default"
/>
</IconButton>
</Tooltip>
</Box>
)}

<Tooltip label="Delete accordion block" hasArrow placement="top">
<IconButton
_hover={{ bg: "gray.100" }}
_active={{ bg: "gray.200" }}
onClick={() => {
editor.chain().focus().unsetDetailsGroup().run()
}}
bgColor="transparent"
border="none"
h="1.75rem"
w="1.75rem"
minH="1.75rem"
minW="1.75rem"
p="0.25rem"
aria-label="delete accordion block"
>
<Icon
as={BiTrash}
fontSize="1.25rem"
color="interaction.critical.default"
/>
</IconButton>
</Tooltip>
</HStack>
</Box>
<Box
Expand Down Expand Up @@ -112,18 +119,18 @@ export const IsomerDetailGroupView = ({
)
return (
<BlockWrapper
name="Accordion grid"
name="Accordion"
isSelected={selected}
childButtons={otherButtons}
padding-top="0.5rem"
padding-bottom="0.5rem"
>
<Box
borderColor="base.divider.strong"
borderWidth="1px"
mt="1rem"
h="100%"
w="100%"
borderTop="1px solid #d4d4d4"
borderBottom="1px solid #d4d4d4"
Comment on lines +117 to +118
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we use colour tokens here

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sadly we dont have a token for this yet.
@sehyunidaaa may i get your help in this ya

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ahh this is cos i used the colors from the template. my bad!

can use divider/strong from OGPDS please thank you

>
<NodeViewContent />
</Box>
Expand Down
2 changes: 1 addition & 1 deletion src/layouts/components/Editor/extensions/Details/IsomerDetails.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const IsomerDetails = Details.extend({
const outerDiv = document.createElement("div")
const i = mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
"data-type": this.name,
class: "isomer-detail",
class: "isomer-details",
})
Object.entries(i).forEach(([key, value]) =>
outerDiv.setAttribute(key, value)
Expand Down
26 changes: 9 additions & 17 deletions src/layouts/components/Editor/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,18 +148,8 @@
border-bottom: 0;
}

summary {
color: #4372d6;
font-size: 1.25rem;
font-style: normal;
font-weight: 700;
line-height: 1.75rem; /* 140% */
letter-spacing: -0.0175rem;
}

[data-type="details"] {
display: flex;

border-bottom: 1px solid #d4d4d4;
padding: 0.5rem;
margin-top: 0;
Expand All @@ -177,7 +167,8 @@
color: black;

&::after {
content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M16.293%209.29297L12%2013.586L7.70697%209.29297L6.29297%2010.707L12%2016.414L17.707%2010.707L16.293%209.29297Z%22%20fill%3D%22%23484848%22%2F%3E%3C%2Fsvg%3E");
font-family: "sgds-icons";
content: "\E93C";
seaerchin marked this conversation as resolved.
Show resolved Hide resolved
justify-content: center;
align-items: center;
width: 1.5em;
Expand All @@ -193,8 +184,14 @@
list-style: none;
}

&.is-open summary {
font-weight: 700;
}

&.is-open > button::after {
content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M6.29297%2013.2932L7.70697%2014.7072L12%2010.4142L16.293%2014.7072L17.707%2013.2932L12%207.58618L6.29297%2013.2932Z%22%20fill%3D%22%234372D6%22%2F%3E%3C%2Fsvg%3E");
font-family: "sgds-icons";
content: "\E93C";
transform: rotate(180deg);
seaerchin marked this conversation as resolved.
Show resolved Hide resolved
}

:last-child {
Expand All @@ -203,11 +200,6 @@

[data-type="detailsContent"] > p {
color: #838894;
font-size: 1.25rem;
font-style: normal;
font-weight: 400;
line-height: 2.2rem; /* 176% */
letter-spacing: -0.0175rem;
}
}
}
2 changes: 1 addition & 1 deletion src/styles/isomer-cms/elements/base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

body {
font-family: "Inter", sans-serif;
font-size: 16px;
font-size: 20px;
background: $base-background;
margin: 0;
padding: 0;
Expand Down
10 changes: 6 additions & 4 deletions src/styles/isomer-cms/pages/Editor.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,9 +188,9 @@ details.isomer-details summary::marker {
}

details.isomer-details summary::after {
content: url("https://raw.githubusercontent.com/atisawd/boxicons/master/svg/solid/bxs-chevron-down.svg");
font-family: "sgds-icons";
content: "\E93C";
transition: 0.25s transform ease;
padding-top: 0.25rem;
}

details.isomer-details[open] summary::after {
Expand Down Expand Up @@ -218,7 +218,6 @@ details.isomer-details {
}

div.isomer-details-content > p {
color: var(--site-secondary-color);
margin-left: 1rem;
margin-right: 1.25rem;
margin-bottom: 1rem;
Expand Down Expand Up @@ -251,7 +250,10 @@ details.isomer-details ~ details.isomer-details {

.isomer-accordion-white > details.isomer-details > summary {
background-color: #fff;
color: #4372d6;
}

.isomer-accordion-white > details.isomer-details[open] > summary {
font-weight: 700;
}

.isomer-accordion-gray > details.isomer-details > summary {
Expand Down
Loading