diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml new file mode 100644 index 00000000..15ed1680 --- /dev/null +++ b/.github/workflows/pr.yml @@ -0,0 +1,20 @@ +name: Test +on: + pull_request: + types: [opened, synchronize, reopened] + +jobs: + test: + name: Test + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: 16 + - name: Build + run: > + yarn run build:ci + - name: Generate docs + run: > + yarn run generate-docs diff --git a/docs/theming/introduction.mdx b/docs/theming/introduction.mdx index f1afb325..1891bf04 100644 --- a/docs/theming/introduction.mdx +++ b/docs/theming/introduction.mdx @@ -230,7 +230,7 @@ Here is an example using the [Google Material Icon library](https://fonts.google @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200'); // Override the send icon -.str-chat__icon--send:before { +.str-chat__icon--send::before { font-family: 'Material Symbols Outlined'; content: '\e163'; } @@ -240,7 +240,7 @@ It's also possible to use image files for icons: ```scss .str-chat__icon--send { - &:before { + &::before { display: none; } // Link to your image file, or encode the image inline diff --git a/src/v2/styles/Icon/Icon-layout.scss b/src/v2/styles/Icon/Icon-layout.scss index 6f10bb4d..b7a8f74a 100644 --- a/src/v2/styles/Icon/Icon-layout.scss +++ b/src/v2/styles/Icon/Icon-layout.scss @@ -16,7 +16,7 @@ height: var(--str-chat-icon-height); width: var(--str-chat-icon-width); - &:before { + &::before { line-height: var(--str-chat-icon-height); } } @@ -31,57 +31,57 @@ } // Copy icon mapping here -.str-chat__icon--action:before { +.str-chat__icon--action::before { content: '\e800'; } /* '' */ -.str-chat__icon--arrow-down:before { +.str-chat__icon--arrow-down::before { content: '\e801'; } /* '' */ -.str-chat__icon--arrow-left:before { +.str-chat__icon--arrow-left::before { content: '\e802'; } /* '' */ -.str-chat__icon--arrow-right:before { +.str-chat__icon--arrow-right::before { content: '\e803'; } /* '' */ -.str-chat__icon--close:before { +.str-chat__icon--close::before { content: '\e804'; } /* '' */ -.str-chat__icon--arrow-up:before { +.str-chat__icon--arrow-up::before { content: '\e805'; } /* '' */ -.str-chat__icon--chat-bubble:before { +.str-chat__icon--chat-bubble::before { content: '\e806'; } /* '' */ -.str-chat__icon--pause:before { +.str-chat__icon--pause::before { content: '\e807'; } /* '' */ -.str-chat__icon--download:before { +.str-chat__icon--download::before { content: '\e808'; } /* '' */ -.str-chat__icon--delivered:before { +.str-chat__icon--delivered::before { content: '\e809'; } /* '' */ -.str-chat__icon--play:before { +.str-chat__icon--play::before { content: '\e80a'; } /* '' */ -.str-chat__icon--reaction:before { +.str-chat__icon--reaction::before { content: '\e80b'; } /* '' */ -.str-chat__icon--error:before { +.str-chat__icon--error::before { content: '\e80c'; } /* '' */ -.str-chat__icon--read:before { +.str-chat__icon--read::before { content: '\e80d'; } /* '' */ -.str-chat__icon--retry:before { +.str-chat__icon--retry::before { content: '\e80e'; } /* '' */ -.str-chat__icon--reply-in-thread:before { +.str-chat__icon--reply-in-thread::before { content: '\e80f'; } /* '' */ -.str-chat__icon--send:before { +.str-chat__icon--send::before { content: '\e810'; } /* '' */ -.str-chat__icon--attach:before { +.str-chat__icon--attach::before { content: '\e811'; } /* '' */ diff --git a/src/v2/styles/MessageList/MessageList-theme.scss b/src/v2/styles/MessageList/MessageList-theme.scss index 796ca53a..19fbf31e 100644 --- a/src/v2/styles/MessageList/MessageList-theme.scss +++ b/src/v2/styles/MessageList/MessageList-theme.scss @@ -92,6 +92,7 @@ .str-chat__jump-to-latest-message { --str-chat-icon-color: var(--str-chat__jump-to-latest-message-unread-count-background-color); + .str-chat__circle-fab { @include utils.component-layer-overrides('jump-to-latest-message'); @include utils.circle-fab-overrides('jump-to-latest-message');