Merge remote-tracking branch 'origin/main' into feat/event-handlers-o…

…ptional
Wizleap-Inc · Dec 26, 2024 · 5ceb7c1 · 5ceb7c1
2 parents 79eb57f + 26c0d64
commit 5ceb7c1
Show file tree

Hide file tree

Showing 48 changed files with 962 additions and 177 deletions.
diff --git a/.changeset/olive-snails-tie.md b/.changeset/olive-snails-tie.md
@@ -0,0 +1,8 @@
+---
+"@wizleap-inc/wiz-ui-react": minor
+"@wizleap-inc/wiz-ui-next": minor
+"@wizleap-inc/wiz-ui-constants": minor
+"@wizleap-inc/wiz-ui-styles": minor
+---
+
+今日の日付を目立つようにする & キャンセル・適用ボタンの追加
diff --git a/.changeset/tender-vans-occur.md b/.changeset/tender-vans-occur.md
@@ -0,0 +1,6 @@
+---
+"@wizleap-inc/wiz-ui-styles": minor
+"@wizleap-inc/wiz-ui-example-react": minor
+---
+
+スクロールバーデザインを修正
diff --git a/examples/react/src/pages/home/index.tsx b/examples/react/src/pages/home/index.tsx
@@ -18,6 +18,16 @@ export const Home = () => {
         <SearchInputStr />
         <SelectBoxNum />
         <SelectBoxStr />
+        <div
+          style={{
+            width: "200px",
+            height: "200px",
+            overflow: "scroll",
+          }}
+        >
+          <div style={{ width: "100vw", height: "100vh" }}>test2</div>
+        </div>
+        <div style={{ width: "100vw", height: "100vh" }}>test</div>
       </WizVStack>
     </div>
   );

diff --git a/packages/constants/component/aria-label.ts b/packages/constants/component/aria-label.ts
@@ -36,4 +36,6 @@ export const ARIA_LABELS = {
   FULL_MODAL_VIEW: {
     CLOSE: "モーダルを閉じる",
   },
+  APPLY: "適用",
+  CANCEL: "キャンセル",
 } as const;
diff --git a/packages/styles/CHANGELOG.md b/packages/styles/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @wizleap-inc/wiz-ui-styles
 
+## 0.36.0
+
+### Minor Changes
+
+- [#1406](https://github.com/Wizleap-Inc/wiz-ui/pull/1406) [`d45ddae774b60d0bfca45911fff4e678f20368cd`](https://github.com/Wizleap-Inc/wiz-ui/commit/d45ddae774b60d0bfca45911fff4e678f20368cd) Thanks [@k-tada](https://github.com/k-tada)! - WizPanelSwitch のデザイン修正
+
+- [#1425](https://github.com/Wizleap-Inc/wiz-ui/pull/1425) [`68514731756f38ac0fce1cc785ed29f8c26ae404`](https://github.com/Wizleap-Inc/wiz-ui/commit/68514731756f38ac0fce1cc785ed29f8c26ae404) Thanks [@RyushiAok](https://github.com/RyushiAok)! - Feat(timeline-item): 背景色として gray.200 を選択可能に
+
+## 0.35.1
+
+### Patch Changes
+
+- [#1423](https://github.com/Wizleap-Inc/wiz-ui/pull/1423) [`ac0e286dbd06852327f369e47529f779e81dd28e`](https://github.com/Wizleap-Inc/wiz-ui/commit/ac0e286dbd06852327f369e47529f779e81dd28e) Thanks [@k-tada](https://github.com/k-tada)! - SnackBar の CSS に word-break を追加
+
 ## 0.35.0
 
 ### Minor Changes

diff --git a/packages/styles/bases/calendar.css.ts b/packages/styles/bases/calendar.css.ts
@@ -125,3 +125,11 @@ export const calendarItemInteractiveStyle = style([
     },
   },
 ]);
+export const calendarItemInteractiveTodayStyle = style([
+  calendarItemInteractiveStyle,
+  {
+    border: `1px solid ${THEME.color.green[800]}`,
+    borderRadius: "50%",
+    boxSizing: "border-box",
+  },
+]);
diff --git a/packages/styles/bases/panel-switch-input.css.ts b/packages/styles/bases/panel-switch-input.css.ts
@@ -4,17 +4,16 @@ import { THEME } from "@wizleap-inc/wiz-ui-constants";
 export const panelSwitchStyle = style({
   display: "flex",
   width: "max-content",
-  height: THEME.spacing.xl2,
-  backgroundColor: THEME.color.white["800"],
+  backgroundColor: THEME.color.gray["200"],
   borderRadius: THEME.spacing.xs2,
-  boxShadow: THEME.shadow.sm,
 });
 
 export const panelSwitchBlockStyle = style({
+  flex: 1,
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
-  padding: `${THEME.spacing.no} ${THEME.spacing.sm}`,
+  padding: `${THEME.spacing.xs} ${THEME.spacing.sm}`,
   fontSize: THEME.fontSize.xs,
   borderTop: `1px solid ${THEME.color.gray["400"]}`,
   borderBottom: `1px solid ${THEME.color.gray["400"]}`,
@@ -47,7 +46,7 @@ export const panelSwitchBlockRightStyle = style({
 
 export const panelSwitchBlockColorStyle = styleVariants({
   default: {
-    color: THEME.color.gray["600"],
+    color: THEME.color.gray["700"],
   },
   active: {
     color: THEME.color.white["800"],

diff --git a/packages/styles/bases/snackbar.css.ts b/packages/styles/bases/snackbar.css.ts
@@ -6,6 +6,7 @@ export const snackbarStyle = style({
   borderRadius: THEME.spacing.xs2,
   transitionDuration: "0.2s",
   boxShadow: THEME.shadow.sm,
+  wordBreak: "break-all",
 });
 
 export const snackbarFixedStyle = style({

diff --git a/packages/styles/customs/timeline.css.ts b/packages/styles/customs/timeline.css.ts
@@ -112,7 +112,6 @@ export const card = style({
   width: "100%",
   borderRadius: THEME.spacing.xs2,
   overflow: "hidden",
-  backgroundColor: THEME.color.white[800],
 });
 
 export const contents = style({

diff --git a/packages/styles/global.css b/packages/styles/global.css
@@ -2,3 +2,21 @@ body {
   font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
     "Hiragino Sans", Meiryo, sans-serif;
 }
+
+*::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: #afb8b6; /* gray500 */
+  border-radius: 6px; /* デザインシステム外だが、アクセシビリティのため少し大きめに設定 */
+}
+
+*::-webkit-scrollbar-track {
+  background-color: #eef0ef; /* gray300 */
+}
+
+*::-webkit-scrollbar-button {
+  display: none;
+}
diff --git a/packages/styles/package.json b/packages/styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wizleap-inc/wiz-ui-styles",
-  "version": "0.35.0",
+  "version": "0.36.0",
   "main": "./dist/wiz-ui-styles.umd.js",
   "module": "./dist/wiz-ui-styles.es.js",
   "types": "./dist/index.d.ts",

diff --git a/packages/wiz-ui-next/.storybook/preview.js b/packages/wiz-ui-next/.storybook/preview.js
@@ -16,6 +16,14 @@ export const parameters = {
       },
     ],
   },
+  screenshot: {
+    viewports: {
+      desktop: {
+        width: 1440,
+        height: 1024,
+      },
+    },
+  },
 };
 
 export const decorators = [withScreenshot];
diff --git a/packages/wiz-ui-next/CHANGELOG.md b/packages/wiz-ui-next/CHANGELOG.md
@@ -1,5 +1,25 @@
 # @wizleap-inc/wiz-ui-next
 
+## 2.46.0
+
+### Minor Changes
+
+- [#1407](https://github.com/Wizleap-Inc/wiz-ui/pull/1407) [`684209c361ebf26995bc9bb318d930082d2be2f9`](https://github.com/Wizleap-Inc/wiz-ui/commit/684209c361ebf26995bc9bb318d930082d2be2f9) Thanks [@k-tada](https://github.com/k-tada)! - PanelSwitch のデザイン変更
+
+- [#1425](https://github.com/Wizleap-Inc/wiz-ui/pull/1425) [`68514731756f38ac0fce1cc785ed29f8c26ae404`](https://github.com/Wizleap-Inc/wiz-ui/commit/68514731756f38ac0fce1cc785ed29f8c26ae404) Thanks [@RyushiAok](https://github.com/RyushiAok)! - Feat(timeline-item): 背景色として gray.200 を選択可能に
+
+### Patch Changes
+
+- Updated dependencies [[`d45ddae774b60d0bfca45911fff4e678f20368cd`](https://github.com/Wizleap-Inc/wiz-ui/commit/d45ddae774b60d0bfca45911fff4e678f20368cd), [`68514731756f38ac0fce1cc785ed29f8c26ae404`](https://github.com/Wizleap-Inc/wiz-ui/commit/68514731756f38ac0fce1cc785ed29f8c26ae404)]:
+  - @wizleap-inc/wiz-ui-styles@0.36.0
+
+## 2.45.2
+
+### Patch Changes
+
+- Updated dependencies [[`ac0e286dbd06852327f369e47529f779e81dd28e`](https://github.com/Wizleap-Inc/wiz-ui/commit/ac0e286dbd06852327f369e47529f779e81dd28e)]:
+  - @wizleap-inc/wiz-ui-styles@0.35.1
+
 ## 2.45.1
 
 ### Patch Changes

diff --git a/packages/wiz-ui-next/package.json b/packages/wiz-ui-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wizleap-inc/wiz-ui-next",
-  "version": "2.45.1",
+  "version": "2.46.0",
   "description": "A Vue3 UI Framework for Wizleap Inc.",
   "scripts": {
     "build": "vue-tsc --noEmit && vite build",

diff --git a/packages/wiz-ui-next/src/components/base/calendar/calendar.stories.ts b/packages/wiz-ui-next/src/components/base/calendar/calendar.stories.ts
@@ -179,3 +179,72 @@ FilledWeeks.parameters = {
     },
   },
 };
+
+export const Today = Template.bind({});
+Today.args = {
+  currentMonth: new Date("2023-03"),
+  _today: new Date("2023-03-05"),
+};
+Today.parameters = {
+  docs: {
+    description: {
+      story:
+        "本日の日付が丸で囲われるようになっています。通常利用では `_today` パラメータの設定は不要ですが、 `_today`パラメータを設定することで任意の日付を本日の日付として扱うことができます。",
+    },
+    source: {
+      code: `
+<template>
+  <div>
+    <WizCalendar :_today="new Date('2023-03-05')" />
+  </div>
+</template>
+      `,
+    },
+  },
+};
+
+export const DisabledToday = Template.bind({});
+DisabledToday.args = {
+  currentMonth: new Date("2023-03"),
+  _today: new Date("2023-03-05"),
+  disabledDate: (date: Date) => date.getDate() === 5,
+};
+DisabledToday.parameters = {
+  docs: {
+    description: {
+      story: "本日の日付がdisabledの場合も丸で囲われます。",
+    },
+    source: {
+      code: `
+<template>
+  <div>
+    <WizCalendar :_today="new Date('2023-03-05')" :disabledDate="(date: Date) => date.getDate() === 5" />
+  </div>
+</template>
+      `,
+    },
+  },
+};
+
+export const SelectedToday = Template.bind({});
+SelectedToday.args = {
+  currentMonth: new Date("2023-03"),
+  _today: new Date("2023-03-05"),
+  activeDates: [{ date: new Date("2023-03-05"), state: "primary" }],
+};
+SelectedToday.parameters = {
+  docs: {
+    description: {
+      story: "本日の日付がActiveの場合はActiveの見た目が優先されます。",
+    },
+    source: {
+      code: `
+<template>
+  <div>
+    <WizCalendar :_today="new Date('2023-03-05')" :activeDates="[{ date: new Date("2023-03-05"), state: "primary" }]" />
+  </div>
+</template>
+      `,
+    },
+  },
+};
diff --git a/packages/wiz-ui-next/src/components/base/calendar/calendar.vue b/packages/wiz-ui-next/src/components/base/calendar/calendar.vue
@@ -50,7 +50,13 @@
                 )
               "
             >
-              <div :class="styles.calendarItemInteractiveStyle">
+              <div
+                :class="
+                  isToday(row, col, adjacent.current.day)
+                    ? styles.calendarItemInteractiveTodayStyle
+                    : styles.calendarItemInteractiveStyle
+                "
+              >
                 {{ adjacent.current.day }}
               </div>
             </div>
@@ -99,6 +105,12 @@ const props = defineProps({
     required: false,
     default: () => false,
   },
+  // eslint-disable-next-line vue/prop-name-casing
+  _today: {
+    type: Date as PropType<Date>,
+    required: false,
+    default: new Date(),
+  },
 });
 
 const calendars = computed(() => {
@@ -250,6 +262,17 @@ const updateSelectedDate = (row: number, col: number, day: string) => {
   }
 };
 
+const isToday = (row: number, col: number, day: string) => {
+  if (!isCurrentMonth(row, col)) return false;
+  const date = new Date(
+    props.currentMonth.getFullYear(),
+    props.currentMonth.getMonth(),
+    Number(day)
+  );
+
+  return date.toDateString() === (props._today || new Date()).toDateString();
+};
+
 const isActiveDate = computed(() => {
   const activeDatesSet = new Set(
     props.activeDates?.map((activeDate) => {

diff --git a/packages/wiz-ui-next/src/components/base/index.ts b/packages/wiz-ui-next/src/components/base/index.ts
@@ -35,3 +35,4 @@ export * from "./popup-button-group";
 export * from "./show-more-less";
 export * from "./information-panel";
 export * from "./loading-overlay";
+export * from "./panel-switch";